A personal portfolio website showcasing design system architecture and UX design work, built with Astro, Tailwind CSS, and Web Components.

• Modern Stack: Built with Astro for optimal performance and Tailwind CSS for styling
• Web Components: Uses Magma design system components
• GitHub Pages: Automated deployment via GitHub Actions
• Development Standards: Prettier configured for consistent code formatting

• Magma Design System - Design system based on StencilJS
• Maggioli Design System Styles
• Iconsauce - SVG icon library similar to Tailwind

• Node.js 20 or higher
• npm

npm install

npm run dev

Visit http://localhost:4321 to see your site.

npm run build

npm run preview

npm run format

The site is automatically deployed to GitHub Pages via GitHub Actions when changes are pushed to the main branch.

Before deploying, make sure to:

1. Update astro.config.mjs:

   • Set the site URL to match your GitHub Pages URL (e.g., https://yourusername.github.io)
   • Adjust the base path if your site is not at the root (currently set to /home for a project page)

2. Update social links: Edit src/components/Footer.astro with your actual LinkedIn, GitHub, and resume URLs

3. Enable GitHub Pages: In your repository settings, go to Pages and select "GitHub Actions" as the source

/
├── public/
├── src/
│   ├── components/
│   │   ├── Hero.astro
│   │   ├── CategoryCards.astro
│   │   └── Footer.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
├── .github/
│   └── workflows/
│       └── deploy.yml
└── package.json

• Astro - Static site generator
• Tailwind CSS - Utility-first CSS framework
• Prettier - Code formatter