Spaces:
Running
Running
| <html lang="en" class="scroll-smooth" style="image-rendering: pixelated;"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CodeVintage | Retro Developer Portfolio</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| vintage: { | |
| 100: '#FFF1E6', | |
| 200: '#FDE2E4', | |
| 300: '#FAD2E1', | |
| 400: '#E2ECE9', | |
| 500: '#BEE1E6', | |
| 600: '#9DB4C0', | |
| 700: '#5C6B73', | |
| 800: '#253237', | |
| 900: '#1B2021', | |
| }, | |
| retro: { | |
| 100: '#F7F0F5', | |
| 200: '#DECBB7', | |
| 300: '#AC7B84', | |
| 400: '#8F5C5C', | |
| 500: '#5D2E46', | |
| 600: '#4A2545', | |
| 700: '#3A1E3B', | |
| 800: '#2A1629', | |
| 900: '#1A0D1A', | |
| } | |
| }, | |
| fontFamily: { | |
| vintage: ['"Courier New"', 'monospace'], | |
| retro: ['"Press Start 2P"', 'cursive'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-[#1a1a1a] text-[#e0e0e0] font-mono min-h-screen" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzIyMjIyMiIvPjwvc3ZnPg==');"> | |
| <custom-navbar></custom-navbar> | |
| <script src="components/navbar.js"></script> | |
| <main class="container mx-auto px-4 py-12 md:py-24" style="max-width: 1200px;"> | |
| <!-- Hero Section --> | |
| <section class="mb-24"> | |
| <div class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="md:w-1/2 relative"> | |
| <div class="absolute -top-4 -left-4 w-full h-full border-4 border-[#4a8fe7] z-0"></div> | |
| <div class="relative z-10 w-full h-full"> | |
| <img src="http://static.photos/technology/200x200/42" alt="Pixel Developer" class="w-full h-auto border-4 border-[#3061b3] object-cover" style="image-rendering: pixelated;"> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 mt-8 md:mt-0"> | |
| <h1 class="text-4xl md:text-5xl mb-6 text-[#4a8fe7] font-bold" style="text-shadow: 4px 4px 0 #3061b3;">HELLO,</h1> | |
| <h1 class="text-4xl md:text-5xl mb-6 text-[#4a8fe7] font-bold" style="text-shadow: 4px 4px 0 #3061b3;">I'M PIXEL_DEV</h1> | |
| <p class="text-lg mb-8 leading-relaxed text-[#e0e0e0]">A <span class="text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">blocky-styled</span> full-stack developer crafting digital experiences with a pixel twist. Specializing in creating unique, 8-bit inspired interfaces with modern functionality.</p> | |
| <div class="flex gap-4"> | |
| <a href="#projects" class="px-6 py-3 bg-[#4a8fe7] hover:bg-[#3a7dd7] text-[#e0e0e0] font-bold transition-all duration-300 border-4 border-[#3061b3] hover:border-[#2050a3] flex items-center gap-2" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <i data-feather="code"></i> VIEW WORK | |
| </a> | |
| <a href="#contact" class="px-6 py-3 bg-transparent hover:bg-[#222222] text-[#4a8fe7] font-bold transition-all duration-300 border-4 border-[#3061b3] hover:border-[#4a8fe7] flex items-center gap-2" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <i data-feather="mail"></i> CONTACT | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="mb-24"> | |
| <div class="relative"> | |
| <h2 class="text-3xl md:text-5xl mb-12 text-[#4a8fe7] font-bold relative inline-block" style="text-shadow: 4px 4px 0 #3061b3;"> | |
| <span class="absolute -bottom-2 left-0 w-full h-2 bg-[#3061b3]"></span> | |
| ABOUT_ME | |
| </h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/3 bg-[#222222] p-6 border-l-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <h3 class="text-2xl mb-4 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">THE_STORY</h3> | |
| <p class="mb-6 text-[#e0e0e0]">Started coding on an old brick-like computer. Fell in love with the digital world and never looked back.</p> | |
| <p class="text-[#e0e0e0]">Now I build blocky interfaces with modern web technologies.</p> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">DEVELOPMENT</h3> | |
| <p class="text-[#e0e0e0]">Block-by-block full-stack development creating pixel-perfect experiences.</p> | |
| </div> | |
| <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">DESIGN</h3> | |
| <p class="text-[#e0e0e0]">8-bit inspired designs with modern UX principles.</p> | |
| </div> | |
| <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">TECH</h3> | |
| <p class="text-[#e0e0e0]">Modern stack with 8-bit inspiration: React, Node.js, WebGL, and more.</p> | |
| </div> | |
| <div class="bg-[#222222] p-6 border-t-4 border-[#3061b3]" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| <div class="w-8 h-8 bg-[#4a8fe7] mb-4" style="box-shadow: 2px 2px 0 #3061b3;"></div> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">PASSION</h3> | |
| <p class="text-[#e0e0e0]">Building digital worlds that feel like classic video games.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="mb-24"> | |
| <h2 class="text-3xl md:text-5xl mb-12 text-[#4a8fe7] font-bold relative inline-block" style="text-shadow: 4px 4px 0 #3061b3;"> | |
| <span class="absolute -bottom-2 left-0 w-full h-2 bg-[#3061b3]"></span> | |
| PROJECTS | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project 1 --> | |
| <div class="relative overflow-hidden border-4 border-[#3061b3] hover:border-[#4a8fe7] transition-all duration-300" style="box-shadow: 6px 6px 0 #3061b3;"> | |
| <div class="absolute inset-0 bg-[#222222] bg-opacity-70 hover:opacity-0 transition-opacity duration-500 z-10"></div> | |
| <img src="http://static.photos/gaming/320x240/1" alt="8-bit Game" class="w-full h-64 object-cover" style="image-rendering: pixelated;"> | |
| <div class="bg-[#222222] p-4"> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">8-BIT GAME ENGINE</h3> | |
| <p class="text-[#e0e0e0] mb-4">A retro game engine built with modern web technologies.</p> | |
| <a href="#" class="text-[#4a8fe7] hover:text-[#3a7dd7] font-bold flex items-center gap-1"> | |
| VIEW_PROJECT <i data-feather="arrow-right" width="16" height="16"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="relative overflow-hidden border-4 border-[#3061b3] hover:border-[#4a8fe7] transition-all duration-300" style="box-shadow: 6px 6px 0 #3061b3;"> | |
| <div class="absolute inset-0 bg-[#222222] bg-opacity-70 hover:opacity-0 transition-opacity duration-500 z-10"></div> | |
| <img src="http://static.photos/technology/320x240/2" alt="Pixel Art Editor" class="w-full h-64 object-cover" style="image-rendering: pixelated;"> | |
| <div class="bg-[#222222] p-4"> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">PIXEL_ART_EDITOR</h3> | |
| <p class="text-[#e0e0e0] mb-4">In-browser pixel art creation tool with 8-bit palette.</p> | |
| <a href="#" class="text-[#4a8fe7] hover:text-[#3a7dd7] font-bold flex items-center gap-1"> | |
| VIEW_PROJECT <i data-feather="arrow-right" width="16" height="16"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="relative overflow-hidden border-4 border-[#3061b3] hover:border-[#4a8fe7] transition-all duration-300" style="box-shadow: 6px 6px 0 #3061b3;"> | |
| <div class="absolute inset-0 bg-[#222222] bg-opacity-70 hover:opacity-0 transition-opacity duration-500 z-10"></div> | |
| <img src="http://static.photos/gaming/320x240/3" alt="Block World" class="w-full h-64 object-cover" style="image-rendering: pixelated;"> | |
| <div class="bg-[#222222] p-4"> | |
| <h3 class="text-xl mb-2 text-[#4a8fe7] font-bold" style="text-shadow: 2px 2px 0 #3061b3;">BLOCK_WORLD</h3> | |
| <p class="text-[#e0e0e0] mb-4">Procedurally generated 3D world with voxel graphics.</p> | |
| <a href="#" class="text-[#4a8fe7] hover:text-[#3a7dd7] font-bold flex items-center gap-1"> | |
| VIEW_PROJECT <i data-feather="arrow-right" width="16" height="16"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="mb-24"> | |
| <h2 class="text-3xl md:text-5xl mb-12 text-[#4a8fe7] font-bold relative inline-block" style="text-shadow: 4px 4px 0 #3061b3;"> | |
| <span class="absolute -bottom-2 left-0 w-full h-2 bg-[#3061b3]"></span> | |
| GET_IN_TOUCH | |
| </h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <p class="text-xl mb-8 text-[#e0e0e0]">Have a project that needs pixel perfect execution? Let's talk!</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-[#3061b3] flex items-center justify-center" style="box-shadow: 2px 2px 0 #1a4a8f;"> | |
| <i data-feather="mail" class="text-[#e0e0e0]"></i> | |
| </div> | |
| <span class="text-[#e0e0e0]">hello@pixelvault.dev</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-[#3061b3] flex items-center justify-center" style="box-shadow: 2px 2px 0 #1a4a8f;"> | |
| <i data-feather="phone" class="text-[#e0e0e0]"></i> | |
| </div> | |
| <span class="text-[#e0e0e0]">+1 (555) PIX-ELDEV</span> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 bg-[#3061b3] flex items-center justify-center" style="box-shadow: 2px 2px 0 #1a4a8f;"> | |
| <i data-feather="map-pin" class="text-[#e0e0e0]"></i> | |
| </div> | |
| <span class="text-[#e0e0e0]">Block #42, Pixel Valley</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="space-y-6 border-4 border-[#3061b3] p-6" style="box-shadow: 6px 6px 0 #3061b3;"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="name" class="block text-[#e0e0e0] mb-2 font-bold">NAME</label> | |
| <input type="text" id="name" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-[#e0e0e0] mb-2 font-bold">EMAIL</label> | |
| <input type="email" id="email" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-[#e0e0e0] mb-2 font-bold">SUBJECT</label> | |
| <input type="text" id="subject" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-[#e0e0e0] mb-2 font-bold">MESSAGE</label> | |
| <textarea id="message" rows="4" class="w-full bg-[#222222] border-4 border-[#3061b3] focus:border-[#4a8fe7] outline-none py-2 px-3 text-[#e0e0e0] transition-all duration-300" style="box-shadow: 2px 2px 0 #3061b3;"></textarea> | |
| </div> | |
| <button type="submit" class="px-6 py-3 bg-[#4a8fe7] hover:bg-[#3a7dd7] text-[#e0e0e0] font-bold transition-all duration-300 border-4 border-[#3061b3] hover:border-[#2050a3] flex items-center gap-2" style="box-shadow: 4px 4px 0 #3061b3;"> | |
| SEND MESSAGE | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/footer.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |