Astro Portfolio.

Description

A single-screen personal portfolio built with Astro and shipped as a static site. The whole experience lives on one screen with no page scroll: content is organized into switchable glass panels, and only long lists (such as Projects) scroll inside their own panel.

The interface takes an Apple-style “Liquid Glass” direction, pairing a frosted-glass UI with a theme-swapped video background and full English / Indonesian bilingual content.

Background

I wanted a portfolio that felt like a self-contained product rather than a long scrolling page. The idea was to keep everything on one screen, lean on a strong visual treatment, and make the same content readable in both English and Indonesian without maintaining two separate versions of the site.

Goal

Deliver a fast, static, single-screen portfolio with a distinctive frosted-glass aesthetic, bilingual content managed from a single source, and thoughtful interaction details (deep-linking, keyboard navigation, reduced-motion support) that still perform well on the first paint.

Features

• Liquid Glass UI with frosted navbar, panels, and cards using blur, saturation, subtle highlights, and soft shadows.
• Theme-swapped video background: a day clip in light mode and a night clip in dark mode, with a crossfade and dark as the default.
• Bilingual English / Indonesian content with a one-tap language toggle; the choice is remembered and the initial language is guessed from the browser.
• Single-screen layout with no page scroll; content lives in switchable glass panels while long lists scroll inside their own panel.
• Projects explorer with a search box and tech-tag filters spanning a large project set.
• Deep-linking and keyboard navigation: each section syncs with the URL hash so back/forward works, arrow keys switch tabs, and shortcuts toggle theme and language.
• A cursor-following glass sheen reflection across glass surfaces.
• Responsive layout that adapts the nav and crops the hero video per form factor for desktop, tablet, and mobile.
• SEO, Open Graph, and Twitter card metadata, prefers-reduced-motion support, and video posters for a fast first paint.

Technologies

• Astro (static output)
• TypeScript (strict)
• Vanilla CSS (scoped styles plus a small global helper), with no UI framework
• Vanilla JavaScript for view switching, filtering, and interactions

How to Run

Install dependencies with npm install, then start the dev server with npm run dev (served at http://localhost:4321). Produce a production build with npm run build, which outputs to ./dist, and inspect it locally with npm run preview.

Technical Decisions

The site is built around a single source of content: profile, career, education, projects, and socials live as arrays in the frontmatter of src/pages/index.astro, where every translatable string is an { en, id } pair rendered through a small Bi.astro bilingual helper. I deliberately avoided a UI framework and kept the styling in scoped vanilla CSS with vanilla JavaScript for interactions, so the output stays lean and static. Backgrounds are swapped by replacing the day/night video assets rather than by adding runtime dependencies.

What I Learned

Building a genuinely single-screen, no-scroll layout forced clear decisions about what belongs on screen at once and how long content should be contained. Wiring section state to the URL hash while keeping browser back/forward, keyboard shortcuts, and reduced-motion preferences all consistent taught me how much interaction polish depends on getting the small details right. Maintaining bilingual content from one data source also proved far more sustainable than duplicating pages.

Notes

The repository is public. A screenshot or live preview may be added here later. Note that SITE_URL should be set to the deployed domain so the Open Graph and share previews resolve correctly.