A Few Terminal Habits I Built Into My Portfolio
Not a redesign, a few habits that stuck
I did not set out to make this portfolio look like an IDE. It is a fairly ordinary layout underneath: a nav bar, a hero, sections stacked on a page. What actually happened is smaller and, I think, more honest: a handful of terminal and editor habits from how I actually spend my day kept finding their way in, and I let them stay instead of sanding them down into something more generic.
The stack underneath
It is a Next.js app on the App Router, styled with Tailwind, with Supabase as the database and Cloudinary for image hosting. Content (projects, work experience, education, skills, photos, writing) lives in Postgres tables and gets edited through a custom admin panel rather than hardcoded into components, so updating the site does not mean touching code for routine changes.
A hero that is an actual terminal, not a screenshot of one
The centerpiece is the panel next to the introduction on the home page. It looks like a terminal, and it is one: type help and it lists real commands, projects prints the actual project list pulled live from the database, whoami prints a short bio. It is a small thing, but it is the one piece of this site that is not just styled to look like something, it actually is that thing, backed by the same data every other page reads from.
$ help
Available commands: whoami, projects, experience, writing, contact, clear
$ projects
DocuLume LLM document assistant with cited answers
GharBikri Real estate listing platform
...
A boot sequence, and the flash of unstyled content problem
The site plays a short terminal-styled boot sequence once per browser session before the actual page reveals underneath. Getting this right was fiddlier than it sounds. The stored preference for whether you have already seen it lives in sessionStorage, which is only readable client side, but the browser paints a first frame using the server rendered HTML before any client side JavaScript has run.
The fix is a small blocking script placed directly in <head>, executed before the rest of the page paints, that checks the session flag and sets an attribute on the root element immediately if the boot sequence needs to play. CSS reacts to that attribute to show the overlay from the very first painted frame, instead of a React state flag flipping a beat after hydration and flashing the bare page first. The same technique fixed the theme picker's flash of the wrong theme on load, for the same underlying reason.
Six real editor themes, not a light and dark toggle
The theme picker has six options: Light, Dark, Monokai, Dracula, Nord, and Solarized Light, defined as CSS custom properties and swapped by setting a data-theme attribute on the root element. I picked actual editor color schemes rather than inventing my own palette, partly because they are genuinely well designed by people who spend a lot more time than I have thinking about syntax highlighting contrast, and partly because switching to Dracula should feel like switching to Dracula, not like a generic dark mode with a purple accent slapped on.
Ctrl+K, because that is how I actually navigate things
A command palette opens on Ctrl+K and can jump to any page, switch themes, or open external links. I did not add this because a portfolio needs one. I added it because it is genuinely how I navigate my own editor and terminal all day, and building a site without one started to feel like leaving out a feature I would immediately miss using the site myself.
An admin panel that finally matches the rest of it
The admin panel manages every piece of editable content: projects, work history, skills, photos, and posts, with drag and drop reordering, pagination, and image uploads straight to Cloudinary. The first version of it looked like a generic dashboard: boxed inputs, filled buttons, a sidebar, nothing like the rest of the site. Rebuilding it to share the same underline inputs and borderless icon buttons as the public pages took more iteration than expected, mostly because it meant resisting the instinct to reach for a familiar admin dashboard pattern instead of actually matching what was already there.
What I would call this instead
Not a code editor. A portfolio built by someone who lives in a terminal and an editor most of the day, where a few of those habits (a real shell instead of a static hero image, a keyboard shortcut instead of a search icon you have to click, color schemes instead of a binary theme toggle) leaked into the result. That is a smaller claim than "looks like a code editor," and a more accurate one.
Building NLP for a Language Most Tools Ignore
Tokenization, code switching, and cross-lingual retrieval: what building Nepali NLP for a RAG pipeline and a news portal taught me about multilingual AI.
Building Scraping Pipelines That Don't Fall Over
Retrieval quality starts long before the vector database. Notes on rate limits, deduplication, and the silent failures that make scraping pipelines break in production.
How I Built a RAG Pipeline from Scratch
Building DocuLume taught me that chunking strategy and clean source text matter more than the model on top. A walkthrough using ChromaDB and a local embedding model, including the sqlite gotcha that broke my first deploy.