Building a Cosmic Portfolio with Next.js

When I set out to rebuild my portfolio, I wanted something that would stand out. Not just another minimalist portfolio with a white background and sans-serif fonts, but something that felt different.

The Inspiration

I've always been fascinated by space and cosmic imagery. Black holes, in particular, have this perfect balance of being simultaneously terrifying and beautiful. The idea of a point of no return, where light itself cannot escape, felt like a fitting metaphor for drawing visitors into my work.

The Technical Challenge

Creating an animated background that looks good without killing performance was the main challenge. Here's what I learned:

Canvas Optimization

The key to smooth canvas animations is minimizing work in each frame:

// Bad: Creating objects every frame
function draw() {
  const gradient = ctx.createRadialGradient(...);
  // ...
}

// Good: Reuse objects when possible
const gradient = ctx.createRadialGradient(...);
function draw() {
  // Reuse the gradient
}

RequestAnimationFrame

Always use requestAnimationFrame instead of setInterval for animations. It automatically syncs with the browser's refresh rate and pauses when the tab is not visible.

The Design System

I created a custom color palette inspired by nebulae:

• Void (#030014) - The deep space background
• Nebula Purple (#7c3aed) - Primary accent
• Nebula Blue (#3b82f6) - Secondary accent
• Nebula Cyan (#06b6d4) - Highlights
• Star (#f8fafc) - Text

What I Would Do Differently

If I were to start over, I would:

1. Use WebGL instead of Canvas for better performance with complex effects
2. Add more interactive elements that respond to cursor movement
3. Create a day/light mode alternative for accessibility

Conclusion

Building this portfolio was a great exercise in balancing creativity with performance. The cosmic theme gives it a unique identity while still keeping the focus on the content.

What unique design elements have you incorporated into your portfolio?