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.
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.
-
Header Section: Contains an
h1
element with text and an image with idheader-img
, representing a logo or personal image. -
Navigation Bar: Includes a
nav
element with idnavbar
, 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 anh1
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.
-
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.
-
HTML5 for structuring the portfolio.
-
CSS3 for styling and advanced layout techniques.
- freeCodeCamp: For providing the guidelines and user stories for this project.