DEV Community

Harshit Bhuju
Harshit Bhuju

Posted on

How I Built My Developer Portfolio with Next.js, Prisma & GSAP

#portfolio #nextjs #typescript #prisma

Hey everyone! I'm Harshit Bhuju, a developer from Banepa, Nepal, currently studying BTech in Artificial Intelligence at Kathmandu University.

I recently built my personal developer portfolio using Next.js, TypeScript, Prisma, Supabase, GSAP, and Tailwind CSS.

You can check it out here:

https://www.harshitbhuju.com.np

Tech Stack

  • Next.js — application framework
  • React + TypeScript — frontend development
  • Tailwind CSS — styling
  • PostgreSQL + Supabase — database
  • Prisma — ORM
  • GSAP + ScrollTrigger — animations
  • Lenis — smooth scrolling
  • Resend — contact form emails

Why I Chose This Stack

I wanted the portfolio to be more than a static page.

I needed dynamic project and profile data, an admin interface, database integration, contact form handling, and smooth animations while keeping the site fast and SEO-friendly.

Next.js worked well for this because I could combine server-side functionality with interactive React components in the same application.

Keeping Animations Fast

One of the biggest challenges was adding animations without hurting performance.

My initial hero animation delayed the appearance of the profile image, which affected my LCP.

Instead of making the animation responsible for rendering the content, I changed the implementation so that the important content is available immediately and the animation acts as an enhancement.

I also synchronized Lenis with GSAP's ticker so that scroll-triggered animations remain smooth.

lenis.on("scroll", ScrollTrigger.update);

gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
Enter fullscreen mode Exit fullscreen mode

This combination gives me smooth scrolling while keeping ScrollTrigger synchronized with Lenis.

What I Learned

The biggest lesson from building the site was that animations and performance need to be considered together.

A portfolio can look impressive while still being fast, accessible, and easy for search engines to understand.

I'm continuing to learn frontend development, full-stack development, and AI/ML, and I'll be sharing more of what I learn here.

Links

Portfolio: https://www.harshitbhuju.com.np
GitHub: https://github.com/Harshit-Bhuju
LinkedIn: https://www.linkedin.com/in/harshit-bhuju/

Top comments (0)