Varshith Reddy

Posted on Apr 1

"How I Built a Responsive Portfolio Website in 3 Days"

#webdev #freelance #programming #portfolio

How I Built a Responsive Portfolio Website in 3 Days

Introduction

A well-designed portfolio website isn't just a showcase of your skills—it’s a powerful tool to attract clients and job opportunities. In this article, I’ll walk you through how I built a fully responsive portfolio website in just 3 days using HTML, CSS, and JavaScript. I’ll also share best practices and tools that made the process efficient.

Day 1: Planning and Design

Before jumping into coding, I focused on planning the structure and design of the website. Proper planning saves time and prevents unnecessary revisions.

1.1 Wireframing

I started with a wireframe to sketch out the layout of my website. I used Figma (a free design tool) to create a simple blueprint with these sections:

Home – A hero section with an introduction and call-to-action.
About – A short bio with my skills and experience.
Projects – Showcasing my best work with links and descriptions.
Contact – A contact form and social media links.

1.2 Choosing a Color Scheme

I picked a modern and professional color palette. Here’s what I chose:

Primary Color: #007BFF (Blue for professionalism)
Secondary Color: #F8F9FA (Light Gray for contrast)
Accent Color: #FFC107 (Yellow for highlights)

A great resource for color schemes: Coolors.co

1.3 Selecting Fonts

Typography plays a major role in user experience. I used:

Headings: Poppins (bold and stylish)
Body Text: Roboto (easy to read)

Both fonts were imported from Google Fonts using this snippet:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto:wght@400&display=swap" rel="stylesheet">

1.4 Gathering Assets

I collected icons, images, and logos from free sources:

Icons: FontAwesome
Images: Unsplash

Day 2: Development

Once the design was ready, I started coding the site from scratch. Here’s how I structured my development process:

2.1 Writing the HTML Structure

I followed semantic HTML principles for better SEO and accessibility:

<header>
  <h1>My Portfolio</h1>
  <nav>
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

2.2 Styling with CSS for Responsiveness

I used CSS Flexbox and Grid to make the layout responsive.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

I also added media queries to adjust styles for mobile screens:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

2.3 Adding JavaScript for Interactivity

I included JavaScript for smooth scrolling and a dynamic theme switcher.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});

Day 3: Testing and Deployment

With the website built, I focused on testing and deployment to ensure it works flawlessly across devices.

3.1 Cross-Browser Testing

I tested the site on multiple browsers:

✅ Google Chrome

✅ Mozilla Firefox

✅ Microsoft Edge

3.2 Mobile Optimization

I used Google Chrome DevTools to check how the website looks on different screen sizes (iPhone, Android, iPad, etc.).

3.3 Hosting & Deployment

To make the site live, I used Netlify (a free hosting platform). Steps:

Created a free Netlify account.
Uploaded my project to GitHub.
Connected GitHub to Netlify.
Clicked “Deploy” and my site was live!
A great alternative is Vercel.

Check Out My Work!

I love helping others build stunning, responsive websites! If you need a personal or business website, check out my Fiverr gig below:

👉 Hire me on Fiverr for a custom portfolio website that showcases your skills professionally!

Bonus: Key Takeaways

Here are some tips if you're planning to build your own portfolio:
✅ Plan before coding – Wireframes save time.
✅ Keep it simple – Avoid clutter; focus on essential sections.
✅ Use responsive design – Your site should work on all devices.
✅ Optimize performance – Use compressed images and minify C
SS/JS.
✅ Deploy with Netlify/Vercel – Free, fast, and easy hosting.

Conclusion

Building a portfolio website doesn’t have to take weeks. With the right approach, you can create a responsive, professional website in just a few days! Need help with yours? Let’s collaborate on Fiverr!

🚀 Let's build your website together!

DEV Community