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

Pavel Piuro — Thu, 25 Dec 2025 18:52:17 +0000

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

Snake Game-right on the homepage, 🐍 button
Matrix mode-matrix command in terminal
Hack simulation-hack mainframe launches a hacking simulation
Cowsay-because what terminal is complete without a cow
Vim trap-classic joke for programmers
Neofetch-displays portfolio "system information"
World map analytics-map showing visitor locations
Sound effects-optional audio feedback
Bilingual-full RU/EN support
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.

My first CLI tool to make git commits faster

Pavel Piuro — Thu, 20 Feb 2025 18:45:38 +0000

Introducing Smart Commit: My First CLI Tool for Smarter Git Commits

Hey devs!

I’m thrilled to introduce Smart Commit, my very first CLI tool that’s been an absolute game-changer for my workflow. I built it out of sheer frustration with messy, inconsistent commit messages and wanted a way to streamline my Git process. What started as a personal project quickly evolved into a robust tool packed with features that not only simplify my life but could help you too!

What is Smart Commit?

Smart Commit is a highly customizable CLI utility designed to guide you through the commit process interactively. It ensures your commit messages and branch names are consistent and well-formatted, integrating seamlessly with your development workflow.

Key Features

Interactive Prompts:

Pick exactly which prompts you need—from commit type, scope, summary, body, and footer, to ticket and CI tests. You get to tailor the commit process to your workflow.
Template-Based Commit Messages:

Define your own commit message format using placeholders like {type}, {summary}, {body}, and more. Total flexibility means your commit messages always follow your preferred style.
CI Integration:

Optionally run a CI command before your commit. It’s a handy way to double-check your changes automatically.
Auto Ticket Extraction:

Automatically extract a ticket ID from your branch name. No more manual copying and pasting—just seamless integration with your issue tracking!
Push and Signed Commits:

Automatically push commits after creation with the --push flag, and create GPG-signed commits using the --sign flag for extra security.
Commit Statistics & History Search:

View commit statistics as cool ASCII graphs (like a shortlog by author or an activity graph) or search your commit history by keyword, author, or date range. It’s all about keeping you informed about your project’s progress.
Additional Commands:

Need to amend, rollback, or rebase? Smart Commit offers interactive commands for amending your last commit, rolling back changes (with options for soft or hard reset), and even a rebase helper with in-editor guidance.
Advanced Branch Creation:

The sc branch command lets you create a new branch from a base branch (or current HEAD) using a customizable naming template. With support for universal placeholders, branch type selection, and custom sanitization rules, creating and managing branches has never been easier.

My Journey and Call for Contributions

I built Smart Commit to solve a very personal problem—dealing with messy commits—and I’m really proud of what it can do. This is my very first library, and it’s been a journey of learning, experimenting, and improving. I’m super open to feedback, suggestions, and contributions. Whether you have ideas to make it even better or want to jump in and contribute code, please feel free to open issues or submit pull requests.

Let’s build something awesome together!

Check It Out

You can find Smart Commit on GitHub here: Smart Commit on GitHub

Thanks a ton for taking a look, and happy coding!

Forem: Pavel Piuro