Cleanly Minimal yet beautiful

• 

  This is the portfolio in dark mode

• 

  This is the portfolio in light mode

• 

Inspiration

I’ve always admired interfaces that breathe ones that do more with less. Most portfolios feel loud, animated, or overloaded. I wanted to create something that reflected how I think and build: clear, minimal, but intentional.
Cleanly was inspired by the idea that simplicity isn’t emptiness it’s focus. I wanted a UI that looks quiet but feels alive through balance, rhythm, and subtle motion.

What it does

Cleanly is a developer portfolio a minimal, type-led interface designed to highlight work without noise. It focuses on typography, spacing, and subtle transitions instead of color or clutter. Every detail is crafted to direct attention where it matters the projects, not the interface.

How we built it

Built with Next.js, TypeScript, and Tailwind CSS, the site emphasizes performance and fluidity. Animations are handled with Framer Motion, ensuring transitions feel smooth yet invisible.

Challenges we ran into

Accessibility vs. aesthetics. Maintaining readable contrast and focus indicators while preserving the quiet visual language needed careful tweaking.

• Real-time visitor interactions. I added an optional feature that lets you see the positions of other visitors’ cursors in real time. Implementing it while keeping the UI light and distraction-free was challenging balancing interactivity with minimalism took experimentation with WebSockets and subtle motion cues.

Accomplishments that we're proud of

• A UI that feels effortless and intentional.
  
• Fast load times and smooth interactions on mobile and desktop.
  
• A coherent visual language that mirrors how I code: efficient, clean, and human.
  
• Real-time cursor presence done tastefully enhancing connection without clutter.

What we learned

Minimalism is a design problem, not merely a style. It demands precision: typography, spacing, motion curves, and interaction all matter. Accessibility and beauty aren’t mutually exclusive they improve together when considered from the start.

What's next for Cleanly Minimal yet beautiful

• Build a small component library capturing these calm UI patterns for reuse.
  
• Add dark mode with the same restraint and balance.
  
• Surface a compact build log to share experiments and iterations.
  
• Add lightweight project analytics to understand how people engage with the work.

Built With

• firebase
• nextjs
• tailwind