Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Usman Nasir - Full Stack Developer</title> | |
| <meta name="description" content="Full Stack Developer Usman Nasir crafts modern web applications with React, Next.js and Node.js. Specializing in responsive design, performance optimization and scalable architecture for exceptional digital experiences."> | |
| <link rel="stylesheet" href="style.css"> | |
| <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> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="font-leagueSpartan antialiased bg-black text-white"> | |
| <div class="relative overflow-hidden"> | |
| <!-- Grid Background --> | |
| <div class="absolute inset-0 dark:bg-[#030303]"> | |
| <div class="absolute inset-0" style="background-image:linear-gradient(to right, #1a1a1a 1px, transparent 1px), linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);background-size:40px 40px;opacity:0.5"></div> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div> | |
| <!-- Header --> | |
| <div class="relative"> | |
| <div class="px-5 py-5 pt-8 flex justify-between items-center overflow-hidden max-w-screen container mx-auto"> | |
| <a href="/" class="text-white font-bold text-xl flex gap-3"> | |
| <i data-feather="terminal" class="scale-x-[-1]"></i> | |
| Dev By Usman | |
| </a> | |
| <div class="border rounded-full cursor-pointer flex items-center justify-end relative overflow-hidden z-[99]"> | |
| <div class="text-white absolute bottom-12 right-12 text-lg">menu</div> | |
| <button class="relative h-12 w-12 rounded-full bg-white/0 transition-colors" aria-label="Open menu" aria-expanded="false"> | |
| <span class="absolute h-1 w-6 bg-white rounded-full" style="left:50%;top:35%;transform:translateX(-50%) translateY(-50%)"></span> | |
| <span class="absolute h-1 w-6 bg-white rounded-full" style="left:50%;top:50%;transform:translateX(-50%) translateY(-50%)"></span> | |
| <span class="absolute h-1 w-3 bg-white rounded-full" style="bottom:35%;left:calc(50% + 5px);transform:translateX(-50%) translateY(50%)"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <div class="container mx-auto px-0 md:px-4 py-6 overflow-hidden"> | |
| <div class="main-bg md:rounded-2xl shadow-xl border border-zinc-800/20"> | |
| <div class="relative overflow-hidden rounded-t-2xl bg-gradient-to-r from-emerald-500/5 via-green-500/5 to-emerald-500/5"> | |
| <div class="relative px-6 md:px-10 py-8"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="text-center md:text-left space-y-3"> | |
| <div class="flex flex-col md:flex-row items-center md:items-baseline gap-2 md:gap-3"> | |
| <h2 class="text-base md:text-lg font-light text-gray-400">Hi, I am</h2> | |
| <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Usman Nasir</h1> | |
| <div class="text-2xl md:text-3xl animate-wave max-md:hidden">👋</div> | |
| </div> | |
| <p class="text-gray-400 text-sm md:text-base max-w-2xl"> | |
| Full Stack Developer crafting exceptional digital experiences with | |
| <span class="text-emerald-400 ml-1">modern technologies</span> | |
| </p> | |
| </div> | |
| <a href="/contact"> | |
| <div class="mt-6 md:mt-0 flex items-center gap-3"> | |
| <span class="px-4 py-1.5 rounded-full text-xs md:text-sm bg-zinc-800/50 border border-zinc-700/50 text-gray-400 hover:border-emerald-500/50 transition-colors flex items-center gap-2"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span> | |
| </span> | |
| Open for collaborations | |
| </span> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content Sections --> | |
| <div class="p-4 md:p-10"> | |
| <div class="lg:flex justify-center gap-6"> | |
| <!-- Profile Image --> | |
| <div class="md:w-[425px] mx-auto h-auto relative"> | |
| <div class="relative"> | |
| <img src="http://static.photos/technology/500x500/42" alt="Usman Nasir" loading="eager" class="object-cover rounded-xl cursor-pointer testimonial-image h-auto mt-0 grayscale-[10] hover:grayscale-0 transition-all duration-300"> | |
| <div class="flex items-center justify-center absolute -bottom-2 md:-bottom-[1px] -right-6 z-10"> | |
| <div class="relative w-24 h-24 flex items-center justify-center"> | |
| <svg class="absolute w-full h-full animate-spin-slow" viewBox="0 0 100 100"> | |
| <defs><path id="circle" d="M 50,50 m -37,0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0"></path></defs> | |
| <text class="fill-red-600 text-[8px] uppercase tracking-widest"> | |
| <textPath href="#circle" class="fill-red-600">• M. Usman Nasir • Lets build something amazing •</textPath> | |
| </text> | |
| </svg> | |
| <button class="relative z-10 w-12 h-12 rounded-full bg-transparent flex items-center justify-center border border-white/20 hover:bg-white/10 transition-colors" aria-label="Next track"> | |
| <i data-feather="terminal" class="w-6 h-6 text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="/contact"> | |
| <button style="--spread:90deg;--shimmer-color:#ffffff;--radius:14px;--speed:3s;--cut:0.05em;--bg:#18181b" class="group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px uppercase bg-zinc-900 py-5 w-full"> | |
| <div class="-z-30 blur-[2px] absolute inset-0 overflow-visible [container-type:size]"> | |
| <div class="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]"> | |
| <div class="animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"></div> | |
| </div> | |
| </div> | |
| Let's Work Together | |
| <div class="absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]"></div> | |
| </button> | |
| </a> | |
| </div> | |
| <!-- About Section --> | |
| <div class="rounded-xl border text-card-foreground w-full bg-zinc-900 border-zinc-800 overflow-hidden shadow-2xl max-lg:mt-10 h-auto"> | |
| <div class="p-5 md:p-8 flex flex-col justify-between h-full"> | |
| <p class="md:text-xl text-gray-300 max-md:mb-8 leading-relaxed" style="line-height:40px"> | |
| A<span class="border-b border-blue-400 text-blue-400 px-1 py-1 mx-2 text-nowrap">Software Developer</span> | |
| who creates seamless, scalable, and visually stunning web and mobile applications. With expertise in | |
| <span class="border border-green-400 text-green-400 px-2 py-2 rounded mx-2">React.js</span>, | |
| <span class="border border-green-400 text-green-400 px-2 py-2 rounded mx-2">Next.js</span>, | |
| <span class="border border-green-400 text-green-400 px-2 py-2 rounded mx-2">Node.js</span> | |
| and alot<span class="border-b border-green-400 text-green-400 px-1 py-1 mx-2">more</span>, | |
| I blend functionality with aesthetics to deliver impactful solutions. Known for my creative | |
| <span class="border-b border-blue-400 text-blue-400 px-1 py-2 mx-2">problem-solving</span>, | |
| I bridge the gap between frontend and backend with precision, ensuring every detail contributes to an exceptional user experience. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Skills Card --> | |
| <div class="p-4 rounded-lg bg-zinc-800 hover:scale-105 transition-transform"> | |
| <div class="flex items-center mb-3"> | |
| <i data-feather="terminal" class="w-5 h-5 mr-2 text-purple-400"></i> | |
| <div class="text-lg font-semibold text-purple-400">Skills</div> | |
| </div> | |
| <p class="text-gray-300">Building responsive UIs with React, Next.js, and React Native.</p> | |
| </div> | |
| <!-- Hobbies Card --> | |
| <div class="p-4 rounded-lg bg-zinc-800 hover:scale-105 transition-transform"> | |
| <div class="flex items-center mb-3"> | |
| <i data-feather="gamepad" class="w-5 h-5 mr-2 text-green-500"></i> | |
| <div class="text-lg font-semibold text-green-500">Hobbies</div> | |
| </div> | |
| <p class="text-gray-300">Dominating in Tekken or scoring goals in FIFA. ⚽🎮</p> | |
| </div> | |
| <!-- Goal Card --> | |
| <div class="p-4 rounded-lg bg-zinc-800 hover:scale-105 transition-transform"> | |
| <div class="flex items-center mb-3"> | |
| <i data-feather="rocket" class="w-5 h-5 mr-2 text-blue-400"></i> | |
| <div class="text-lg font-semibold text-blue-400">Goal</div> | |
| </div> | |
| <p class="text-gray-300">Let's team up and create something amazing together. 🚀</p> | |
| </div> | |
| </div> | |
| <p class="text-lg text-gray-300 italic mt-6"> | |
| P.S. I'm not really<span class="bg-yellow-600 px-2 py-1 rounded mx-2 text-black">Batman</span>, | |
| but I might be the<span class="bg-orange-600 px-2 py-1 rounded mx-2 text-black">hero</span> | |
| your project needs! 🦸♂️ | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills Sections --> | |
| <div class="grid grid-cols-2 gap-5 md:gap-8 mt-8"> | |
| <!-- Frontend Skills --> | |
| <div class="rounded-xl border text-card-foreground w-full bg-zinc-900 border-zinc-800 overflow-hidden shadow-2xl mt-5 md:mt-8 col-span-2 md:col-span-1"> | |
| <div class="md:px-8 p-4 py-5 flex"> | |
| <div class="max-lg:hidden text-2xl text-white font-bold flex items-center gap-5">Frontend Skills</div> | |
| <div class="w-full grid grid-cols-5 gap-2 md:gap-5"> | |
| <!-- React --> | |
| <div class="border border-neutral-600/40 p-3 rounded-lg"> | |
| <svg viewBox="0 0 128 128"><circle cx="64" cy="64" r="64"></circle><path fill="url(#a)" d="M106.317 112.014 49.167 38.4H38.4v51.179h8.614v-40.24l52.54 67.884a64.216 64.216 0 0 0 6.763-5.209z"></path><path fill="url(#b)" d="M81.778 38.4h8.533v51.2h-8.533z"></path><defs><linearGradient id="a" x1="109" x2="144.5" y1="116.5" y2="160.5" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0"></stop></linearGradient><linearGradient id="b" x1="121" x2="120.799" y1="54" y2="106.875" gradientTransform="scale(.71111)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0"></stop></linearGradient></defs></svg> | |
| </div> | |
| <!-- Tailwind --> | |
| <div class="border border-neutral-600/40 p-3 rounded-lg"> | |
| <svg viewBox="0 0 128 128"><path d="M64.004 25.602c-17.067 0-27.73 8.53-32 25.597 6.398-8.531 13.867-11.73 22.398-9.597 4.871 1.214 8.352 4.746 12.207 8.66C72.883 56.629 80.145 64 96.004 64c17.066 0 27.73-8.531 32-25.602-6.399 8.536-13.867 11.735-22.399 9.602-4.87-1.215-8.347-4.746-12.207-8.66-6.27-6.367-13.53-13.738-29.394-13.738zM32.004 64c-17.066 0-27.73 8.531-32 25.602C6.402 81.066 13.87 77.867 22.402 80c4.871 1.215 8.352 4.746 12.207 8.66 6.274 6.367 13.536 13.738 29.395 13.738 17.066 0 27.73-8.53 32-25.597-6.399 8.531-13.867 11.73-22.399 9.597-4.87-1.214-8.347-4.746-12.207-8.66C55.128 71.371 47.868 64 32.004 64zm0 0" fill="#38bdf8"></path></svg> | |
| </div> | |
| <!-- Other frontend icons would go here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Backend Skills --> | |
| <div class="rounded-xl border text-card-foreground w-full bg-zinc-900 border-zinc-800 overflow-hidden shadow-2xl col-span-2 md:mt-8 md:col-span-1"> | |
| <div class="md:px-8 p-4 py-5"> | |
| <div class="gap-5 flex items-center flex-row-reverse"> | |
| <div class="max-lg:hidden text-2xl text-white font-bold flex items-center gap-5">Backend Skills</div> | |
| <div class="w-full grid grid-cols-5 gap-2 md:gap-5"> | |
| <!-- Node.js --> | |
| <div class="border border-neutral-600/40 p-3 rounded-lg"> | |
| <svg viewBox="0 0 128 128"><path fill="#5fa04e" d="M86.072 24.664a.71.71 0 0 0-.351.09.755.755 0 0 0-.375.637v18.93a.564.564 0 0 1-.264.464.549.549 0 0 1-.52 0l-3.066-1.773a1.486 1.486 0 0 0-1.478 0L67.75 50.146a1.48 1.48 0 0 | |
| <!-- Career Journey Section --> | |
| <section class="career-journey"> | |
| <div class="container mx-auto px-4"> | |
| <h2>My Career Journey</h2> | |
| <div class="timeline"> | |
| <!-- Timeline Item 1 --> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">2022 - Present</div> | |
| <h3 class="timeline-title">Senior Full Stack Developer</h3> | |
| <div class="timeline-company">Tech Innovations Inc.</div> | |
| <p class="timeline-description"> | |
| Leading development of enterprise web applications using React, Node.js and microservices architecture. | |
| Mentoring junior developers and implementing CI/CD pipelines. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 2 --> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">2019 - 2022</div> | |
| <h3 class="timeline-title">Frontend Developer</h3> | |
| <div class="timeline-company">Digital Solutions Co.</div> | |
| <p class="timeline-description"> | |
| Developed responsive user interfaces with React and TypeScript. | |
| Collaborated with UX designers to implement pixel-perfect designs. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Timeline Item 3 --> | |
| <div class="timeline-item"> | |
| <div class="timeline-content"> | |
| <div class="timeline-date">2017 - 2019</div> | |
| <h3 class="timeline-title">Junior Web Developer</h3> | |
| <div class="timeline-company">WebStart Agency</div> | |
| <p class="timeline-description"> | |
| Built and maintained WordPress sites and custom themes. | |
| Assisted in developing JavaScript applications and APIs. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |