Source: Dev.to

Hey DEV Community!

I’m Mahendra Nagpure, a full‑stack developer from Malegaon, Nashik. I recently launched my portfolio at mahendranagpure.com. After writing tutorials here about JavaScript and CSS, I realized it was time to build a central hub for my work. Below is a rundown of how I built it and what I learned.

---

🎯 The Mission

Build a portfolio that proves I can build portfolios (meta, right?).
It needed to be fast, beautiful, and actually useful.

---

🛠️ Tech Stack

---

✨ Design Goals

• Dark‑Mode First – Modern developers live in dark mode; light mode is optional.
• Smooth Animations – Hover effects, page transitions, and micro‑interactions that feel natural.
• Color Psychology – Harmonious HSL color combos + gradients for a premium feel (no basic blues/red).
• Typography Hierarchy – Clear heading structure with varied font‑weights.
• Mobile‑First – Built for phones first, then scaled up (most visitors are on mobile).

---

📐 Planning Before Coding

I defined the following design tokens up front:

/* Color variables */
:root {
  --color-primary: hsl(210, 50%, 55%);
  --color-bg-dark: hsl(210, 10%, 10%);
  --color-bg-light: hsl(0, 0%, 100%);
}

/* Spacing scale (0.25rem increments) */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
...

/* Typography system */
--font-size-base: 1rem;
--font-size-lg: 1.25rem;
--font-weight-regular: 400;
--font-weight-bold: 700;
...

These tokens saved hours of back‑and‑forth later.

---

🧩 Reusable Building Blocks

Button Component (TypeScript)

// components/Button.tsx
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export const Button: React.FC = ({
  variant = 'primary',
  size = 'md',
  children,
}) => {
  const className = `
    btn btn-${variant} btn-${size}
  `;
  return {children};
};

TypeScript interfaces kept everything organized and bug‑free.

Image Optimization

import Image from 'next/image';

• Automatic optimization via Next.js Image component.
• Code‑splitting to reduce the initial bundle size.
• Font optimization with next/font.

Minimal JavaScript

• Let CSS handle animations.
• Use semantic HTML throughout.
• Add meta tags, Open Graph, JSON‑LD, and sitemap for SEO.

---

⚡ Performance Tips

GPU‑Accelerated Animations

/* Fast – uses transform (GPU) */
.card:hover {
  transform: translateY(-4px);
  transition: transform 0.2s ease;
}

/* Slow – forces layout recalculation */
.card:hover {
  margin-top: -4px; /* ❌ Bad for performance */
}

• Prefer transform and opacity.
• Avoid animating width, height, or other layout properties.

General Optimizations

• Compress images (WebP, AVIF).
• Lazy‑load below‑the‑fold content.
• Minimize JavaScript (only what’s needed).
• CDN via Vercel Edge Network.

---

📂 Project Showcase

• Grid layout with clear visual hierarchy.
• Category filters for easy navigation.
• Featured section for top work.
• Case‑study pages with deep dives.

Hover animations reveal extra details without cluttering the initial view.

---

📧 Contact & Availability

• Location: Malegaon, Nashik
• Hours: 10 AM – 7 PM IST (open for collaborations)
• Email: work@mahendranagpure.com (clean, accessible form)

---

🗒️ Lessons Learned

1. Design Tokens Save Time – CSS variables for colors, spacing, and typography keep the build consistent.
2. TypeScript Is Worth the Setup – Compile‑time error catching is priceless.
3. Accessibility Isn’t Extra Work – Semantic HTML + ARIA + keyboard testing = better UX for everyone.
4. Performance Is a Feature – Fast sites convert better; optimize from day one.
5. Ship, Then Iterate – Launch with ~80 % done, then improve based on real feedback.

---

🚀 What’s Next?

• Full Blog Integration – Move my DEV content to my own platform (MDX support).
• Case Studies – Deep dives into project development.
• Interactive Demos – Live code examples visitors can play with.
• Newsletter – Weekly tips and insights.
• Theme Toggle – User choice between dark and light modes.

---

📚 Sharing Knowledge

I’ve been posting what I learn here on DEV:

• Learn Only What Matters in JavaScript – My Roadmap
• Learn Only That Matters In CSS

“Learning in public” has been transformative. Every tutorial solidifies my understanding while helping others. Win‑win.

---

🙏 Final Thoughts

• Just Start – Don’t wait for the perfect idea or tech stack.
• Be Authentic – Let your personality shine through.
• Prioritize Performance – Speed matters more than fancy features.
• Keep It Simple – Better to have 3 polished features than 10 half‑baked ones.
• Iterate Forever – Version 1.0 is just the beginning.

I’m always happy to chat with fellow developers about productivity, performance, or portfolio design. Feel free to reach out!

Connect with Me

• Portfolio:
• LinkedIn:
• GitHub:
• Email:

---

What about you? What’s the most challenging part of building your portfolio? Drop a comment below — I’d love to hear your experiences!

If you found this helpful, consider following me here on DEV for more web‑development content. I share practical tutorials on JavaScript, CSS, React, and full‑stack development.

Happy coding! 🚀