First I tried to create a website like DoorDash with the theme of Flavortown, but I didn’t like the result, so I decided to change and create a professional portfolio of my own, so here is an explanation.
Project Update: LC_TERMINAL Implementation
Summary: I spent the last 5 hours transforming my static portfolio into an immersive “Hacker OS” experience. The goal was to gamify the user journey, allowing visitors to explore my projects using command-line inputs instead of just scrolling.
Time Breakdown (Almost 5 Hours Total):
💻 Terminal Core Logic (~2h):
I had to build a state management system to handle command history.
Challenge: Implementing the cd (change directory) logic was tricky. I created a recursive function that traverses a JSON object (simulating a Hard Drive) based on the user’s currentPath array.
Implemented commands: help, about, projects, clear, date, sudo (with password logic).
🟢 Visuals: Matrix Rain (~1h):
I didn’t want a heavy GIF background. I wrote a React component using useRef and the HTML5 Canvas API.
It calculates the drop positions and renders the characters frame-by-frame using requestAnimationFrame for performance.
🔊 Audio & UX Polish (~1.5h):
Added an Audio API integration to trigger a specific “mechanical click” sound on every keystroke.
Bug Fix: The autoFocus on the input was forcing the page to scroll to the bottom on load. I fixed this by handling focus events manually, ensuring the “Hero Section” is seen first.
Fetched real-time weather data using an external API (wttr.in) inside the terminal interface.
🚀 Deployment (~30min):
Documented the “lore” in the README.
Fixed a TypeScript build error regarding JSX.Element vs React.ReactNode.
Deployed to Vercel.
