Escaping the Boring Portfolio: Building a Cinematic IDE Experience

Most developer portfolios feature a uniform layout, complete with a hero section, graphical mockups, and a typical contact form. As a software developer with a background in multimedia, I desired to create something that conveyed not just my coding abilities but also the feeling of working in a developer's environment. To achieve this, I opted to forego the conventional web design and constructed a cinematic, IDE-style terminal portfolio from the ground up.

Here, I will outline the architecture, the subtle animations, and the deployment process. The Concept & Technology Stack The primary objective was to create a production-grade, highly organized interface that emulates a code editor, incorporating features such as a dark theme, file-tree navigation, and minimalistic design. To accomplish this, I utilized the following tools: React/Next.js: Responsible for the component architecture and routing.

Tailwind CSS: Ensured strict, geometric styling and facilitated swift UI development. GSAP (GreenSock): Responsible for intricate animations and smooth transition effects. dotLottie: Provided lightweight, high-quality vector animations. Vercel: Leveraged for serverless deployment and continuous integration/continuous deployment.

Implementing the Launch Process (The Preloader) The traditional page loading experience proved unsatisfactory. I aimed to convey to users that they were actively starting up a terminal session that seamlessly transitions into a workspace. Instead of a basic rotating indicator, I developed a dedicated Preloader component using GSAP for a split-gate eyelid reveal.

Initiating the Terminal Execution: Upon loading the page, a lightweight dotLottie animation plays while a React useEffect interval emulates a swift typing effect, displaying the user in the terminal as if they are booting up the system. CSS Micro-Interactions: I employed CSS keyframes to simulate a persistent cursor within the terminal, adding a touch of authenticity to the textual output.

The GSAP Split-Gate: Once the virtual workspace becomes operational, a GSAP timeline takes over. Rather than merely fading out, the dark background physically divides into two halves, sliding apart to reveal the fully rendered IDE interface. Organizing the IDE Layout Drawing inspiration from VS Code, the core layout is meticulously structured using CSS grid to ensure consistency across various screen sizes.

File Tree Navigation: The left sidebar functions as the primary router. Selecting items such as about.html, projects.js, or experience.ts dynamically updates the main viewing pane. Mobile Auto-Retraction: One of the more challenging user experience considerations involved handling mobile views. Conventional sidebars tend to remain visible after a navigation click, obscuring the content.

To address this, I engineered a mobile state dispatcher that automatically collapses the navigation tree the instant a file is chosen, allowing users to read the content without any obstruction. Deployment & Routing Infrastructure To maintain a private repository while implementing an automated deployment pipeline, I hosted the project on Vercel.

Given that the project employs Next.js, Vercel's serverless infrastructure seamlessly compiled the .next output directory without any complications. Additionally, I configured my custom domain (ahmadakmal.dev) via Vercel's nameservers to enforce global HTTPS compliance, which is a mandatory requirement for .dev top-level domains, and ensure low-latency delivery through their edge network.

The Outcome The final product is fast, well-structured, and devoid of unnecessary elements. It serves as a tangible representation of my approach to systems architecture and interface design. You can experience the live boot sequence and explore the IDE at: 🔗 ahmadakmal.dev I am Ahmad Akmal (RuumiDev), a software developer focusing on multimedia studies in Malaysia.

My work revolves around developing practical AI applications, crafting clean interfaces, and building production-ready systems. Feel free to connect with me on GitHub (github.com/RuumiDev), Instagram (instagram.com/unsaltedsalt_), or LinkedIn (linkedin.com/in/ahmadakmal-ruumidev).