DEV Community

Cover image for How I Built a Portfolio That Makes Recruiters Actually Stop and Look
Pavel Piuro
Pavel Piuro

Posted on

How I Built a Portfolio That Makes Recruiters Actually Stop and Look

#webdev #programming #portfolio #discuss

Intro: Why Most Developer Portfolios Suck

When you open yet another default developer portfolio, you see the same thing: three sections, stock icons, "Hello, I'm John and I'm passionate about code." Boring as hell.

I decided to do it differently. I wanted my site to demonstrate skills by itself. Not tell about them-show them.

The result: el1fe.com-a cyberpunk portfolio with an interactive terminal, live cursors, a cosmic experience timeline, Matrix rain, a Snake game, and a ton of other madness.

Tech Stack: Bleeding Edge

When starting a project, you can go with tried-and-true and safe. Or you can go with the latest and suffer. I chose to suffer.

Core:

  • Next.js 16-yes, version sixteen. While everyone's sitting on 14, I'm already on the bleeding edge.

  • React 19-with new capabilities like server components and improved suspense.

  • TypeScript-strict typing everywhere, no any allowed.

Animations:

  • Framer Motion-version 12+ with motion values and layout animations.

  • CSS Animations-for heavy effects (matrix, particles) I use pure CSS to not kill performance.

Infrastructure:

  • Vercel-deploys in seconds, edge functions, analytics.

  • Supabase-for guestbook, analytics, and real-time features.

  • Husky + lint-staged-pre-commit hooks for formatting.

## The Terminal: 30+ Commands and a Full Filesystem

The main feature of the site is the interactive terminal. It's not just decoration. It's a full bash simulation with:

  • Virtual filesystem-/home/visitor, /pages, /projects with real files

  • 30+ commands: ls, cd, cat, tree, grep, find, head, tail, wc

  • Easter eggs: cowsay, fortune, figlet, matrix, hack, sl (train!)

  • Vim trap-the vim command traps you, and you need to know how to exit (:q!)

  • Autocomplete-Tab works like in a real terminal

  • Command history-up/down arrows

  • Cursor navigation-move left/right through the line

The terminal code is 980+ lines just in commands.ts. That's more than the entire codebase of some "portfolios."

Cosmic Experience Timeline

The experience page isn't a boring list. It's a journey through space:

  • Parallax background-three layers of stars moving at different speeds

  • Cosmic stations-each job is a space station in orbit

  • Warp effect-scrolling creates a warp jump effect

  • Nebula clouds-animated nebulae in the background

  • Glitch effects-headers with cyberpunk glitch

Live Cursors

You can see other visitors' cursors on the site in real-time. Built with:

  • Supabase Realtime-WebSocket connections

  • Throttled updates-to not spam the server

  • Smooth interpolation-cursors move smoothly

Numbers That Speak:

  • ~475,000 lines of TypeScript/TSX
  • ~14,000 lines of CSS
  • 89 commits
  • 28 components
  • 55 CSS modules
  • 12 pages
  • 30+ terminal commands
  • Development since July 2023

Features Nobody Asked For, But I Built Anyway

  1. Snake Game-right on the homepage, 🐍 button

  2. Matrix mode-matrix command in terminal

  3. Hack simulation-hack mainframe launches a hacking simulation

  4. Cowsay-because what terminal is complete without a cow

  5. Vim trap-classic joke for programmers

  6. Neofetch-displays portfolio "system information"

  7. World map analytics-map showing visitor locations

  8. Sound effects-optional audio feedback

  9. Bilingual-full RU/EN support

  10. PWA-works as an app, service worker, offline mode

Lessons Learned

1. Hydration Is Pain

Next.js SSR + client-side animations = endless hydration mismatches. Solution: mounted state and conditional rendering.

2. Service Workers Can Break Everything

Caching HTML pages with cache-first strategy = users see old versions. Solution: network-first for HTML, cache-first for static assets.

3. Scroll Restoration Is the Enemy

Browser tries to restore scroll position after reload. On SPAs this looks like a bug. Solution: history.scrollRestoration = 'manual'.

4. Framer Motion on Mobile-Be Careful

Complex animations drain battery. For heavy effects, pure CSS animations with will-change work better.

5. TypeScript Saves Lives

113 .ts/.tsx files and zero runtime type errors in production.

What's Next?

  • [ ] AI-powered chat in terminal?

  • [ ] More games (Tetris? Doom?)

  • [ ] 3D sections with Three.js

  • [ ] Blog with MDX and code playground

Conclusion

A developer portfolio isn't a resume in HTML. It's an opportunity to show what you're capable of. I chose to show that I can create something unique, interactive, and technically complex.

89 commits. 475,000 lines of code. One uncompromising result.

el1fe.com-welcome to the cyber terminal.

P.S. If you found a bug-it's not a bug, it's a feature. But write in the guestbook anyway.

Top comments (0)