The latest articles on DEV Community by Sagar Budha (@sagarbudha). https://dev.to/sagarbudha https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3151711%2F6a64ed44-8962-4333-9963-f1dfb2c37e70.png https://dev.to/sagarbudha en Sagar Budha Mon, 12 May 2025 03:49:18 +0000 https://dev.to/sagarbudha/i-just-shared-a-blog-post-on-how-i-built-my-developer-portfolio-using-nextjs-typescript-and-1ed8 https://dev.to/sagarbudha/i-just-shared-a-blog-post-on-how-i-built-my-developer-portfolio-using-nextjs-typescript-and-1ed8 <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e" class="crayons-story__hidden-navigation-link">🚀 How I Built My Developer Portfolio Using Next.js, TypeScript &amp; Vercel</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sagarbudha" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3151711%2F6a64ed44-8962-4333-9963-f1dfb2c37e70.png" alt="sagarbudha profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/sagarbudha" class="crayons-story__secondary fw-medium m:hidden"> Sagar Budha </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Sagar Budha <div id="story-author-preview-content-2478991" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sagarbudha" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3151711%2F6a64ed44-8962-4333-9963-f1dfb2c37e70.png" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Sagar Budha</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e" class="crayons-story__tertiary fs-xs"><time>May 12 '25</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e" id="article-link-2478991"> 🚀 How I Built My Developer Portfolio Using Next.js, TypeScript &amp; Vercel </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/nextjs"><span class="crayons-tag__prefix">#</span>nextjs</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/fullstack"><span class="crayons-tag__prefix">#</span>fullstack</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18"> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"> </span> </span> <span class="aggregate_reactions_counter">10<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> react nextjs tailwindcss fullstack Sagar Budha Mon, 12 May 2025 02:30:24 +0000 https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e https://dev.to/sagarbudha/-how-i-built-my-developer-portfolio-using-nextjs-typescript-vercel-4n5e <p>Hey everyone! 👋<br><br> I'm <strong>Sagar Budha</strong>, a full-stack web developer who loves working with modern tools like React, TypeScript, and Node.js. I recently built and deployed my personal developer portfolio, and in this post, I’ll share how I approached it — from tech stack decisions to deployment — along with a few things I learned along the way.</p> <h2> 🧠 Why I Built It </h2> <p>Every developer needs a place to show who they are and what they’ve built. I wanted my portfolio to:</p> <ul> <li>Represent my current skills and growth as a developer</li> <li>Load fast and feel modern</li> <li>Be easy to maintain and update as I keep learning</li> </ul> <p>So instead of using a template, I decided to build it myself — and have some fun doing it!</p> <h2> 🔧 Tools &amp; Technologies </h2> <p>Here’s the stack I went with:</p> <ul> <li> <strong>Next.js</strong> – For server-side rendering, routing, and performance</li> <li> <strong>TypeScript</strong> – For safer, more predictable code</li> <li> <strong>Tailwind CSS</strong> – To style everything quickly and consistently</li> <li> <strong>Framer Motion</strong> – For clean and subtle animations</li> <li> <strong>Vercel</strong> – For hassle-free deployment and hosting</li> </ul> <h2> ✨ Key Features </h2> <p>I focused on keeping things simple but effective. Here’s what I built into the portfolio:</p> <ul> <li>✅ <strong>Responsive design</strong> – Works across all screen sizes</li> <li>✅ <strong>Project showcase</strong> – Clean cards with descriptions and links to GitHub</li> <li>✅ <strong>SEO</strong> – Custom meta tags and structured data to help search engines find it</li> <li>✅ <strong>Animations</strong> – Subtle transitions to improve UX</li> <li>✅ <strong>One-click deployment</strong> – Thanks to Vercel’s GitHub integration</li> </ul> <h2> 🧩 What I Struggled With </h2> <p>No project is perfect. Here are a few things that took extra time:</p> <ul> <li>Getting animations just right without affecting performance</li> <li>Balancing minimalist design with enough personality</li> <li>Making the site fully SEO-friendly (especially on a custom domain)</li> </ul> <h2> 🌐 Check It Out </h2> <p>Want to take a look?</p> <p>🔗 <a href="https://sagarbudha.vercel.app" rel="noopener noreferrer">Live Portfolio</a><br><br> 💻 <a href="https://github.com/sagar-budha" rel="noopener noreferrer">GitHub</a></p> <h2> 🗒️ Final Thoughts </h2> <p>Building this portfolio from scratch gave me a solid reminder of how powerful modern web tools are — and how important it is to keep pushing yourself. It’s live, and I’ll keep improving it over time as I grow as a developer.</p> <p>If you’re working on something similar or have any feedback, feel free to drop a comment or connect. Thanks for reading!</p> <p>— Sagar Budha</p> react nextjs tailwindcss fullstack