Solution Engineer specializing in data analytics, cloud solutions, and modern web technologies
Personal portfolio website featuring interactive 3D backgrounds and modern UI design.
🌐 Live Site: https://juancamilo.dev
Switch between three unique animated backgrounds by clicking the theme button (top right):
Interactive atomic particles that respond to your cursor:
- Particles connect with nearby neighbors via dynamic lines
- Click anywhere to spawn new particles
- Collision physics simulation
- Smooth Brownian motion
- Best for: Minimalist, tech-focused aesthetic
- Default theme
Viscous blue lava lamp with realistic physics:
- Smooth, dense blob movement (55% slower than normal)
- Vertical color gradient (cyan → deep blue)
- Click to create bubbles that rise slowly
- Internal flowing textures (FBM noise)
- Gyroscope support on mobile (tilt to move blobs)
- Mouse heat zones that expand nearby blobs
- Best for: Mesmerizing, organic visuals
Immersive 3D space scene with:
- Procedural nebula background
- Sun (day mode) / Moon (night mode) with realistic shaders
- 4 orbiting planets including Mars
- 500+ twinkling stars with parallax
- Interactive black hole (press & hold anywhere)
- Gravitational lensing effect
- Stars spiral into the center
- Orange/gold Interstellar-style ring
- Gyroscope parallax on mobile
- Shooting stars
- Best for: Immersive, cinematic experience
- Dark/Light mode toggle
- Mobile-optimized with gyroscope parallax
- Smooth theme transitions
- Subtle sound effects
- Fully responsive design
- Complete meta tags for search engines
- Open Graph & Twitter Cards for social previews
- Structured Data (JSON-LD)
- Sitemap & robots.txt
- Optimized performance
- React 18 - UI framework
- TypeScript - Type safety
- Vite - Build tool & dev server
- Three.js & @react-three/fiber - 3D graphics
- Custom CSS with glassmorphism effects
- React Icons
- Google Fonts (Space Grotesk, Outfit)
- Web Audio API - Sound effects
- tsParticles - Particle system
- Device Orientation API - Gyroscope
- GLSL Shaders - Custom visual effects
- GitHub Actions - CI/CD
- GitHub Pages - Hosting
- Custom domain
mywebsite/
├── public/
│ ├── favicon.svg # Minimalist "JC" logo
│ ├── robots.txt # Search engine rules
│ ├── sitemap.xml # Site structure
│ └── CNAME # Custom domain
│
├── src/
│ ├── components/
│ │ ├── backgrounds/
│ │ │ ├── ParticlesBackground.tsx # Particles theme
│ │ │ ├── FluidBackground.tsx # Lava lamp theme
│ │ │ ├── SpaceBackground.tsx # 3D space theme
│ │ │ └── index.ts
│ │ ├── BackgroundRenderer.tsx # Theme switcher logic
│ │ ├── BackgroundSelector.tsx # Theme toggle button
│ │ ├── ThemeToggle.tsx # Dark/light mode button
│ │ ├── SocialLinks.tsx # Social media links
│ │ └── index.ts
│ │
│ ├── context/
│ │ ├── BackgroundContext.tsx # Global theme state
│ │ └── index.ts
│ │
│ ├── hooks/
│ │ ├── useSound.ts # Sound effects hook
│ │ └── index.ts
│ │
│ ├── styles/
│ │ └── index.css # Global styles
│ │
│ ├── types/
│ │ └── index.ts # TypeScript definitions
│ │
│ ├── App.tsx # Main component
│ ├── main.tsx # Entry point
│ └── vite-env.d.ts # Vite types
│
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions CI/CD
│
├── index.html # HTML template with SEO
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
├── vite.config.ts # Vite config
├── SEO-README.md # SEO setup guide
└── README.md # This file
For detailed technical architecture, see ARCHITECTURE.md
- Node.js 18+
- npm or yarn
- Clone the repository
git clone git@github.com:juancv3d/My_Website.git
cd My_Website- Install dependencies
npm install- Start development server
npm run dev- Open in browser
http://localhost:3000
npm run buildThe production build will be in the dist/ directory.
npm run preview- Interactive atomic particles
- Click to spawn new particles
- Particle collision and physics
- Connects with mouse cursor
- Default theme
- Viscous lava lamp effect
- Blue gradient (cyan → deep blue)
- Click to create bubbles
- Gyroscope tilt on mobile
- Internal flowing textures
- Dense, slow movement
- 3D nebula background
- Sun/Moon based on dark/light mode
- 4 orbiting planets (including Mars)
- Interactive black hole (press & hold)
- Stars with gravitational attraction
- Gyroscope parallax on mobile
- Shooting stars
Edit src/styles/index.css:
:root {
--color-accent: #00aaff; /* Primary accent */
--color-accent-glow: #0088cc; /* Glow effect */
}- Create component in
src/components/backgrounds/ - Add theme type in
src/types/index.ts - Update
BackgroundRenderer.tsx - Update
BackgroundSelector.tsx
Edit meta tags in index.html
This site includes comprehensive SEO optimization:
- ✅ Meta tags (title, description, keywords)
- ✅ Open Graph tags for social media
- ✅ Twitter Cards
- ✅ Structured Data (JSON-LD)
- ✅ robots.txt & sitemap.xml
- ✅ Favicon with branding
For setup instructions, see SEO-README.md
Deployed automatically via GitHub Actions to GitHub Pages:
- Push to
mainbranch - GitHub Actions builds the site
- Deploys to
gh-pagesbranch - Available at juancamilo.dev
Custom domain configured via CNAME.
MIT License - feel free to use this as a template for your own portfolio!
Juan Camilo Villarreal Rios
- Website: juancamilo.dev
- GitHub: @juancv3d
- LinkedIn: Juan Camilo Villarreal Rios
⭐ If you like this project, give it a star!