tvallejoss · VS Code–style portfolio

This very site

Next.js React JavaScript Tailwind CSS Shiki

My portfolio as a VS Code workspace: folders, tabs, a terminal, git history and skills as extensions.

The story

The idea started in September 2022, in my first months as a developer: a React mock-up of the editor window. It stayed at that, a static mock-up.

In 2026 I picked it up again with four more years of experience and turned it into a complete application where every part of the interface actually works.

🔗 Source code · First sketch (2022)

Technical decisions

• Content is data. Experience, skills and certifications live in /content. Each role generates its .md file, its Source Control commit and its terminal output, with no duplicated copy.
• Server-side highlighting. Shiki colors everything once for all 3 themes; switching themes is pure CSS and the browser never downloads the highlighter.
• Fully indexable. All copy is server-rendered, in Spanish and English.
• Terminal outside React. The session (history, working directory, scrollback) lives in its own store, so it survives closing the panel.
• Shortcuts that don't fight the browser. Ctrl+P prints and Ctrl+W closes the tab, so shortcuts were chosen to avoid clashes and are matched by physical key, so they work on any keyboard layout.
• Responsive without flashes. CSS decides which screen to show (desktop, tablet or mobile) before any JavaScript runs.
• Accessible. Tree, tabs and palette follow WAI-ARIA patterns, and everything works from the keyboard.

Credits

Design inspired by VS Code (not affiliated with Microsoft).