Retro Site Themes

Three free, ready-to-edit one-page websites for a portfolio or personal site: Neon Noir, Alien and 16-Bit Zone. Leer en español ↓

Neon Noir	Alien	16-Bit Zone
A rainy night city with searchlights, flying cars and neon, fading to a dusty amber view further down.	A black-and-red machine HUD for Neon Noir: a wall of dark gunmetal machinery, riveted metal panels, glowing red segment glyphs in display windows, a wrist device and a three-dot targeting laser.	A 16-bit console-game title screen with pixel lettering, scrolling scenery, a score display and gold records to collect.

Live demo: the gallery page links to all three.

What every template includes

• English and Spanish. A language button switches every word on the page. Spanish uses formal usted.
• A theme menu at the top right. Neon Noir and Alien switch in place; 16-Bit Zone opens its own page.
• Original soundtracks, made live in the browser (no audio files): a slow neo-noir score for Neon Noir, an action-thriller score for Alien (suspense, then a military drum march with brass), and chiptune music for 16-Bit Zone, plus optional sound effects. Both are off until the visitor turns them on.
• Sections ready to fill in: career/résumé, projects loaded live from GitHub, services, music links, photo collections and social links.
• Accessibility: keyboard navigation, screen-reader labels, readable contrast, 44px tap targets, phone layouts, and a "Pause motion" button that respects the visitor's reduced-motion setting. In Alien, decorative glyphs sit beside the real numbers, so screen readers still hear them.
• Privacy: no cookies, analytics or trackers. The fonts are stored in the template, not loaded from Google. Music players load only when the visitor presses Load player.
• No build step: plain HTML, CSS and JavaScript. Any web host works.

Use it for your own site

1. Get the files

Download this repository (Code → Download ZIP) and unzip it. Keep the template folder you want: neon-noir/ (which includes Alien), 16-bit-zone/, or both. When both are kept side by side, their theme menus link to each other.

2. Make it yours

Open the files in any text editor. Look for comments that start with EDIT:.

To change	Edit
Your name	index.html: the places marked EDIT: your name
All other text, in English and Spanish	js/i18n.js: every phrase has an en and an es version
Your GitHub projects	js/main.js: set GITHUB_USER at the top
Music links or embedded players	index.html (Sound section) and EMBEDS in js/main.js. For an embedded player, also add its website to frame-src in the Content-Security-Policy line near the top of index.html
Photos (Neon Noir)	Put them in assets/photos/<collection>/ as 01.jpg, 01-thumb.jpg… and list them in js/albums.js
Your portrait (Neon Noir)	Replace assets/portrait.svg, or point the <img> in the Career section to your photo
Colors	The color settings at the top of styles.css (:root { --amber: …; --cyan: … })
The theme menu	Remove an <option> from #theme-select in index.html to hide a theme

To preview on your computer, open Terminal in the template folder, run python3 -m http.server 8000, then open http://localhost:8000. Opening index.html directly from Finder or Explorer won't work, because browsers block JavaScript modules on file://.

3. Publish it free with GitHub Pages

1. Create a free account at github.com and click New repository. Name it yourname.github.io for a site at that address, or any name for yourname.github.io/name.
2. Click uploading an existing file and drag in the contents of your template folder: index.html, styles.css, fonts.css and the js and assets folders.
3. Open Settings → Pages. Under Branch, choose main and click Save. After a minute or two your site is live at the address shown there.
4. Optional: to use your own domain, add it under Settings → Pages → Custom domain and follow GitHub's DNS instructions.

Inside the templates

• Neon Noir: the skyline layers are SVGs drawn by tools/city.py, so you can regenerate them with different settings. Rain and flying cars are drawn on a canvas. The parallax responds to the mouse and to scrolling.
• Alien: the machine background is assets/machine.svg, a tileable panel drawn by tools/machine.py (run it with a different number, e.g. python3 tools/machine.py 12, for a new layout). Photos, app screenshots and the portrait keep their real colors. The glyphs are drawn in js/theme.js: each digit is a slanted spine with four glowing bars, a long bar on the right for a 1 bit and a short bar on the left for a 0 bit. The targeting dots only appear with a mouse, and never when reduced motion is on.
• 16-Bit Zone: the scenery is SVG and CSS, the soundtrack and effects use the Web Audio API, and the score display counts the gold records a visitor collects.

Licenses

• Code, artwork and music: MIT. Use them for personal or commercial sites, and change anything you like.
• Fonts: Inter, IBM Plex Mono, Nunito and Press Start 2P are under the SIL Open Font License, and Syncopate is under Apache 2.0. Their license files are in licenses/ and must stay with the fonts.
• Original work: all artwork, music and glyphs were made for this project. The templates aren't affiliated with or endorsed by any film, game or studio, and they contain no characters, logos, names or assets from one.

以上为 README 的开头部分。其余内容请阅读原文。 查看完整 README ↗