Building carlosgarcia.works

A personal portfolio to showcase 3D art, studio work, and writing. Built with modern tools and a focus on maintainability.

The Stack

• Astro - Static site generator, zero JS by default
• TypeScript - Type safety
• Tailwind - Utility-first CSS
• MDX - Markdown with components

The Design System

All component styling lives in src/config/design.ts:

export const components = {
  button: {
    base: 'inline-flex items-center gap-2 transition-all',
    variants: {
      primary: 'bg-foreground text-background hover:scale-105',
      secondary: 'bg-card hover:bg-card-hover border',
      ghost: 'bg-transparent hover:bg-card',
    }
  }
}

Components reference these tokens:

---
import { components } from '@/config/design';
---
<button class={components.button.base + ' ' + components.button.variants.primary}>
  Click me
</button>

Change a token once, update everywhere. No hunting through files.

---

Config Files

Three files manage all site data:

Site metadata (src/config/site.ts)

export const SITE = {
  name: 'carlosgarcia.works',
  author: { name: 'Carlos Garcia', email: 'hello@carlosgarcia.works' }
}

SEO helpers (src/config/seo.ts)

export const getArtPageSEO = (title) => ({
  title: `${title} - Art | ${SITE.name}`,
  description: `3D artwork by ${SITE.author.name}`
})

Update once, changes propagate everywhere automatically.

---

Performance

Metric	Value
Build time	2.16s (21 pages)
JavaScript	~15KB (theme toggle only)
Lighthouse	100/100/100/100
First Paint	< 0.5s

Static HTML with minimal JavaScript.

---

AI-Assisted Development

Built with AI tools (Copilot, Claude) as a learning aid. As a 3D character artist learning web dev, AI helps bridge knowledge gaps—suggesting patterns, explaining configurations, debugging errors.

It’s collaborative, not autopilot. I make the architectural decisions, AI helps implement them.

---

The /lab Page

Dev-only page showing all components and design tokens. Like a lightweight Storybook built into the site.

---

What’s Next

• 3D art breakdowns
• Studio work case studies
• Technical tutorials
• More web dev posts

---

Source: github.com/vult-systems/website