Building a Cosmic Portfolio with Next.js

When I set out to rebuild my portfolio, I wanted something that would stand out, and I did not want another minimalist portfolio with a white background and sans-serif fonts. I wanted this one to feel different.

The inspiration

I've always been fascinated by space and cosmic imagery. Black holes especially. They manage to be terrifying and beautiful at the same time. 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

The hard part was animating a background that looks good without killing performance.

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 syncs with the browser's refresh rate on its own, and it pauses when the tab is not visible.

The design system

I created a custom color palette inspired by nebulae:

• Void (#030014) is the deep space background
• Nebula Purple (#7c3aed) is the primary accent
• Nebula Blue (#3b82f6) is the secondary accent
• Nebula Cyan (#06b6d4) is for highlights
• Star (#f8fafc) is the text color

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, and the cosmic theme gives it a unique identity while still keeping the focus on the content.