|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Anime Dev Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f9f9ff; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.anime-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
|
|
|
.character { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.character:hover { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
|
|
|
.skill-bar { |
|
|
height: 10px; |
|
|
border-radius: 5px; |
|
|
background-color: #e0e0e0; |
|
|
} |
|
|
|
|
|
.skill-progress { |
|
|
height: 100%; |
|
|
border-radius: 5px; |
|
|
background: linear-gradient(90deg, #6e8efb, #a777e3); |
|
|
transition: width 1s ease-in-out; |
|
|
} |
|
|
|
|
|
.project-card { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #6e8efb; |
|
|
white-space: nowrap; |
|
|
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
|
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #6e8efb; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<nav class="anime-bg text-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-code text-2xl"></i> |
|
|
<span class="text-xl font-bold">AnimeDev</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="hover:text-pink-200 transition">Home</a> |
|
|
<a href="#about" class="hover:text-pink-200 transition">About</a> |
|
|
<a href="#skills" class="hover:text-pink-200 transition">Skills</a> |
|
|
<a href="#projects" class="hover:text-pink-200 transition">Projects</a> |
|
|
<a href="#contact" class="hover:text-pink-200 transition">Contact</a> |
|
|
</div> |
|
|
<button class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="anime-bg text-white py-20"> |
|
|
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="text-pink-200">AnimeDev</span></h1> |
|
|
<div class="typewriter text-2xl md:text-3xl mb-6">Full Stack Developer & Anime Enthusiast</div> |
|
|
<p class="text-lg mb-8">Coding with the power of anime characters by my side! Building beautiful, functional web applications with modern technologies.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button class="bg-white text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-purple-100 transition">View Projects</button> |
|
|
<button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Contact Me</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<img src="https://i.imgur.com/JYwYQ3a.png" alt="Anime Developer" class="w-full max-w-md mx-auto floating"> |
|
|
<div class="absolute -bottom-10 -left-10 w-24 h-24 bg-yellow-300 rounded-full opacity-20"></div> |
|
|
<div class="absolute -top-10 -right-10 w-32 h-32 bg-pink-300 rounded-full opacity-20"></div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">About <span class="text-purple-600">Me</span></h2> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/3 mb-10 md:mb-0 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<img src="https://i.imgur.com/8Km9tLL.png" alt="Profile" class="w-64 h-64 rounded-full border-4 border-purple-200 object-cover shadow-xl"> |
|
|
<div class="absolute -bottom-5 -right-5 bg-purple-100 p-3 rounded-full shadow-lg"> |
|
|
<i class="fas fa-heart text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-2/3 md:pl-12"> |
|
|
<h3 class="text-2xl font-semibold mb-4">Who is this anime-loving developer?</h3> |
|
|
<p class="text-gray-600 mb-6">I'm a passionate full-stack developer with 5+ years of experience creating web applications. When I'm not coding, you can find me watching the latest anime series or attending cosplay events. I believe the creativity and storytelling in anime inspire me to build more imaginative and user-friendly applications.</p> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8"> |
|
|
<div class="bg-purple-50 p-4 rounded-lg text-center"> |
|
|
<i class="fas fa-code text-purple-600 text-3xl mb-2"></i> |
|
|
<p class="font-semibold">100+ Projects</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg text-center"> |
|
|
<i class="fas fa-users text-purple-600 text-3xl mb-2"></i> |
|
|
<p class="font-semibold">50+ Clients</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg text-center"> |
|
|
<i class="fas fa-award text-purple-600 text-3xl mb-2"></i> |
|
|
<p class="font-semibold">10 Awards</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://i.imgur.com/VYfZJ5Z.png" alt="Naruto" class="w-12 h-12 rounded-full border-2 border-purple-200 object-cover"> |
|
|
<span class="ml-2 font-medium">Naruto Mode</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://i.imgur.com/9GkDq5W.png" alt="Luffy" class="w-12 h-12 rounded-full border-2 border-purple-200 object-cover"> |
|
|
<span class="ml-2 font-medium">Gear 5 Coding</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://i.imgur.com/8Km9tLL.png" alt="Nezuko" class="w-12 h-12 rounded-full border-2 border-purple-200 object-cover"> |
|
|
<span class="ml-2 font-medium">Demon Slayer Debugging</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="skills" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">My <span class="text-purple-600">Skills</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12"> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold mb-6 flex items-center"> |
|
|
<i class="fas fa-laptop-code text-purple-600 mr-3"></i> |
|
|
Technical Skills |
|
|
</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">JavaScript / TypeScript</span> |
|
|
<span class="text-purple-600">95%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">React / Next.js</span> |
|
|
<span class="text-purple-600">90%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 90%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Node.js / Express</span> |
|
|
<span class="text-purple-600">85%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 85%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-2"> |
|
|
<span class="font-medium">Python / Django</span> |
|
|
<span class="text-purple-600">80%</span> |
|
|
</div> |
|
|
<div class="skill-bar"> |
|
|
<div class="skill-progress" style="width: 80%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-semibold mb-6 flex items-center"> |
|
|
<i class="fas fa-gamepad text-purple-600 mr-3"></i> |
|
|
Anime Powers |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-md text-center character"> |
|
|
<img src="https://i.imgur.com/VYfZJ5Z.png" alt="Shadow Clone" class="w-16 h-16 mx-auto mb-3"> |
|
|
<h4 class="font-semibold">Shadow Clone Coding</h4> |
|
|
<p class="text-sm text-gray-600">Multiply myself to work on multiple projects simultaneously</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow-md text-center character"> |
|
|
<img src="https://i.imgur.com/9GkDq5W.png" alt="Gear 5" class="w-16 h-16 mx-auto mb-3"> |
|
|
<h4 class="font-semibold">Gear 5 Debugging</h4> |
|
|
<p class="text-sm text-gray-600">Find and fix bugs with cartoonish creativity</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow-md text-center character"> |
|
|
<img src="https://i.imgur.com/8Km9tLL.png" alt="Demon Slayer" class="w-16 h-16 mx-auto mb-3"> |
|
|
<h4 class="font-semibold">Breath of Code</h4> |
|
|
<p class="text-sm text-gray-600">Write clean, efficient code with focused breathing techniques</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg shadow-md text-center character"> |
|
|
<img src="https://i.imgur.com/JYwYQ3a.png" alt="Attack on Titan" class="w-16 h-16 mx-auto mb-3"> |
|
|
<h4 class="font-semibold">Titan Problem Solving</h4> |
|
|
<p class="text-sm text-gray-600">Tackle giant coding challenges with strategic thinking</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="projects" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">My <span class="text-purple-600">Projects</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100"> |
|
|
<div class="relative"> |
|
|
<img src="https://i.imgur.com/KYQ0xXA.png" alt="Anime Tracker" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">React</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">AnimeTracker App</h3> |
|
|
<p class="text-gray-600 mb-4">A comprehensive anime tracking application with personalized recommendations and social features.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">React</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Node.js</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">MongoDB</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-purple-600 font-medium hover:underline">View Project</a> |
|
|
<div class="flex space-x-2"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<span>4.9</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100"> |
|
|
<div class="relative"> |
|
|
<img src="https://i.imgur.com/LXhTz7S.png" alt="Cosplay Marketplace" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">Next.js</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Cosplay Marketplace</h3> |
|
|
<p class="text-gray-600 mb-4">An e-commerce platform for anime cosplay costumes and accessories with AR try-on feature.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Next.js</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Stripe</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Three.js</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-purple-600 font-medium hover:underline">View Project</a> |
|
|
<div class="flex space-x-2"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<span>4.7</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="project-card bg-white rounded-xl overflow-hidden border border-gray-100"> |
|
|
<div class="relative"> |
|
|
<img src="https://i.imgur.com/5zJgZzQ.png" alt="Manga Reader" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">Vue</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">Manga Reader Pro</h3> |
|
|
<p class="text-gray-600 mb-4">A progressive web app for reading manga with customizable reading modes and offline support.</p> |
|
|
<div class="flex flex-wrap gap-2 mb-4"> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Vue</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Firebase</span> |
|
|
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">PWA</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<a href="#" class="text-purple-600 font-medium hover:underline">View Project</a> |
|
|
<div class="flex space-x-2"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<span>4.8</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="bg-purple-600 text-white px-8 py-3 rounded-full font-semibold hover:bg-purple-700 transition">View All Projects</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 anime-bg text-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Get In <span class="text-pink-200">Touch</span></h2> |
|
|
|
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h3 class="text-2xl font-semibold mb-6">Let's talk about your project!</h3> |
|
|
<p class="mb-8">Whether you want to discuss a potential project, ask about my services, or just talk about the latest anime episode, feel free to reach out!</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Email</p> |
|
|
<p>anime.dev@example.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Phone</p> |
|
|
<p>+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<div class="bg-white bg-opacity-20 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">Location</p> |
|
|
<p>Tokyo, Japan (Remote Worldwide)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="text-xl font-semibold mb-4">Follow My Anime Journey</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center hover:bg-opacity-30 transition"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center hover:bg-opacity-30 transition"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center hover:bg-opacity-30 transition"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-white bg-opacity-20 w-10 h-10 rounded-full flex items-center justify-center hover:bg-opacity-30 transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<form class="bg-white bg-opacity-10 backdrop-blur-sm p-8 rounded-xl"> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block mb-2 font-medium">Your Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-200" placeholder="Naruto Uzumaki"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block mb-2 font-medium">Your Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-200" placeholder="ninja@konoha.com"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block mb-2 font-medium">Subject</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-200" placeholder="Web Development Project"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block mb-2 font-medium">Your Message</label> |
|
|
<textarea id="message" rows="5" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-200" placeholder="Believe it! I need an awesome website..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full bg-pink-200 text-purple-800 px-6 py-3 rounded-lg font-semibold hover:bg-pink-300 transition">Send Message</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-purple-900 text-white py-10"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-code text-2xl"></i> |
|
|
<span class="text-xl font-bold">AnimeDev</span> |
|
|
</div> |
|
|
<p class="mt-2 text-purple-200">Coding with anime power since 2018</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#home" class="hover:text-pink-200 transition">Home</a> |
|
|
<a href="#about" class="hover:text-pink-200 transition">About</a> |
|
|
<a href="#skills" class="hover:text-pink-200 transition">Skills</a> |
|
|
<a href="#projects" class="hover:text-pink-200 transition">Projects</a> |
|
|
<a href="#contact" class="hover:text-pink-200 transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-purple-800 mt-8 pt-8 text-center text-purple-300"> |
|
|
<p>© 2023 AnimeDev Portfolio. All rights reserved. Made with <i class="fas fa-heart text-pink-300"></i> and <i class="fas fa-bolt text-yellow-300"></i></p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-10 right-10 z-50 hidden md:block"> |
|
|
<div class="relative"> |
|
|
<div class="bg-purple-600 text-white w-16 h-16 rounded-full flex items-center justify-center cursor-pointer shadow-xl hover:bg-purple-700 transition"> |
|
|
<i class="fas fa-dragon text-2xl"></i> |
|
|
</div> |
|
|
<div class="absolute -top-20 -right-20 w-40"> |
|
|
<img src="https://i.imgur.com/8Km9tLL.png" alt="Floating Anime" class="w-full floating"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const skillBars = document.querySelectorAll('.skill-progress'); |
|
|
|
|
|
const animateSkillBars = () => { |
|
|
skillBars.forEach(bar => { |
|
|
const width = bar.style.width; |
|
|
bar.style.width = '0%'; |
|
|
setTimeout(() => { |
|
|
bar.style.width = width; |
|
|
}, 100); |
|
|
}); |
|
|
}; |
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
animateSkillBars(); |
|
|
observer.unobserve(entry.target); |
|
|
} |
|
|
}); |
|
|
}, {threshold: 0.5}); |
|
|
|
|
|
const skillsSection = document.querySelector('#skills'); |
|
|
if (skillsSection) { |
|
|
observer.observe(skillsSection); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('button.md\\:hidden'); |
|
|
if (mobileMenuButton) { |
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
const nav = document.querySelector('.md\\:flex.space-x-8'); |
|
|
if (nav) { |
|
|
nav.classList.toggle('hidden'); |
|
|
nav.classList.toggle('flex'); |
|
|
nav.classList.toggle('flex-col'); |
|
|
nav.classList.toggle('absolute'); |
|
|
nav.classList.toggle('top-16'); |
|
|
nav.classList.toggle('left-0'); |
|
|
nav.classList.toggle('right-0'); |
|
|
nav.classList.toggle('bg-purple-700'); |
|
|
nav.classList.toggle('p-4'); |
|
|
nav.classList.toggle('space-y-4'); |
|
|
nav.classList.toggle('space-x-8'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tame342/my-bio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
