DEV Community

Cover image for How to Build a Portfolio Website From Scratch – A Complete Journey
Nishant Gaurav
Nishant Gaurav

Posted on

How to Build a Portfolio Website From Scratch – A Complete Journey

#webdev #frontend #css #portfolio

PART 1: The Full Journey

Preview: Light Mode

1. When I Started Building My Portfolio

When I decided to build my portfolio, I knew I didn’t want it to look like a “template-based” website. I wanted my site to show who I was as a developer: organized, clean, and systematic.

So long before I wrote even one line of code, I planned:

  • The sections I wanted to show on my portfolio.
  • How do recruiters view portfolios?
  • What is shown at the top of my portfolio (above the fold).
  • How to balance content with images on my portfolio.

The final structure is as follows:

  • Navbar
  • Hero / About
  • Projects
  • Skills
  • Achievements & Certifications
  • Contact
  • Footer

Goal:
“If someone spends 30 seconds on my site, they should be able to identify who I am technically.”

2. Structuring the HTML Layout

I built everything using semantic HTML + Bootstrap grid.

Each section was wrapped inside a <section> tag:

<section id="about"></section>
<section id="projects"></section>
<section id="skills"></section>
Enter fullscreen mode Exit fullscreen mode

This allowed me to achieve:

  • Anchor navigation
  • SEO-friendly structure
  • Clean scroll targeting

Layout scaffolding:

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Bootstrap handled responsiveness, while custom CSS handled visual identity.

3. Designing the Navbar

Since the navbar is the first thing people see when they enter the application, it was important for me to keep it in the following ways:

  • Fixed at the top
  • Minimal
  • Navigation-focused

Key decisions:

  • Logo + Name branding
  • Anchor navigation links
  • Theme toggle switch 
<nav class="navbar navbar-expand-lg fixed-top custom-header">
Enter fullscreen mode Exit fullscreen mode

Hover animation:

.navbar-nav .nav-link::after {
  width: 0;
  transition: width 0.3s ease;
}
Enter fullscreen mode Exit fullscreen mode

4. Building the Hero / About Section

This section had to communicate:

  • Who I am
  • What I do
  • What I’ve achieved

Two-column layout:

<div class="row align-items-center">
  <div class="col-md-5">Image</div>
  <div class="col-md-7">Content</div>
</div>
Enter fullscreen mode Exit fullscreen mode

UI decisions:

  • Rounded profile image
  • Shadow wrapper
  • Using GIFs for accents.
  • Using bold text for highlights.
  • Resume links 
.about_img--wrapper {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
Enter fullscreen mode Exit fullscreen mode

5. Projects Section: Card Architecture

I designed projects as product tiles.

<div class="col-md-6 col-lg-4">
  <div class="project-card"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Design decisions:

  • 25px radius
  • Muted teal background
  • Hover lift 
.project-card:hover {
  transform: translateY(5px);
}
Enter fullscreen mode Exit fullscreen mode

6. Skills Section: Visualizing Competence

Custom progress bars:

<div class="skill-bar">
  <div class="skill-fill" style="width:85%"></div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.skill-bar { background: #7c8d8f; }
.skill-fill { background: #1f2022; }
Enter fullscreen mode Exit fullscreen mode

Split into two columns for balance.

7. Achievements & Certifications:

Image-driven proof cards.

.achievement-img-wrapper {
  height: 260px;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Hover zoom:

.achievement-card:hover .achievement-img {
  transform: scale(1.05);
}
Enter fullscreen mode Exit fullscreen mode

8. Contact Section:

Two layers:
Quick Links

  • LinkedIn
  • Email
  • GitHub

Contact Form

<form>
  <input type="text">
  <textarea></textarea>
</form>
Enter fullscreen mode Exit fullscreen mode

Hover elevation:

.contact-card:hover {
  transform: translateY(5px);
}
Enter fullscreen mode Exit fullscreen mode

9. Footer: Closing Identity

  • Logo
  • Copyright
  • Social icons 
.footer-icon:hover {
  transform: scale(1.1);
}
Enter fullscreen mode Exit fullscreen mode

10. Dark & Light Mode Implementation:

Theme toggle via JS & Persistence:

toggleBtn.addEventListener("change", () => {
  body.classList.toggle("dark-mode");
});

localStorage.setItem("theme","dark");
Enter fullscreen mode Exit fullscreen mode

Dark Mode

Dark-Mode Decisions: 

body.dark-mode {
  background-color: #0f1115;
  color: #e6e6e6;
}
Enter fullscreen mode Exit fullscreen mode

Adjustments:

  • Gradient cards
  • Teal skill bars
  • Dark inputs

Goal: Reduce eye strain.

11. Layout Engineering:

  • Bootstrap Grid → Structure
  • Flexbox → Alignment 
display: flex;
align-items: center;
Enter fullscreen mode Exit fullscreen mode

12. Color & Typography:

Palette:

  • #7eaeb4 Accent
  • #393E46 Dark
  • #f4f5f7 Light 
.card-title {
  font-family: 'Courier New';
}
Enter fullscreen mode Exit fullscreen mode

13. Responsiveness: 

@media (max-width: 767px) {
  .skill-bar { height: 12px; }
}
Enter fullscreen mode Exit fullscreen mode

14. Challenges:

  • Dark mode contrast
  • Card consistency
  • Image scaling
  • Navbar shadows

15. Micro-UI Decisions:

  • Hover lifts
  • Underline nav animation
  • Skill transitions
  • Icon scaling
  • Section accents

PART 2: What I Learned

HTML Semantics 

<section id="projects"></section>
Enter fullscreen mode Exit fullscreen mode

CSS Positioning 

position: fixed;
Enter fullscreen mode Exit fullscreen mode

Flexbox 

display: flex;
Enter fullscreen mode Exit fullscreen mode

Grid 

<div class="row"></div>
Enter fullscreen mode Exit fullscreen mode

Responsive Design 

img { max-width: 100%; }
Enter fullscreen mode Exit fullscreen mode

Media Queries 

@media (max-width:768px) {}
Enter fullscreen mode Exit fullscreen mode

Theme Switching 

localStorage.setItem("theme","dark");
Enter fullscreen mode Exit fullscreen mode

Clean UI Principles

  • Spacing
  • Contrast
  • Hierarchy

Final Reflection

This portfolio became more than a website.

It taught me:

  • UI architecture
  • Theme systems
  • Responsive thinking
  • Developer storytelling

And it represents me better than any resume.

Top comments (0)