samomar30/pixelperfect-subscriptions
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Designer Portfolio | PixelPerfect</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 src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>13 <style>14 .custom-scrollbar::-webkit-scrollbar {15 width: 6px;16 height: 6px;17 }18 .custom-scrollbar::-webkit-scrollbar-thumb {19 background-color: rgba(0, 0, 0, 0.2);20 border-radius: 3px;21 }22 .project-card:hover .project-overlay {23 opacity: 1;24 transform: translateY(0);25 }26 .nav-link {27 position: relative;28 }29 .nav-link::after {30 content: '';31 position: absolute;32 width: 0;33 height: 2px;34 bottom: -2px;35 left: 0;36 background-color: #3b82f6;37 transition: width 0.3s ease;38 }39 .nav-link:hover::after {40 width: 100%;41 }42 #vanta-bg {43 position: fixed;44 top: 0;45 left: 0;46 width: 100%;47 height: 100%;48 z-index: -1;49 }50 .floating {51 animation: floating 6s ease-in-out infinite;52 }53 @keyframes floating {54 0% { transform: translateY(0px); }55 50% { transform: translateY(-15px); }56 100% { transform: translateY(0px); }57 }58 </style>59</head>60<body class="bg-gray-50 text-gray-800 font-sans">61 <div id="vanta-bg"></div>62 63 <!-- Navigation -->64 <nav class="fixed w-full bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm shadow-sm z-50">65 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">66 <div class="flex justify-between h-16">67 <div class="flex items-center">68 <span class="text-xl font-bold text-gray-900">Pixel<span class="text-blue-500">Perfect</span></span>69 </div>70 <div class="hidden md:flex items-center space-x-8">71 <a href="#home" class="nav-link text-gray-700 hover:text-blue-500 transition">Home</a>72 <a href="#projects" class="nav-link text-gray-700 hover:text-blue-500 transition">Projects</a>73 <a href="#about" class="nav-link text-gray-700 hover:text-blue-500 transition">About</a>74 <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500 transition">Contact</a>75 <a href="#subscribe" class="nav-link text-gray-700 hover:text-blue-500 transition">Subscribe</a>76 </div>77<div class="md:hidden flex items-center">78 <button id="menu-toggle" class="text-gray-700 hover:text-blue-500">79 <i data-feather="menu"></i>80 </button>81 </div>82 </div>83 </div>84 </nav>85 86 <!-- Mobile Menu -->87 <div id="mobile-menu" class="hidden fixed inset-0 bg-white bg-opacity-95 z-40 pt-20 px-4">88 <div class="flex flex-col space-y-6 text-center">89 <a href="#home" class="text-xl text-gray-700 hover:text-blue-500 py-2">Home</a>90 <a href="#projects" class="text-xl text-gray-700 hover:text-blue-500 py-2">Projects</a>91 <a href="#about" class="text-xl text-gray-700 hover:text-blue-500 py-2">About</a>92 <a href="#contact" class="text-xl text-gray-700 hover:text-blue-500 py-2">Contact</a>93 <a href="#subscribe" class="text-xl text-gray-700 hover:text-blue-500 py-2">Subscribe</a>94<button id="close-menu" class="absolute top-4 right-4 text-gray-700 hover:text-blue-500">95 <i data-feather="x" class="w-8 h-8"></i>96 </button>97 </div>98 </div>99 100 <!-- Hero Section -->101 <section id="home" class="min-h-screen flex items-center justify-center pt-16">102 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">103 <div class="grid md:grid-cols-2 gap-12 items-center">104 <div class="order-2 md:order-1">105 <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Hello, I'm <span class="text-blue-500">Alex</span></h1>106 <h2 class="text-2xl md:text-3xl font-medium text-gray-600 mb-8">UI/UX Designer & Digital Artist</h2>107 <p class="text-lg text-gray-600 mb-8 max-w-lg">Creating beautiful, functional designs that tell stories and solve problems. Let's make something amazing together.</p>108 <div class="flex space-x-4">109 <a href="#projects" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition shadow-md hover:shadow-lg">View My Work</a>110 <a href="#contact" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition">Contact Me</a>111 </div>112 </div>113 <div class="order-1 md:order-2 flex justify-center">114 <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">115 <div class="absolute inset-0 bg-blue-100 rounded-full opacity-20 floating"></div>116 <div class="absolute inset-4 bg-blue-200 rounded-full opacity-20 floating" style="animation-delay: 1s;"></div>117 <img src="http://static.photos/people/640x360/42" alt="Designer Portrait" class="relative w-full h-full object-cover rounded-full border-4 border-white shadow-xl floating" style="animation-delay: 0.5s;">118 </div>119 </div>120 </div>121 </div>122 </section>123 124 <!-- Projects Section -->125 <section id="projects" class="py-20 bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm">126 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">127 <div class="text-center mb-16">128 <h2 class="text-3xl md:text-4xl font-bold mb-4">My <span class="text-blue-500">Projects</span></h2>129 <p class="text-lg text-gray-600 max-w-2xl mx-auto">A selection of my recent design work across various industries and mediums.</p>130 </div>131 132 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">133 <!-- Project 1 -->134 <div class="project-card relative group overflow-hidden rounded-xl shadow-lg">135 <img src="http://static.photos/technology/640x360/101" alt="Tech Dashboard" class="w-full h-64 object-cover">136 <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 transform translate-y-4 transition-all duration-300">137 <h3 class="text-white text-xl font-bold mb-2">Tech Dashboard UI</h3>138 <p class="text-gray-300 mb-4">A modern dashboard interface for data visualization and analytics.</p>139 <div class="flex space-x-2">140 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">UI Design</span>141 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Dashboard</span>142 </div>143 </div>144 </div>145 146 <!-- Project 2 -->147 <div class="project-card relative group overflow-hidden rounded-xl shadow-lg">148 <img src="http://static.photos/minimal/640x360/202" alt="Minimal Website" class="w-full h-64 object-cover">149 <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 transform translate-y-4 transition-all duration-300">150 <h3 class="text-white text-xl font-bold mb-2">Minimal Portfolio</h3>151 <p class="text-gray-300 mb-4">A clean, minimal portfolio website for a photographer.</p>152 <div class="flex space-x-2">153 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Web Design</span>154 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Minimal</span>155 </div>156 </div>157 </div>158 159 <!-- Project 3 -->160 <div class="project-card relative group overflow-hidden rounded-xl shadow-lg">161 <img src="http://static.photos/abstract/640x360/303" alt="Brand Identity" class="w-full h-64 object-cover">162 <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 transform translate-y-4 transition-all duration-300">163 <h3 class="text-white text-xl font-bold mb-2">Brand Identity</h3>164 <p class="text-gray-300 mb-4">Complete branding for a startup coffee company.</p>165 <div class="flex space-x-2">166 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Branding</span>167 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Logo</span>168 </div>169 </div>170 </div>171 172 <!-- Project 4 -->173 <div class="project-card relative group overflow-hidden rounded-xl shadow-lg">174 <img src="http://static.photos/education/640x360/404" alt="E-Learning App" class="w-full h-64 object-cover">175 <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 transform translate-y-4 transition-all duration-300">176 <h3 class="text-white text-xl font-bold mb-2">E-Learning App</h3>177 <p class="text-gray-300 mb-4">Mobile application design for language learning.</p>178 <div class="flex space-x-2">179 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">App Design</span>180 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Mobile</span>181 </div>182 </div>183 </div>184 185 <!-- Project 5 -->186 <div class="project-card relative group overflow-hidden rounded-xl shadow-lg">187 <img src="http://static.photos/retail/640x360/505" alt="E-commerce" class="w-full h-64 object-cover">188 <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 transform translate-y-4 transition-all duration-300">189 <h3 class="text-white text-xl font-bold mb-2">E-commerce Website</h3>190 <p class="text-gray-300 mb-4">Full redesign of an online fashion store.</p>191 <div class="flex space-x-2">192 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Web Design</span>193 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">E-commerce</span>194 </div>195 </div>196 </div>197 198 <!-- Project 6 -->199 <div class="project-card relative group overflow-hidden rounded-xl shadow-lg">200 <img src="http://static.photos/office/640x360/606" alt="Workspace App" class="w-full h-64 object-cover">201 <div class="project-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-end p-6 opacity-0 transform translate-y-4 transition-all duration-300">202 <h3 class="text-white text-xl font-bold mb-2">Workspace App</h3>203 <p class="text-gray-300 mb-4">Collaboration tool for remote teams.</p>204 <div class="flex space-x-2">205 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">UI/UX</span>206 <span class="px-3 py-1 bg-blue-500 bg-opacity-30 text-blue-100 text-sm rounded-full">Product</span>207 </div>208 </div>209 </div>210 </div>211 <div class="text-center mt-12">212 <a href="#" class="inline-flex items-center px-6 py-3 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition mr-4">213 View All Projects214 <i data-feather="arrow-right" class="ml-2"></i>215 </a>216 <a href="#subscribe" class="inline-flex items-center px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">217 Subscribe218 <i data-feather="mail" class="ml-2"></i>219 </a>220 </div>221</div>222 </section>223 224 <!-- About Section -->225 <section id="about" class="py-20 bg-gray-50">226 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">227 <div class="grid md:grid-cols-2 gap-12 items-center">228 <div class="order-1">229 <img src="http://static.photos/workspace/640x360/707" alt="Designer at Work" class="w-full rounded-xl shadow-lg">230 </div>231 <div class="order-2">232 <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="text-blue-500">Me</span></h2>233 <p class="text-lg text-gray-600 mb-6">I'm a passionate designer with over 7 years of experience creating digital experiences that are both beautiful and functional.</p>234 <p class="text-lg text-gray-600 mb-8">My approach combines aesthetic sensibility with user-centered design principles to create solutions that not only look great but also solve real problems for real people.</p>235 236 <div class="mb-8">237 <h3 class="text-xl font-semibold mb-4">My Skills</h3>238 <div class="flex flex-wrap gap-3">239 <span class="px-4 py-2 bg-gray-200 rounded-full">UI/UX Design</span>240 <span class="px-4 py-2 bg-gray-200 rounded-full">Brand Identity</span>241 <span class="px-4 py-2 bg-gray-200 rounded-full">Web Design</span>242 <span class="px-4 py-2 bg-gray-200 rounded-full">Illustration</span>243 <span class="px-4 py-2 bg-gray-200 rounded-full">Prototyping</span>244 <span class="px-4 py-2 bg-gray-200 rounded-full">User Research</span>245 </div>246 </div>247 248 <a href="#" class="inline-flex items-center px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition shadow-md hover:shadow-lg">249 Download Resume250 <i data-feather="download" class="ml-2"></i>251 </a>252 </div>253 </div>254 </div>255 </section>256 257 <!-- Contact Section -->258 <section id="contact" class="py-20 bg-white bg-opacity-90 backdrop-filter backdrop-blur-sm">259 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">260 <div class="text-center mb-16">261 <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-blue-500">Touch</span></h2>262 <p class="text-lg text-gray-600 max-w-2xl mx-auto">Have a project in mind or want to collaborate? I'd love to hear from you!</p>263 </div>264 265 <div class="grid md:grid-cols-2 gap-12">266 <div>267 <form class="space-y-6">268 <div>269 <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>270 <input type="text" id="name" name="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">271 </div>272 <div>273 <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>274 <input type="email" id="email" name="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">275 </div>276 <div>277 <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label>278 <input type="text" id="subject" name="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">279 </div>280 <div>281 <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label>282 <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"></textarea>283 </div>284 <button type="submit" class="w-full px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition shadow-md hover:shadow-lg">285 Send Message286 <i data-feather="send" class="ml-2 inline"></i>287 </button>288 </form>289 </div>290 291 <div class="space-y-8">292 <div>293 <h3 class="text-xl font-semibold mb-4">Contact Information</h3>294 <div class="space-y-4">295 <div class="flex items-start">296 <div class="flex-shrink-0 mt-1">297 <i data-feather="mail" class="text-blue-500"></i>298 </div>299 <div class="ml-3">300 <p class="text-sm text-gray-500">Email</p>301 <p class="text-gray-700">hello@pixelperfect.design</p>302 </div>303 </div>304 <div class="flex items-start">305 <div class="flex-shrink-0 mt-1">306 <i data-feather="phone" class="text-blue-500"></i>307 </div>308 <div class="ml-3">309 <p class="text-sm text-gray-500">Phone</p>310 <p class="text-gray-700">+1 (555) 123-4567</p>311 </div>312 </div>313 <div class="flex items-start">314 <div class="flex-shrink-0 mt-1">315 <i data-feather="map-pin" class="text-blue-500"></i>316 </div>317 <div class="ml-3">318 <p class="text-sm text-gray-500">Location</p>319 <p class="text-gray-700">San Francisco, CA</p>320 </div>321 </div>322 </div>323 </div>324 325 <div>326 <h3 class="text-xl font-semibold mb-4">Follow Me</h3>327 <div class="flex space-x-4">328 <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-500 hover:text-white transition">329 <i data-feather="dribbble"></i>330 </a>331 <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-500 hover:text-white transition">332 <i data-feather="twitter"></i>333 </a>334 <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-500 hover:text-white transition">335 <i data-feather="instagram"></i>336 </a>337 <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-500 hover:text-white transition">338 <i data-feather="linkedin"></i>339 </a>340 <a href="#" class="w-10 h-10 flex items-center justify-center bg-gray-100 rounded-full hover:bg-blue-500 hover:text-white transition">341 <i data-feather="github"></i>342 </a>343 </div>344 </div>345 </div>346 </div>347 </div>348 </section>349 350 <!-- Subscription Section -->351 <section class="py-16 bg-blue-50">352 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">353 <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>354 <p class="text-lg text-gray-600 mb-8">Subscribe to my newsletter for design tips, project updates, and exclusive content.</p>355 <form class="max-w-md mx-auto flex">356 <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">357 <button type="submit" class="px-6 py-3 bg-blue-500 text-white rounded-r-lg hover:bg-blue-600 transition">358 Subscribe359 </button>360 </form>361 </div>362 </section>363 364 <!-- Footer -->365<footer class="py-8 bg-gray-900 text-white">366 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">367 <div class="flex flex-col md:flex-row justify-between items-center">368 <div class="mb-4 md:mb-0">369 <span class="text-xl font-bold">Pixel<span class="text-blue-400">Perfect</span></span>370 </div>371 <div class="text-sm text-gray-400">372 <p>© 2023 PixelPerfect. All rights reserved.</p>373 </div>374 <div class="mt-4 md:mt-0">375 <a href="#home" class="inline-flex items-center text-gray-400 hover:text-white transition">376 Back to top377 <i data-feather="arrow-up" class="ml-2"></i>378 </a>379 </div>380 </div>381 </div>382 </footer>383 384 <script>385 // Initialize Vanta.js background386 VANTA.NET({387 el: "#vanta-bg",388 mouseControls: true,389 touchControls: true,390 gyroControls: false,391 minHeight: 200.00,392 minWidth: 200.00,393 scale: 1.00,394 scaleMobile: 1.00,395 color: 0x3b82f6,396 backgroundColor: 0xf8fafc,397 points: 10.00,398 maxDistance: 20.00,399 spacing: 15.00400 });401 402 // Mobile menu toggle403 const menuToggle = document.getElementById('menu-toggle');404 const closeMenu = document.getElementById('close-menu');405 const mobileMenu = document.getElementById('mobile-menu');406 407 menuToggle.addEventListener('click', () => {408 mobileMenu.classList.remove('hidden');409 mobileMenu.classList.add('block');410 });411 412 closeMenu.addEventListener('click', () => {413 mobileMenu.classList.remove('block');414 mobileMenu.classList.add('hidden');415 });416 417 // Smooth scrolling for anchor links418 document.querySelectorAll('a[href^="#"]').forEach(anchor => {419 anchor.addEventListener('click', function (e) {420 e.preventDefault();421 422 const targetId = this.getAttribute('href');423 if (targetId === '#') return;424 425 const targetElement = document.querySelector(targetId);426 if (targetElement) {427 window.scrollTo({428 top: targetElement.offsetTop - 80,429 behavior: 'smooth'430 });431 432 // Close mobile menu if open433 if (!mobileMenu.classList.contains('hidden')) {434 mobileMenu.classList.remove('block');435 mobileMenu.classList.add('hidden');436 }437 }438 });439 });440 441 // Scroll reveal animation442 const animateOnScroll = () => {443 const elements = document.querySelectorAll('.project-card, .floating');444 elements.forEach(element => {445 const elementPosition = element.getBoundingClientRect().top;446 const screenPosition = window.innerHeight / 1.2;447 448 if (elementPosition < screenPosition) {449 element.classList.add('animate-fadeIn');450 }451 });452 };453 454 window.addEventListener('scroll', animateOnScroll);455 window.addEventListener('load', animateOnScroll);456 457 // Initialize feather icons458 feather.replace();459 </script>460</body>461</html>462