Personal portfolio site for a full-stack developer. Hand-coded static site focused on clarity, speed, and proof of real product work—not tutorial demos.
Live site: alejosworkstuff.github.io/portfolio
The site showcases selected projects with problem/stack/outcome case-study cards, a skills breakdown, an “How I use AI in development” section, and contact links. Copy is available in English and Spanish via a client-side language toggle.
- Bilingual UI — EN/ES strings in
i18n.js; language preference persisted inlocalStorage - Project case studies — Expandable cards with live demos and GitHub repos
- Responsive layout — Mobile nav, project grid, and accessible controls
- Zero build step — Plain HTML, CSS, and JavaScript; deploys directly to GitHub Pages
| Layer | Technologies |
|---|---|
| Markup & style | HTML5, CSS3 (custom properties, responsive grid) |
| Behavior | Vanilla JavaScript |
| i18n | Client-side translation map (i18n.js) |
| Hosting | GitHub Pages |
portfolio/
├── index.html # Main portfolio page
├── projects/ # Per-project case-study pages
├── portfolio.css # Site styles
├── i18n.js # EN/ES translations and language toggle
├── scripts/
│ └── build-layout.mjs # Shared <head>/header/footer generator (single source of truth)
├── assets/
│ ├── icons/ # LinkedIn, GitHub SVG icons
│ └── projects/ # Project screenshot previews
└── README.md
The <head> SEO/Open Graph block, the site header/nav, and the footer are
identical (modulo per-page SEO values and the relative path prefix) across
index.html and every projects/*.html page. To avoid copy-paste drift, those
three regions are generated from a single source of truth in
scripts/build-layout.mjs:
- Edit per-page SEO and the shared markup in the config/renderers at the top of
that file, then run
npm run build:layoutto rewrite the regions in place. - The pages stay plain, directly-servable static HTML — there is no runtime templating step, so GitHub Pages serving is unchanged.
npm run check:layoutfails if any page is stale (wired intonpm run check:pagesso CI catches forgotten regenerations).
| Project | Stack highlights |
|---|---|
| AI Story Generator | Vercel AI SDK, RAG/pgvector (Neon), TypeScript, Zod, Vitest, Playwright |
| Fake E-commerce | Next.js, React 19, Clerk, Playwright, GitHub Actions |
| Mini Job Board | HTML, CSS, Vanilla JS, JSON |
| Saravá — Espacio Cultural | Next.js static export, GitHub Pages |
No install or build required.
-
Clone the repository:
git clone https://github.com/alejosworkstuff/portfolio.git cd portfolio -
Serve the folder with any static file server, for example:
npx serve .Or open
index.htmldirectly in a browser. -
Edit
index.html,portfolio.css, ori18n.jsand refresh to preview changes.
The site is deployed on GitHub Pages from the main branch. Push to main to update the live site at the URL above.
- Email: alejoworkstuff@gmail.com
- LinkedIn: alejo-castillo-0b02b73b0
- GitHub: alejosworkstuff
All rights reserved unless otherwise noted. Project screenshots and copy are personal portfolio materials.