| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Johnathan Pierce | Mechanical Engineer</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #2a9d8f; |
| --primary-dark: #1d7a6e; |
| --accent: #e76f51; |
| --dark: #264653; |
| --light: #f8f9fa; |
| --gray: #6c757d; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--light); |
| color: var(--dark); |
| overflow-x: hidden; |
| position: relative; |
| } |
| |
| .mono { |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .ascii-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| pointer-events: none; |
| color: rgba(108, 117, 125, 0.15); |
| font-size: 12px; |
| line-height: 1; |
| overflow: hidden; |
| } |
| |
| .ascii-char { |
| position: absolute; |
| transition: all 0.3s ease; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .section-divider { |
| border: none; |
| height: 2px; |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); |
| margin: 4rem 0; |
| } |
| |
| .card-3d { |
| transform-style: preserve-3d; |
| transform: perspective(1000px); |
| } |
| |
| .skill-bar { |
| background: linear-gradient(90deg, var(--primary), var(--primary-dark)); |
| height: 8px; |
| border-radius: 4px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .skill-bar::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 100%; |
| width: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); |
| animation: shimmer 2s infinite; |
| } |
| |
| @keyframes shimmer { |
| 0% { transform: translateX(-100%); } |
| 100% { transform: translateX(100%); } |
| } |
| |
| .terminal-window { |
| background: #1a1a1a; |
| border-radius: 8px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.3); |
| overflow: hidden; |
| } |
| |
| .terminal-header { |
| background: #2d2d2d; |
| padding: 12px 16px; |
| border-bottom: 1px solid #404040; |
| } |
| |
| .terminal-buttons { |
| display: flex; |
| gap: 8px; |
| } |
| |
| .terminal-button { |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| } |
| |
| .terminal-button.close { background: #ff5f57; } |
| .terminal-button.minimize { background: #ffbd2e; } |
| .terminal-button.maximize { background: #28c940; } |
| |
| .terminal-content { |
| padding: 20px; |
| color: #00ff00; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 14px; |
| line-height: 1.5; |
| } |
| |
| .project-card { |
| border: 1px solid #e2e8f0; |
| transition: all 0.3s ease; |
| background: white; |
| } |
| |
| .project-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); |
| border-color: var(--primary); |
| } |
| |
| .dark .project-card { |
| background: #1e293b; |
| border-color: #374151; |
| } |
| |
| .dark .project-card:hover { |
| border-color: var(--primary); |
| } |
| </style> |
| </head> |
| <body class="bg-white dark:bg-gray-900"> |
| |
| <div id="asciiCanvas" class="ascii-bg"></div> |
|
|
| |
| <nav class="fixed w-full z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16 items-center"> |
| <div class="flex-shrink-0 flex items-center"> |
| <span class="mono text-xl font-bold text-gray-900 dark:text-white">JP_ENGINEER</span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-8 mono"> |
| <a href="#home" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[HOME]</a> |
| <a href="#about" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[ABOUT]</a> |
| <a href="#skills" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[SKILLS]</a> |
| <a href="#projects" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[PROJECTS]</a> |
| <a href="#contact" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">[CONTACT]</a> |
| </div> |
| </div> |
| <div class="md:hidden"> |
| <button id="mobile-menu-button" class="text-gray-700 dark:text-gray-300"> |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="min-h-screen flex items-center justify-center pt-16"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="terminal-window max-w-3xl mx-auto"> |
| <div class="terminal-header"> |
| <div class="terminal-buttons"> |
| <div class="terminal-button close"></div> |
| <div class="terminal-button minimize"></div> |
| <div class="terminal-button maximize"></div> |
| </div> |
| </div> |
| <div class="terminal-content"> |
| <div class="text-left"> |
| <p class="text-green-400">$ whoami</p> |
| <p class="text-white mb-4">johnathan_pierce_mechanical_engineer</p> |
| |
| <p class="text-green-400">$ cat about_me.txt</p> |
| <p class="text-white mb-4">NAME: Johnathan Pierce</p> |
| <p class="text-white mb-4">TITLE: Senior Mechanical Engineer</p> |
| <p class="text-white mb-4">SPECIALTY: Robotics & Automation Systems</p> |
| <p class="text-white mb-4">LOCATION: Boston, MA</p> |
| |
| <p class="text-green-400">$ ls skills/</p> |
| <p class="text-white">CAD_Design FEA_Analysis Prototyping Robotics Automation Python MATLAB</p> |
| |
| <p class="text-green-400 mt-4">$ <span class="cursor-blink">_</span></p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12"> |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-4 mono"> |
| > ENGINEERING_EXCELLENCE |
| </h1> |
| <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto"> |
| Designing the future through precision mechanics and innovative automation solutions. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="#projects" class="px-8 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-colors mono"> |
| [VIEW_PROJECTS] |
| </a> |
| <a href="#contact" class="px-8 py-3 border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium rounded-lg transition-colors mono"> |
| [GET_IN_TOUCH] |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <hr class="section-divider"> |
|
|
| |
| <section id="about" class="py-20"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid md:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 mono"> |
| > ABOUT_ME |
| </h2> |
| <div class="space-y-4 text-gray-600 dark:text-gray-300"> |
| <p> |
| With over 8 years of experience in mechanical engineering, I specialize in creating |
| innovative solutions for complex problems. My expertise spans robotics, automation, |
| and precision mechanical design. |
| </p> |
| <p> |
| I believe in the power of elegant engineering - creating systems that are not only |
| functional but also efficient, reliable, and beautifully simple in their execution. |
| </p> |
| <p> |
| Currently leading the robotics division at TechInnovate Solutions, where we're |
| developing next-generation automation systems for manufacturing and logistics. |
| </p> |
| </div> |
| |
| <div class="mt-8 grid grid-cols-2 gap-4"> |
| <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="text-2xl font-bold text-primary mono">50+</div> |
| <div class="text-sm text-gray-600 dark:text-gray-300">Projects Completed</div> |
| </div> |
| <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="text-2xl font-bold text-primary mono">8+</div> |
| <div class="text-sm text-gray-600 dark:text-gray-300">Years Experience</div> |
| </div> |
| <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="text-2xl font-bold text-primary mono">12</div> |
| <div class="text-sm text-gray-600 dark:text-gray-300">Patents Filed</div> |
| </div> |
| <div class="text-center p-4 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="text-2xl font-bold text-primary mono">100%</div> |
| <div class="text-sm text-gray-600 dark:text-gray-300">Client Satisfaction</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="relative"> |
| <div class="bg-primary/10 p-8 rounded-2xl"> |
| <div class="terminal-window"> |
| <div class="terminal-header"> |
| <div class="terminal-buttons"> |
| <div class="terminal-button close"></div> |
| <div class="terminal-button minimize"></div> |
| <div class="terminal-button maximize"></div> |
| </div> |
| </div> |
| <div class="terminal-content"> |
| <p class="text-green-400">$ cat education.txt</p> |
| <p class="text-white">MS Mechanical Engineering - MIT '15</p> |
| <p class="text-white">BS Mechanical Engineering - Stanford '13</p> |
| <br> |
| <p class="text-green-400">$ cat certifications.txt</p> |
| <p class="text-white">Certified SolidWorks Professional</p> |
| <p class="text-white">Professional Engineer (PE) License</p> |
| <p class="text-white">Robotics Systems Certification</p> |
| <br> |
| <p class="text-green-400">$ cat interests.txt</p> |
| <p class="text-white">3D Printing & Prototyping</p> |
| <p class="text-white">Industrial Robotics</p> |
| <p class="text-white">Renewable Energy Systems</p> |
| <p class="text-white">Mountain Biking & Engineering</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <hr class="section-divider"> |
|
|
| |
| <section id="skills" class="py-20 bg-gray-50 dark:bg-gray-800"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-16 mono"> |
| > TECHNICAL_SKILLS |
| </h2> |
| |
| <div class="grid md:grid-cols-2 gap-12"> |
| <div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 mono">[ENGINEERING_SOFTWARE]</h3> |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">SolidWorks</span> |
| <span class="text-primary font-medium mono">95%</span> |
| </div> |
| <div class="skill-bar" style="width: 95%"></div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">AutoCAD</span> |
| <span class="text-primary font-medium mono">90%</span> |
| </div> |
| <div class="skill-bar" style="width: 90%"></div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">ANSYS</span> |
| <span class="text-primary font-medium mono">85%</span> |
| </div> |
| <div class="skill-bar" style="width: 85%"></div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">MATLAB</span> |
| <span class="text-primary font-medium mono">88%</span> |
| </div> |
| <div class="skill-bar" style="width: 88%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6 mono">[PROGRAMMING]</h3> |
| <div class="space-y-6"> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">Python</span> |
| <span class="text-primary font-medium mono">92%</span> |
| </div> |
| <div class="skill-bar" style="width: 92%"></div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">C++</span> |
| <span class="text-primary font-medium mono">80%</span> |
| </div> |
| <div class="skill-bar" style="width: 80%"></div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">ROS</span> |
| <span class="text-primary font-medium mono">85%</span> |
| </div> |
| <div class="skill-bar" style="width: 85%"></div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-2"> |
| <span class="text-gray-700 dark:text-gray-300 mono">LabVIEW</span> |
| <span class="text-primary font-medium mono">78%</span> |
| </div> |
| <div class="skill-bar" style="width: 78%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-16"> |
| <h3 class="text-xl font-semibold text-center text-gray-900 dark:text-white mb-8 mono">[DOMAIN_EXPERTISE]</h3> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm"> |
| <div class="text-4xl mb-3">🤖</div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mono">Robotics</h4> |
| </div> |
| <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm"> |
| <div class="text-4xl mb-3">⚙️</div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mono">Automation</h4> |
| </div> |
| <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm"> |
| <div class="text-4xl mb-3">📐</div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mono">CAD Design</h4> |
| </div> |
| <div class="text-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-sm"> |
| <div class="text-4xl mb-3">🔬</div> |
| <h4 class="font-semibold text-gray-900 dark:text-white mono">FEA Analysis</h4> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <hr class="section-divider"> |
|
|
| |
| <section id="projects" class="py-20"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-900 dark:text-white mb-16 mono"> |
| > FEATURED_PROJECTS |
| </h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="project-card rounded-xl p-6"> |
| <div class="text-4xl mb-4">🏭</div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 mono">AutoAssembly Bot</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> |
| Industrial robotic arm with computer vision for automated assembly line operations. |
| </p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">ROS</span> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Python</span> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">SolidWorks</span> |
| </div> |
| <a href="#" class="text-primary hover:text-primary-dark font-medium mono text-sm">[VIEW_DETAILS]</a> |
| </div> |
| |
| |
| <div class="project-card rounded-xl p-6"> |
| <div class="text-4xl mb-4">🔋</div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 mono">Battery Pack System</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> |
| Modular battery pack design with thermal management for electric vehicles. |
| </p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Thermal</span> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">FEA</span> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Prototyping</span> |
| </div> |
| <a href="#" class="text-primary hover:text-primary-dark font-medium mono text-sm">[VIEW_DETAILS]</a> |
| </div> |
| |
| |
| <div class="project-card rounded-xl p-6"> |
| <div class="text-4xl mb-4">🦾</div> |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 mono">ExoSkeleton Arm</h3> |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> |
| Lightweight exoskeleton for industrial workers to reduce fatigue and prevent injury. |
| </p> |
| <div class="flex flex-wrap gap-2 mb-4"> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Biomechanics</span> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">CAD</span> |
| <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full mono">Testing</span> |
| </div> |
| <a href="#" class="text-primary hover:text-primary-dark font-medium mono text-sm">[VIEW_DETAILS]</a> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12"> |
| <a href="#" class="px-8 py-3 border-2 border-primary text-primary hover:bg-primary hover:text-white font-medium rounded-lg transition-colors mono"> |
| [VIEW_ALL_PROJECTS] |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| <hr class="section-divider"> |
|
|
| |
| <section id="contact" class="py-20 bg-gray-50 dark:bg-gray-800"> |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6 mono"> |
| > LET'S_CONNECT |
| </h2> |
| <p class="text-xl text-gray-600 dark:text-gray-300 mb-12 max-w-2xl mx-auto"> |
| Interested in collaborating on innovative engineering projects? Let's discuss how we can bring your ideas to life. |
| </p> |
| |
| <div class="grid md:grid-cols-3 gap-8 mb-12"> |
| <div class="text-center"> |
| <div class="text-3xl mb-4">📧</div> |
| <h3 class="font-semibold text-gray-900 dark:text-white mb-2 mono">EMAIL</h3> |
| <p class="text-gray-600 dark:text-gray-300">johnathan@jpengineer.dev</p> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl mb-4">💼</div> |
| <h3 class="font-semibold text-gray-900 dark:text-white mb-2 mono">LINKEDIN</h3> |
| <p class="text-gray-600 dark:text-gray-300">/in/johnathanpierce</p> |
| </div> |
| <div class="text-center"> |
| <div class="text-3xl mb-4">📍</div> |
| <h3 class="font-semibold text-gray-900 dark:text-white mb-2 mono">LOCATION</h3> |
| <p class="text-gray-600 dark:text-gray-300">Boston, MA</p> |
| </div> |
| </div> |
| |
| <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-sm"> |
| <form class="space-y-6 max-w-2xl mx-auto"> |
| <div class="grid md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[NAME]</label> |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required> |
| </div> |
| <div> |
| <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[EMAIL]</label> |
| <input type="email" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required> |
| </div> |
| </div> |
| <div> |
| <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[SUBJECT]</label> |
| <input type="text" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required> |
| </div> |
| <div> |
| <label class="block text-left text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 mono">[MESSAGE]</label> |
| <textarea rows="5" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-primary focus:border-primary dark:bg-gray-800 dark:text-white" required></textarea> |
| </div> |
| <button type="submit" class="w-full px-8 py-4 bg-primary hover:bg-primary-dark text-white font-medium rounded-lg transition-colors mono"> |
| [SEND_MESSAGE] |
| </button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="mono text-2xl font-bold text-primary mb-4">JP_ENGINEER</div> |
| <p class="text-gray-400 mb-8">Engineering solutions for tomorrow's challenges</p> |
| |
| <div class="flex justify-center space-x-6 mb-8"> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <span class="mono">[GITHUB]</span> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <span class="mono">[LINKEDIN]</span> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> |
| <span class="mono">[TWITTER]</span> |
| </a> |
| </div> |
| |
| <div class="text-gray-500 text-sm mono"> |
| © 2024 JOHNATHAN PIERCE. ALL RIGHTS RESERVED. |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const asciiChars = ['#', '*', '+', '-', '.', ':', ';', '=', '?', '@', '[', ']', '^', '_', '{', '|', '}', '~']; |
| const asciiCanvas = document.getElementById('asciiCanvas'); |
| let asciiElements = []; |
| |
| function createAsciiBackground() { |
| const density = 0.5; |
| const width = window.innerWidth; |
| const height = window.innerHeight; |
| const charCount = Math.floor((width * height * density) / 10000); |
| |
| |
| asciiElements.forEach(el => el.remove()); |
| asciiElements = []; |
| |
| |
| for (let i = 0; i < charCount; i++) { |
| const char = document.createElement('div'); |
| char.className = 'ascii-char'; |
| char.textContent = asciiChars[Math.floor(Math.random() * asciiChars.length)]; |
| char.style.left = Math.random() * width + 'px'; |
| char.style.top = Math.random() * height + 'px'; |
| char.style.opacity = Math.random() * 0.3 + 0.1; |
| char.style.fontSize = (Math.random() * 8 + 8) + 'px'; |
| |
| asciiCanvas.appendChild(char); |
| asciiElements.push(char); |
| } |
| } |
| |
| function handleMouseMove(e) { |
| const mouseX = e.clientX; |
| const mouseY = e.clientY; |
| |
| asciiElements.forEach(char => { |
| const rect = char.getBoundingClientRect(); |
| const charX = rect.left + rect.width / 2; |
| const charY = rect.top + rect.height / 2; |
| |
| const distance = Math.sqrt(Math.pow(mouseX - charX, 2) + Math.pow(mouseY - charY, 2)); |
| const maxDistance = 150; |
| |
| if (distance < maxDistance) { |
| const force = (maxDistance - distance) / maxDistance; |
| const angle = Math.atan2(charY - mouseY, charX - mouseX); |
| const moveX = Math.cos(angle) * force * 20; |
| const moveY = Math.sin(angle) * force * 20; |
| |
| char.style.transform = `translate(${moveX}px, ${moveY}px)`; |
| char.style.opacity = Math.min(0.8, parseFloat(char.style.opacity) + force * 0.3); |
| } else { |
| char.style.transform = 'translate(0, 0)'; |
| char.style.opacity = char.getAttribute('data-original-opacity') || '0.2'; |
| } |
| }); |
| } |
| |
| |
| createAsciiBackground(); |
| document.addEventListener('mousemove', handleMouseMove); |
| window.addEventListener('resize', createAsciiBackground); |
| |
| |
| setTimeout(() => { |
| asciiElements.forEach(char => { |
| char.setAttribute('data-original-opacity', char.style.opacity); |
| }); |
| }, 100); |
| |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| |
| alert('Mobile menu would open here'); |
| }); |
| |
| |
| const cursor = document.querySelector('.cursor-blink'); |
| if (cursor) { |
| setInterval(() => { |
| cursor.style.visibility = cursor.style.visibility === 'hidden' ? 'visible' : 'hidden'; |
| }, 500); |
| } |
| </script> |
| </body> |
| </html> |
