<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atakan Efe Ilgazdag | Visual Engineering 2026</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
/* ELEMENTOR & WORDPRESS BACKGROUND OVERRIDE - KRITISCH */
html, body {
background-color: #030303 !important;
margin: 0;
padding: 0;
color: #ffffff;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Verhindert weißes Aufblitzen oder Hintergründe in Elementor Containern */
#page-container, .elementor-section, .elementor-container,
.elementor-column-wrap, .elementor-widget-wrap, .elementor-element,
.elementor-location-header, .elementor-location-footer {
background-color: transparent !important;
background: transparent !important;
}
:root {
--bg: #030303;
--fg: #ffffff;
--accent: #ffffff;
--font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body {
font-family: var(--font-stack);
cursor: none; /* Versteckt Standard-Cursor */
}
/* --- BACKGROUND LAYER --- */
.noise {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: url('https://grainy-gradients.vercel.app/noise.svg');
opacity: 0.08; pointer-events: none; z-index: 9999;
}
.bg-grid {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none; z-index: 1;
}
/* --- CUSTOM CURSOR --- */
#cursor {
position: fixed; width: 10px; height: 10px; background: white;
border-radius: 50%; pointer-events: none; z-index: 10001;
mix-blend-mode: difference;
will-change: transform;
display: flex; align-items: center; justify-content: center;
}
#cursor-text {
font-size: 5px; font-weight: 900; color: black; opacity: 0;
text-transform: uppercase; white-space: nowrap; pointer-events: none;
letter-spacing: 1px;
}
/* --- NAVIGATION --- */
nav {
position: fixed; top: 0; width: 100%; display: flex;
justify-content: space-between; align-items: center;
padding: 2.5rem 4rem; z-index: 10000;
}
.nav-logo { font-weight: 900; font-size: 1.2rem; letter-spacing: -0.05em; }
.nav-link {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.5em;
opacity: 0.3; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-link:hover { opacity: 1; letter-spacing: 0.7em; }
/* --- PROGRESS BAR --- */
.progress-container {
position: fixed; top: 2.5rem; right: 2.5rem; width: 45px; height: 45px;
z-index: 10002; transform: rotate(-90deg);
}
.progress-container circle {
fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 2;
}
#progress-bar { stroke: white; stroke-dasharray: 283; stroke-dashoffset: 283; }
/* --- HERO --- */
.hero {
height: 100vh; display: flex; flex-direction: column;
justify-content: center; padding: 0 10vw; position: relative;
z-index: 2;
}
.hero-title {
font-size: clamp(3rem, 10vw, 12rem); font-weight: 900;
line-height: 0.85; letter-spacing: -0.05em; text-transform: uppercase;
}
.hero-title .char { display: inline-block; will-change: transform, opacity; }
/* --- SKILLS SECTION --- */
.skills-grid { padding: 20vh 10vw; z-index: 2; position: relative; }
.skill-item {
border-bottom: 1px solid rgba(255,255,255,0.05);
padding: 2.5rem 0;
display: flex; flex-direction: column;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
}
.skill-item:hover {
border-bottom-color: rgba(255,255,255,0.4);
padding-left: 2rem;
background: rgba(255,255,255,0.01);
}
.skill-info {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 1.5rem;
}
.skill-name {
font-size: 1.3rem; font-weight: 800; text-transform: uppercase;
letter-spacing: -0.01em;
}
.skill-points {
font-size: 10px; opacity: 0.4; letter-spacing: 0.2em;
}
.skill-bar-bg {
width: 100%; height: 1px; background: rgba(255,255,255,0.05);
position: relative; overflow: hidden;
}
.skill-bar-fill {
position: absolute; top: 0; left: 0; height: 100%;
background: white; width: 0%; will-change: width;
box-shadow: 0 0 15px rgba(255,255,255,0);
transition: box-shadow 0.4s;
}
.skill-item:hover .skill-bar-fill {
box-shadow: 0 0 20px rgba(255,255,255,0.4);
height: 2px;
}
/* --- PROJECTS --- */
.archive-grid { padding: 10vh 10vw; z-index: 2; position: relative; }
.project-item {
margin-bottom: 35vh; width: 100%; perspective: 2000px;
}
.project-img-wrap {
position: relative; width: 100%; aspect-ratio: 16/9;
overflow: hidden; background: #080808;
clip-path: inset(100% 0 0 0);
transform-style: preserve-3d;
}
.project-img-wrap img {
width: 100%; height: 100%; object-fit: cover;
filter: grayscale(1) brightness(0.6);
transform: scale(1.25);
transition: filter 0.8s ease, transform 0.8s ease;
}
.project-item:hover img {
filter: grayscale(0) brightness(1);
transform: scale(1.1);
}
/* --- CONTACT --- */
.form-card {
background: rgba(255,255,255,0.01);
border: 1px solid rgba(255,255,255,0.05);
padding: 4rem; backdrop-filter: blur(15px);
max-width: 1000px; margin: 0 auto;
}
.input-field {
width: 100%; background: transparent; border: none;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 1.2rem 0; color: white; font-size: 1.2rem;
outline: none; transition: 0.4s;
}
.input-field:focus { border-bottom-color: white; padding-left: 10px; }
.submit-btn {
width: 100%; padding: 2rem; border: 1px solid rgba(255,255,255,0.1);
background: transparent; color: white; font-weight: 900;
text-transform: uppercase; letter-spacing: 0.6em;
margin-top: 3rem; transition: all 0.4s;
}
.submit-btn:hover { background: white; color: black; letter-spacing: 0.9em; }
.footer {
padding: 4rem 10vw; border-top: 1px solid rgba(255,255,255,0.03);
display: flex; justify-content: space-between; font-size: 8px;
text-transform: uppercase; letter-spacing: 0.3em; opacity: 0.3;
}
@media (max-width: 768px) {
nav { padding: 1.5rem 2rem; }
.hero-title { font-size: 3.5rem; }
.skill-name { font-size: 1rem; }
.form-card { padding: 2rem; }
}
</style>
</head>
<body>
<div class="noise"></div>
<div class="bg-grid"></div>
<div id="cursor"><span id="cursor-text">ENTDECKEN</span></div>
<svg class="progress-container" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45"></circle>
<circle id="progress-bar" cx="50" cy="50" r="45"></circle>
</svg>
<nav>
<div class="nav-logo mag scramble-trigger">ATAKAN EFE</div>
<div class="flex gap-8">
<a href="#work" class="nav-link mag scramble-trigger">Projekte</a>
<a href="#skills" class="nav-link mag scramble-trigger">Expertise</a>
<a href="#contact" class="nav-link mag scramble-trigger">Kontakt</a>
</div>
</nav>
<main>
<!-- HERO -->
<section class="hero">
<div class="mb-8 overflow-hidden">
<p class="text-[9px] uppercase tracking-[1em] opacity-30 hero-reveal">Visual Engineering & Design Strategie 2026</p>
</div>
<h1 class="hero-title">
<div class="line overflow-hidden">ATAKAN EFE</div>
<div class="line overflow-hidden text-transparent" style="-webkit-text-stroke: 1px rgba(255,255,255,0.6);">ILGAZDAG</div>
</h1>
<div class="mt-20 flex items-center space-x-12 hero-reveal">
<div class="w-32 h-[1px] bg-white/10"></div>
<p class="max-w-xs text-[8px] uppercase tracking-[0.4em] leading-relaxed opacity-20">
Gestaltung der digitalen Medienlandschaft. <br>Minimalismus als visuelle Sprache.
</p>
</div>
</section>
<!-- SKILLS SECTION -->
<section id="skills" class="skills-grid">
<h2 class="text-[9px] uppercase tracking-[2em] opacity-10 mb-20">Fähigkeiten & Expertise</h2>
<div class="skill-item" data-target="90">
<div class="skill-info">
<span class="skill-name scramble-trigger">Visuelle Kommunikation & Konzeption</span>
<span class="skill-points">09 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="80">
<div class="skill-info">
<span class="skill-name scramble-trigger">Corporate Identity & Branding</span>
<span class="skill-points">08 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="90">
<div class="skill-info">
<span class="skill-name scramble-trigger">Social Media Content Creation</span>
<span class="skill-points">09 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="80">
<div class="skill-info">
<span class="skill-name scramble-trigger">Printdesign & Layout-Entwicklung</span>
<span class="skill-points">08 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="70">
<div class="skill-info">
<span class="skill-name scramble-trigger">Web- & Interface-Design</span>
<span class="skill-points">07 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="80">
<div class="skill-info">
<span class="skill-name scramble-trigger">User Experience (UX) & Design Thinking</span>
<span class="skill-points">08 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="80">
<div class="skill-info">
<span class="skill-name scramble-trigger">Digitale Bildbearbeitung & Illustration</span>
<span class="skill-points">08 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="60">
<div class="skill-info">
<span class="skill-name scramble-trigger">Bewegtbild & Audiovisuelle Medien</span>
<span class="skill-points">06 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="90">
<div class="skill-info">
<span class="skill-name scramble-trigger">Werbedesign & Werbepsychologie</span>
<span class="skill-points">09 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
<div class="skill-item" data-target="70">
<div class="skill-info">
<span class="skill-name scramble-trigger">Projekt- & Produktionsmanagement</span>
<span class="skill-points">07 / 10</span>
</div>
<div class="skill-bar-bg"><div class="skill-bar-fill"></div></div>
</div>
</section>
<!-- PROJECTS -->
<section id="work" class="archive-grid">
<h2 class="text-[9px] uppercase tracking-[2em] opacity-10 mb-20">Ausgewählte Arbeiten</h2>
<div class="project-item" data-tilt>
<div class="project-img-wrap reveal-clip">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000" alt="Medienkonzeption">
</div>
<div class="flex justify-between items-end mt-8">
<h3 class="text-5xl font-black uppercase tracking-tighter scramble-trigger">Konzept_Alpha</h3>
<span class="text-[8px] opacity-20 tracking-widest">Digitale Strategie / 2026</span>
</div>
</div>
<div class="project-item" data-tilt>
<div class="project-img-wrap reveal-clip">
<img src="https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?q=80&w=2000" alt="Interface Design">
</div>
<div class="flex justify-between items-end mt-8">
<h3 class="text-5xl font-black uppercase tracking-tighter scramble-trigger">System_V</h3>
<span class="text-[8px] opacity-20 tracking-widest">Interface Design / 2025</span>
</div>
</div>
<div class="project-item" data-tilt>
<div class="project-img-wrap reveal-clip">
<img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2000" alt="Branding Concept">
</div>
<div class="flex justify-between items-end mt-8">
<h3 class="text-5xl font-black uppercase tracking-tighter scramble-trigger">Neural_Flow</h3>
<span class="text-[8px] opacity-20 tracking-widest">Branding & Identity / 2026</span>
</div>
</div>
<div class="project-item" data-tilt>
<div class="project-img-wrap reveal-clip">
<img src="https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=80&w=2000" alt="UX Research">
</div>
<div class="flex justify-between items-end mt-8">
<h3 class="text-5xl font-black uppercase tracking-tighter scramble-trigger">Core_Dynamics</h3>
<span class="text-[8px] opacity-20 tracking-widest">UX Research & Design / 2025</span>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="py-40 px-10">
<div class="form-card" data-tilt-light>
<h2 class="text-[9px] uppercase tracking-[2em] opacity-20 mb-16">Projektanfrage starten</h2>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="d1a85c78-f868-4367-aa49-5d252b219273">
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="relative">
<span class="text-[8px] uppercase tracking-widest opacity-30">Ihr Name</span>
<input type="text" name="name" class="input-field" required placeholder="Vorname Nachname">
</div>
<div class="relative">
<span class="text-[8px] uppercase tracking-widest opacity-30">E-Mail Adresse</span>
<input type="email" name="email" class="input-field" required placeholder="beispiel@mail.de">
</div>
</div>
<div class="mt-12">
<span class="text-[8px] uppercase tracking-widest opacity-30">Ihre Nachricht</span>
<textarea name="message" rows="4" class="input-field" required placeholder="Beschreiben Sie Ihr Vorhaben..."></textarea>
</div>
<button type="submit" class="submit-btn mag scramble-trigger">Signal Senden</button>
</form>
</div>
</section>
<footer class="footer">
<div class="scramble-trigger">© 2026 ATAKAN EFE ILGAZDAG</div>
<div class="flex gap-12">
<a href="#" class="mag scramble-trigger">Impressum</a>
<a href="#" class="mag scramble-trigger">Datenschutz</a>
</div>
<div class="opacity-30">Visual Engineering v4.5</div>
</footer>
</main>
<script type="module">
gsap.registerPlugin(ScrollTrigger);
// --- SPLIT TEXT ---
const splitToChars = (element) => {
const text = element.innerText;
element.innerHTML = '';
text.split('').forEach(char => {
const span = document.createElement('span');
span.innerText = char === ' ' ? '\u00A0' : char;
span.className = 'char';
element.appendChild(span);
});
};
// --- CURSOR LOGIC ---
const cursor = document.getElementById('cursor');
const cursorText = document.getElementById('cursor-text');
let mX = 0, mY = 0, cX = 0, cY = 0;
window.addEventListener('mousemove', e => { mX = e.clientX; mY = e.clientY; });
function tick() {
cX += (mX - cX) * 0.15; cY += (mY - cY) * 0.15;
cursor.style.transform = `translate3d(${cX}px, ${cY}px, 0)`;
requestAnimationFrame(tick);
}
tick();
// --- HERO REVEAL ---
const lines = document.querySelectorAll('.hero-title .line');
lines.forEach(line => {
splitToChars(line);
gsap.from(line.querySelectorAll('.char'), {
y: 100, rotateX: -90, opacity: 0, stagger: 0.03,
duration: 1.5, ease: "expo.out", delay: 0.5
});
});
gsap.from(".hero-reveal", { y: 30, opacity: 0, duration: 1.2, stagger: 0.2, ease: "expo.out", delay: 1 });
// --- SKILL BARS ANIMATION ---
document.querySelectorAll('.skill-item').forEach(item => {
const fill = item.querySelector('.skill-bar-fill');
const target = item.getAttribute('data-target');
gsap.to(fill, {
width: target + "%",
scrollTrigger: {
trigger: item,
start: "top 92%",
toggleActions: "play none none reverse"
},
duration: 1.8,
ease: "power4.out"
});
// Hover-Effekte für Skills
item.addEventListener('mouseenter', () => {
gsap.to(cursor, { scale: 5, duration: 0.3 });
cursorText.style.opacity = 1;
cursorText.innerText = "SKILL";
});
item.addEventListener('mouseleave', () => {
gsap.to(cursor, { scale: 1, duration: 0.3 });
cursorText.style.opacity = 0;
});
});
// --- IMAGE REVEAL ---
document.querySelectorAll('.reveal-clip').forEach(wrap => {
gsap.to(wrap, {
clipPath: "inset(0% 0 0 0)",
scrollTrigger: { trigger: wrap, start: "top 95%", end: "top 30%", scrub: 1 }
});
});
// --- SCRAMBLE & MAGNETIC ---
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
document.querySelectorAll('.scramble-trigger').forEach(el => {
const original = el.innerText;
el.addEventListener('mouseenter', () => {
let iteration = 0;
const int = setInterval(() => {
el.innerText = el.innerText.split("").map((l, i) => {
if(i < iteration) return original[i];
return chars[Math.floor(Math.random()*chars.length)];
}).join("");
if(iteration >= original.length) clearInterval(int);
iteration += 1/3;
}, 30);
});
});
document.querySelectorAll('.mag').forEach(el => {
el.addEventListener('mousemove', e => {
const r = el.getBoundingClientRect();
const x = (e.clientX - (r.left + r.width/2)) * 0.4;
const y = (e.clientY - (r.top + r.height/2)) * 0.4;
gsap.to(el, { x, y, duration: 0.4 });
gsap.to(cursor, { scale: 3.5, duration: 0.3 });
});
el.addEventListener('mouseleave', () => {
gsap.to(el, { x: 0, y: 0, duration: 0.7, ease: "elastic.out(1, 0.4)" });
gsap.to(cursor, { scale: 1, duration: 0.3 });
});
});
// --- PROJECT TILT ---
document.querySelectorAll('[data-tilt]').forEach(item => {
const wrap = item.querySelector('.project-img-wrap');
const img = item.querySelector('img');
item.addEventListener('mousemove', e => {
const r = item.getBoundingClientRect();
const x = (e.clientX - (r.left + r.width/2)) / (r.width/2);
const y = (e.clientY - (r.top + r.height/2)) / (r.height/2);
gsap.to(wrap, { rotationY: x*10, rotationX: -y*10, duration: 0.6 });
gsap.to(img, { x: x*20, y: y*20, scale: 1.15, duration: 0.6 });
cursorText.style.opacity = 1;
cursorText.innerText = "ÖFFNEN";
gsap.to(cursor, { scale: 8, duration: 0.3 });
});
item.addEventListener('mouseleave', () => {
gsap.to(wrap, { rotationY: 0, rotationX: 0, duration: 1 });
gsap.to(img, { x: 0, y: 0, scale: 1.25, duration: 1 });
cursorText.style.opacity = 0;
gsap.to(cursor, { scale: 1, duration: 0.3 });
});
});
// --- SCROLL PROGRESS ---
gsap.to("#progress-bar", {
strokeDashoffset: 0,
scrollTrigger: { trigger: "body", start: "top top", end: "bottom bottom", scrub: 0.1 }
});
// Smooth Scroll für Navigation
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' });
}
});
});
</script>
</body>
</html>