Personal portfolio website for Allan Carranza — Product Builder specializing in full-stack conversational AI, from user experience to model capabilities.
Live site: allancarranza.com
A single-page portfolio showcasing:
- Experience — Microsoft AI (Copilot Voice, multimodal), Azure OpenAI (scaled audio portfolio from 1 to 7 models), Xbox (hardware engineering through product leadership)
- Personal Projects — Scout (college football Discord bot), Fin (family finance Telegram agent), Preppy (PM interview prep AI)
- Spotlight — Media appearances and speaking engagements
- Education — MBA from UIUC, BS Mechanical Engineering from UT Austin
Features an interactive canvas-based particle animation background and smooth anchor-based section navigation.
- React 18 + TypeScript 5 + Vite 5
- Tailwind CSS 3 with HSL CSS variable theming
- shadcn/ui component library (Radix UI primitives)
- Vercel for hosting, analytics, and speed insights
Requires Node.js (v18+) and npm.
# Install dependencies
npm install
# Start dev server (localhost:8080)
npm run dev
# Run linter
npm run lint
# Run tests
npm run test
# Production build
npm run build
# Preview production build
npm run previewsrc/
├── components/ # Page sections and custom components
│ ├── ui/ # shadcn/ui primitives (auto-generated)
│ ├── NavBar.tsx # Fixed nav with scroll-based opacity
│ ├── HeroSection.tsx
│ ├── AboutSection.tsx
│ ├── ExperienceSection.tsx
│ ├── ProjectsSection.tsx
│ ├── SpotlightSection.tsx
│ ├── EducationSection.tsx
│ ├── Footer.tsx
│ └── MultimodalBackground.tsx # Canvas particle animation
├── pages/
│ ├── Index.tsx # Main page (composes all sections)
│ └── NotFound.tsx
├── hooks/ # Custom React hooks
├── lib/ # Utilities (cn class merger)
├── test/ # Test setup and specs
├── App.tsx # Root component (providers, routing)
└── index.css # Global styles, Tailwind config, CSS variables
Deployed automatically to Vercel via git integration. Pushes to main trigger production builds.