Website Redesign 2025: A Modern Makeover

Why I decided to redesign

After running my website for almost two years with the same template design, I felt it was time for a refresh. While the original design was clean and functional, it didn't quite reflect my personality or stand out in the sea of developer portfolios. I wanted something that felt more modern, dynamic, and uniquely mine.

What changed

The redesign was comprehensive, touching almost every visual aspect of the site. Here are the key improvements:

Color scheme and gradients

I moved away from the simple, flat colors to a vibrant purple/violet gradient color scheme with cyan and pink accents. This creates a more energetic and modern feel that's consistent throughout the entire site.

Glassmorphism effects

One of the most noticeable changes is the implementation of glassmorphism - a design trend that uses backdrop blur and transparency to create a frosted glass effect. You can see this in the header navigation, cards, and various UI elements. It adds depth and sophistication to the overall design.

Animations and micro-interactions

The site now features several custom animations:

Animated gradient text for headings and titles that subtly shifts colors
Hover lift effects on cards that gently elevate when you mouse over them
Animated underlines on navigation links
Glow button effects that create a subtle luminous effect on hover
Floating animations for decorative elements
Smooth transitions everywhere for a polished feel

Component-level improvements

Cards: Now feature gradient overlays and scale animations on hover
Timeline: Updated with a gradient line and glowing dots to make my experience and education sections more visually appealing
Skill progress rings: Enhanced with gradient strokes and glow effects that make them pop
Footer: Completely redesigned with a gradient divider and animated social icons
Header: Implements glassmorphism with animated navigation links

Background enhancements

I added decorative gradient blobs throughout the site that create a subtle, dynamic background. Combined with a custom scrollbar and smooth scroll behavior, the entire browsing experience feels more refined.

Blog improvements

The blog listing now uses a card-style layout instead of the traditional list view, with a modern sidebar for tag filtering. Each post card has hover effects that make browsing more engaging.

Technical implementation

All these changes were implemented using:

Tailwind CSS for utility-first styling
Custom CSS animations including fadeIn, slideUp, float, gradient, and glow effects
Gradient borders and dot pattern utilities for decorative elements
Responsive design ensuring everything looks great on all device sizes

The best part? Despite all these visual enhancements, the site maintains excellent performance thanks to Next.js optimization and efficient CSS.

What I learned

This redesign taught me a lot about:

Modern CSS techniques and animations
The importance of consistent design language
Balancing aesthetics with performance
How small details (like micro-interactions) can significantly improve user experience

What's next

I'm planning to continue iterating on the design:

Add more interactive elements
Potentially implement a dark/light mode toggle (beyond what's already there)
Explore more animation possibilities
Keep the dependencies updated and performance optimized

If you have any feedback or suggestions about the new design, feel free to reach out! I'd love to hear what you think about these changes.