Simonov41/cozycode-npc-developer
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>Irtideath | NPC Developer</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 darkMode: 'class',13 theme: {14 extend: {15 colors: {16 cozy: {17 100: '#f3f4f6',18 200: '#e5e7eb',19 300: '#d1d5db',20 400: '#9ca3af',21 500: '#6b7280',22 600: '#4b5563',23 700: '#374151',24 800: '#1f2937',25 900: '#111827',26 }27 }28 }29 }30 }31 </script>32 <style>33 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');34 body {35 font-family: 'Space Grotesk', sans-serif;36 scroll-behavior: smooth;37 }38 .gradient-text {39 background-clip: text;40 -webkit-background-clip: text;41 color: transparent;42 background-image: linear-gradient(90deg, #6b7280, #9ca3af);43 }44 .skill-icon {45 transition: all 0.3s ease;46 }47 .skill-icon:hover {48 transform: translateY(-5px);49 }50 .color-chip {51 transition: all 0.3s ease;52 cursor: pointer;53 }54 .color-chip:hover {55 transform: scale(1.05);56 }57 .fade-in {58 animation: fadeIn 1s ease-in;59 }60 @keyframes fadeIn {61 from { opacity: 0; }62 to { opacity: 1; }63 }64 </style>65</head>66<body class="bg-cozy-900 text-cozy-100 min-h-screen">67 <!-- Animated Background -->68 <div id="vanta-bg" class="fixed inset-0 -z-10 opacity-20"></div>69 70 <!-- Navigation -->71 <nav class="fixed top-0 left-0 right-0 bg-cozy-900/80 backdrop-blur-md z-50 border-b border-cozy-800">72 <div class="container mx-auto px-6 py-4">73 <div class="flex justify-between items-center">74 <a href="#" class="text-2xl font-bold gradient-text">irtideath</a>75 <div class="hidden md:flex space-x-8">76 <a href="#about" class="hover:text-cozy-300 transition">About</a>77 <a href="#experience" class="hover:text-cozy-300 transition">Experience</a>78 <a href="#services" class="hover:text-cozy-300 transition">Services</a>79 <a href="#contact" class="hover:text-cozy-300 transition">Contact</a>80 </div>81 <button class="md:hidden">82 <i data-feather="menu"></i>83 </button>84 </div>85 </div>86 </nav>87 88 <!-- Hero Section -->89 <section class="min-h-screen flex items-center pt-20">90 <div class="container mx-auto px-6 py-20">91 <div class="max-w-3xl">92 <h1 class="text-5xl md:text-7xl font-bold mb-6 fade-in">93 <span class="gradient-text">cozy as a cat</span><br>94 <span class="text-cozy-300">taking a nap</span>95 </h1>96 <p class="text-xl text-cozy-400 mb-8 fade-in">scroll for cool sh*t →</p>97 <div class="flex space-x-4 fade-in">98 <a href="#about" class="px-6 py-3 bg-cozy-700 hover:bg-cozy-600 rounded-full transition flex items-center">99 <span>About Me</span>100 <i data-feather="arrow-down" class="ml-2 w-5 h-5"></i>101 </a>102 <a href="#contact" class="px-6 py-3 border border-cozy-700 hover:border-cozy-600 rounded-full transition flex items-center">103 <span>Let's Talk</span>104 <i data-feather="message-circle" class="ml-2 w-5 h-5"></i>105 </a>106 </div>107 </div>108 </div>109 </section>110 111 <!-- About Section -->112 <section id="about" class="py-20 bg-cozy-800/50">113 <div class="container mx-auto px-6">114 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">what about me?</h2>115 <div class="max-w-3xl mx-auto">116 <div class="bg-cozy-800/50 p-8 rounded-2xl border border-cozy-700 backdrop-blur-sm">117 <p class="text-lg mb-6">118 yea, just an ordinary npc and dumb in math, you can call me al sakha. i never imagined myself in the field of programming, but now focusing on website development. unemployed and not in college. i hope to stick with this career in the future.119 </p>120 <p class="text-lg">121 i'm also learning editing, graphic design, and writing. loving cold or hot coffee while working and study. anyway, that's all about me and thank you.122 </p>123 </div>124 125 <div class="mt-16">126 <h3 class="text-xl font-semibold mb-6 text-cozy-300">Tech Stack</h3>127 <div class="grid grid-cols-2 sm:grid-cols-4 gap-6">128 <a href="https://www.typescriptlang.org/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">129 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg" class="w-12 h-12 mb-2" alt="TypeScript">130 <span>TypeScript</span>131 </a>132 <a href="https://nodejs.org/en" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">133 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" class="w-12 h-12 mb-2" alt="Node.js">134 <span>Node.js</span>135 </a>136 <a href="https://git-scm.com/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">137 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg" class="w-12 h-12 mb-2" alt="Git">138 <span>Git</span>139 </a>140 <a href="https://vite.dev/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">141 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vitejs/vitejs-original.svg" class="w-12 h-12 mb-2" alt="Vite">142 <span>Vite</span>143 </a>144 <a href="https://threejs.org/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">145 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/threejs/threejs-original.svg" class="w-12 h-12 mb-2" alt="Three.js">146 <span>Three.js</span>147 </a>148 <a href="https://tailwindcss.com/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">149 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-plain.svg" class="w-12 h-12 mb-2" alt="Tailwind CSS">150 <span>Tailwind</span>151 </a>152 <a href="https://www.notion.com/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">153 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/notion/notion-original.svg" class="w-12 h-12 mb-2" alt="Notion">154 <span>Notion</span>155 </a>156 <a href="https://www.figma.com/" target="_blank" class="skill-icon bg-cozy-800 hover:bg-cozy-700 p-4 rounded-lg flex flex-col items-center transition">157 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg" class="w-12 h-12 mb-2" alt="Figma">158 <span>Figma</span>159 </a>160 </div>161 </div>162 </div>163 </div>164 </section>165 166 <!-- Experience Section -->167 <section id="experience" class="py-20">168 <div class="container mx-auto px-6">169 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">work experience</h2>170 <div class="max-w-3xl mx-auto">171 <p class="text-lg text-center mb-12 text-cozy-400">172 professional work experience that has contributed to the development of my skills and career, able to work on projects independently or collaboratively in a team.173 </p>174 175 <div class="space-y-8">176 <div class="bg-cozy-800/50 p-6 rounded-xl border border-cozy-700 backdrop-blur-sm">177 <div class="flex justify-between items-start">178 <div>179 <h3 class="text-xl font-semibold text-cozy-300">Frontend Developer</h3>180 <p class="text-cozy-400">Remote Position</p>181 </div>182 <span class="bg-cozy-700 text-cozy-200 px-3 py-1 rounded-full text-sm">Sep - Nov 2024</span>183 </div>184 <p class="mt-4 text-cozy-300">185 Developed responsive user interfaces using modern frameworks. Collaborated with designers to implement pixel-perfect layouts.186 </p>187 </div>188 189 <div class="bg-cozy-800/50 p-6 rounded-xl border border-cozy-700 backdrop-blur-sm">190 <div class="flex justify-between items-start">191 <div>192 <h3 class="text-xl font-semibold text-cozy-300">Full Stack Developer</h3>193 <p class="text-cozy-400">Freelance Project</p>194 </div>195 <span class="bg-cozy-700 text-cozy-200 px-3 py-1 rounded-full text-sm">Jan - Mar 2025</span>196 </div>197 <p class="mt-4 text-cozy-300">198 Built complete web applications from scratch, handling both frontend and backend development. Implemented RESTful APIs and database design.199 </p>200 </div>201 </div>202 </div>203 </div>204 </section>205 206 <!-- Services Section -->207 <section id="services" class="py-20 bg-cozy-800/50">208 <div class="container mx-auto px-6">209 <h2 class="text-3xl font-bold mb-4 text-center gradient-text">service</h2>210 <p class="text-lg text-center mb-12 text-cozy-400 max-w-3xl mx-auto">211 i provide services that reflect my current capabilities, with a focus on delivering effective and thoughtful solutions.212 </p>213 214 <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">215 <div class="bg-cozy-800/50 p-8 rounded-2xl border border-cozy-700 backdrop-blur-sm">216 <div class="flex items-center mb-4">217 <div class="bg-cozy-700 p-3 rounded-lg mr-4">218 <i data-feather="monitor" class="w-6 h-6 text-cozy-300"></i>219 </div>220 <h3 class="text-xl font-semibold text-cozy-300">Frontend</h3>221 </div>222 <p class="text-cozy-300">223 transforming designs into functional and responsive user interfaces. i create web experiences that are interactive, fast to load, seo friendly and optimized across multiple devices, from desktop to mobile.224 </p>225 </div>226 227 <div class="bg-cozy-800/50 p-8 rounded-2xl border border-cozy-700 backdrop-blur-sm">228 <div class="flex items-center mb-4">229 <div class="bg-cozy-700 p-3 rounded-lg mr-4">230 <i data-feather="server" class="w-6 h-6 text-cozy-300"></i>231 </div>232 <h3 class="text-xl font-semibold text-cozy-300">Backend</h3>233 </div>234 <p class="text-cozy-300">235 i built a secure API that allows seamless integration, scalability across the system. with a focus on efficiency and reliability, ensuring clean and well-structured code, making future development easy.236 </p>237 </div>238 </div>239 240 <!-- Color Palettes -->241 <div class="mt-20 max-w-3xl mx-auto">242 <h3 class="text-xl font-semibold mb-6 text-center text-cozy-300">color palettes</h3>243 <p class="text-center text-cozy-400 mb-8">little and convenient. click to copy the color code.</p>244 245 <div class="grid grid-cols-5 gap-4">246 <div class="color-chip h-16 rounded-lg bg-cozy-100" onclick="copyColor('#f3f4f6')"></div>247 <div class="color-chip h-16 rounded-lg bg-cozy-300" onclick="copyColor('#d1d5db')"></div>248 <div class="color-chip h-16 rounded-lg bg-cozy-500" onclick="copyColor('#6b7280')"></div>249 <div class="color-chip h-16 rounded-lg bg-cozy-700" onclick="copyColor('#374151')"></div>250 <div class="color-chip h-16 rounded-lg bg-cozy-900" onclick="copyColor('#111827')"></div>251 </div>252 </div>253 </div>254 </section>255 256 <!-- Contact Section -->257 <section id="contact" class="py-20">258 <div class="container mx-auto px-6">259 <h2 class="text-3xl font-bold mb-12 text-center gradient-text">wanna talk?</h2>260 <div class="max-w-2xl mx-auto bg-cozy-800/50 p-8 rounded-2xl border border-cozy-700 backdrop-blur-sm">261 <p class="text-lg text-center mb-8 text-cozy-300">262 need help, consultation, talk about random things, playing games, and connect with me.263 </p>264 265 <div class="flex flex-wrap justify-center gap-4">266 <a href="#" class="px-6 py-3 bg-cozy-700 hover:bg-cozy-600 rounded-full transition flex items-center">267 <i data-feather="mail" class="mr-2 w-5 h-5"></i>268 <span>Email</span>269 </a>270 <a href="#" class="px-6 py-3 bg-cozy-700 hover:bg-cozy-600 rounded-full transition flex items-center">271 <i data-feather="twitter" class="mr-2 w-5 h-5"></i>272 <span>Twitter</span>273 </a>274 <a href="#" class="px-6 py-3 bg-cozy-700 hover:bg-cozy-600 rounded-full transition flex items-center">275 <i data-feather="github" class="mr-2 w-5 h-5"></i>276 <span>GitHub</span>277 </a>278 <a href="#" class="px-6 py-3 bg-cozy-700 hover:bg-cozy-600 rounded-full transition flex items-center">279 <i data-feather="linkedin" class="mr-2 w-5 h-5"></i>280 <span>LinkedIn</span>281 </a>282 </div>283 </div>284 </div>285 </section>286 287 <!-- Footer -->288 <footer class="py-8 border-t border-cozy-800">289 <div class="container mx-auto px-6">290 <div class="flex flex-col md:flex-row justify-between items-center">291 <p class="text-cozy-400 mb-4 md:mb-0">© 2024 irtideath. all rights reserved.</p>292 <div class="flex space-x-4">293 <a href="#" class="text-cozy-400 hover:text-cozy-300 transition">294 <i data-feather="github"></i>295 </a>296 <a href="#" class="text-cozy-400 hover:text-cozy-300 transition">297 <i data298</body>299</html>