Beingrt/codestream-devport
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>CodeFlix | Web Developer Portfolio</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <script>13 tailwind.config = {14 theme: {15 extend: {16 colors: {17 primary: '#E50914',18 secondary: '#B81D24',19 dark: '#141414',20 light: '#F5F5F1'21 }22 }23 }24 }25 </script>26 <style>27 @import url('https://fonts.googleapis.com/css2?family=Netflix+Sans:wght@300;400;700;900&display=swap');28 body {29 font-family: 'Netflix Sans', sans-serif;30 background-color: #141414;31 color: #F5F5F1;32 }33 .project-card {34 transition: all 0.3s ease;35 transform-origin: center left;36 }37 .project-card:hover {38 transform: scale(1.2);39 z-index: 10;40 }41 .scroll-container {42 scrollbar-width: none;43 }44 .scroll-container::-webkit-scrollbar {45 display: none;46 }47 .skill-tag:hover .skill-tooltip {48 opacity: 1;49 visibility: visible;50 }51 </style>52</head>53<body class="bg-dark text-light">54 <!-- Navigation -->55 <nav class="fixed w-full z-50 bg-gradient-to-b from-dark to-transparent px-6 py-4 flex justify-between items-center">56 <div class="flex items-center space-x-8">57 <a href="#" class="text-primary font-bold text-3xl">CODEFLIX</a>58 <div class="hidden md:flex space-x-6">59 <a href="#" class="hover:text-primary transition">Home</a>60 <a href="#work" class="hover:text-primary transition">My Work</a>61 <a href="#skills" class="hover:text-primary transition">Skills</a>62 <a href="#about" class="hover:text-primary transition">About</a>63 </div>64 </div>65 <div class="flex items-center space-x-4">66 <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-800 transition">67 <i data-feather="moon"></i>68 </button>69 <button class="bg-primary px-4 py-2 rounded hover:bg-secondary transition">70 Contact Me71 </button>72 </div>73 </nav>74 75 <!-- Hero Section -->76 <section class="relative h-screen flex items-center justify-center overflow-hidden">77 <div id="vanta-bg" class="absolute inset-0 z-0"></div>78 <div class="absolute inset-0 bg-gradient-to-t from-dark via-transparent to-transparent z-10"></div>79 <div class="relative z-20 px-6 text-center max-w-4xl">80 <h1 class="text-5xl md:text-7xl font-bold mb-6">Streaming <span class="text-primary">Code</span> Excellence</h1>81 <p class="text-xl md:text-2xl mb-8">Full-stack developer with a passion for creating immersive digital experiences. Binge-worthy code, always in production.</p>82 <div class="flex justify-center space-x-4">83 <button class="bg-primary px-8 py-3 rounded-lg text-lg font-bold hover:bg-secondary transition flex items-center">84 <i data-feather="play" class="mr-2"></i> Play Reel85 </button>86 <button class="bg-gray-800 bg-opacity-70 px-8 py-3 rounded-lg text-lg font-bold hover:bg-opacity-100 transition flex items-center">87 <i data-feather="info" class="mr-2"></i> More Info88 </button>89 </div>90 </div>91 </section>92 93 <!-- Featured Project -->94 <section class="py-16 px-6 relative">95 <div class="max-w-7xl mx-auto">96 <h2 class="text-2xl font-bold mb-6">Featured Project</h2>97 <div class="relative h-96 rounded-xl overflow-hidden">98 <div class="absolute inset-0 bg-gradient-to-r from-dark via-transparent to-transparent z-10"></div>99 <img src="http://static.photos/technology/1200x630/42" alt="Featured Project" class="w-full h-full object-cover">100 <div class="absolute bottom-0 left-0 z-20 p-8 max-w-2xl">101 <h3 class="text-4xl font-bold mb-2">Interactive Dashboard</h3>102 <p class="text-lg mb-4">A real-time analytics dashboard with React, D3.js, and Node.js backend. Features dynamic data visualization and custom reporting tools.</p>103 <div class="flex space-x-4">104 <button class="bg-primary px-6 py-2 rounded hover:bg-secondary transition flex items-center">105 <i data-feather="play" class="mr-2"></i> View Demo106 </button>107 <button class="bg-gray-800 bg-opacity-70 px-6 py-2 rounded hover:bg-opacity-100 transition flex items-center">108 <i data-feather="github" class="mr-2"></i> View Code109 </button>110 </div>111 </div>112 </div>113 </div>114 </section>115 116 <!-- My Work Section -->117 <section id="work" class="py-16 px-6">118 <div class="max-w-7xl mx-auto">119 <h2 class="text-2xl font-bold mb-6">My Work</h2>120 121 <!-- Projects Row 1 -->122 <div class="mb-12">123 <h3 class="text-xl font-semibold mb-4">Web Applications</h3>124 <div class="relative">125 <div class="scroll-container flex space-x-4 overflow-x-auto py-4 px-2">126 <div class="project-card flex-shrink-0 w-64 h-36 rounded-lg overflow-hidden relative group">127 <img src="http://static.photos/technology/640x360/<<<<<<< PROJECT_NAME_START CodeFlix - Developer's Streaming Portfolio >>>>>>> PROJECT_NAME_END128</body>129</html>