Portfolio

Description

This repository contains a portfolio project developed to showcase my skills as a software developer. The project is a personal portfolio website that provides comprehensive information about my skills, experiences, and projects I've completed. It also offers an interactive platform for users to contact me and learn more about my work in a simple and elegant manner.

I developed it using React.js as the main framework, applying its powerful features to create interactive user interfaces. Context API is used for state management across the application, ensuring efficiency and smoother user experiences. The project also heavily utilizes CSS and SCSS for custom styling and theming, providing the site with a visually appealing and unique design.

For handling user authentication and data protection, I employed the Auth0 authentication service, ensuring that user data remains secure. All these technologies come together to create a dynamic, responsive, and user-friendly portfolio website that effectively highlights my skills and experiences as a software developer.

Features

This portfolio project encompasses a wide array of features, offering visitors an in-depth look at my experience and skills. These features include:

1. User Authentication: The portfolio utilizes Auth0 to provide secure user authentication, ensuring users can safely log in and interact with the website.

2. Dynamic Cards: The portfolio displays various information through dynamic cards, such as skills, experiences, projects, and achievements. Each card has been meticulously designed for easy readability and user-friendliness.

3. Project Details Modals: Each project on display in the portfolio has a corresponding detailed modal that can be accessed by the user, providing further information about the project, its technologies, and its purpose.

4. Resume Display: The website provides an online display of my resume, offering an overview of my experiences, education, and skills in a format that is easy to navigate and read.

5. Context API State Management: This feature allows seamless transitions and information flow across different components of the website, enhancing the user experience.

6. Search Functionality: A search bar is provided to help users easily navigate and find the content they are interested in.

7. Social Media Integration: The portfolio incorporates links to my social media profiles, enabling users to explore more about my online presence and connect with me on various platforms.

8. Interactive Contact Form: Users can directly contact me through the interactive form available on the portfolio, providing an easy way to get in touch.

9. Responsive Design: The portfolio's responsive design ensures that it is easily accessible and navigable on various devices and screen sizes, from desktops to mobile devices.

10. Dark Mode: This feature allows users to switch the website's theme between light and dark mode, catering to personal preferences and providing an optimal viewing experience regardless of lighting conditions or time of day.

By exploring the portfolio, visitors gain a comprehensive understanding of my abilities as a software developer and the quality of my work. The portfolio's diverse range of features ensures an engaging, interactive, and user-friendly experience for all users.

Installation

Before you can run this project locally, you'll need to have Node.js and npm (which comes with Node.js) installed on your computer. After you've confirmed that you have Node and npm installed, you can take the following steps to install and run this project:

1. Clone the Repository

   • Open your terminal and use git clone to clone this repository. Run the command:

     git clone https://github.com/reedoooo/portfolio-prep

2. Navigate to the Project Directory

   • After cloning the repository, navigate to the project directory by running:

     cd portfolio-prep

3. Install the Dependencies

   • The project has a number of dependencies that you'll need to install. You can do this by running:

     npm install

     This command will install all the dependencies listed in the package.json file.

4. Run the Project

   • After you've installed all of the dependencies, you can run the project locally by using the following command:

     npm run start

     The npm run start command will start the local development server. You can access the website by opening your web browser and navigating to http://localhost:3000.

The following scripts are available to help with the project's development:

• npm run build: Builds the app for production to the build folder.
• npm run test: Launches the test runner in the interactive watch mode.
• npm run eject: This command will remove the single build dependency from your project. Note: this is a one-way operation. Once you eject, you can’t go back!
• npm run predeploy: Run the build script before deploying.
• npm run deploy: Deploys the app to GitHub pages.

If you encounter any bugs or issues, please report them at https://github.com/reedoooo/portfolio-prep/issues.

Thank you for your interest in my portfolio project!

Screenshots

Include some screenshots of your app here.

Contributing

While this project is primarily a personal portfolio project, I welcome bug reports, feature requests, and contributions.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Attributions

• Background Image: https://unsplash.com/photos/iIJrUoeRoCQ?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Reed Vogt - [email protected]

Project Link: https://github.com/reedoooo/portfolio-prep

---