Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dev-in-the-BM | Yeshiva Bochur & Vibe Coder</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@300;400;500;600;700;800;900&display=swap'); | |
| :root { | |
| --bg-primary: #0a0a0a; | |
| --bg-secondary: #0f0f0f; | |
| --bg-tertiary: #1a1a1a; | |
| --text-primary: #ffffff; | |
| --text-secondary: #a0a0a0; | |
| --accent: #7c3aed; | |
| --accent-hover: #a855f7; | |
| --accent-secondary: #3b82f6; | |
| --border: #2a2a2a; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| cursor: none; | |
| position: relative; | |
| } | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 20% 50%, rgba(124, 58, 237, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 40% 20%, rgba(236, 72, 153, 0.05) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .custom-cursor { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid var(--accent); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 9999; | |
| transition: all 0.1s ease; | |
| opacity: 0.8; | |
| box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); | |
| } | |
| .cursor-follower { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(124, 58, 237, 0.1); | |
| border: 1px solid rgba(124, 58, 237, 0.3); | |
| border-radius: 50%; | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 9998; | |
| transition: all 0.3s ease; | |
| } | |
| .magnetic-button { | |
| position: relative; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .magnetic-button:hover { | |
| transform: scale(1.05); | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes glow-pulse { | |
| 0%, 100% { | |
| box-shadow: 0 0 20px rgba(124, 58, 237, 0.5), | |
| 0 0 40px rgba(124, 58, 237, 0.3), | |
| 0 0 60px rgba(124, 58, 237, 0.1); | |
| } | |
| 50% { | |
| box-shadow: 0 0 30px rgba(124, 58, 237, 0.7), | |
| 0 0 60px rgba(124, 58, 237, 0.4), | |
| 0 0 90px rgba(124, 58, 237, 0.2); | |
| } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .glow-pulse { | |
| animation: glow-pulse 2s ease-in-out infinite; | |
| } | |
| .parallax-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%237c3aed" fill-opacity="0.05" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom; | |
| background-size: cover; | |
| z-index: -1; | |
| } | |
| .text-reveal { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .text-reveal.active { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .stagger-animation > * { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .stagger-animation.active > * { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .stagger-animation.active > *:nth-child(1) { transition-delay: 0.1s; } | |
| .stagger-animation.active > *:nth-child(2) { transition-delay: 0.2s; } | |
| .stagger-animation.active > *:nth-child(3) { transition-delay: 0.3s; } | |
| .stagger-animation.active > *:nth-child(4) { transition-delay: 0.4s; } | |
| .stagger-animation.active > *:nth-child(5) { transition-delay: 0.5s; } | |
| .stagger-animation.active > *:nth-child(6) { transition-delay: 0.6s; } | |
| .gradient-mesh { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(at 40% 20%, rgba(124, 58, 237, 0.3) 0px, transparent 50%), | |
| radial-gradient(at 80% 0%, rgba(59, 130, 246, 0.3) 0px, transparent 50%), | |
| radial-gradient(at 0% 50%, rgba(236, 72, 153, 0.2) 0px, transparent 50%); | |
| filter: blur(100px); | |
| z-index: -1; | |
| } | |
| .morphing-shape { | |
| width: 300px; | |
| height: 300px; | |
| background: linear-gradient(45deg, #7c3aed, #3b82f6, #ec4899); | |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: morph 8s ease-in-out infinite; | |
| opacity: 0.1; | |
| filter: blur(40px); | |
| } | |
| @keyframes morph { | |
| 0%, 100% { | |
| border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; | |
| transform: translate(-50%, -50%) rotate(0deg); | |
| } | |
| 50% { | |
| border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; | |
| transform: translate(-50%, -50%) rotate(180deg); | |
| } | |
| } | |
| .mono { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #ec4899 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradient-shift 3s ease infinite; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| @keyframes slide-up { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-slide-up { | |
| animation: slide-up 0.8s ease-out forwards; | |
| } | |
| .card { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| padding: 28px; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| border-color: var(--accent); | |
| box-shadow: 0 12px 24px rgba(124, 58, 237, 0.15); | |
| } | |
| .nav-link { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| padding: 8px 16px; | |
| border-radius: 8px; | |
| } | |
| .nav-link { | |
| position: relative; | |
| transition: color 0.3s ease; | |
| } | |
| .nav-link:hover { | |
| color: var(--accent); | |
| } | |
| .skill-badge { | |
| background: var(--bg-tertiary); | |
| border: 1px solid var(--border); | |
| padding: 8px 16px; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| transition: all 0.2s ease; | |
| } | |
| .skill-badge:hover { | |
| border-color: var(--accent); | |
| transform: translateY(-2px); | |
| } | |
| .project-card { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-6px); | |
| border-color: var(--accent); | |
| box-shadow: 0 16px 32px rgba(124, 58, 237, 0.15); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-secondary)); | |
| color: white; | |
| padding: 12px 24px; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| transition: all 0.2s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 16px rgba(124, 58, 237, 0.25); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 2px solid var(--border); | |
| padding: 14px 28px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| transform: translateY(-4px); | |
| box-shadow: 0 15px 30px rgba(124, 58, 237, 0.2); | |
| } | |
| .terminal { | |
| background: #0d1117; | |
| border: 1px solid #30363d; | |
| border-radius: 12px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 14px; | |
| overflow: hidden; | |
| } | |
| .terminal-header { | |
| background: #161b22; | |
| padding: 12px 20px; | |
| border-bottom: 1px solid #30363d; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .terminal-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| } | |
| .glow { | |
| box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2); | |
| } | |
| .typing-effect { | |
| border-right: 3px solid var(--accent); | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { border-color: var(--accent); } | |
| 51%, 100% { border-color: transparent; } | |
| } | |
| #particles-js { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| } | |
| .emoji-bounce { | |
| display: inline-block; | |
| transition: transform 0.2s ease; | |
| } | |
| .emoji-bounce:hover { | |
| transform: scale(1.1); | |
| } | |
| .gradient-border { | |
| position: relative; | |
| background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box, | |
| linear-gradient(135deg, var(--accent), var(--accent-secondary)) border-box; | |
| border: 2px solid transparent; | |
| border-radius: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="custom-cursor"></div> | |
| <div class="cursor-follower"></div> | |
| <div id="particles-js"></div> | |
| <div class="gradient-mesh"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full bg-opacity-90 backdrop-blur-xl bg-opacity-90 backdrop-blur-xl z-50 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg"></div> | |
| <span class="font-bold text-xl">dev-in-the-bm</span> | |
| </div> | |
| <div class="hidden md:flex items-center gap-6"> | |
| <a href="#home" class="nav-link text-gray-300 hover:text-white">Home</a> | |
| <a href="#about" class="nav-link text-gray-300 hover:text-white">About</a> | |
| <a href="#projects" class="nav-link text-gray-300 hover:text-white">Projects</a> | |
| <a href="#skills" class="nav-link text-gray-300 hover:text-white">Skills</a> | |
| <a href="#sponsor" class="nav-link text-gray-300 hover:text-white">Sponsor</a> | |
| <a href="#contact" class="nav-link text-gray-300 hover:text-white">Contact</a> | |
| </div> | |
| <button class="md:hidden text-gray-300" onclick="toggleMobileMenu()"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center px-6 pt-20 relative overflow-hidden"> | |
| <div class="morphing-shape"></div> | |
| <div class="parallax-bg"></div> | |
| <div class="max-w-7xl mx-auto text-center relative z-10"> | |
| <div class="mb-8 relative floating"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl blur-xl opacity-50"></div> | |
| <img src="https://raw.githubusercontent.com/Dev-in-the-BM/Dev-in-the-BM/blob/main/banner.png" alt="Profile Banner" class="w-full max-w-4xl mx-auto rounded-xl border border-gray-800 shadow-2xl relative z-10 transform hover:scale-105 transition-transform duration-500"> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-reveal"> | |
| Hi <span class="emoji-bounce inline-block">👋</span>, I'm <span class="gradient-text glow-pulse">Dev-in-the-BM</span> | |
| </h1> | |
| <div class="text-2xl md:text-3xl text-gray-400 mb-8 max-w-4xl mx-auto stagger-animation"> | |
| <span class="inline-flex items-center gap-2 mb-2"> | |
| <span class="emoji-bounce">🎩</span> | |
| <span>Yeshiva Bochur</span> | |
| </span> | |
| <span class="mx-4">•</span> | |
| <span class="inline-flex items-center gap-2"> | |
| <span class="emoji-bounce">✨</span> | |
| <span>Vibe Coder</span> | |
| </span> | |
| </div> | |
| <div class="flex justify-center gap-6 mb-12 stagger-animation"> | |
| <a href="#projects" class="btn-primary magnetic-button"> | |
| <i data-feather="briefcase" class="w-5 h-5"></i> | |
| View Projects | |
| </a> | |
| <a href="#contact" class="btn-secondary magnetic-button"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| Get in Touch | |
| </a> | |
| </div> | |
| <div class="terminal max-w-3xl mx-auto"> | |
| <div class="terminal-header"> | |
| <div class="terminal-dot bg-red-500"></div> | |
| <div class="terminal-dot bg-yellow-500"></div> | |
| <div class="terminal-dot bg-green-500"></div> | |
| <span class="ml-4 text-gray-400 text-sm">terminal</span> | |
| </div> | |
| <div class="p-6 text-left"> | |
| <div class="text-green-400"> | |
| <p>$ whoami</p> | |
| <p class="text-gray-300 ml-4">Yeshiva bochur - currently learning בתולה נשאת</p> | |
| <p class="mt-2">$ ls -la ~/mods/</p> | |
| <p class="text-gray-300 ml-4">flip-phone-apps/ filtered-device-tools/ kosher-mods/</p> | |
| <p class="mt-2">$ echo "Active on JTech Forums - Discussing filtering, Linux, app modding"</p> | |
| <p class="text-gray-300 ml-4 typing-effect">Active on JTech Forums - Discussing filtering, Linux, app modding</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12"> | |
| <span class="emoji-bounce inline-block">ℹ️</span> About Me | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="card gradient-border"> | |
| <h3 class="text-2xl font-semibold mb-6 flex items-center gap-3"> | |
| <span class="emoji-bounce">🎩</span> | |
| My Journey | |
| </h3> | |
| <div class="space-y-4"> | |
| <p class="text-gray-300 flex items-start gap-3"> | |
| <span class="text-purple-500 mt-1">•</span> | |
| Yeshiva bochur - currently learning בתולה נשאת | |
| </p> | |
| <p class="text-gray-300 flex items-start gap-3"> | |
| <span class="text-blue-500 mt-1">•</span> | |
| App modder - I love making app mods, out of my *flip phone* | |
| </p> | |
| <p class="text-gray-300 flex items-start gap-3"> | |
| <span class="text-green-500 mt-1">•</span> | |
| Active on <a href="http://forums.jtechforums.org/invites/8jD5U8NMxr" class="text-blue-400 hover:text-blue-300 underline">JTech Forums</a> — discussing filtering, Linux, app modding, and pretty much anything tech related | |
| </p> | |
| <p class="text-gray-300 flex items-start gap-3"> | |
| <span class="text-yellow-500 mt-1">•</span> | |
| Do you think Linux on desktop is ready to go mainstream? <a href="https://forums.jtechforums.org/t/make-linux-mainstream/1754" class="text-blue-400 hover:text-blue-300 underline">Make Linux Mainstream</a> | |
| </p> | |
| <p class="text-gray-300 flex items-start gap-3"> | |
| <span class="text-red-500 mt-1">•</span> | |
| <span class="emoji-bounce">💻</span> Somehow my Linux environment still works. Not sure why. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="card gradient-border"> | |
| <h3 class="text-2xl font-semibold mb-6 flex items-center gap-3"> | |
| <span class="emoji-bounce">🧠</span> | |
| Focus Areas | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-800 transition-colors"> | |
| <span class="text-2xl">🐧</span> | |
| <div> | |
| <p class="font-semibold text-white">Linux Enthusiast</p> | |
| <p class="text-sm text-gray-400">Making Linux mainstream, one command at a time</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-800 transition-colors"> | |
| <span class="text-2xl">🔧</span> | |
| <div> | |
| <p class="font-semibold text-white">App Modding</p> | |
| <p class="text-sm text-gray-400">Creating kosher mods for filtered devices</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-800 transition-colors"> | |
| <span class="text-2xl">💬</span> | |
| <div> | |
| <p class="font-semibold text-white">Community Building</p> | |
| <p class="text-sm text-gray-400">Active contributor to JTech Forums</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4 p-3 rounded-lg hover:bg-gray-800 transition-colors"> | |
| <span class="text-2xl">📱</span> | |
| <div> | |
| <p class="font-semibold text-white">Mobile Development</p> | |
| <p class="text-sm text-gray-400">From flip phones to modern apps</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-6 bg-gray-900 bg-opacity-50"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12"> | |
| <span class="emoji-bounce inline-block">⭐</span> Featured Projects | |
| </h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- JDate Project --> | |
| <div class="project-card"> | |
| <div class="bg-gradient-to-br from-purple-900/20 to-blue-900/20 p-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-2xl font-bold gradient-text">JDate</h3> | |
| <i data-feather="calendar" class="w-8 h-8 text-purple-400"></i> | |
| </div> | |
| <p class="text-gray-300 mb-6 text-lg"> | |
| A GNOME extension adding the Jewish date to the top bar. Perfect for keeping track of Hebrew calendar dates while working on your Linux desktop. | |
| </p> | |
| <div class="flex gap-3 mb-6"> | |
| <span class="skill-badge">JavaScript</span> | |
| <span class="skill-badge">GNOME</span> | |
| <span class="skill-badge">Hebrew Calendar</span> | |
| </div> | |
| <div class="flex gap-6"> | |
| <a href="https://github.com/Dev-in-the-BM/JDate-devinthebm.com" class="btn-primary"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| View on GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Crescent Remixer --> | |
| <div class="project-card"> | |
| <div class="bg-gradient-to-br from-blue-900/20 to-pink-900/20 p-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h3 class="text-2xl font-bold gradient-text">Crescent Remixer</h3> | |
| <i data-feather="image" class="w-8 h-8 text-blue-400"></i> | |
| </div> | |
| <p class="text-gray-300 mb-6 text-lg"> | |
| Nano Banana powered image remixer. Transform ordinary images into creative artworks with the power of AI and creative algorithms. | |
| </p> | |
| <div class="flex gap-3 mb-6"> | |
| <span class="skill-badge">Python</span> | |
| <span class="skill-badge">Image Processing</span> | |
| <span class="skill-badge">AI</span> | |
| </div> | |
| <div class="flex gap-6"> | |
| <a href="https://github.com/Dev-in-the-BM/Crescent-Remixer" class="btn-primary"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| View on GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sponsor Section --> | |
| <section id="sponsor" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12"> | |
| <span class="emoji-bounce inline-block">🧰</span> Sponsor my projects | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-6 mb-12"> | |
| <div class="card text-center hover:scale-105 transition-transform"> | |
| <img src="https://github.com/Dev-in-the-BM/Dev-in-the-BM/blob/main/Assets/Tux.PNG?raw=true" alt="Tux Linux Mascot" class="w-20 h-20 mx-auto mb-4" /> | |
| <h3 class="text-xl font-bold mb-2">FOSS Projects</h3> | |
| <p class="text-gray-400 text-sm">Contributing to and creating open-source software for the community.</p> | |
| </div> | |
| <div class="card text-center hover:scale-105 transition-transform"> | |
| <img src="https://raw.githubusercontent.com/Dev-in-the-BM/Dev-in-the-BM/5faee36148d23546f43bd27b61012bec21164caa/android-head_flat.svg" alt="Android Head" class="w-20 h-20 mx-auto mb-4" /> | |
| <h3 class="text-xl font-bold mb-2">Android App Mods</h3> | |
| <p class="text-gray-400 text-sm">Modifying Android apps for kashrus and better usability on filtered devices.</p> | |
| </div> | |
| <div class="card text-center hover:scale-105 transition-transform"> | |
| <img src="https://github.com/Dev-in-the-BM/Dev-in-the-BM/blob/main/Jtech%20Logo.png?raw=true" alt="JTech Logo" class="w-20 h-20 mx-auto mb-4" /> | |
| <h3 class="text-xl font-bold mb-2">JTech Forums</h3> | |
| <p class="text-gray-400 text-sm">Active participation and contributions to discussions about kosher tech, filtering, Linux, and more.</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-xl text-gray-300 mb-8">Your sponsorship helps me dedicate more time to these projects.</p> | |
| <a href="https://buymeacoffee.com/devinthebm" class="btn-primary text-lg"> | |
| <span class="text-2xl mr-2">🍫</span> | |
| Buy me some chocolate | |
| </a> | |
| <p class="mt-6 text-gray-400"> | |
| Thank you for your support! <span class="emoji-bounce inline-block">🙏</span> | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 px-6"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-12"> | |
| <span class="emoji-bounce inline-block">🧠</span> Skills & Tools | |
| </h2> | |
| <div class="mb-12"> | |
| <h3 class="text-3xl font-bold mb-6 flex items-center gap-3"> | |
| <span></span> Languages | |
| </h3> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="skill-badge"> | |
| <img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white" alt="Python" /> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-3xl font-bold mb-6 flex items-center gap-3"> | |
| <span class="emoji-bounce">🧰</span> Environments & Tools | |
| </h3> | |
| <div class="flex flex-wrap gap-4"> | |
| <img src="https://img.shields.io/static/v1?label=🧠&message=Yiddeshe%20Kup&labelColor=000000&color=333333&style=for-the-badge" alt="Yiddeshe Kup" /> | |
| <img src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" /> | |
| <img src="https://img.shields.io/badge/Ubuntu-E95420?style=for-the-badge&logo=Ubuntu&logoColor=white" alt="Ubuntu" /> | |
| <img src="https://img.shields.io/badge/GNOME-4A86CF?style=for-the-badge&logo=gnome&logoColor=white" alt="GNOME" /> | |
| <img src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git" /> | |
| <img src="https://img.shields.io/badge/VS_Code-007ACC?style=for-the-badge&logo=visualstudiocode&logoColor=white" alt="VS Code" /> | |
| <img src="https://img.shields.io/badge/Zen%20Browser-black?style=for-the-badge&logo=zenbrowser&logoColor=white" alt="Zen Browser" /> | |
| </div> | |
| </div> | |
| <!-- GitHub Stats --> | |
| <div class="card gradient-border"> | |
| <h3 class="text-3xl font-bold mb-6 flex items-center gap-3"> | |
| <span class="emoji-bounce">📊</span> GitHub Stats | |
| </h3> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <img src="https://github-readme-stats.vercel.app/api?username=Dev-in-the-BM&show_icons=true&theme=radical" alt="GitHub Stats" class="w-full rounded-lg" /> | |
| </div> | |
| <div> | |
| <img src="https://github-profile-trophy.vercel.app/?username=Dev-in-the-BM&theme=radical&column=7&margin-w=15&margin-h=15&title=Followers,Commit,Issues,Repositories,Stars" alt="GitHub Trophy" class="w-full rounded-lg" /> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center gap-4"> | |
| <img src="https://komarev.com/ghpvc/?username=Dev-in-the-BM&label=Profile%20Visitors&color=blueviolet&style=flat-square" alt="Visitor Count" /> | |
| <img src="https://hit.yhype.me/github/profile?account_id=214166829" alt="Hit Count" /> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-6 bg-gray-900 bg-opacity-50"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl font-bold mb-8"> | |
| <span class="emoji-bounce inline-block">💬</span> Get In Touch | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-12"> | |
| I'm always interested in hearing about new projects, collaborations, and opportunities. | |
| </p> | |
| <div class="flex justify-center gap-6 mb-12"> | |
| <a href="mailto:contact@example.com" class="btn-primary"> | |
| <i data-feather="mail" class="w-5 h-5"></i> | |
| Email Me | |
| </a> | |
| <a href="https://github.com/Dev-in-the-BM" class="btn-secondary"> | |
| <i data-feather="github" class="w-5 h-5"></i> | |
| GitHub | |
| </a> | |
| </div> | |
| <div class="flex justify-center gap-8"> | |
| <a href="https://github.com/Dev-in-the-BM" class="text-gray-400 hover:text-white transition-all hover:scale-110"> | |
| <i data-feather="github" class="w-8 h-8"></i> | |
| </a> | |
| <a href="https://forums.jtechforums.org/invites/8jD5U8NMxr" class="text-gray-400 hover:text-white transition-all hover:scale-110"> | |
| <i data-feather="message-circle" class="w-8 h-8"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <img src="https://capsule-render.vercel.app/api?type=waving&height=150&color=gradient§ion=footer" alt="Wave" class="w-full mb-6" /> | |
| <p class="text-gray-500 text-lg"> | |
| © 2024 dev-in-the-bm. Built with <span class="emoji-bounce">🧠</span> Yiddeshe Kup and lots of <span class="emoji-bounce">☕</span> | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Enhanced Custom Cursor | |
| const cursor = document.querySelector('.custom-cursor'); | |
| const follower = document.querySelector('.cursor-follower'); | |
| document.addEventListener('mousemove', (e) => { | |
| cursor.style.left = e.clientX - 10 + 'px'; | |
| cursor.style.top = e.clientY - 10 + 'px'; | |
| setTimeout(() => { | |
| follower.style.left = e.clientX - 20 + 'px'; | |
| follower.style.top = e.clientY - 20 + 'px'; | |
| }, 100); | |
| }); | |
| document.addEventListener('mousedown', () => { | |
| cursor.style.transform = 'scale(0.6)'; | |
| follower.style.transform = 'scale(0.8)'; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| cursor.style.transform = 'scale(1)'; | |
| follower.style.transform = 'scale(1)'; | |
| }); | |
| // Magnetic button effect | |
| document.querySelectorAll('.magnetic-button').forEach(button => { | |
| button.addEventListener('mousemove', (e) => { | |
| const rect = button.getBoundingClientRect(); | |
| const x = e.clientX - rect.left - rect.width / 2; | |
| const y = e.clientY - rect.top - rect.height / 2; | |
| button.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px) scale(1.05)`; | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.style.transform = 'translate(0, 0) scale(1)'; | |
| }); | |
| }); | |
| // Text reveal animation | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const textObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('active'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.text-reveal').forEach(el => { | |
| textObserver.observe(el); | |
| }); | |
| document.querySelectorAll('.stagger-animation').forEach(el => { | |
| textObserver.observe(el); | |
| }); | |
| // Parallax effect | |
| window.addEventListener('scroll', () => { | |
| const scrolled = window.pageYOffset; | |
| const parallax = document.querySelector('.parallax-bg'); | |
| if (parallax) { | |
| parallax.style.transform = `translateY(${scrolled * 0.5}px)`; | |
| } | |
| }); | |
| // Particles.js | |
| particlesJS('particles-js', { | |
| particles: { | |
| number: { | |
| value: 40, | |
| density: { | |
| enable: true, | |
| value_area: 1000 | |
| } | |
| }, | |
| color: { | |
| value: '#7c3aed' | |
| }, | |
| shape: { | |
| type: 'circle' | |
| }, | |
| opacity: { | |
| value: 0.3, | |
| random: false | |
| }, | |
| size: { | |
| value: 2, | |
| random: true | |
| }, | |
| line_linked: { | |
| enable: true, | |
| distance: 120, | |
| color: '#7c3aed', | |
| opacity: 0.2, | |
| width: 1 | |
| }, | |
| move: { | |
| enable: true, | |
| speed: 1.5, | |
| direction: 'none', | |
| random: false, | |
| straight: false, | |
| out_mode: 'out', | |
| bounce: false | |
| } | |
| }, | |
| interactivity: { | |
| detect_on: 'canvas', | |
| events: { | |
| onhover: { | |
| enable: false | |
| }, | |
| onclick: { | |
| enable: false | |
| }, | |
| resize: true | |
| } | |
| }, | |
| retina_detect: true | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Enhanced scroll animations | |
| const sections = document.querySelectorAll('section'); | |
| sections.forEach((section, index) => { | |
| section.style.opacity = '0'; | |
| section.style.transform = 'translateY(50px)'; | |
| section.style.transition = `all 0.8s cubic-bezier(0.4, 0, 0.2, 1) ${index * 0.1}s`; | |
| }); | |
| const sectionObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| sections.forEach(section => { | |
| sectionObserver.observe(section); | |
| }); | |
| // Terminal typing effect | |
| const terminalLines = document.querySelectorAll('.terminal .text-green-400 p'); | |
| terminalLines.forEach((line, index) => { | |
| line.style.opacity = '0'; | |
| setTimeout(() => { | |
| line.style.transition = 'opacity 0.5s ease'; | |
| line.style.opacity = '1'; | |
| }, index * 1000); | |
| }); | |
| // Mobile menu toggle with animation | |
| function toggleMobileMenu() { | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.className = 'fixed inset-0 bg-black bg-opacity-90 z-50 flex items-center justify-center'; | |
| mobileMenu.innerHTML = ` | |
| <div class="text-center"> | |
| <button onclick="this.parentElement.parentElement.remove()" class="absolute top-6 right-6 text-white"> | |
| <i data-feather="x" class="w-8 h-8"></i> | |
| </button> | |
| <nav class="flex flex-col gap-6 text-2xl"> | |
| <a href="#home" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Home</a> | |
| <a href="#about" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">About</a> | |
| <a href="#projects" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Projects</a> | |
| <a href="#skills" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Skills</a> | |
| <a href="#sponsor" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Sponsor</a> | |
| <a href="#contact" onclick="toggleMobileMenu()" class="text-gray-300 hover:text-white transition-colors">Contact</a> | |
| </nav> | |
| </div> | |
| `; | |
| document.body.appendChild(mobileMenu); | |
| feather.replace(); | |
| } | |
| </script> | |
| </body> | |
| </html> | |