- Introduction
- Key Features
- Languages and Technologies Used
- Developers
- Application Preview
- Installation
- Getting Started
- Credits
- License
I'm excited to share with you my experience of building a single-page application portfolio for a web developer using React. I started by carefully considering the given requirements and designing a user-friendly and visually appealing portfolio.
Upon loading the portfolio, users are greeted with a clean and organized layout consisting of a header, a content section, and a footer. The header immediately catches their attention, displaying the developer's name prominently. To assist with navigation, I created a menu with titles that correspond to different sections of the portfolio.
The navigation titles include "About Me," "Portfolio," "Contact," and "Resume," allowing visitors to easily access specific areas of interest. To provide a clear indication of the user's current section, the selected title is highlighted.
Implementing smooth transitions and a seamless user experience, I ensured that clicking on a navigation title loads the corresponding section below the navigation without refreshing the page. This dynamic behavior enhances the overall interactivity and engagement of the portfolio.
When the portfolio is initially loaded, the default selection is the "About Me" section. Within this section, users are presented with a recent photo or avatar of the developer, accompanied by a concise and captivating bio. This personal touch helps users connect with the developer and understand their background and expertise.
Moving on to the "Portfolio" section, users encounter a visually appealing grid of six application tiles. Each tile features an image representing the respective application, along with links to both the deployed application and its corresponding GitHub repository. This allows visitors to explore the developer's work and access the source code for further examination.
In the "Contact" section, I incorporated a user-friendly contact form. The form consists of fields for name, email address, and message, providing a straightforward way for users to reach out to the developer. To guide users in filling out the form correctly, I implemented validation notifications. When a user moves the cursor out of a form field without entering text, they receive a notification reminding them that the field is required. Similarly, if an invalid email address is entered into the email field, a notification alerts the user.
The "Resume" section offers users a link to download the developer's resume and a comprehensive list of their proficiencies. This allows potential employers or collaborators to quickly assess the developer's skills and qualifications.
Lastly, the footer completes the portfolio with relevant links to the developer's GitHub and LinkedIn profiles. Additionally, a link to their profile on a third platform, such as Stack Overflow or Twitter, is provided, ensuring that visitors can easily explore the developer's presence across multiple platforms.
Overall, this React-based single-page application portfolio fulfills the given requirements by offering a visually appealing and interactive experience. It allows users to explore the developer's background, projects, and skills while providing convenient ways to contact and connect with them.
Responsive Design: The portfolio is designed to be responsive, adapting seamlessly to different screen sizes and devices, ensuring a consistent user experience across desktop, tablet, and mobile devices.
Header and Navigation: The portfolio includes a header that displays the developer's name and a navigation menu. The menu provides easy access to different sections of the portfolio, such as "About Me," "Portfolio," "Contact," and "Resume."
Dynamic Section Loading: Clicking on a navigation title loads the corresponding section below the navigation without refreshing the page. This dynamic loading enhances usability and provides a seamless browsing experience for users.
Highlighted Current Section: The current section in the navigation menu is highlighted, providing clear visual feedback to users about their current location within the portfolio.
About Me Section: The "About Me" section showcases a recent photo or avatar of the developer and presents a short bio, allowing users to learn more about the developer's background, expertise, and interests.
Portfolio Section: The "Portfolio" section displays a grid of titled images representing six of the developer's applications. Each image is linked to both the deployed application and its corresponding GitHub repository, allowing users to explore the developer's projects.
Contact Section: The "Contact" section features a user-friendly contact form with fields for name, email address, and message. Validation notifications are implemented to guide users in providing the required information correctly.
Validation Notifications: When a user moves the cursor out of a form field without entering text, a notification is displayed to indicate that the field is required. Additionally, if an invalid email address is entered, a notification alerts the user.
Resume Section: The "Resume" section provides a link to download the developer's resume and presents a list of the developer's proficiencies, showcasing their skills and qualifications.
Footer with Social Media Links: The footer includes text or icon links to the developer's GitHub and LinkedIn profiles, enabling visitors to easily access and connect with the developer. It also provides a link to the developer's profile on a third platform, such as Stack Overflow or Twitter, further expanding their online presence.
| Featured Technology Used | Link |
|---|---|
JavaScript |
LINK |
Git |
LINK |
NPM |
LINK |
Express |
LINK |
| Collaborators | Socials |
|---|---|
Noah Hoang |
-
Deployed Application Link: TBD
-
To Clone My Repository Using CLI
- Click on the green code button and copy the link for the SSH key.
- Once clip-boarded load up a command line interface and change directory to one of your preference
- Enter in the command
git@github.com:CodeNameNoah/NPH-React-Portfolio.git - Enter your protected SSH password
To Download My Repository as a ZIP File
- Click on the green code button
- In the bottom of the drop-down menu, click Download Zip
To begin the installation process, first clone the GitHub Repository onto your local machine. After successfully cloning, open the root folder using the terminal. Execute the command "npm i" to install all the necessary modules and packages. Once the installation is finished, run "npm run start" to start the server and commence the operation.
MIT License
Copyright (c) [2023] Noah Hoang
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,