Framework
Astro 5
Astro is the site framework. It handles routing, page composition, static generation, and the shared layout model used by every project explainer page.
Main Stack
The core pieces that power this documentation site.
Rendering model
Static output
The site builds to static HTML files instead of requiring a server runtime. That makes deployment simple and keeps the project fast and lightweight.
Content structure
Shared metadata in one source file
Project titles, summaries, locale support, paths, and shared UI copy live together in src/data/ai-projects.ts. The home pages and detail pages both read from that source of truth.
Styling
Global CSS
The visual system is mostly centralized in src/styles/global.css. Shared layout tokens, card styles, hero styles, and responsive rules all live there.
Localization
English and Portuguese routes
The project ships localized pages for both languages. English is the default site, while Portuguese uses dedicated routes under src/pages/pt/ and a localized home route.
Deployment shape
Static deployment on Vercel
This repo is set up as a static Astro site that can be deployed on Vercel without custom backend logic. The runtime complexity stays in the build step rather than in production servers.
How It Runs
From source files to the final static pages.
1
Astro reads page entries
Each project explainer is an Astro page under src/pages/, with Portuguese equivalents in src/pages/pt/.
2
Shared data powers navigation and cards
The project list in src/data/ai-projects.ts feeds the home page cards, project menus, language switching, and hero content.
3
Reusable components compose each page
Layout.astro, AIProjectHero.astro, and the header/footer components keep the site structure consistent across all routes.
4
Global CSS applies the shared visual system
One global stylesheet handles the site’s typography, spacing, project cards, hero sections, tables, flow steps, and responsive layout behavior.
5
Astro builds file-based output
npm run build emits the final static pages with file-style routing, including pt.html for the Portuguese home page.
Architecture Map
The repo is small, but its responsibilities are clearly split.
Key folders
src/pages/English route files for the home page and project explainer pages.
src/pages/pt/Portuguese route files mirroring the localized project pages.
src/components/Shared UI building blocks such as the header, footer, cards, and hero.
src/data/Shared metadata, locale helpers, and bilingual UI labels.
public/Static assets like project screenshots, the favicon, and the menu script.
Architecture Analysis
package.json astro.config.mjs src/data/projects.ts src/layouts/BaseLayout.astro src/components/ src/pages/ src/styles/global.css
The project is intentionally straightforward: content pages, shared metadata, reusable presentation components, and a static build step.
Commands to Run
The local workflow follows the standard Astro static-site cycle.
Scripts
npm install npm run dev npm run build npm run preview
No database, background workers, or custom server processes are required for the documented local workflow.
What it needs
Expected environment
Node.js and npm.
Astro dependencies from package.json.
Static assets available in public/.
No runtime database or server secrets for the core site.
Final Summary
Tech Stacks is a bilingual Astro static site built to document other projects with shared metadata, reusable components, localized routes, and a simple file-based deployment model.