The primary goal of this project is to develop a portfolio that not only showcases my work but also demonstrates my proficiency in React concepts and API fetching. By creating this portfolio, I aimed to enhance my skills in these areas and provide a visually appealing representation of my capabilities.
-
Inspiration/Mood Board: An initial collection of images, colors, and styles that served as the creative foundation for the project.
-
Wireframe: A visual blueprint that outlines the structure and layout of the portfolio's user interface.
-
Current Product: Screenshots or images showcasing the actual portfolio in its current state.
-
Example of Mapping Pulled from Data in Components: Demonstration of utilizing data pulled from an API and mapping it to components within the portfolio.
The portfolio was developed using the following technologies:
- React: The core framework used to build the interactive user interface.
- JavaScript: The programming language for adding interactivity and functionality.
- CSS: Styling language responsible for the visual presentation of the portfolio.
- HTML: Markup language used to structure and organize content.
- Netlify: Hosting platform utilized for deploying the portfolio and making it accessible online.
To explore the portfolio, you can visit the deployed website. The portfolio provides a comprehensive overview of my work, skills, and projects. Each section or page will guide you through different aspects of my journey and accomplishments.
One of the key features of the portfolio is the implementation of a data.js file that centralizes content. This approach enables easy content updates without redundant copying and pasting. By importing the content from this file, I can focus on refining styles and layouts. Additionally, I plan to incorporate my resume into the portfolio for future enhancements. Another key feature is the ability to fetch a random quote from the Code Ninja Api that is displayed on the home page of the application.
The project presented several challenges that allowed me to grow as a developer:
- Routing Practice: Implementing routing within the portfolio provided valuable experience in creating a multi-page application.
- Pages vs. Components Organization: Deciding how to structure the project into pages and reusable components required thoughtful organization.
- Passing Data via Props: Learning how to lift and pass data between components effectively was a significant learning point.
- Importing: I had difficulty with paths in this project, specifically to images. After being able to import images, I used the same method for files and for components in the material-icons module.
I'm excited to introduce the following features in the near future:
- Incorporation of CSS Framework: I plan to integrate a CSS framework like Bootstrap or Tailwind to enhance the design and streamline the styling process.
- Enhanced Responsiveness: Making the portfolio more responsive across different devices will be a priority. This will ensure a seamless experience for users accessing the portfolio on various screen sizes.
- Form Interactivity
- Creating Vertical Navigation: The vertical navigation design was inspired by discussions on Stack Overflow.
- Importing Fonts for React: Valuable insights on importing fonts into a React app were gained from this blog post.
- Show/Hide Element: The technique to show or hide elements in a React app was learned from this Stack Overflow post.
- Quote API: The portfolio incorporates quotes from the Quote API to provide meaningful and inspirational content.
- Icons: Icons used in the portfolio were sourced from Material-UI Icons.
- Fonts: Fonts used in the portfolio design include Lilly Mae and Google Fonts.
Feel free to explore the portfolio and its various sections to gain insights into my work, skills, and journey as a developer. Your feedback is highly appreciated!