A modern, interactive space-themed portfolio website showcasing Justin Wheeler's professional journey through the cosmos of cloud expertise, development skills, and community contributions.
- Interactive Solar System: Navigate through different career aspects represented as planets
- Space-themed Design: Immersive visual experience with animated stars and cosmic elements
- Responsive Design: Optimized for all devices from mobile to desktop
- TypeScript: Full type safety and better developer experience
- Modern Stack: Built with Vue 3, Vite, and Tailwind CSS
- Performance Optimized: Fast loading with lazy loading and optimized assets
- ☁️ AWS Planet: Cloud certifications and expertise
- 💻 Development Planet: Programming skills and technologies
- 🤝 Community Planet: Community contributions and involvement
- 🏢 Experience Planet: Professional work history
- 🎓 Education Planet: Learning journey and certifications
- 🚀 Projects Planet: Portfolio projects and GitHub activity
- Frontend: Vue 3, TypeScript, Tailwind CSS
- Build Tool: Vite
- Animations: CSS animations and transitions
- Icons: Emojis and custom styling
- Deployment: Ready for Netlify/Vercel
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/justinwheeler/wheeler-universe-portfolio.git
cd wheeler-universe-portfolio- Install dependencies
npm install- Start the development server
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run buildThe built files will be in the dist/ directory.
wheeler-universe-portfolio/
├── src/
│ ├── components/
│ │ ├── SolarSystem/ # Solar system components
│ │ ├── Planets/ # Individual planet components
│ │ ├── Navigation/ # Navigation components
│ │ └── common/ # Shared components
│ ├── views/ # Page components
│ ├── assets/ # Static assets
│ ├── types/ # TypeScript types
│ └── router/ # Vue Router configuration
├── public/ # Public assets
└── [config files]
The color scheme is defined in tailwind.config.js:
- Primary: Deep purple (#4B1F8E)
- Secondary: Coral (#F4A460)
- Accent: Gold (#FFD700)
- Background: Dark navy (#0B1426)
Update the content in each planet component:
- AWS certifications in
AWSPlanet.vue - Skills in
DevelopmentPlanet.vue - Community activities in
CommunityPlanet.vue - Work experience in
ExperiencePlanet.vue - Education in
EducationPlanet.vue - Projects in
ProjectsPlanet.vue
- Realistic orbital mechanics with different speeds
- Hover effects and interactive tooltips
- Smooth transitions between views
- Mobile-first approach
- Adaptive layouts for different screen sizes
- Touch-friendly navigation
- Keyboard navigation support
- Screen reader friendly
- High contrast options
- Semantic HTML structure
- Lazy loading for components
- Optimized images and assets
- Minimal bundle size
- Fast loading times
- Connect your GitHub repository
- Build command:
npm run build - Publish directory:
dist
- Import your GitHub repository
- Framework preset: Vite
- Build command:
npm run build - Output directory:
dist
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run typecheck- Run TypeScript checks
Feel free to submit issues and pull requests to improve the portfolio!
This project is open source and available under the MIT License.
This portfolio was inspired by the vastness of space and the journey of exploration, mirroring the continuous learning and growth in the world of technology.
Wheeler Universe - Where technology meets the cosmos 🌌