- Description
- The Challenge
- Usage
- Installation
- Built With
- What I Learned
- Continued Development
- License
- Author
The GitHub-Pages launched application showcases Kaitlyn Atif's React Portfolio, which contains (6) highlighted projects of this 24-week Full-Stack Developer boot camp experience at the Georgia Institute of Technology. The portfolio is designed as a single-page application and demonstrates proficiency in building modern web applications.
The main objective of this project is to create a single-page application portfolio for a web developer, showcasing their experience and proficiency in building React applications.
- Create a dynamic and user-friendly interface.
- Implement smooth navigation between different sections of the portfolio.
- Include a contact form with validation and error notifications.
- Integrate links to the developer's resume and social media profiles.
AS AN employer looking for candidates with experience building single-page applications
I WANT to view a potential employee's deployed React portfolio of work samples
SO THAT I can assess whether they're a good candidate for an open position
GIVEN a single-page application portfolio for a web developer
WHEN I load the portfolio
THEN I am presented with a page containing a header, a section for content, and a footer
WHEN I view the header
THEN I am presented with the developer's name and navigation with titles corresponding to different sections of the portfolio
WHEN I view the navigation titles
THEN I am presented with the titles About Me, Portfolio, Contact, and Resume, and the title corresponding to the current section is highlighted
WHEN I click on a navigation title
THEN I am presented with the corresponding section below the navigation without the page reloading and that title is highlighted
WHEN I load the portfolio the first time
THEN the About Me title and section are selected by default
WHEN I am presented with the About Me section
THEN I see a recent photo or avatar of the developer and a short bio about them
WHEN I am presented with the Portfolio section
THEN I see titled images of six of the developer’s applications with links to both the deployed applications and the corresponding GitHub repositories
WHEN I am presented with the Contact section
THEN I see a contact form with fields for a name, an email address, and a message
WHEN I move my cursor out of one of the form fields without entering text
THEN I receive a notification that this field is required
WHEN I enter text into the email address field
THEN I receive a notification if I have entered an invalid email address
WHEN I am presented with the Resume section
THEN I see a link to a downloadable resume and a list of the developer’s proficiencies
WHEN I view the footer
THEN I am presented with text or icon links to the developer’s GitHub and LinkedIn profiles, and their profile on a third platform (Stack Overflow, Twitter)- Navigate to the deployed application link.
- Click on the navigation titles to switch between sections.
- View the developer's work samples in the Portfolio section.
- Fill out the contact form in the Contact section.
- Download the developer's resume in the Resume section.
Deployed GitHub-Pages Application Link
- Clone the Repository from GitHub (or) Download Zip Folder from Repository from GitHub.
- Open the cloned (or downloaded) repository in any source code editor.
- Open the integrated terminal of the document and complete the respective installation guides provided in "Built With" to ensure the cloned documentation will operate.
- Dynamic JavaScript
- How To Create React.md: Click to Preview Document
- JSON: JSON
- Mongoose: 7.0.3
- Express: 4.18.2
- Node.js: 16.18.1
- MongoDB: Website
- Nodemon: 2.0.12
- Fontawesome: 6.4.0
- dotenv: 16.0.3
- Express: 4.18.2
- GraphQL: 16.6.0
- JsonWebToken: 9.0.0
- Mongodb: 5.1.0
- Mongoose: 7.0.3
- React: 18.2.0
- React-Dom: 18.2.0
- React: 18.2.0
- GraphQL: 16.6.0
- MongoDB: 5.1.0
- Mongoose ODM: 7.0.3
- JWT: 9.0.0
- Heroku: Website
- License Badge: Shields.io
- Visual Studio Code: Website
- Building a single-page application using React.
- Implementing smooth navigation using React Router.
- Creating a responsive and visually appealing interface.
- Integrating form validation and error handling in React applications.
- Add a blog section to showcase the developer's thoughts and experiences.
- Implement a search functionality for easier navigation through work samples.
- Incorporate testimonials from previous clients or employers.
- Integrate a dark mode toggle for better accessibility and user experience.
Copyright © 2023 Kaitlyn Atif
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.Follow me on Github at Kaitlyn Atif. Additional questions or concerns? Please contact me at kaitlynatif90@hotmail.com.
© 2023 Kaitlyn Atif. Confidential and Proprietary. All Rights Reserved.