Building My Portfolio Website


Career Foundry Case Study
By: Rozita Zadeh

Building My Portfolio Website


Career Foundry Case Study
By: Rozita Zadeh

Building My Portfolio Website


Career Foundry Case Study
By: Rozita Zadeh

Project Overview

Project Overview

Project Overview

Title: Design and Development of My Personal Portfolio

Objective: To create a responsive, user-friendly portfolio website using HTML, CSS, and JavaScript that effectively showcases my projects and skills.

Role: Front-End Developer & DesignerMedium

Duration: March 2024 - May 2025
Tools & Technologies: HTML5, CSS3, JavaScript, Git, GitHub, VS Code

Title: Design and Development of My Personal Portfolio

Objective: To create a responsive, user-friendly portfolio website using HTML, CSS, and JavaScript that effectively showcases my projects and skills.

Role: Front-End Developer & DesignerMedium

Duration: March 2024 - May 2025
Tools & Technologies: HTML5, CSS3, JavaScript, Git, GitHub, VS Code

Statement

Statement

Statement

As an aspiring product designer, I wanted to deepen my understanding of how digital products are built—not just from a design perspective, but from a technical one too. I believe that breaking out of your comfort zone and exploring unfamiliar territory is key to growing in any field.

To become a stronger team player, it's important for me to understand how other departments work—especially developers—so I can collaborate better in cross-functional teams. That’s why I took on a Front-End Development course as part of my specialization at CareerFoundry.

To challenge myself, I decided to design and code my personal portfolio website entirely from scratch. I needed a space to showcase my work, tell my story, and connect with potential collaborators or employers. Rather than rely on templates or pre-made tools, I wanted my website to be a true reflection of my personality, creativity, and coding skills.

As an aspiring product designer, I wanted to deepen my understanding of how digital products are built—not just from a design perspective, but from a technical one too. I believe that breaking out of your comfort zone and exploring unfamiliar territory is key to growing in any field.

To become a stronger team player, it's important for me to understand how other departments work—especially developers—so I can collaborate better in cross-functional teams. That’s why I took on a Front-End Development course as part of my specialization at CareerFoundry.

To challenge myself, I decided to design and code my personal portfolio website entirely from scratch. I needed a space to showcase my work, tell my story, and connect with potential collaborators or employers. Rather than rely on templates or pre-made tools, I wanted my website to be a true reflection of my personality, creativity, and coding skills.

Goals

Goals

Goals

  • Design a personalized and fully responsive website layout that adapts beautifully across all screen sizes.

  • Develop interactive elements using JavaScript to enhance the user experience.

  • Optimize performance and accessibility to ensure a fast, inclusive browsing experience.

  • Deploy the site on GitHub Pages with clean version control and a public codebase to demonstrate my technical process.

  • Design a personalized and fully responsive website layout that adapts beautifully across all screen sizes.

  • Develop interactive elements using JavaScript to enhance the user experience.

  • Optimize performance and accessibility to ensure a fast, inclusive browsing experience.

  • Deploy the site on GitHub Pages with clean version control and a public codebase to demonstrate my technical process.

Design &
Development Process


Design &
Development Process


Design &
Development Process


Planning & Wireframing:

I began by sketching wireframes to outline the structure of the website, focusing on sections like Home, About Me, Projects, and Contact.Ben Crowder


HTML Structure:

  • Developed semantic HTML5 structures to ensure clarity and accessibility.


Styling with CSS:

  • Utilized CSS Flexbox and Grid for layout designs.

  • Implemented media queries for responsiveness.

  • Chose a color palette and typography that reflect my personal brand.


Interactivity with JavaScript:

  • Added a dynamic typing effect on the homepage.

  • Implemented smooth scrolling for navigation links.

  • Created a responsive hamburger menu for mobile devices.


Version Control & Deployment:

  • Deployed the website using GitHub Pages for free hosting and continuous deployment.

Challenges & Solutions

Challenges
& Solutions

Challenges & Solutions

Challenge: Ensuring cross-browser compatibility.

Solution: Tested the website on multiple browsers and used vendor prefixes where necessary to maintain consistent styling.

Challenge: Optimizing performance for mobile users.

Solution: Compressed images and minified CSS and JavaScript files to reduce load times.

Challenge: Ensuring cross-browser compatibility.

Solution: Tested the website on multiple browsers and used vendor prefixes where necessary to maintain consistent styling.

Challenge: Optimizing performance for mobile users.

Solution: Compressed images and minified CSS and JavaScript files to reduce load times.

Challenge: Ensuring cross-browser compatibility.

Solution: Tested the website on multiple browsers and used vendor prefixes where necessary to maintain consistent styling.

Challenge: Optimizing performance for mobile users.

Solution: Compressed images and minified CSS and JavaScript files to reduce load times.

Outcome

Outcome

Outcome

The final product is a fully responsive and interactive portfolio website that effectively showcases my projects and skills. It serves as a central hub for my professional presence online.
Live Website: https://www.rozitazadeh.com/

GitHub Repository: https://github.com/Rozitamz/rozitazadehportfolio


Lessons Learned


The importance of planning and wireframing before development.

Deepened understanding of responsive design principles.

Gained experience in deploying and managing a live website.


Lessons Learned


The importance of planning and wireframing before development.

Deepened understanding of responsive design principles.

Gained experience in deploying and managing a live website.


Lessons Learned


The importance of planning and wireframing before development.

Deepened understanding of responsive design principles.

Gained experience in deploying and managing a live website.