A modern, flashy portfolio website showcasing Cade Gilbert's work in XR/VR development, game design, and AI research. Built with Next.js, TypeScript, and cutting-edge web technologies.
- Immersive 3D Background - Animated space scene with floating orbs and stars
- Interactive Particle System - Mouse-responsive particles with dynamic connections
- Glass Morphism Design - Modern frosted glass effects throughout
- Smooth Animations - Framer Motion powered transitions and micro-interactions
- Responsive Design - Optimized for all devices and screen sizes
- Modal System - Elegant modal windows for About, Portfolio, and Social sections
- Project Showcase - Interactive portfolio with filtering and categorization
- Contact Integration - Social links and contact forms
- Performance Optimized - Fast loading with Next.js optimizations
- Framework: Next.js 14 with App Router
- Language: TypeScript
- Styling: Tailwind CSS with custom animations
- Animations: Framer Motion
- 3D Graphics: Three.js with React Three Fiber
- Icons: Lucide React
- Deployment: Vercel (recommended)
-
Clone the repository
git clone https://github.com/yourusername/cadexr-portfolio.git cd cadexr-portfolio -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
The site uses a custom color palette defined in tailwind.config.js:
- Primary: Orange gradient (
#f2751fto#f59347) - Neon accents: Blue (
#00d4ff), Purple (#8b5cf6), Pink (#ec4899), Green (#10b981) - Dark theme: Various shades of gray
- Conthrax: Custom font for headers and branding
- Source Sans Pro: Google Font for body text
- About Section: Edit
components/AboutModal.tsx - Portfolio Projects: Update the projects array in
components/PortfolioModal.tsx - Social Links: Modify the socialLinks array in
components/SocialModal.tsx
cadexr-portfolio/
├── app/
│ ├── globals.css # Global styles and animations
│ ├── layout.tsx # Root layout with metadata
│ └── page.tsx # Home page component
├── components/
│ ├── AnimatedBackground.tsx # 3D space background
│ ├── ParticleSystem.tsx # Interactive particles
│ ├── Navigation.tsx # Navigation bar
│ ├── HeroSection.tsx # Main hero section
│ ├── AboutModal.tsx # About information modal
│ ├── PortfolioModal.tsx # Projects showcase modal
│ └── SocialModal.tsx # Contact and social links modal
├── public/
│ └── fonts/ # Custom font files
├── tailwind.config.js # Tailwind configuration
├── next.config.js # Next.js configuration
└── package.json # Dependencies and scripts
- Three.js powered 3D space scene
- Animated stars and floating orbs
- Auto-rotating camera for dynamic effect
- Canvas-based particle animation
- Mouse interaction and attraction
- Dynamic particle connections
- Glass morphism design
- Smooth enter/exit animations
- Responsive layouts
- Keyboard navigation support
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically on every push
The site can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- DigitalOcean App Platform
- AWS Amplify
Create a .env.local file for any environment-specific configurations:
NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_GA_ID=your-google-analytics-id- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js for 3D graphics
- Framer Motion for animations
- Tailwind CSS for styling
- Lucide for icons
- Next.js for the framework
- Email: xr.cadeg@gmail.com
- LinkedIn: Cade Gilbert
- GitHub: @cadexr
- Twitter: @cadexr
Built with ❤️ by Cade Gilbert for the XR/VR community 🚀