97 lines
3.7 KiB
Markdown
97 lines
3.7 KiB
Markdown
# Cris Charles Garcia - Personal Portfolio
|
|
|
|
A premium, modern, and high-performance personal portfolio built as specified in `AGENT.md` using the Astro + React framework, styled with Tailwind CSS, and optimized for Sanity CMS integration.
|
|
|
|
## Features
|
|
|
|
- 🌟 **Premium Glassmorphic Design:** Visual aesthetics inspired by Android 17 / Material You, featuring high-performance frosted glass, glowing radial highlights, and fluid transitions.
|
|
- 📱 **Responsive & Mobile-First:** Fluid design that scales beautifully from ultrawide screens down to mobile phones.
|
|
- 🧭 **OS-like Navigation:** Floating pill navigation bar that shifts on scroll, automatically highlights current sections using scroll spy (`IntersectionObserver`), and opens a glass drawer menu on mobile.
|
|
- 🌓 **Dynamic Theme Engine:** Class-based Light and Dark mode switching with system preference detection and FOUC prevention.
|
|
- 🤖 **AI Twin Chatbot:** Dedicated assistant page powered by Gemini API, loaded with full portfolio details to answer user inquiries dynamically.
|
|
- 📨 **Validated Contact Form:** Seamless contact input form with complete client/server verification and Resend email dispatcher.
|
|
- 🔗 **NFC Social Links Directory:** Mobile-first, large tap target listing (`/links`) optimized for instant tag redirects.
|
|
|
|
## Tech Stack
|
|
|
|
- **Core Framework:** [Astro v7](https://astro.build/)
|
|
- **UI Components:** [React v19](https://react.dev/)
|
|
- **Styling:** [Tailwind CSS v4](https://tailwindcss.com/)
|
|
- **Hosting:** [Vercel](https://vercel.com/)
|
|
- **AI Integration:** [Gemini API](https://ai.google.dev/)
|
|
- **Email Dispatcher:** [Resend REST API](https://resend.com/)
|
|
|
|
---
|
|
|
|
## Directory Structure
|
|
|
|
```
|
|
/
|
|
├── src/
|
|
│ ├── assets/ # Media and static graphic assets
|
|
│ ├── components/ # Reusable React UI blocks (Hero, Navbar, etc.)
|
|
│ ├── layouts/ # Base Layout templates with SEO and Theme scripts
|
|
│ ├── lib/ # Data services and CMS content resolvers
|
|
│ ├── pages/ # Routing pages (index, projects, links, chat, contact)
|
|
│ │ └── api/ # Serverless API routes (chat, contact form submission)
|
|
│ └── styles/ # Global style sheets (Tailwind and Custom variables)
|
|
├── public/ # Static public assets (icons, manifest)
|
|
├── astro.config.mjs # Astro config (Vercel SSR and integrations)
|
|
├── tailwind.config.ts # Tailwind CSS theme variables
|
|
├── tsconfig.json # TypeScript specifications
|
|
├── package.json # App scripts and dependencies
|
|
└── AGENT.md # Developer agent specifications and guidelines
|
|
```
|
|
|
|
---
|
|
|
|
## Environment Variables
|
|
|
|
To run the application with full external service functionality, add the following to a `.env` or `.env.local` file:
|
|
|
|
```env
|
|
# CMS integration details (optional, falls back to Mock data if empty)
|
|
SANITY_PROJECT_ID=
|
|
SANITY_DATASET=
|
|
SANITY_API_VERSION=
|
|
SANITY_READ_TOKEN=
|
|
|
|
# Transactional email settings
|
|
RESEND_API_KEY=your_resend_api_key
|
|
CONTACT_EMAIL=your_email@example.com
|
|
|
|
# AI Chat assistant configuration
|
|
GEMINI_API_KEY=your_gemini_api_key
|
|
```
|
|
|
|
*Note: The website is fully designed to fallback on static mock values if CMS or API variables are absent.*
|
|
|
|
---
|
|
|
|
## Local Development Setup
|
|
|
|
To boot up the portfolio local server, run the following commands:
|
|
|
|
```bash
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Force-install WASM compiler bindings (Necessary if running on Android/Termux)
|
|
npm install @astrojs/compiler-binding-wasm32-wasi --force
|
|
|
|
# Launch the Astro local server
|
|
npm run dev
|
|
```
|
|
|
|
The application will be served at `http://localhost:4321`.
|
|
|
|
---
|
|
|
|
## Production Build
|
|
|
|
To test production bundling or prepare assets for deployment:
|
|
|
|
```bash
|
|
npm run build
|
|
```
|