Building My Portfolio: Development Journey, Challenges & Lessons Learned

Devika Harshey — Sat, 25 Jul 2026 16:20:56 +0000

Overview

This portfolio showcases my work as a developer, designer and writer via an interactive & visually engaging experience. It brings together my projects, technical skills, certificates, achievements, published books and a glimpse into my learning journey within a unified platform.

Built around a black, white and purple color palette, it combines 3D elements, smooth animations, and responsive layouts to create an engaging browsing experience.

I've been working on this portfolio for the past year and since the beginning, I've continued refining the portfolio through UI improvements, performance optimizations, new features and regular content updates.

Demo Video - https://youtu.be/0SHrim7H4hI

Tech Stack

Category	Technologies
Frontend	Next.js, React, TypeScript
Styling	Tailwind CSS
Animation	GSAP, Framer Motion
3D	Three.js, React Three Fiber, Drei
Deployment	Vercel
Version Control	Git, GitHub

Goal

The goal of this project was to create a portfolio that showcases my work while reflecting my personality through an engaging and intuitive user experience. I wanted the interface to feel visually consistent while remaining responsive, optimized and easy to navigate, allowing visitors to explore my projects, writings & achievements naturally.

Design & Development Journey

Foundation

Established the portfolio's structure, visual identity and core sections, creating a solid foundation for future development.

Expansion

Added new sections for projects, blogs, books, achievements, certificates and other content to showcase different aspects of my work.

Refinement

Improved layouts, animations, typography and overall consistency to create a smoother and more cohesive user experience.

Optimization

Focused on performance and responsiveness by optimizing assets, refining interactions and ensuring a smooth experience across different devices.

Continuous Improvements

The portfolio continues to evolve through new features, content updates, UI refinements and ongoing technical improvements.

Key Challenges

Balancing 3D Models and Animations

One of the biggest challenges was using both Three.js & GSAP on a single-page website. I had to make sure that both the animations and 3D models work smoothly and in coordination. They should look good without affecting the browsing experience.

Optimizing for Mobile (Smaller Screens)

Making the portfolio work well on mobile (smaller screens) took a lot of testing and improvements. I optimized the 3D models, animations and layouts to make sure the website stayed smooth and responsive on different screen sizes.

Building Custom Components

Instead of using pre-built components, I built several custom components from scratch, including the music player, draggable sticky notes, developer terminal, tech icon globe & 3D book models + carousel (most difficult out of all). Building these components helped give the portfolio its own unique feel & my personal touch.

Reflection

This portfolio has been one of my biggest learning experiences. It taught me that creating a good user experience is an ongoing process. It gave me the opportunity to experiment with new ideas, build custom components and improve my skills in frontend development, UI design, 3D graphics and performance optimization. As I continue learning, I'll continue refining and expanding the portfolio✌🏻😊🤍

Next.js: Beginning Of A New Adventure

Devika Harshey — Fri, 31 Jan 2025 20:02:15 +0000

After trying my hands in the basic yet the foundational and most important tech heroes i.e. HTML, CSS and JavaScript, for more than an year, here's to the beginning of my journey of learning the well-known full-stack framework - Next.js🎉.

Let's have a look in what Next.js actually is.

What is Next.js?

Next.js is a framework built on top of popular JavaScript library, React. It helped in addressing the major issues such as inefficient SEO, complexity in managing the component and it's state and processing overhead.

Besides, it also introduced the efficient rendering strategies like Server-Side Rendering (SSR) & Static Site Generation (SSG) which added to the ease in development of SEO friendly and high-performance web applications.

Advantages of Next.js

Being a trending and widely used framework, Next.js has many advantages such as:

1) Seamless file-based routing
2) Efficient code splitting
3) Image & font optimization
4) HMR (Hot Module Replacement)
5) API Routes (backend)
6) Built-in support for Sass (Syntactically Awesome Style Sheets)
7) Data fetching choice
8) Error handling
9) Metadata API (For SEO)

and the list goes on.

Why is Next.js so popular and why most of the developers prefer it over React?

As I already mentioned, Next.js is a React-based framework which not only extended it's capabilities but also reduced the dependencies on number of isolated tools like the ones for server-side handling, databases, routing, etc. And now we've a one-stop solution for the development of full-stack (i.e. both frontend and backend) applications, our very own Next.js.

One of the most interesting feature of Next.js, that I recently learned, is file-based routing i.e. we can define the paths of different pages in our application based on the file & folder structure within our code. It includes concepts like dynamic routing, nested routing, routing groups and many more.

Though React also had it's own routing library called React Router and the React Server Components for server-side handling, Next.js provided everything within a single framework without having the need to rely on external tools and provided us with the choice of deciding which components to render on client-side and which one on the server-side.

Although Next.js facilitates us with comparatively easier way of developing web applications and is mostly seen at the first place, it's not like it has completely replaced React. And it totally depends on one's need and the requirements of the applications or website they're building, which one to choose Next.js or React, as they both have their own benefits.

DEV Community: Devika Harshey