1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=5972eef4-74f2-4551-a7a5-c4854e921ed4 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>iDrinkCoffee</title> 10 <meta name="description" content="iDrinkCoffee - Chronically online. A wannabe software developer and music producer's small hut on the wired."> 11
11<script src="https://cdn.tailwindcss.com"></script>
11 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> 13 <link rel="stylesheet" href="style.css"> 14 <link rel="preconnect" href="https://fonts.googleapis.com"> 15 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 16 <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"> 17</head> 18 19<body class="p-4 antialiased"> 20 <canvas id="matrixCanvas"></canvas> 21 <div class="scanlines"></div> 22 <div class="max-w-4xl mx-auto content-wrapper"> 23 <header class="mb-8"> 24 <div class="text-3xl text-green-500 mb-4 pt-2" data-text="iDrinkCoffee"> 25 <h1 class="text-5xl font-bold text-green-500">iDrinkCoffee</h1> 26 </div> 27 <p class="text-xl text-green-400">>_ chronically online <span class="blink">_</span></p> 28 </header> 29 30 <nav class="mb-8 terminal"> 31 <ul class="flex flex-wrap gap-4"> 32 <li><a href="#about" class="text-xl">[about]</a></li> 33 <li><a href="#projects" class="text-xl">[projects]</a></li> 34 <li><a href="#music" class="text-xl">[music]</a></li> 35 <li><a href="#discord" class="text-xl">[discord]</a></li> 36 <li><a href="#contact" class="text-xl">[contact]</a></li> 37 </ul> 38 </nav> 39 40 <main> 41 <section id="about" class="mb-12 terminal"> 42 <h2 class="text-3xl text-green-500 mb-4 pt-2">>_ about.txt</h2> 43 <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> 44 <div class="col-span-1"> 45 <img src="assets/me.jpg" alt="A pixelated portrait of iDrinkCoffee" class="w-full h-auto border border-green-500 pixel rounded"> 46 </div> 47 <div class="col-span-2"> 48 <p class="mb-4">hey. i'm coffee. i'm a wannabe software developer and music producer. welcome to my small hut on the wired.</p> 49 <p class="mb-4">this website gets updates whenever i feel like it.</p> 50 <p class="text-sm mb-4 text-yellow-400">tip: click the photos on projects 2,3 and 4 for music ;3</p> 51 <p>>_ location: <span class="text-cyan-500">[universe]</span></p> 52 <p>>_ last coffee: <span class="text-yellow-500">[just now]</span></p> 53 </div> 54 </div> 55 </section> 56 57 <section id="projects" class="mb-12 terminal"> 58 <h2 class="text-3xl text-green-500 mb-4 pt-2">>_ projects.log</h2> 59 60 <div id="custom-audio-player-container" class="hidden"> 61 <div class="player-header"> 62 <h3 id="player-playlist-title">Now Playing</h3> 63 <button id="close-player-btn" title="Close Player">×</button> 64 </div> 65 <audio id="custom-audio-element" class="w-full mb-2 hidden"></audio> 66 <div class="track-info"> 67 <span id="current-track-title">Track Title</span> 68 <span id="current-track-artist">Artist</span> 69 </div> 70 <div class="player-controls"> 71 <button id="prev-track-btn" title="Previous Track"><i class="fas fa-step-backward"></i></button> 72 <button id="play-pause-btn" title="Play/Pause"><i class="fas fa-play"></i></button> 73 <button id="next-track-btn" title="Next Track"><i class="fas fa-step-forward"></i></button> 74 </div> 75 <div id="player-playlist" class="text-sm"> 76 </div> 77 </div> 78 79 80 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4"> 81 82 <div class="project-card-container border border-green-500 p-4 cursor-pointer rounded"> 83 <h3 class="text-2xl text-green-400 mb-2">>_ Universul Autorului</h3> 84 <img src="assets/logo.png" alt="Universul Autorului Project Logo" class="w-full h-32 object-cover mb-2 border border-green-500 pixel rounded"> 85 <p>A website, made for a national contest, about books, and the world of a writer.</p> 86 <p class="mt-2">>_ status: <span class="text-green-500">[complete]</span></p> 87 </div> 88 89 <div class="project-card-container border border-green-500 p-4 cursor-pointer rounded" onclick="launchCustomPlayer('project2', 'tell her you love her')"> 90 <h3 class="text-2xl text-green-400 mb-2">>_ tell her you love her</h3> 91 <img src="assets/song.jpg" alt="Album art for 'tell her you love her'" class="w-full h-32 object-cover mb-2 border border-green-500 pixel rounded"> 92 <p>An album, by me, describing my life, starting from October 2024, until now.</p> 93 <p class="mt-2">>_ status: <span class="text-green-500">[complete]</span></p> 94 </div> 95 96 <div class="project-card-container border border-green-500 p-4 cursor-pointer rounded" onclick="launchCustomPlayer('project3', 'feelings')"> 97 <h3 class="text-2xl text-green-400 mb-2">>_ feelings</h3> 98 <img src="assets/song2.jpg" alt="Album art for 'feelings'" class="w-full h-32 object-cover mb-2 border border-green-500 pixel rounded"> 99 <p>How do others... share their feelings so easily?</p> 100 <p class="mt-2">>_ status: <span class="text-green-500">[complete]</span></p> 101 </div> 102 103 <div class="project-card-container border border-green-500 p-4 cursor-pointer rounded" onclick="launchCustomPlayer('project4', 'ripped out of the sky')"> 104 <h3 class="text-2xl text-green-400 mb-2">>_ ripped out of the sky</h3> 105 <img src="assets/soundtrack.jpg" alt="Album art for 'ripped out of the sky'" class="w-full h-32 object-cover mb-2 border border-green-500 pixel rounded"> 106 <p>The chaos within.</p> 107 <p class="mt-2">>_ status: <span class="text-green-500">[complete]</span></p> 108 </div> 109 </div> 110 </section> 111 112 <section id="music" class="mb-12 terminal"> 113 <h2 class="text-3xl text-green-500 mb-4 pt-2">>_ music.fm</h2> 114 <div class="mb-4 flex items-center"> 115 <i class="fab fa-lastfm text-2xl text-red-500 mr-2"></i> 116 <p>>_ last.fm user: <span class="text-cyan-500"><a href="https://last.fm/user/neofetchaddict" target="_blank" rel="noopener noreferrer">neofetchaddict</a></span></p> 117 </div> 118 119 <div id="music-loader" class="flex items-center justify-center py-8"> 120 <div class="music-loader mr-2"></div> 121 <p>>_ fetching recent tracks...</p> 122 </div> 123 124 <div id="music-container" class="hidden"> 125 <div class="mb-6"> 126 <h3 class="text-2xl text-green-400 mb-2">>_ now_playing</h3> 127 <div id="now-playing" class="music-track now-playing p-3 mb-4"></div> 128 </div> 129 130 <div> 131 <h3 class="text-2xl text-green-400 mb-2">>_ recent_tracks</h3> 132 <div id="recent-tracks" class="space-y-2"></div> 133 </div> 134 </div> 135 136 <div id="music-error" class="hidden text-red-500"> 137 <p>>_ error: could not fetch music data</p> 138 <p>>_ check console for details</p> 139 </div> 140 </section> 141 142 <section id="discord" class="mb-12 terminal"> 143 <h2 class="text-3xl text-green-500 mb-4 pt-2">>_ Discord</h2> 144 145 <div id="discord-loader" class="flex items-center justify-center py-8"> 146 <div class="music-loader mr-2"></div> 147 <p>>_ connecting to discord...</p> 148 </div> 149 150 <div id="discord-container" class="hidden"> 151 <div class="mb-6"> 152 <h3 class="text-2xl text-green-400 mb-2">>_ current_status</h3> 153 <div id="discord-status" class="p-3 mb-4 border-l-4 border-indigo-500 rounded-r"></div> 154 </div> 155 156 <div> 157 <h3 class="text-2xl text-green-400 mb-2">>_ current_activity</h3> 158 <div id="discord-activity" class="discord-activity p-3"></div> 159 </div> 160 161 <div class="mt-6"> 162 <h3 class="text-2xl text-green-400 mb-2">>_ user_profile</h3> 163 <div id="discord-profile" class="flex items-center p-3 border-l-4 border-purple-500 rounded-r"></div> 164 </div> 165 </div> 166 167 <div id="discord-error" class="hidden text-red-500"> 168 <p>>_ error: could not fetch discord status</p> 169 <p>>_ check console for details</p> 170 </div> 171 </section> 172 173 <section id="contact" class="mb-12 terminal"> 174 <h2 class="text-3xl text-green-500 mb-4 pt-2">>_ contact.msg</h2> 175 <div> 176 <h3 class="text-2xl text-green-400 mb-2">>_ connections</h3> 177 <ul class="space-y-2"> 178 <li>>_ email: <a href="mailto:[email protected]">[email protected]</a></li> 179 <li>>_ telegram: <a href="https://t.me/extracaffeinated" target="_blank" rel="noopener noreferrer">@extracaffeinated</a></li> 180 <li>>_ discord: idrinkcoffee__</li> 181 </ul> 182 </div> 183 </section> 184 </main> 185 186 <footer class="terminal text-center py-4"> 187 <p>>_ system uptime: <span class="text-green-400">[â days]</span></p> 188 <img src="https://profile-counter.glitch.me/huhugh221/count.svg" alt="visitor count" class="mx-auto my-2 border border-green-500 pixel rounded"> 189 <p class="text-sm text-gray-500 mt-2">© <span id="current-year"></span> iDrinkCoffee | all connections severed</p> 190 </footer> 191 </div> 192 193
193<script src="script.js"></script>
193 194</body> 195</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.