Most developer portfolios look exactly the same: a generic hero section, some floating mockups, and a standard contact form. As a software developer with a background in multimedia, I wanted to build something that didn't just tell visitors I write code—I wanted it to physically feel like a developer's environment.
I decided to ditch the standard web layout and build a cinematic, IDE-style terminal portfolio from scratch. Here is a breakdown of the architecture, the micro-interactions, and how I deployed it.
The Vision & Tech Stack
The goal was simple: build a production-ready, highly structural interface that mimics a code editor, complete with a dark theme, file-tree navigation, and zero fluff.
To execute this, I used:
- React / Next.js: For the component architecture and routing.
- Tailwind CSS: For strict, geometrical styling and rapid UI iteration.
- GSAP (GreenSock): For complex timeline choreography and physical transition elements.
- dotLottie: For lightweight, buttery-smooth vector animations.
- Vercel: For serverless deployment and CI/CD.
Nailing the Boot Sequence (The Preloader)
A standard page load feels disconnected. I wanted the user to feel like they were actively booting up a terminal session that transitions smoothly into a workspace.
Instead of a basic spinning wheel, I built a dedicated <Preloader /> component utilizing GSAP for a "split-gate" eyelid reveal.
- The Terminal Execution: On initial load, a lightweight dotLottie animation plays while a React
useEffectinterval simulates a snappy typing effect:mal@portfolio:~$ booting kernel.... - CSS Micro-Interactions: I mapped a
@keyframesblock to a solid CSS square to mimic an authentic, blinking terminal cursor, bringing the text to life. - The GSAP Split-Gate: Once the virtual workspace "initializes", a GSAP timeline takes over. Instead of fading out, the dark background physically splits in half, sliding up and down to unveil the fully rendered IDE underneath.
Structuring the IDE Interface
The core layout is heavily inspired by VS Code. It requires strict CSS grid structuring to ensure the layout never breaks, regardless of screen size.
- File Tree Navigation: The left sidebar acts as the primary router. Clicking files like
about.html,projects.js, orexperience.tsdynamically swaps out the main viewing pane. - Mobile Auto-Retraction: One of the trickiest UX details was handling mobile view. Standard sidebars stay open after you click a link, covering the content. I engineered the mobile state dispatcher to auto-retract the navigation tree the absolute millisecond a file is selected, ensuring the user can immediately read the content without fighting the UI.
Deployment & Routing Architecture
To keep the repository entirely private while maintaining an automated deployment pipeline, I hosted the project on Vercel.
Since the project uses Next.js, Vercel's serverless infrastructure automatically compiled the .next output directory without any friction. Finally, I routed my custom domain (ahmadakmal.dev) directly through Vercel's nameservers to enforce global HTTPS (a strict requirement for .dev top-level domains) and ensure ultra-low latency via their edge network.
The Result
The final build is fast, structured, and entirely fluff-free. It serves as a direct reflection of how I approach systems architecture and interface design.
You can run the live "boot sequence" and check out the IDE yourself here:
🔗 ahmadakmal.dev
I’m Ahmad Akmal (RuumiDev), a software developer studying multimedia in Malaysia. I spend my time building practical AI applications, clean interfaces, and production-ready systems. Let's connect:
- GitHub: github.com/RuumiDev
- Instagram: instagram.com/unsaltedsalt_
- LinkedIn: linkedin.com/in/ahmadakmal-ruumidev
Top comments (0)