Download index.html from Gr8-CLR/undefined: direct link, hf CLI and curl.
- Browser
- Download file 49.3 kB
-
https://huggingface.co/spaces/Gr8-CLR/undefined/resolve/main/index.html
- Command line
-
hf download hf://spaces/Gr8-CLR/undefined/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Gr8-CLR/undefined/resolve/main/index.html
49.3 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cameron Rafaela - Python Developer & Designer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #FFD700 0%, #FFC125 25%, #FFB90F 50%, #FFD700 75%, #FFC125 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| filter: drop-shadow(0 0 25px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 50px rgba(255, 215, 0, 0.6)) drop-shadow(0 0 75px rgba(255, 215, 0, 0.3)); | |
| text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3); | |
| } | |
| .tech-badge { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .slide-up { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| .slide-up.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| transition: all 0.8s ease-out; | |
| } | |
| .typing-cursor::after { | |
| content: '|'; | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { opacity: 1; } | |
| 51%, 100% { opacity: 0; } | |
| } | |
| .blob { | |
| position: absolute; | |
| filter: blur(40px); | |
| opacity: 0.3; | |
| animation: blob 7s infinite; | |
| } | |
| @keyframes blob { | |
| 0%, 100% { transform: translate(0px, 0px) scale(1); } | |
| 33% { transform: translate(30px, -50px) scale(1.1); } | |
| 66% { transform: translate(-20px, 20px) scale(0.9); } | |
| } | |
| .gradient-border { | |
| background: linear-gradient(135deg, #6366f1, #3b82f6); | |
| padding: 2px; | |
| border-radius: 12px; | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -2; | |
| } | |
| #matrix-canvas { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.35; | |
| } | |
| .matrix-text { | |
| color: #FFD700; | |
| font-family: 'Inter', monospace; | |
| font-weight: 700; | |
| text-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 50px rgba(255, 215, 0, 0.7), 0 0 75px rgba(255, 215, 0, 0.5); | |
| } | |
| .dark-glass { | |
| background: rgba(17, 24, 39, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(99, 102, 241, 0.2); | |
| } | |
| .dark-card { | |
| background: rgba(31, 41, 55, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(99, 102, 241, 0.1); | |
| } | |
| .dark-input { | |
| background: rgba(31, 41, 55, 0.9); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| } | |
| .dark-input:focus { | |
| border-color: #6366f1; | |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1f2937; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, #6366f1, #3b82f6); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(135deg, #4f46e5, #2563eb); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 overflow-x-hidden"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full dark-glass z-50 border-b border-gray-800"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-2xl font-bold gradient-text">CR</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-300 hover:text-indigo-400 transition-colors">Home</a> | |
| <a href="#projects" class="nav-link text-gray-300 hover:text-indigo-400 transition-colors">Projects</a> | |
| <a href="#about" class="nav-link text-gray-300 hover:text-indigo-400 transition-colors">About</a> | |
| <a href="#contact" class="nav-link text-gray-300 hover:text-indigo-400 transition-colors">Contact</a> | |
| </div> | |
| <button id="mobile-menu-btn" class="md:hidden"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden dark-glass border-t border-gray-800"> | |
| <div class="px-6 py-4 space-y-3"> | |
| <a href="#home" class="block text-gray-300 hover:text-indigo-400 transition-colors">Home</a> | |
| <a href="#projects" class="block text-gray-300 hover:text-indigo-400 transition-colors">Projects</a> | |
| <a href="#about" class="block text-gray-300 hover:text-indigo-400 transition-colors">About</a> | |
| <a href="#contact" class="block text-gray-300 hover:text-indigo-400 transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center relative pt-20"> | |
| <div id="vanta-bg"></div> | |
| <div id="matrix-canvas"></div> | |
| <div class="blob w-72 h-72 bg-indigo-600 rounded-full top-20 left-20"></div> | |
| <div class="blob w-96 h-96 bg-blue-600 rounded-full bottom-20 right-20"></div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="slide-up"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6"> | |
| Hi, I'm <span class="gradient-text">Cameron Rafaela</span> | |
| </h1> | |
| <div class="text-2xl md:text-3xl text-gray-300 mb-4"> | |
| Python Developer & Designer | |
| </div> | |
| <div class="text-xl text-gray-400 mb-8"> | |
| <span class="typing-cursor">Crafting intelligent solutions with code and creativity</span> | |
| </div> | |
| <div class="flex flex-wrap gap-3 mb-8"> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-medium text-indigo-300"> | |
| Python | |
| </span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-medium text-indigo-300"> | |
| Django | |
| </span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-medium text-indigo-300"> | |
| AI/ML | |
| </span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-medium text-indigo-300"> | |
| FastAPI | |
| </span> | |
| <span class="tech-badge px-4 py-2 rounded-full text-sm font-medium text-indigo-300"> | |
| PostgreSQL | |
| </span> | |
| </div> | |
| <div class="flex gap-4"> | |
| <a href="#projects" class="hero-gradient text-white px-8 py-4 rounded-full font-semibold hover:shadow-xl transition-all transform hover:scale-105"> | |
| View Projects | |
| </a> | |
| <a href="#contact" class="border-2 border-indigo-500 text-indigo-400 px-8 py-4 rounded-full font-semibold hover:bg-indigo-500 hover:text-white transition-all"> | |
| Get In Touch | |
| </a> | |
| </div> | |
| </div> | |
| <div class="floating"> | |
| <img src="http://static.photos/technology/640x360/42" alt="Cameron Rafaela" class="rounded-2xl shadow-2xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 slide-up"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">Featured Projects</span> | |
| </h2> | |
| <p class="text-xl text-gray-400">Showcasing innovation in Python development and AI integration</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1: AI-Powered Analytics --> | |
| <div class="card-hover dark-card rounded-2xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-border"> | |
| <div class="dark-card rounded-2xl"> | |
| <img src="http://static.photos/technology/640x360/123" alt="AI Analytics Dashboard" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-xs font-semibold">AI/ML</span> | |
| <span class="bg-blue-900/50 text-blue-300 px-3 py-1 rounded-full text-xs font-semibold">Python</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">AI-Powered Analytics Dashboard</h3> | |
| <p class="text-gray-400 mb-4">Real-time data visualization with predictive analytics using TensorFlow and Streamlit. Processes millions of data points with intelligent insights.</p> | |
| <div class="flex gap-2 mb-4"> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">TensorFlow</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Streamlit</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Pandas</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-indigo-400 font-semibold hover:text-indigo-300 flex items-center gap-1"> | |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2: Smart Assistant --> | |
| <div class="card-hover dark-card rounded-2xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-border"> | |
| <div class="dark-card rounded-2xl"> | |
| <img src="http://static.photos/technology/640x360/456" alt="Smart Assistant" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-xs font-semibold">AI/ML</span> | |
| <span class="bg-green-900/50 text-green-300 px-3 py-1 rounded-full text-xs font-semibold">NLP</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">Intelligent Virtual Assistant</h3> | |
| <p class="text-gray-400 mb-4">Natural language processing-powered assistant with context awareness and multi-language support using OpenAI API and spaCy.</p> | |
| <div class="flex gap-2 mb-4"> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">OpenAI</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">spaCy</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">FastAPI</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-indigo-400 font-semibold hover:text-indigo-300 flex items-center gap-1"> | |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3: E-commerce Platform --> | |
| <div class="card-hover dark-card rounded-2xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-border"> | |
| <div class="dark-card rounded-2xl"> | |
| <img src="http://static.photos/technology/640x360/789" alt="E-commerce Platform" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="bg-orange-900/50 text-orange-300 px-3 py-1 rounded-full text-xs font-semibold">Full Stack</span> | |
| <span class="bg-blue-900/50 text-blue-300 px-3 py-1 rounded-full text-xs font-semibold">Django</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">Smart E-commerce Platform</h3> | |
| <p class="text-gray-400 mb-4">Scalable e-commerce solution with AI-powered recommendations, inventory management, and payment processing.</p> | |
| <div class="flex gap-2 mb-4"> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Django</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Redis</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Stripe</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-indigo-400 font-semibold hover:text-indigo-300 flex items-center gap-1"> | |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 4: Computer Vision --> | |
| <div class="card-hover dark-card rounded-2xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-border"> | |
| <div class="dark-card rounded-2xl"> | |
| <img src="http://static.photos/technology/640x360/321" alt="Computer Vision" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-xs font-semibold">AI/ML</span> | |
| <span class="bg-red-900/50 text-red-300 px-3 py-1 rounded-full text-xs font-semibold">Computer Vision</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">Object Detection System</h3> | |
| <p class="text-gray-400 mb-4">Advanced computer vision system for real-time object detection and classification using YOLO and OpenCV.</p> | |
| <div class="flex gap-2 mb-4"> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">YOLO</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">OpenCV</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">PyTorch</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-indigo-400 font-semibold hover:text-indigo-300 flex items-center gap-1"> | |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 5: Data Pipeline --> | |
| <div class="card-hover dark-card rounded-2xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-border"> | |
| <div class="dark-card rounded-2xl"> | |
| <img src="http://static.photos/technology/640x360/654" alt="Data Pipeline" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="bg-yellow-900/50 text-yellow-300 px-3 py-1 rounded-full text-xs font-semibold">Data</span> | |
| <span class="bg-blue-900/50 text-blue-300 px-3 py-1 rounded-full text-xs font-semibold">Python</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">Automated ETL Pipeline</h3> | |
| <p class="text-gray-400 mb-4">Robust data pipeline with automated extraction, transformation, and loading using Apache Airflow and Pandas.</p> | |
| <div class="flex gap-2 mb-4"> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Airflow</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Pandas</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">AWS</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-indigo-400 font-semibold hover:text-indigo-300 flex items-center gap-1"> | |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 6: API Gateway --> | |
| <div class="card-hover dark-card rounded-2xl shadow-lg overflow-hidden slide-up"> | |
| <div class="gradient-border"> | |
| <div class="dark-card rounded-2xl"> | |
| <img src="http://static.photos/technology/640x360/987" alt="API Gateway" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <span class="bg-green-900/50 text-green-300 px-3 py-1 rounded-full text-xs font-semibold">Backend</span> | |
| <span class="bg-blue-900/50 text-blue-300 px-3 py-1 rounded-full text-xs font-semibold">FastAPI</span> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">Microservices API Gateway</h3> | |
| <p class="text-gray-400 mb-4">High-performance API gateway with authentication, rate limiting, and monitoring using FastAPI and Docker.</p> | |
| <div class="flex gap-2 mb-4"> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">FastAPI</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Docker</span> | |
| <span class="text-xs bg-gray-700 px-2 py-1 rounded text-gray-300">Redis</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-indigo-400 font-semibold hover:text-indigo-300 flex items-center gap-1"> | |
| View Project <i data-feather="arrow-right" class="w-4 h-4"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 slide-up"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">About Me</span> | |
| </h2> | |
| <p class="text-xl text-gray-400">Passionate developer with a global perspective</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="slide-up"> | |
| <img src="http://static.photos/people/640x360/111" alt="Cameron Rafaela" class="rounded-2xl shadow-xl"> | |
| </div> | |
| <div class="slide-up"> | |
| <h3 class="text-3xl font-bold mb-4 text-gray-100">Cameron Rafaela</h3> | |
| <p class="text-lg text-gray-400 mb-6"> | |
| I'm a Python Developer and Designer based in Amsterdam, passionate about creating intelligent solutions that bridge the gap between technology and user experience. With a strong foundation in Python development and a keen eye for design, I specialize in building scalable applications that leverage artificial intelligence and machine learning. | |
| </p> | |
| <p class="text-lg text-gray-400 mb-8"> | |
| My journey in tech has been driven by curiosity and a desire to solve complex problems through elegant code and thoughtful design. I believe in the power of technology to transform ideas into reality and make a positive impact on people's lives. | |
| </p> | |
| <div class="grid grid-cols-2 gap-6 mb-8"> | |
| <div class="dark-card p-4 rounded-xl shadow-md"> | |
| <i data-feather="map-pin" class="w-6 h-6 text-indigo-400 mb-2"></i> | |
| <h4 class="font-semibold mb-1 text-gray-100">Location</h4> | |
| <p class="text-gray-400">Amsterdam, Netherlands</p> | |
| </div> | |
| <div class="dark-card p-4 rounded-xl shadow-md"> | |
| <i data-feather="globe" class="w-6 h-6 text-indigo-400 mb-2"></i> | |
| <h4 class="font-semibold mb-1 text-gray-100">Languages</h4> | |
| <p class="text-gray-400">4 languages fluent</p> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="font-semibold mb-3 text-gray-100">Language Skills</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center gap-3"> | |
| <span class="w-24 text-sm text-gray-300">Dutch</span> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="hero-gradient h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <span class="w-24 text-sm text-gray-300">English</span> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="hero-gradient h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <span class="w-24 text-sm text-gray-300">Papiamentu</span> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="hero-gradient h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <span class="w-24 text-sm text-gray-300">Spanish</span> | |
| <div class="flex-1 bg-gray-700 rounded-full h-2"> | |
| <div class="hero-gradient h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-3 text-gray-100">Core Skills</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">Python</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">Django</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">FastAPI</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">Machine Learning</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">Data Science</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">PostgreSQL</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">Docker</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">AWS</span> | |
| <span class="bg-indigo-900/50 text-indigo-300 px-3 py-1 rounded-full text-sm">Git</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 slide-up"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> | |
| <span class="gradient-text">Get In Touch</span> | |
| </h2> | |
| <p class="text-xl text-gray-400">Let's discuss your next project</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="slide-up"> | |
| <h3 class="text-2xl font-bold mb-6 text-gray-100">Let's Connect</h3> | |
| <p class="text-gray-400 mb-8"> | |
| I'm always interested in hearing about new projects and opportunities. Whether you have a question or just want to say hi, feel free to reach out! | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 bg-indigo-900/50 rounded-full flex items-center justify-center"> | |
| <i data-feather="mail" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-100">Email</h4> | |
| <p class="text-gray-400">cameron.rafaela@example.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 bg-indigo-900/50 rounded-full flex items-center justify-center"> | |
| <i data-feather="map-pin" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-100">Location</h4> | |
| <p class="text-gray-400">Amsterdam, Netherlands</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-12 h-12 bg-indigo-900/50 rounded-full flex items-center justify-center"> | |
| <i data-feather="github" class="w-6 h-6 text-indigo-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-100">GitHub</h4> | |
| <p class="text-gray-400">github.com/cameronrafaela</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-semibold mb-4 text-gray-100">Follow Me</h4> | |
| <div class="flex gap-4"> | |
| <a href="#" class="w-10 h-10 dark-card rounded-full flex items-center justify-center hover:bg-indigo-900/50 transition-colors"> | |
| <i data-feather="linkedin" class="w-5 h-5 text-gray-300"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 dark-card rounded-full flex items-center justify-center hover:bg-indigo-900/50 transition-colors"> | |
| <i data-feather="twitter" class="w-5 h-5 text-gray-300"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 dark-card rounded-full flex items-center justify-center hover:bg-indigo-900/50 transition-colors"> | |
| <i data-feather="github" class="w-5 h-5 text-gray-300"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 dark-card rounded-full flex items-center justify-center hover:bg-indigo-900/50 transition-colors"> | |
| <i data-feather="instagram" class="w-5 h-5 text-gray-300"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slide-up"> | |
| <form id="contact-form" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Name</label> | |
| <input type="text" required class="w-full px-4 py-3 dark-input rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-gray-100 placeholder-gray-500" placeholder="Your Name"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Email</label> | |
| <input type="email" required class="w-full px-4 py-3 dark-input rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-gray-100 placeholder-gray-500" placeholder="your@email.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Subject</label> | |
| <input type="text" required class="w-full px-4 py-3 dark-input rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all text-gray-100 placeholder-gray-500" placeholder="Project Discussion"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Message</label> | |
| <textarea required rows="4" class="w-full px-4 py-3 dark-input rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none transition-all resize-none text-gray-100 placeholder-gray-500" placeholder="Tell me about your project..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full hero-gradient text-white py-3 rounded-lg font-semibold hover:shadow-xl transition-all transform hover:scale-105"> | |
| Send Message | |
| </button> | |
| </form> | |
| <div id="success-message" class="hidden mt-4 p-4 bg-green-900/50 text-green-300 rounded-lg border border-green-700/50"> | |
| Thank you for your message! I'll get back to you soon. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-950 text-gray-400 py-8 border-t border-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2024 Cameron Rafaela. All rights reserved.</p> | |
| </div> | |
| <div class="flex gap-6"> | |
| <a href="#home" class="hover:text-indigo-400 transition-colors">Home</a> | |
| <a href="#projects" class="hover:text-indigo-400 transition-colors">Projects</a> | |
| <a href="#about" class="hover:text-indigo-400 transition-colors">About</a> | |
| <a href="#contact" class="hover:text-indigo-400 transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Matrix Rain Effect | |
| const matrixPhrases = [ | |
| 'import numpy as np', | |
| 'def neural_network()', | |
| 'E = mc²', | |
| 'F = ma', | |
| 'λ = h/p', | |
| '∇·E = ρ/ε₀', | |
| '∇×B = μ₀J', | |
| 'class DeepLearning:', | |
| 'return optimizer.step()', | |
| 'tensor.reshape()', | |
| 'gradient_descent()', | |
| 'backpropagate()', | |
| 'activation.sigmoid()', | |
| 'loss.mse()', | |
| 'quantum.entangle()', | |
| 'fourier.transform()', | |
| 'e^(iπ) + 1 = 0', | |
| '∂f/∂x', | |
| '∫f(x)dx', | |
| 'Σ(n=1→∞)', | |
| 'matrix.multiply()', | |
| 'eigenvectors', | |
| 'determinant', | |
| 'transpose()', | |
| 'convolution()', | |
| 'pooling()', | |
| 'softmax()', | |
| 'cross_entropy()', | |
| 'adam_optimizer', | |
| 'learning_rate', | |
| 'batch_normalize', | |
| 'drop_out()', | |
| 'relu_activation', | |
| 'tanh_function', | |
| 'weight_decay', | |
| 'momentum', | |
| 'bias_term', | |
| 'feature_map', | |
| 'kernel_size', | |
| 'stride_length', | |
| 'padding_same', | |
| 'max_pooling', | |
| 'avg_pooling', | |
| 'flatten_layer', | |
| 'dense_layer', | |
| 'output_layer', | |
| 'hidden_layer', | |
| 'input_shape', | |
| 'output_shape', | |
| 'train_model', | |
| 'validate_model', | |
| 'test_accuracy', | |
| 'confusion_matrix', | |
| 'precision_recall', | |
| 'f1_score', | |
| 'roc_curve', | |
| 'auc_score', | |
| 'cross_validation', | |
| 'grid_search', | |
| 'random_forest', | |
| 'decision_tree', | |
| 'support_vector', | |
| 'kmeans_clustering', | |
| 'pca_analysis', | |
| 't_sne', | |
| 'umap_embedding', | |
| 'autoencoder', | |
| 'variational_auto', | |
| 'gan_network', | |
| 'discriminator', | |
| 'generator', | |
| 'cycle_gan', | |
| 'style_transfer', | |
| 'image_segment', | |
| 'object_detect', | |
| 'yolo_v5', | |
| 'resnet50', | |
| 'vgg16', | |
| 'mobilenet', | |
| 'efficientnet', | |
| 'transformer', | |
| 'attention', | |
| 'multi_head', | |
| 'positional_encoding', | |
| 'token_embedding', | |
| 'bert_model', | |
| 'gpt_model', | |
| 'seq2seq', | |
| 'lstm_cell', | |
| 'gru_unit', | |
| 'rnn_layer', | |
| 'time_series', | |
| 'arima_model', | |
| 'prophet_forecast', | |
| 'anomaly_detect', | |
| 'reinforcement', | |
| 'q_learning', | |
| 'deep_q', | |
| 'policy_gradient', | |
| 'actor_critic', | |
| 'monte_carlo', | |
| 'temporal_difference', | |
| 'exploration', | |
| 'exploitation', | |
| 'reward_function', | |
| 'state_space', | |
| 'action_space', | |
| 'markov_chain', | |
| 'bellman_equation', | |
| 'value_function', | |
| 'advantage_function', | |
| 'eligibility_trace' | |
| ]; | |
| let matrixSketch = function(p) { | |
| let fontSize = 20; | |
| let columns; | |
| let drops = []; | |
| let chars = []; | |
| let dropSpeed = 0.15; // Much slower speed | |
| let individualSpeeds = []; // Independent speeds for each column | |
| p.setup = function() { | |
| let canvas = p.createCanvas(p.windowWidth, p.windowHeight); | |
| canvas.parent('matrix-canvas'); | |
| columns = Math.floor(p.width / fontSize); | |
| for (let i = 0; i < columns; i++) { | |
| drops[i] = Math.floor(p.random(-100, 0)); // Start higher up | |
| chars[i] = []; | |
| individualSpeeds[i] = p.random(0.1, 0.25); // Different speed for each column | |
| for (let j = 0; j < 20; j++) { | |
| chars[i][j] = matrixPhrases[Math.floor(p.random(matrixPhrases.length))]; | |
| } | |
| } | |
| }; | |
| p.draw = function() { | |
| p.background(17, 24, 39, 15); // Even slower fade for clearer trails | |
| for (let i = 0; i < drops.length; i++) { | |
| let currentY = drops[i] * fontSize; | |
| let text = chars[i][Math.floor(drops[i]) % chars[i].length]; | |
| // Main text with enhanced readability | |
| p.push(); | |
| p.drawingContext.shadowBlur = 35; | |
| p.drawingContext.shadowColor = 'rgba(255, 215, 0, 0.95)'; | |
| p.fill(255, 215, 0, 255); // Pure gold color for main text | |
| p.textSize(fontSize); | |
| p.textStyle(p.BOLD); | |
| p.text(text, i * fontSize, currentY); | |
| p.pop(); | |
| // Enhanced trail with better visibility | |
| p.push(); | |
| p.drawingContext.shadowBlur = 30; | |
| p.drawingContext.shadowColor = 'rgba(255, 215, 0, 0.85)'; | |
| for (let j = 1; j < 6; j++) { // Longer trail | |
| if (currentY - j * fontSize > 0) { | |
| let trailY = currentY - j * fontSize; | |
| let trailOpacity = 255 - (j * 20); // Slower fade | |
| p.fill(255, 215, 0, Math.max(trailOpacity, 100)); // Gold trail | |
| p.textSize(fontSize - (j * 0.3)); // Slower size reduction | |
| p.textStyle(p.NORMAL); | |
| let trailText = chars[i][(Math.floor(drops[i]) - j) % chars[i].length]; | |
| p.text(trailText, i * fontSize, trailY); | |
| } | |
| } | |
| p.pop(); | |
| // Random reset with even slower frequency | |
| if (currentY > p.height && Math.random() > 0.995) { | |
| drops[i] = Math.floor(p.random(-50, 0)); | |
| individualSpeeds[i] = p.random(0.1, 0.25); // Reset and randomize speed | |
| for (let j = 0; j < chars[i].length; j++) { | |
| chars[i][j] = matrixPhrases[Math.floor(p.random(matrixPhrases.length))]; | |
| } | |
| } | |
| drops[i] += individualSpeeds[i]; // Use individual speed for each column | |
| } | |
| }; | |
| p.windowResized = function() { | |
| p.resizeCanvas(p.windowWidth, p.windowHeight); | |
| columns = Math.floor(p.width / fontSize); | |
| drops = []; | |
| chars = []; | |
| individualSpeeds = []; | |
| for (let i = 0; i < columns; i++) { | |
| drops[i] = Math.floor(p.random(-100, 0)); | |
| chars[i] = []; | |
| individualSpeeds[i] = p.random(0.1, 0.25); | |
| for (let j = 0; j < 20; j++) { | |
| chars[i][j] = matrixPhrases[Math.floor(p.random(matrixPhrases.length))]; | |
| } | |
| } | |
| }; | |
| }; | |
| new p5(matrixSketch); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Vanta.js Background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xFFD700, | |
| backgroundColor: 0x111827, | |
| points: 10.00, | |
| maxDistance: 25.00, | |
| spacing: 18.00 | |
| }); | |
| // Mobile Menu Toggle | |
| const mobileMenuBtn = document.getElementById('mobile-menu-btn'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Smooth Scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for Animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.slide-up').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Contact Form Handler | |
| const contactForm = document.getElementById('contact-form'); | |
| const successMessage = document.getElementById('success-message'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Simulate form submission | |
| setTimeout(() => { | |
| successMessage.classList.remove('hidden'); | |
| contactForm.reset(); | |
| setTimeout(() => { | |
| successMessage.classList.add('hidden'); | |
| }, 5000); | |
| }, 500); | |
| }); | |
| // Navbar Background on Scroll | |
| window.addEventListener('scroll', () => { | |
| const nav = document.querySelector('nav'); | |
| if (window.scrollY > 50) { | |
| nav.classList.add('bg-gray-900/95'); | |
| nav.classList.remove('bg-gray-900/80'); | |
| } else { | |
| nav.classList.add('bg-gray-900/80'); | |
| nav.classList.remove('bg-gray-900/95'); | |
| } | |
| }); | |
| // Typing Animation | |
| const typingElements = document.querySelectorAll('.typing-cursor'); | |
| typingElements.forEach(el => { | |
| const text = el.textContent; | |
| el.textContent = ''; | |
| let index = 0; | |
| const type = () => { | |
| if (index < text.length) { | |
| el.textContent += text[index]; | |
| index++; | |
| setTimeout(type, 50); | |
| } | |
| }; | |
| setTimeout(type, 1000); | |
| }); | |
| // Project Cards Hover Effect | |
| const projectCards = document.querySelectorAll('.card-hover'); | |
| projectCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transform = 'translateY(-8px) scale(1.02)'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transform = 'translateY(0) scale(1)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |