DEV Community: Mahendra Nagpure

Building My Developer Portfolio: A Journey from Passion to Production

Mahendra Nagpure — Tue, 03 Feb 2026 20:47:56 +0000

Hey DEV Community!

I'm Mahendra Nagpure, a full-stack developer from Malegoan, Nashik, and 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. Today, I want to share how I built it and what I learned.

The Why Behind the Build

You know that feeling when you've been coding for years but don't have one place to show it all off? That was me. I've been sharing tutorials here on DEV (my JavaScript and CSS roadmaps got some great feedback!), but I needed something more - a space that represents my skills and helps me connect with clients and collaborators.

The mission was clear: build a portfolio that proves I can build portfolios (meta, right?). It had to be fast, beautiful, and actually useful.

The Tech Stack

I'm a firm believer in using modern tools that make development enjoyable. Here's what powers the site:

Frontend Layer

Next.js 14 with App Router - Server components are a game-changer
TypeScript - Because I enjoy sleeping at night without runtime errors
Vanilla CSS - Complete control, zero bloat, maximum flexibility
Google Fonts (Inter) - Clean, professional typography

Backend & Data

Supabase - PostgreSQL database + authentication in one package
Supabase Storage - Dead simple image and media hosting
Vercel - Deploy in seconds, edge network everywhere

Extras That Matter

MDX - Writing rich content with React components embedded
Google Analytics - Understanding visitor behavior
Syntax Highlighting - Making code snippets look professional

Design Philosophy

Let's be real - nobody remembers a boring portfolio. I wanted something that stands out:

Dark Mode First

Modern developers live in dark mode. The entire design started there, with a light mode as an option for later.

Smooth Animations

Hover effects, page transitions, and micro-interactions that feel natural. Nothing jarring, everything purposeful.

Color Psychology

No basic blues or reds. I went with harmonious HSL color combinations that create depth and interest. Gradients add that premium feel.

Typography Hierarchy

Clear heading structure with varied font weights. Reading should feel effortless.

Mobile-First

Built for phones first, then scaled up. Most visitors are on mobile anyway.

Key Features

Portfolio Grid

Projects displayed with tech stack badges, descriptions, and live demo links. Hover animations reveal more details without cluttering the initial view.

About Section

Who I am, where I'm from, what drives me. Located in Malegoan, available 10 AM - 7 PM IST for collaborations.

Direct Contact

Email integration at work@mahendranagpure.com with a clean, accessible form.

Blog Platform (In Progress)

Planning to bring my DEV Community content to my own platform with full MDX support.

The Build Journey

Step 1: Design System First

Before writing a single line of code, I defined:

Color variables (using CSS custom properties)
Spacing scale (0.25rem increments)
Typography system (font sizes, weights, line heights)
Component patterns (buttons, cards, forms)

This planning saved hours of back-and-forth later.

Step 2: Component Architecture

Created reusable building blocks:

// Example: Button component with variants
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost';
  size: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

TypeScript interfaces kept everything organized and bug-free.

Step 3: Performance Optimization

Next.js Image component for automatic optimization
Code splitting to reduce initial bundle size
Font optimization with next/font
Minimal JavaScript - let CSS handle animations

Step 4: SEO Foundation

Semantic HTML throughout
Meta tags for every page
Open Graph for social sharing
JSON-LD structured data
Sitemap generation

Challenges I Faced

Beautiful vs Fast

Animations can kill performance if done wrong. Solution? Use CSS transform and opacity changes (GPU-accelerated) instead of animating width, height, or layout properties.

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

/*  Slow */
.card:hover {
  margin-top: -4px; /* Forces layout recalculation */
}

Content Organization

How do you showcase projects without overwhelming visitors? After several iterations:

Grid layout with clear visual hierarchy
Categories for filtering
"Featured" section for best work
Detailed case studies on separate pages

Color Contrast in Dark Mode

Making sure text is readable while keeping the design modern required testing with accessibility tools. Aim for at least 4.5:1 contrast ratio.

Key Takeaways

1. Design Tokens Save Time

Setting up CSS variables for colors, spacing, and typography at the start made the entire build more consistent and easier to maintain.

2. TypeScript Is Worth The Setup

Yes, it takes longer initially. But catching errors at compile-time instead of runtime? Priceless.

3. Accessibility Isn't Extra Work

Use semantic HTML, add ARIA labels where needed, test with keyboard navigation. It's not hard, just intentional.

4. Performance Is a Feature

Fast sites convert better. Optimize from day one:

Compress images
Lazy load below-the-fold content
Minimize JavaScript
Use CDN (Vercel Edge Network)

5. Ship, Then Iterate

I could've spent months perfecting every detail. Instead, I launched with 80% done and improved based on real feedback.

What's Next

The portfolio is live, but I'm just getting started:

Full Blog Integration - Moving my content from DEV to my own platform
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

My Dev Community Journey

I've been sharing what I learn here on DEV:

The concept of "learning in public" has been transformative. Every tutorial solidifies my understanding while helping others. Win-win.

Final Thoughts

Building this portfolio taught me more than any tutorial could. If you're considering building your own:

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

Let's Connect!

I'm always happy to chat with fellow developers about projects, collaboration, or just web dev in general.

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!

Learn Only That Matters in JavaScript

Mahendra Nagpure — Sat, 03 May 2025 11:13:21 +0000

Hey Devs! 👋
I recently went all-in on learning JavaScript—from the absolute basics to the concepts behind how JS works under the hood. But here’s the twist:

❌ I didn’t learn “everything.”
✅ I learned only what really matters to build real-world projects & crack interviews.

Let me share what I focused on 👇

1️⃣ `var`, `let`, `const`: What's the Real Difference?

var x = 10;
let y = 20;
const z = 30;

x = 100; // ✅ allowed
y = 200; // ✅ allowed
z = 300; // ❌ Error: Assignment to constant variable

var is function-scoped, while let & const are block-scoped.
const can't be reassigned.
Use let and const — forget var in modern JS.

2️⃣ Hoisting 🏗️

console.log(a); // undefined
var a = 10;

sayHi(); // "Hi!"
function sayHi() {
  console.log("Hi!");
}

var gets hoisted with undefined
Functions get hoisted completely

3️⃣ Data Types 💡

// Primitives
let num = 5;
let str = "Hello";

// Reference
let obj = { name: "Dev" };
let arr = [1, 2, 3];

Learn the difference between primitive and reference types
Reference types are stored in heap memory

4️⃣ Conditionals & Loops 🔁

if (true) {
  console.log("Runs!");
}

for (let i = 0; i < 3; i++) {
  console.log(i); // 0, 1, 2
}

Master if, else, switch, for, while, do while

5️⃣ Functions = Power 💪

function greet(name) {
  return `Hello, ${name}`;
}

const greetArrow = (name) => `Hello, ${name}`;

First-class citizens ✅
You can pass them, return them, assign them
Understand callback, arrow, pure, higher-order, IIFE

6️⃣ Arrays & Objects 🔧

let nums = [1, 2, 3];
nums.push(4); // [1, 2, 3, 4]

let user = { name: "Dev", age: 22 };
user.city = "Pune";

Must-know methods: push, pop, shift, unshift, map, filter, reduce
Destructuring simplifies access

const { name } = user;

7️⃣ Execution Context & Scope 🔍

function outer() {
  let a = 10;

  function inner() {
    console.log(a); // 10
  }

  inner();
}
outer();

Lexical scope & closures
Understand call stack, heap, and memory allocation

8️⃣ `this`, `call`, `apply`, `bind` 🤯

const obj = {
  name: "Dev",
  greet: function () {
    console.log(`Hello, ${this.name}`);
  },
};

obj.greet(); // Hello, Dev

Know how this behaves in different contexts
Use .call(), .apply(), .bind() to control this

9️⃣ DOM Manipulation 📱

const btn = document.getElementById("clickMe");
btn.addEventListener("click", () => {
  document.body.style.background = "lightblue";
});

Select, edit, and style HTML elements
Build interactivity in your frontend

🔟 ES6+ Features 💎

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

const user = { name: "Dev", age: 22 };
const { name, age } = user;

Default params ✅
Destructuring ✅
Spread/rest operators ✅

🔄 Asynchronous JavaScript ⏳

setTimeout(() => {
  console.log("Runs after 2s");
}, 2000);

// Promises
const fetchData = () =>
  new Promise((resolve, reject) => {
    resolve("Data fetched!");
  });

fetchData().then(console.log);

Learn setTimeout, Promises, async/await
Understand Event Loop, Web APIs, and Callbacks

👷 Prototype & OOP in JS

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hi, I'm ${this.name}`);
};

const user = new Person("Dev");
user.sayHello(); // Hi, I'm Dev

Constructor functions
Prototypes and inheritance
new keyword and how objects are created

📁 Bonus: My Practice Code

I’ve put all my examples in a GitHub repo for easy access:
🔗 https://github.com/Mahendra111111/Javascript_practiceset

👋 Final Words

JavaScript can feel overwhelming—but if you stick to what truly matters, you’ll get productive fast.

Learn Only That Matters In CSS

Mahendra Nagpure — Sun, 27 Apr 2025 11:10:28 +0000

CSS That Actually Matters: Learn Only What You Really Need

If you want to build clean, professional websites, you don’t need to learn every tiny thing in CSS — just the parts that actually make a difference. Let’s focus on what really matters and skip the unnecessary stuff.

1. First Things First: Linking CSS to HTML

Before you even think about styling, make sure your CSS file is correctly linked to your HTML.

Always add your <link> tag inside the <head> of your HTML.
Double-check the file name and path — one small typo can break all your styles.

Example:

<link rel="stylesheet" href="style.css">

2. How to Target Elements: IDs vs Classes

Use IDs (#) when you’re styling a single, unique element.
Use classes (.) when you want to style multiple elements the same way.

Example:

<div id="main-heading">Welcome!</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>

#main-heading {
  color: navy;
}
.card {
  border: 1px solid #ccc;
}

3. Percentages and Measurements: Not Everything is in Pixels

If you only use px for everything, your website might look weird on different screens.

Use %, vw, and vh for responsiveness.
Use em and rem to make font sizes scalable.

Quick tips:

% → based on the parent size
vw → based on viewport width
em and rem → great for fonts that adjust better

4. Positioning and Spacing: How Layouts Actually Work

Good design is all about spacing:

Margin adds space outside the element.
Padding adds space inside the element.

Positioning helps you control exactly where an element sits on the page. You need both for clean layouts.

5. Backgrounds: Size and Position Like a Pro

When you add background images, don’t just slap them on.

Use background-size: cover; to make sure the image covers the container without stretching weirdly.
Use background-position: center; to center the image perfectly.

Example:

.banner {
  background-image: url('banner.jpg');
  background-size: cover;
  background-position: center;
}

6. `position: absolute` — What It Actually Means

When you give something position: absolute, it basically jumps out of the normal page flow.

It’s now positioned based on its nearest positioned ancestor (or the page itself if none exists).

It’s perfect when you want to place something exactly somewhere — like badges or tooltips.

7. `position: relative` — Not As Complicated As It Sounds

Relative positioning means the element stays in the normal flow but can be nudged around a little.

So you can move it without messing up the rest of the layout.

8. CSS Positioning — The Big Picture

You’ll mainly use:

static (default)
relative (adjust slightly)
absolute (remove and place exactly)
fixed (sticks to the screen even when you scroll)

The real magic happens when you combine relative and absolute smartly.

That’s how you build dynamic layouts.

9. Flexbox — Your Best Friend for Layouts

Flexbox makes building layouts way easier.

Add display: flex; to the parent container.
Use justify-content to align horizontally.
Use align-items to align vertically.

Example:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

Wrapping It Up

You don’t need to memorize hundreds of random CSS properties.

Just get really good at these essentials:

Linking CSS properly
Targeting with IDs and classes
Using flexible measurements
Mastering spacing and positioning
Nailing background control
Becoming comfortable with Flexbox

Master these, and you’ll already be ahead of most beginner web developers.

Javascript

Mahendra Nagpure — Tue, 15 Apr 2025 06:10:50 +0000

DEV Community: Mahendra Nagpure

Building My Developer Portfolio: A Journey from Passion to Production

The Why Behind the Build

The Tech Stack

Frontend Layer

Backend & Data

Extras That Matter

Design Philosophy

Key Features

Portfolio Grid

About Section

Direct Contact

Blog Platform (In Progress)

The Build Journey

Step 1: Design System First

Step 2: Component Architecture

Step 3: Performance Optimization

Step 4: SEO Foundation

Challenges I Faced

Beautiful vs Fast

Content Organization

Color Contrast in Dark Mode

Key Takeaways

What's Next

My Dev Community Journey

Final Thoughts

Let's Connect!

Learn Only That Matters in JavaScript

1️⃣ var, let, const: What's the Real Difference?

2️⃣ Hoisting 🏗️

3️⃣ Data Types 💡

4️⃣ Conditionals & Loops 🔁

5️⃣ Functions = Power 💪

6️⃣ Arrays & Objects 🔧

7️⃣ Execution Context & Scope 🔍

8️⃣ this, call, apply, bind 🤯

9️⃣ DOM Manipulation 📱

🔟 ES6+ Features 💎

🔄 Asynchronous JavaScript ⏳

👷 Prototype & OOP in JS

📁 Bonus: My Practice Code

👋 Final Words

Learn Only That Matters In CSS

CSS That Actually Matters: Learn Only What You Really Need

1. First Things First: Linking CSS to HTML

2. How to Target Elements: IDs vs Classes

3. Percentages and Measurements: Not Everything is in Pixels

4. Positioning and Spacing: How Layouts Actually Work

5. Backgrounds: Size and Position Like a Pro

6. position: absolute — What It Actually Means

7. position: relative — Not As Complicated As It Sounds

8. CSS Positioning — The Big Picture

9. Flexbox — Your Best Friend for Layouts

Wrapping It Up

Javascript

1️⃣ `var`, `let`, `const`: What's the Real Difference?

8️⃣ `this`, `call`, `apply`, `bind` 🤯

6. `position: absolute` — What It Actually Means

7. `position: relative` — Not As Complicated As It Sounds