Retro TUI Portfolio Template

The Retro TUI Portfolio Template is a terminal-user-interface developer portfolio built on Astro.js 7 and Tailwind CSS v4 that recreates a retro CRT computer with a dual-mode interactive CLI and visual dashboard.

What is the Retro TUI Portfolio Template?

It is an open-source static-site template that presents a developer's bio, skills, collaborations, and contact details inside a simulated terminal emulator. It takes all content from a central TypeScript data file (src/data/portfolio.ts) and generates a static portfolio with two interchangeable layouts: a bash-like CLI mode and a visual GUI dashboard. The template is written in TypeScript 5 and runs on any static host; a live demo is hosted at https://astro-tui-portfolio.netlify.app.

Key Features

• Dual-mode interface — Toggle between an interactive CLI that supports command history, Tab auto-completion, and 15 commands (including neofetch, spotify, theme, and matrix) and a visual dashboard with a collapsible sidebar explorer; portfolio content is organized into About Me, Skills, Collabs, and Contact.
• 6 CRT color themes — Switch via header dropdown or the theme command among Phosphor Green, Amber Monitor, Cyberpunk Cyan, Dracula Synth, Retro Monochrome, and Cappuccino; custom themes can be added in src/config/themeConfig.ts.
• Live Discord RPC integrations — Stream real-time Spotify now-playing and gaming activity through Lanyard WebSockets (wss://api.lanyard.rest/socket) with automatic game cover art from the RAWG API, both disabled by default until a Discord User ID is configured.
• Web Audio API sound synthesizer — Pure-JavaScript generated keypress clicks, success chimes, and error double-beeps, toggleable with the sfx command.
• Retro CRT effects — Toggleable scanline overlays, screen glass glare, and flicker, with global intensity presets from "low" to "ultra" in GLOBAL_CRT_CONFIG.
• Matrix digital rain — A canvas animation triggered by the matrix command or the header button.
• FormSubmit contact form — AJAX email delivery to any address with zero backend code; first submission triggers a one-click activation email.
• Centralized customization — All bio, skills, collabs, neofetch specs, and the ASCII banner live in src/data/portfolio.ts; skills render as progress bars and the developer palette is validated to a strict maximum of 8 hex colors.

Who should use the Retro TUI Portfolio Template?

• Software engineers and developers who want a portfolio that signals technical fluency and stands out from typical card-based site templates.
• Systems administrators and DevOps engineers who want to display shell-like neofetch specs (OS, kernel, editor, machine) alongside project collaborations.
• Developers with active Discord/Spotify presence who want live gaming and music activity widgets streamed automatically into their site via Lanyard.

Use cases

• Interactive browsing: Let visitors run CLI commands such as neofetch, about, skills, and collabs to explore your background in a terminal-like environment.
• Live activity display: Show real-time Spotify now-playing with a ticking progress bar and active game cover art directly on the homepage using your Discord User ID.
• Custom theme showcase: Add your own CRT color palettes and test them instantly in the header dropdown, useful for branding or personal preference.

How does the template work?

The template is a standard Astro project: clone the repository, run npm install, then npm run dev for local development at http://localhost:4321, or npm run build to generate a fully static site in dist/. Docker Compose files provide both a hot-reloading development container (tui-portfolio-dev) and an ultra-lean production build served by Nginx (tui-portfolio-prod). All content editing happens in src/data/portfolio.ts without touching layout code.

FAQ

Is the template free to use?

Yes. The project is published under the MIT License, so you can use, modify, and redistribute it freely, including for commercial portfolios.

How do I activate the live Spotify and gaming widgets?

Both widgets are disabled by default. Set your Discord User ID in src/config/spotifyConfig.ts and src/config/gamesConfig.ts, and join the Lanyard Discord server for Lanyard to monitor your presence; Discord must be running while you play music or games.

Does the contact form need a backend?

No. The form uses FormSubmit's AJAX endpoint. After the first test submission, you receive an activation email from FormSubmit; clicking "Activate Form" enables all future messages.