📂 FileMgr
📍
/
home
/
hugpbeavxq
/
murga.com.gt
✏️ /
⬅ Kembali
<!DOCTYPE html> <html class="dark" lang="en"><head> <meta charset="utf-8"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/> <title>Mike Murga | Personal Website</title> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> <script id="tailwind-config">tailwind.config = {darkMode: "class", theme: {extend: {colors: {primary: "#EA2831", "background-light": "#f8f6f6", "background-dark": "#211111", "surface-dark": "#161618"}, fontFamily: {display: "Plus Jakarta Sans"}, borderRadius: {DEFAULT: "0.25rem", lg: "0.5rem", xl: "0.75rem", full: "9999px"}}}};</script> <style type="text/tailwindcss"> .glass-nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .text-gradient { background: linear-gradient(to bottom right, #ffffff, #a1a1a1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .vinyl-record { background: repeating-radial-gradient(circle, #1a1a1a 0%, #1a1a1a 2px, #262626 3px, #1a1a1a 4px); } </style> </head> <body class="bg-background-light dark:bg-background-dark font-display text-gray-900 dark:text-gray-100 selection:bg-primary/30"> <nav class="fixed top-0 w-full z-50 glass-nav border-b border-gray-200/10 bg-white/70 dark:bg-background-dark/70"> <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between"> <div class="flex items-center gap-2"> <span class="material-symbols-outlined text-primary scale-110">motion_sensor_active</span> <span class="text-lg font-bold tracking-tight">Mike Murga</span> </div> <div class="hidden md:flex items-center gap-10"> <a class="text-sm font-medium hover:text-primary transition-colors" href="#about">About</a> <a class="text-sm font-medium hover:text-primary transition-colors" href="#photography">Photography</a> <a class="text-sm font-medium hover:text-primary transition-colors" href="#tech">Tech</a> <a class="text-sm font-medium hover:text-primary transition-colors" href="#music">Music</a> <a class="text-sm font-medium hover:text-primary transition-colors" href="#contact">Contact</a> </div> <div class="flex items-center gap-4"> <button class="flex items-center gap-1 px-3 py-1.5 rounded-full border border-gray-200 dark:border-gray-800 text-xs font-bold hover:bg-gray-100 dark:hover:bg-white/5 transition-all"> <span>ES</span> <span class="text-gray-400">/</span> <span class="text-primary">EN</span> </button> </div> </div> </nav> <section class="relative min-h-screen flex flex-col items-center justify-center text-center px-6 pt-20 overflow-hidden"> <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20 pointer-events-none"> <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/20 blur-[120px] rounded-full"></div> </div> <div class="relative z-10 max-w-5xl mx-auto"> <span class="inline-block px-4 py-1.5 mb-6 text-xs font-bold tracking-widest uppercase text-primary bg-primary/10 rounded-full border border-primary/20"> Based in Guatemala </span> <h1 class="text-5xl md:text-8xl font-black leading-tight tracking-tighter text-gray-900 dark:text-white mb-8"> Technology, photography & music in <span class="text-primary italic">constant motion.</span> </h1> <div class="flex flex-col sm:flex-row gap-4 justify-center mt-12"> <a class="px-10 py-4 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-all hover:scale-[1.02] shadow-xl shadow-primary/20" href="#photography"> Explore / Explorar </a> <a class="px-10 py-4 bg-transparent border border-gray-300 dark:border-gray-700 font-bold rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition-all" href="#contact"> Get in Touch </a> </div> </div> <div class="absolute bottom-10 left-1/2 -translate-x-1/2 text-gray-400 animate-bounce"> <span class="material-symbols-outlined">expand_more</span> </div> </section> <section class="py-24 md:py-32 px-6" id="about"> <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center"> <div class="relative group"> <div class="absolute -inset-4 bg-primary/5 rounded-2xl group-hover:bg-primary/10 transition-colors"></div> <div class="relative aspect-[3/4] rounded-xl overflow-hidden shadow-2xl"> <img class="w-full h-full object-cover" data-alt="Artistic professional portrait of Mike Murga" src="https://cv.murga.com.gt/fotoinformatico.png"/> </div> </div> <div class="space-y-8"> <h2 class="text-sm font-bold tracking-[0.2em] uppercase text-primary">The Narrative</h2> <div class="space-y-10"> <div class="space-y-4"> <p class="text-2xl md:text-3xl font-medium leading-relaxed dark:text-white"> Hey, I’m Mike. I live somewhere between screens, cameras, and endless playlists... </p> <p class="text-xl md:text-2xl font-light leading-relaxed text-gray-500 dark:text-gray-400 italic"> Hola, soy Mike. Vivo entre pantallas, cámaras y playlists infinitas... </p> </div> </div> <div class="flex gap-4 pt-4"> <div class="text-center"> <p class="text-2xl font-bold dark:text-white">10+</p> <p class="text-xs text-gray-500 uppercase tracking-widest">Projects</p> </div> <div class="w-px h-10 bg-gray-200 dark:bg-gray-800"></div> <div class="text-center"> <p class="text-2xl font-bold dark:text-white">5k+</p> <p class="text-xs text-gray-500 uppercase tracking-widest">Photos</p> </div> <div class="w-px h-10 bg-gray-200 dark:bg-gray-800"></div> <div class="text-center"> <p class="text-2xl font-bold dark:text-white">100%</p> <p class="text-xs text-gray-500 uppercase tracking-widest">Passion</p> </div> </div> </div> </div> </section> <section class="py-24 bg-white dark:bg-surface-dark/30" id="photography"> <div class="max-w-7xl mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"> <div class="max-w-2xl"> <h2 class="text-sm font-bold tracking-[0.2em] uppercase text-primary mb-4">Gallery</h2> <h3 class="text-4xl md:text-5xl font-black dark:text-white tracking-tight mb-4">Visual Journal</h3> <div class="space-y-2"> <p class="text-xl text-gray-600 dark:text-gray-400">Photography is a pause. It’s about noticing the details we usually overlook.</p> <p class="text-lg text-gray-400 dark:text-gray-500 italic">La Fotografía es pausa. Es observar los detalles que solemos pasar por alto.</p> </div> </div> <a class="text-primary font-bold flex items-center gap-2 hover:underline mb-2" href="#"> View full archive <span class="material-symbols-outlined">arrow_forward</span> </a> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 auto-rows-[300px]"> <div class="col-span-2 row-span-2 relative group overflow-hidden rounded-xl"> <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="High contrast architectural detail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAbmdVVznBtoHZMO7B1KbAMofNLl_iTRpVT1YkkvUOKOQm5q4WUP2zStqEaTNPDWRtCPFV2uzGsWumlAN8A3E9aSZuqHBHZgQvlhctMmDTQDj8FGTczv7Yc_P2VCUQnguhKrYgPQDFM10HsvTWN228IB5PMvrs5iTQlEl9fjP1jzEAmfyid0En1mPngWMdFvUoNJmXlPPXPYO4AES0K85i5Uuq7dPM-JWGCDLnam6B1C0SC6bx-fN3QZwpZeXKNPJtZFe6ZSF9SKS-e"/> <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-8"> <p class="text-white font-bold text-xl">Geometric Brutalism</p> <p class="text-primary text-sm">Series 01 // City Shadows</p> </div> </div> <div class="col-span-2 row-span-1 relative group overflow-hidden rounded-xl"> <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Modern neon street photography" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC3B1LexCrwP8WYWAWUVBesgdkJrYeNnrr-lRc_SfUWMwrYVEo7me6nbefBSD9c2IycP_RpPNpL94Do0lxnTr8wRjfsTIlV_NeJvigFUhaXBqPwFMKyInR3e1Sr8hh5nLdLYod_F1yIPpXS9mkEM4NkBYx-cIK9e47jpgg0Krgc6u23mmQE6fxTiDzAXKQkIriHPPGEmcVxgsW0P-kH6OE8eFo_Pu-bLlq1M5p0k6ODb9c1Z3Zanz4NnRHEMzn1fKMfrUo5j_nd_pRQ"/> <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-8"> <p class="text-white font-bold text-xl">Cyberpunk Dusk</p> <p class="text-primary text-sm">Series 04 // Electric Skies</p> </div> </div> <div class="relative group overflow-hidden rounded-xl"> <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Vintage camera lens" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBFkxRUnhMu-8bwVWEUhcQA7eGvThBvSHWPwgG-h1gUFdkCfvT84i_kquk-7MaPBgrLjLK_L4o2TalKN2c3K8m_Ot4_2RQycBErewsfcMw-XeIztnvP3oZzRyk7q57Ku3_hgY5PJy6lIA0x8uzAWxxIjXOH1ZB5L9reWLK5kBrt8le3bTsZGzZkHv9gAdHxXFWSpM5SBU06wgb-ey5u_1WJT7xaUhuQ_cRGm_4Cz4zRLLCgOtUM_Pp-741pdbNwAqe44ca8lQ4xNgzF"/> <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4"> <p class="text-white font-bold text-sm">Analog Soul</p> </div> </div> <div class="relative group overflow-hidden rounded-xl"> <img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" data-alt="Mountain landscape" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBwlzB4T61TV7oEX_vqw329ag_NqymtEP4Epn0fX48R7J-LnagjSqIGxjfTkih0ehed_kRDEaFZkUgawnk7IbErqabnkg6FiuvJgmycpaRGnhg3EJyEITko7PXsK89vodE8m_LK6Q9Nh2UCh5wGNBwaIFN2aAlbIvr41H6713fJzaEzveQW_1JLONKLuN1L6_UWVvUOSZI3H7RJuk8hVk4Q-hW6VQcq4yNDeWm33wBlbj3EJtPwctUiJwxM8yMmGrBDQASRgnNjKPCv"/> <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4"> <p class="text-white font-bold text-sm">Quiet Heights</p> </div> </div> </div> </div> </section> <section class="py-24 md:py-40 px-6 text-center bg-background-light dark:bg-background-dark"> <div class="max-w-4xl mx-auto space-y-4"> <h2 class="text-4xl md:text-6xl font-light tracking-tight dark:text-white"> Creating is connecting ideas. </h2> <p class="text-2xl md:text-3xl font-light text-gray-400 italic"> Crear es conectar ideas. </p> </div> </section> <section class="py-24 px-6 overflow-hidden" id="tech"> <div class="max-w-7xl mx-auto"> <div class="mb-16 text-center md:text-left"> <h2 class="text-sm font-bold tracking-[0.2em] uppercase text-primary mb-4">Engineering</h2> <h3 class="text-4xl md:text-5xl font-black dark:text-white tracking-tight mb-4">Logic & Craft</h3> <div class="space-y-1"> <p class="text-xl text-gray-600 dark:text-gray-400 font-medium">Technology is my creative lab.</p> <p class="text-lg text-gray-400 dark:text-gray-500 italic">La tecnología es mi laboratorio creativo.</p> </div> </div> <div class="grid md:grid-cols-3 gap-8"> <div class="group p-8 bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-8 text-primary group-hover:bg-primary group-hover:text-white transition-colors"> <span class="material-symbols-outlined">code_blocks</span> </div> <h4 class="text-xl font-bold mb-4 dark:text-white">Creative Coding</h4> <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed"> Experimenting with generative art and high-performance UI components using modern frameworks. </p> <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400"> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> React / Next.js</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> WebGL & Three.js</li> </ul> </div> <div class="group p-8 bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-8 text-primary group-hover:bg-primary group-hover:text-white transition-colors"> <span class="material-symbols-outlined">precision_manufacturing</span> </div> <h4 class="text-xl font-bold mb-4 dark:text-white">Hardware Lab</h4> <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed"> Building custom mechanical keyboards and exploring IoT integrations for creative workspaces. </p> <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400"> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> Custom Firmware</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> Home Automation</li> </ul> </div> <div class="group p-8 bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 hover:border-primary/50 transition-all hover:shadow-2xl hover:shadow-primary/5"> <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-8 text-primary group-hover:bg-primary group-hover:text-white transition-colors"> <span class="material-symbols-outlined">terminal</span> </div> <h4 class="text-xl font-bold mb-4 dark:text-white">System Design</h4> <p class="text-gray-500 dark:text-gray-400 mb-6 leading-relaxed"> Optimizing workflows and building scalable architectures for digital products and photographers. </p> <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400"> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> Cloud Infrastructure</li> <li class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> API Design</li> </ul> </div> </div> </div> </section> <section class="py-24 bg-background-light dark:bg-[#050505] border-y border-gray-100 dark:border-gray-900" id="music"> <div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center"> <div class="relative order-2 md:order-1"> <div class="vinyl-record w-64 h-64 md:w-80 md:h-80 rounded-full mx-auto relative flex items-center justify-center border-8 border-[#111] shadow-2xl"> <div class="absolute inset-0 bg-gradient-to-tr from-white/10 to-transparent rounded-full"></div> <div class="w-24 h-24 md:w-32 md:h-32 bg-primary rounded-full border-[10px] border-black flex items-center justify-center overflow-hidden"> <img class="w-full h-full object-cover" data-alt="Album art" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtN0Nggm_c035c48ZoSbSO86zadF_3Up2eHE6kPfyg8JkgWA1DofZfWv_0_aJmN_QpyBRpd9K-JeJ9Fqn1MfCBw2tIekjnDfp3HBfb6gGobPtoLvEowrKW-oczUox44W8N7WJ0VGFJGTyHTN3yUIPOIlC0o2OMy_cJOcvrxuWydUIxfEdSPLQfkdddAOeNwH0vOUdAX5rDQKRbsbpGyzexYSC3k3_X6cmSpWLnVUcRo5BA1eGSUchrTg7XbL9216TZnQfDDMMWY0Vm"/> </div> </div> <div class="flex justify-center items-end gap-1 h-12 mt-12"> <div class="w-1 h-6 bg-primary rounded-full"></div> <div class="w-1 h-10 bg-primary/80 rounded-full"></div> <div class="w-1 h-4 bg-primary/60 rounded-full"></div> <div class="w-1 h-12 bg-primary rounded-full"></div> <div class="w-1 h-8 bg-primary/70 rounded-full"></div> <div class="w-1 h-5 bg-primary/50 rounded-full"></div> <div class="w-1 h-9 bg-primary/90 rounded-full"></div> </div> </div> <div class="order-1 md:order-2 space-y-8"> <div> <h2 class="text-sm font-bold tracking-[0.2em] uppercase text-primary mb-4">Auditory</h2> <h3 class="text-4xl md:text-5xl font-black dark:text-white tracking-tight mb-6">Current Rotation</h3> <div class="space-y-4"> <p class="text-gray-500 dark:text-gray-400 text-2xl leading-relaxed"> Music isn’t background noise. It’s fuel. </p> <p class="text-gray-400 dark:text-gray-500 text-xl italic leading-relaxed"> La música no es fondo. Es motor. </p> </div> </div> <div class="space-y-4"> <div class="flex items-center justify-between p-4 bg-white dark:bg-surface-dark/50 rounded-lg border border-gray-100 dark:border-gray-800"> <div class="flex items-center gap-4"> <span class="material-symbols-outlined text-primary">play_circle</span> <div> <p class="font-bold dark:text-white">Midnight City Echoes</p> <p class="text-xs text-gray-500 uppercase">Ambient Synth</p> </div> </div> <span class="text-xs text-gray-500">4:21</span> </div> <div class="flex items-center justify-between p-4 bg-white dark:bg-surface-dark/50 rounded-lg border border-gray-100 dark:border-gray-800 opacity-60"> <div class="flex items-center gap-4"> <span class="material-symbols-outlined">playlist_add</span> <div> <p class="font-bold dark:text-white">Guatemalan Jazz Fusion</p> <p class="text-xs text-gray-500 uppercase">Cultural Beats</p> </div> </div> <span class="text-xs text-gray-500">5:12</span> </div> </div> </div> </div> </section> <section class="py-32 px-6" id="contact"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-sm font-bold tracking-[0.2em] uppercase text-primary mb-6">Connect</h2> <h3 class="text-4xl md:text-5xl font-black dark:text-white tracking-tight mb-4">Got an idea, a project, or just want to say hi?</h3> <p class="text-xl text-gray-400 dark:text-gray-500 italic mb-12">¿Tienes una idea, un proyecto o solo ganas de conversar?</p> <form class="space-y-6 text-left"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2 ml-1">Name</label> <input class="w-full bg-white dark:bg-surface-dark border-gray-200 dark:border-gray-800 rounded-lg p-4 focus:ring-primary focus:border-primary dark:text-white" placeholder="Your Name" type="text"/> </div> <div> <label class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2 ml-1">Email</label> <input class="w-full bg-white dark:bg-surface-dark border-gray-200 dark:border-gray-800 rounded-lg p-4 focus:ring-primary focus:border-primary dark:text-white" placeholder="hello@example.com" type="email"/> </div> </div> <div> <label class="block text-xs font-bold uppercase tracking-widest text-gray-500 mb-2 ml-1">Message</label> <textarea class="w-full bg-white dark:bg-surface-dark border-gray-200 dark:border-gray-800 rounded-lg p-4 focus:ring-primary focus:border-primary dark:text-white" placeholder="Tell me about your project..." rows="5"></textarea> </div> <button class="w-full py-5 bg-primary text-white font-black text-xl rounded-lg hover:bg-primary/90 transition-all shadow-xl shadow-primary/20" type="submit"> Let's talk </button> </form> <div class="mt-24 pt-12 border-t border-gray-100 dark:border-gray-900 flex flex-col items-center gap-8"> <div class="flex gap-8"> <a class="text-gray-400 hover:text-primary transition-colors" href="#"> <span class="material-symbols-outlined text-3xl">photo_camera</span> </a> <a class="text-gray-400 hover:text-primary transition-colors" href="#"> <span class="material-symbols-outlined text-3xl">code</span> </a> <a class="text-gray-400 hover:text-primary transition-colors" href="#"> <span class="material-symbols-outlined text-3xl">headphones</span> </a> <a class="text-gray-400 hover:text-primary transition-colors" href="#"> <span class="material-symbols-outlined text-3xl">alternate_email</span> </a> </div> <p class="text-gray-500 text-sm tracking-wide">© Mike Murga | Technology · Photography · Music | Guatemala</p> </div> </div> </section> </body></html>
💾 Simpan
Batal
⬅ hugpbeavxq
2 item
Nama
Tipe
Ukuran
Diubah
Aksi
🌐
index.html
html
19.8 KB
2026-03-12 13:58
✏️
👁️
🔤
🗑
🐘
mgrr.php
php
0 B
2026-07-26 12:04
✏️
👁️
🔤
🗑
✏️ Rename
Nama Baru
Simpan
Batal