This personal portfolio page was created as a certification requirement for the Responsive Web Design course from freeCodeCamp. The goal was to develop a portfolio page that highlights my skills and projects while adhering to the functional requirements similar to the freeCodeCamp example.

Caution

Although this project was designed to fulfill the requirements of the certification, it is not intended to be my official portfolio.

Important

This project is part of the freeCodeCamp Responsive Web Design course. While freeCodeCamp provides guidelines and user stories for certification projects, it does not offer tutorials or step-by-step guides for development. This project was built entirely from scratch using my own approach to meet the requirements.

Screenshot

📝 Project Objective

The objective of this project was to create a personal portfolio page similar to the example provided. I aimed to develop a portfolio that effectively showcases my skills, projects, and links to my professional profiles. This project allowed me to implement advanced CSS techniques learned in the final module of the course, such as CSS Animation and CSS Transforms. Even though this project was not intended to be my official portfolio, it reflects my personal style, highlighting key projects and providing easy navigation.

🔧 Features

• Header Section: Contains an h1 element with text and an image with id header-img, representing a logo or personal image.

• Navigation Bar: Includes a nav element with id navbar, featuring links for navigating to different sections of the page. The navbar remains fixed at the top of the viewport.

• Welcome Section: Has an id of welcome-section with a height equal to the viewport height and contains an h1 element.

• Projects Section: Contains at least one element with a class of project-tile and links to individual projects.

• Profile Link: A link with id profile-link that opens your GitHub or freeCodeCamp profile in a new tab.

• Media Queries: Utilizes media queries to ensure responsiveness across different device sizes.

• CSS Flexbox: Applied Flexbox for layout purposes, especially in the navigation bar and project tiles.

• CSS Animation and Transforms: Implemented advanced CSS animations and transforms to enhance the visual appeal and interactivity of the portfolio.

📖 Learnings

• CSS Animation and Transforms: Gained experience in using CSS animations and transforms to create engaging and dynamic user experiences.

• Responsive Design: Improved skills in making the portfolio responsive using media queries and Flexbox.

• Layout Techniques: Practice some layout techniques for creating a visually appealing and functional portfolio.

💻 Technologies Used

• HTML5 for structuring the portfolio.

• CSS3 for styling and advanced layout techniques.

💡 Acknowledgments

• freeCodeCamp: For providing the guidelines and user stories for this project.