A modern, performant, and visually stunning portfolio website built with cutting-edge web technologies. Visit the live site at spencersmith.site.
- Next.js 14 - React Server Components and App Router
- React 18 - Modern React features and hooks
- TypeScript - Full type safety across the entire codebase
- Tailwind CSS - Utility-first CSS framework with custom configuration
- Shadcn/ui - High-quality, customizable React components
- Lucide Icons - Beautiful, consistent icon system
- Custom Animations - Smooth transitions and micro-interactions using:
- CSS Keyframes
- Intersection Observer API
- Vercel Analytics - Real-time performance monitoring
- Speed Insights - Core Web Vitals tracking
- Image Optimization - Next.js Image component with automatic optimization
- Font Optimization - Custom font loading with next/font
- ESLint - Static code analysis
- TypeScript - Static type checking
- Responsive design with mobile-first approach
- Glassmorphism effects
- Particle network background
- Smooth scroll animations
- Interactive project cards
- Dynamic photo gallery
- Contact form with validation
- Server-Side Rendering (SSR)
- Automatic image optimization
- Efficient asset loading
- Optimized fonts with next/font
- Vercel - Edge network deployment
- Custom Domain - SSL/TLS encryption
spencersmith.site/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Home page component
├── components/ # Reusable React components
│ ├── ui/ # Shadcn UI components
│ └── ... # Custom components
├── lib/ # Utility functions
└── public/ # Static assets
- Modern Design: Implements current web design trends including glassmorphism, subtle animations, and micro-interactions
- Analytics Integration: Real-time performance and user behavior tracking
- Type Safety: Full TypeScript implementation for robust code quality
- Responsive Design: Seamless experience across all device sizes
- Interactive Elements: Dynamic components with smooth animations
- HTTPS: Secure communication with SSL/TLS
- Dependencies: Regular security audits with
npm audit
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers
For any inquiries or collaboration opportunities, please reach out through:
This project is proprietary and available for viewing only. While the code is publicly visible for educational purposes, it may not be used, copied, modified, or distributed without explicit permission. See the LICENSE file for details.