|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Ali Brown | Hugging Face 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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'hf-purple': '#FFD700', |
|
|
'hf-dark': '#0F172A', |
|
|
'hf-light': '#F8FAFC', |
|
|
'hf-accent': '#7C3AED', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Inter', 'sans-serif'], |
|
|
}, |
|
|
animation: { |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
'gradient': 'gradient 8s ease infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' }, |
|
|
}, |
|
|
gradient: { |
|
|
'0%, 100%': { 'background-position': '0% 50%' }, |
|
|
'50%': { 'background-position': '100% 50%' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0F172A; |
|
|
color: #F8FAFC; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(-45deg, #0F172A, #1E293B, #334155, #475569); |
|
|
background-size: 400% 400%; |
|
|
animation: gradient 15s ease infinite; |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(124, 58, 237, 0.3); |
|
|
} |
|
|
|
|
|
.social-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-icon:hover { |
|
|
transform: scale(1.2); |
|
|
color: #FFD700; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #FFD700; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.app-card { |
|
|
background: rgba(30, 41, 59, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen gradient-bg"> |
|
|
<nav class="bg-hf-dark/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex items-center justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<span class="text-hf-purple font-bold text-xl">Ali Brown</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
|
<a href="#home" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a> |
|
|
<a href="#projects" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a> |
|
|
<a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a> |
|
|
<a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-4 flex items-center md:ml-6"> |
|
|
<a href="https://huggingface.co/AliBrown" target="_blank" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
|
|
<i class="fas fa-robot mr-2"></i> Visit Hugging Face |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="-mr-2 flex md:hidden"> |
|
|
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:hidden" id="mobile-menu"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a> |
|
|
<a href="#projects" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a> |
|
|
<a href="#about" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a> |
|
|
<a href="#contact" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a> |
|
|
<a href="https://huggingface.co/AliBrown" target="_blank" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark block px-3 py-2 rounded-md text-base font-medium flex items-center justify-center"> |
|
|
<i class="fas fa-robot mr-2"></i> Visit Hugging Face |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<section id="home" class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6"> |
|
|
<span class="text-hf-purple">Hello, I'm Ali Brown</span> |
|
|
<span class="text-white block mt-2">Full-Stack Developer & Security Nerd</span> |
|
|
</h1> |
|
|
<p class="text-lg text-gray-300 mb-8"> |
|
|
A developer and security enthusiast based in Berlin. I love building solid web applications, hardening servers, and bringing ideas to life with a touch of AI. |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#projects" class="bg-hf-purple hover:bg-yellow-500 text-hf-dark px-6 py-3 rounded-md font-medium"> |
|
|
Explore My Projects |
|
|
</a> |
|
|
<a href="#contact" class="border border-hf-purple text-hf-purple hover:bg-hf-purple hover:text-hf-dark px-6 py-3 rounded-md font-medium"> |
|
|
Contact Me |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative w-64 h-64 md:w-80 md:h-80"> |
|
|
<div class="absolute inset-0 bg-hf-purple/20 rounded-full blur-xl animate-pulse"></div> |
|
|
<div class="relative w-full h-full flex items-center justify-center"> |
|
|
<img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="w-full h-full object-contain animate-float"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="projects" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4"> |
|
|
<span class="text-hf-purple">My</span> |
|
|
<span class="text-white">Projects</span> |
|
|
</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Here's a selection of my work, from AI-powered tools to secure server architectures. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="overflow-hidden"> |
|
|
<div id="carousel" class="flex transition-transform duration-500 ease-in-out -ml-4"> |
|
|
<div class="carousel-item w-full md:w-1/2 lg:w-1/3 p-4 flex-shrink-0"> |
|
|
<div class="app-card rounded-xl p-6 h-full card-hover flex flex-col"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-hf-purple/20 p-3 rounded-lg"> |
|
|
<i class="fas fa-brain text-hf-purple text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">AI-Powered Portal</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6 flex-grow"> |
|
|
An informational portal for Germany's youth services, enhanced with an AI component to make complex data easily accessible. |
|
|
</p> |
|
|
<div class="flex justify-between items-center mt-auto"> |
|
|
<span class="text-sm text-hf-purple">AI • Full-Stack • Data</span> |
|
|
<a href="https://jugendamt-deutschland.de" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center"> |
|
|
Visit <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="carousel-item w-full md:w-1/2 lg:w-1/3 p-4 flex-shrink-0"> |
|
|
<div class="app-card rounded-xl p-6 h-full card-hover flex flex-col"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-hf-purple/20 p-3 rounded-lg"> |
|
|
<i class="fas fa-shield-halved text-hf-purple text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Secure Architectures</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6 flex-grow"> |
|
|
My passion project: experimenting with and hardening server configurations to build secure and resilient infrastructure from the ground up. |
|
|
</p> |
|
|
<div class="flex justify-between items-center mt-auto"> |
|
|
<span class="text-sm text-hf-purple">Security • Servers • DevOps</span> |
|
|
<a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center"> |
|
|
Explore <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="carousel-item w-full md:w-1/2 lg:w-1/3 p-4 flex-shrink-0"> |
|
|
<div class="app-card rounded-xl p-6 h-full card-hover flex flex-col"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-hf-purple/20 p-3 rounded-lg"> |
|
|
<i class="fas fa-globe-europe text-hf-purple text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold ml-4">Custom Web Solutions</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-6 flex-grow"> |
|
|
Various websites I've built for fun and for clients, focusing on clean code, performance, and great user experience. |
|
|
</p> |
|
|
<div class="flex justify-between items-center mt-auto"> |
|
|
<span class="text-sm text-hf-purple">Web Dev • UI/UX</span> |
|
|
<a href="https://volkansah.github.io/" target="_blank" rel="noopener noreferrer" class="text-hf-purple hover:text-yellow-500 font-medium flex items-center"> |
|
|
See More <i class="fas fa-external-link-alt ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="prevBtn" class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-hf-dark/80 hover:bg-hf-accent text-white p-3 rounded-full -ml-2 hidden sm:block"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
<button id="nextBtn" class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-hf-dark/80 hover:bg-hf-accent text-white p-3 rounded-full -mr-2 hidden sm:block"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="about" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10"> |
|
|
<div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8"> |
|
|
<h2 class="text-3xl font-bold mb-6"> |
|
|
<span class="text-hf-purple">About</span> |
|
|
<span class="text-white">Me</span> |
|
|
</h2> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
As a developer with a deep interest in cybersecurity, I focus on building applications that are not just functional, but also secure and robust. My journey began with web development and quickly grew into a passion for securing the entire stack. |
|
|
</p> |
|
|
<p class="text-gray-400 mb-6"> |
|
|
I'm driven by curiosity, whether it's exploring new ways to harden a Linux server or integrating AI models from Hugging Face into my work to solve real-world problems. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4 mb-6"> |
|
|
<span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Full-Stack Dev</span> |
|
|
<span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Cybersecurity</span> |
|
|
<span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Server Hardening</span> |
|
|
<span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">JavaScript</span> |
|
|
<span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">Linux</span> |
|
|
<span class="bg-hf-dark/80 text-hf-purple px-3 py-1 rounded-full text-sm">AI Integration</span> |
|
|
</div> |
|
|
<a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-hf-purple hover:text-yellow-500 font-medium"> |
|
|
<i class="fab fa-github mr-2"></i> Visit my GitHub |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2 lg:pl-10"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover"> |
|
|
<div class="text-hf-purple text-4xl mb-4"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Open Source</h3> |
|
|
<p class="text-gray-400"> |
|
|
I actively contribute to and maintain projects on my GitHub profile. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover"> |
|
|
<div class="text-hf-purple text-4xl mb-4"> |
|
|
<i class="fas fa-server"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Infrastructure</h3> |
|
|
<p class="text-gray-400"> |
|
|
Hands-on experience with server setup, maintenance, and security protocols. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover"> |
|
|
<div class="text-hf-purple text-4xl mb-4"> |
|
|
<i class="fas fa-user-secret"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Security Nerd</h3> |
|
|
<p class="text-gray-400"> |
|
|
Passionate about hardening systems and building secure digital environments. |
|
|
</p> |
|
|
</div> |
|
|
<div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-6 card-hover"> |
|
|
<div class="text-hf-purple text-4xl mb-4"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Web Platforms</h3> |
|
|
<p class="text-gray-400"> |
|
|
Built and launched several web projects, including an AI-powered portal. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4"> |
|
|
<span class="text-hf-purple">Get</span> |
|
|
<span class="text-white">In Touch</span> |
|
|
</h2> |
|
|
<p class="text-gray-400 max-w-2xl mx-auto"> |
|
|
Have a project in mind or want to collaborate? Feel free to reach out! |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-10"> |
|
|
<div class="lg:w-1/2"> |
|
|
<form action="#" method="POST" class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8"> |
|
|
<div class="mb-6"> |
|
|
<label for="name" class="block text-gray-300 mb-2">Your Name</label> |
|
|
<input type="text" id="name" name="name" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="email" class="block text-gray-300 mb-2">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="subject" class="block text-gray-300 mb-2">Subject</label> |
|
|
<input type="text" id="subject" name="subject" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label for="message" class="block text-gray-300 mb-2">Message</label> |
|
|
<textarea id="message" name="message" rows="5" class="w-full bg-hf-dark border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-hf-purple"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-hf-purple hover:bg-yellow-500 text-hf-dark font-medium py-3 px-6 rounded-lg transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-hf-dark/50 border border-gray-800 rounded-xl p-8 h-full"> |
|
|
<h3 class="text-2xl font-semibold mb-6">Contact Information</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-hf-purple text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-300 font-medium mb-1">Email</h4> |
|
|
<a href="mailto:[email protected]" class="text-gray-400 hover:text-hf-purple">[email protected]</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-hf-purple text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-300 font-medium mb-1">Hugging Face Profile</h4> |
|
|
<a href="https://huggingface.co/AliBrown" target="_blank" rel="noopener noreferrer" class="text-gray-400 hover:text-hf-purple">huggingface.co/AliBrown</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-hf-purple text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-gray-300 font-medium mb-1">Location</h4> |
|
|
<p class="text-gray-400">Berlin, Germany</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="text-gray-300 font-medium mb-4">Follow Me</h4> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="https://github.com/volkansah" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="https://volkansah.github.io/" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</a> |
|
|
<a href="https://huggingface.co/AliBrown" target="_blank" rel="noopener noreferrer" class="social-icon text-gray-400 hover:text-hf-purple text-2xl"> |
|
|
<i class="fas fa-robot"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer class="bg-hf-dark/50 border-t border-gray-800 py-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<span class="text-hf-purple font-bold text-xl">Ali Brown aka Volkan Sah</span> |
|
|
<p class="text-gray-400 mt-2">Building the future, securely.</p> |
|
|
</div> |
|
|
<div class="flex flex-wrap justify-center gap-6"> |
|
|
<a href="#home" class="text-gray-400 hover:text-hf-purple">Home</a> |
|
|
<a href="#projects" class="text-gray-400 hover:text-hf-purple">Projects</a> |
|
|
<a href="#about" class="text-gray-400 hover:text-hf-purple">About</a> |
|
|
<a href="#contact" class="text-gray-400 hover:text-hf-purple">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> |
|
|
<p>© 2025 Ali Brown aka Volkan Sah Portfolio. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function () { |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (mobileMenuButton) { |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.classList.toggle('hidden'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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 - 64, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const carousel = document.getElementById('carousel'); |
|
|
const prevBtn = document.getElementById('prevBtn'); |
|
|
const nextBtn = document.getElementById('nextBtn'); |
|
|
|
|
|
if (carousel) { |
|
|
const items = carousel.querySelectorAll('.carousel-item'); |
|
|
const itemCount = items.length; |
|
|
let currentIndex = 0; |
|
|
|
|
|
function getVisibleItems() { |
|
|
if (window.innerWidth >= 1024) return 3; |
|
|
if (window.innerWidth >= 768) return 2; |
|
|
return 1; |
|
|
} |
|
|
|
|
|
function updateCarousel() { |
|
|
const itemWidth = items[0].getBoundingClientRect().width; |
|
|
const containerGap = parseInt(getComputedStyle(items[0]).paddingRight) * 2; |
|
|
const totalWidth = itemWidth + containerGap; |
|
|
|
|
|
carousel.style.transform = `translateX(-${currentIndex * totalWidth}px)`; |
|
|
|
|
|
|
|
|
const visibleItems = getVisibleItems(); |
|
|
prevBtn.disabled = currentIndex === 0; |
|
|
nextBtn.disabled = currentIndex >= itemCount - visibleItems; |
|
|
|
|
|
prevBtn.style.opacity = prevBtn.disabled ? '0.4' : '1'; |
|
|
nextBtn.style.opacity = nextBtn.disabled ? '0.4' : '1'; |
|
|
} |
|
|
|
|
|
prevBtn.addEventListener('click', () => { |
|
|
if (currentIndex > 0) { |
|
|
currentIndex--; |
|
|
updateCarousel(); |
|
|
} |
|
|
}); |
|
|
|
|
|
nextBtn.addEventListener('click', () => { |
|
|
if (currentIndex < itemCount - getVisibleItems()) { |
|
|
currentIndex++; |
|
|
updateCarousel(); |
|
|
} |
|
|
}); |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
|
|
|
currentIndex = 0; |
|
|
updateCarousel(); |
|
|
}); |
|
|
|
|
|
updateCarousel(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
