WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Metehan
29
Metehan
Ouvrir dans l'éditeur
Publiez votre code
0
HTML
Copy
<!DOCTYPE html> <html lang="en" data-theme="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>METEHAN —Creative OS</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet"> <style>:root{--bg:#08080c;--surface:rgba(255,255,255,0.04);--surface-hover:rgba(255,255,255,0.08);--border:rgba(255,255,255,0.08);--border-accent:rgba(255,255,255,0.2);--text:#f5f5f0;--muted:rgba(245,245,240,0.4);--faint:rgba(245,245,240,0.12);--accent:#e8ff47;--accent-rgb:232,255,71;--font-display:'Bebas Neue',sans-serif;--font-serif:'DM Serif Display',serif;--font-body:'DM Sans',sans-serif;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-inout:cubic-bezier(0.87,0,0.13,1);}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;cursor:none;}#c-dot{position:fixed;top:0;left:0;width:6px;height:6px;background:var(--accent);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;transition:width .15s,height .15s,background .3s;mix-blend-mode:difference;}#c-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid rgba(245,245,240,0.3);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9998;transition:width .2s var(--ease-out),height .2s var(--ease-out),background .2s,border-color .2s;}body.hov #c-dot{width:0;height:0;}body.hov #c-ring{width:56px;height:56px;background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1);}#noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;}#scan{position:fixed;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);}header{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:200;border-bottom:1px solid var(--border);background:rgba(8,8,12,0.7);backdrop-filter:blur(20px);}.logo{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.12em;color:var(--text);text-decoration:none;}.logo em{color:var(--accent);font-style:normal;}.nav{display:flex;align-items:center;gap:6px;}.nav-btn{font-family:var(--font-body);font-size:0.72rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;padding:8px 18px;border:1px solid transparent;border-radius:40px;background:transparent;color:var(--muted);cursor:none;transition:all .25s;white-space:nowrap;}.nav-btn:hover,.nav-btn.active{color:var(--text);border-color:var(--border-accent);background:var(--surface);}.nav-btn.cta{background:var(--accent);color:#08080c;border-color:transparent;font-weight:700;}.nav-btn.cta:hover{background:#fff;}#progress{position:fixed;bottom:0;left:0;height:2px;width:0%;background:var(--accent);z-index:200;transition:width .08s linear,background .5s;}#viewport{position:fixed;inset:0;z-index:10;overflow:hidden;}#rail{display:flex;align-items:stretch;height:100%;will-change:transform;padding:0 0 0 0;}.panel{flex-shrink:0;width:100vw;height:100vh;position:relative;display:flex;align-items:center;overflow:hidden;}.sect-label{position:absolute;left:40px;bottom:40px;font-family:var(--font-display);font-size:0.8rem;letter-spacing:0.3em;color:var(--muted);z-index:20;}.sect-num{position:absolute;right:40px;bottom:40px;font-family:var(--font-display);font-size:5rem;line-height:1;color:var(--faint);z-index:0;user-select:none;}.gc{background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);transition:border-color .3s,box-shadow .3s,transform .12s var(--ease-out);position:relative;overflow:hidden;}.gc::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.06),transparent 50%);opacity:0;transition:opacity .4s;}.gc:hover::before{opacity:1;}.gc:hover{border-color:var(--border-accent);}#p0{background:var(--bg);}#p0 .hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 60% at 70% 40%,rgba(232,255,71,0.06) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 20% 80%,rgba(100,100,255,0.05) 0%,transparent 70%);}#p0 .grid-bg{position:absolute;inset:0;z-index:0;opacity:.15;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:80px 80px;}.hero-inner{position:relative;z-index:10;width:100%;padding:0 10vw;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}.hero-title{font-family:var(--font-display);font-size:clamp(5rem,12vw,11rem);line-height:.88;letter-spacing:-0.01em;color:var(--text);}.hero-title .outline{-webkit-text-stroke:2px var(--text);color:transparent;}.hero-title .accent-word{color:var(--accent);}.hero-sub{font-size:1rem;color:var(--muted);line-height:1.7;max-width:380px;margin-top:24px;}.hero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}.btn-primary{padding:14px 36px;background:var(--accent);color:#08080c;font-family:var(--font-body);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;border:none;cursor:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .25s,transform .15s;position:relative;overflow:hidden;}.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);transition:left .45s;}.btn-primary:hover::after{left:100%;}.btn-ghost{padding:14px 36px;background:transparent;color:var(--text);font-family:var(--font-body);font-weight:500;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border-accent);cursor:none;transition:all .25s;}.btn-ghost:hover{background:var(--surface);}.hero-visual{position:relative;height:500px;display:flex;align-items:center;justify-content:center;perspective:1200px;transform-style:preserve-3d;}.hero-card-stack{position:relative;width:340px;height:440px;transform-style:preserve-3d;}.hcs-item{position:absolute;inset:0;border-radius:4px;display:flex;align-items:center;justify-content:center;}.hcs-item:nth-child(1){transform:rotateY(-20deg) rotateX(8deg) translateZ(-80px);opacity:.35;background:var(--surface);border:1px solid var(--border);}.hcs-item:nth-child(2){transform:rotateY(-8deg) rotateX(4deg) translateZ(0px);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);}.hcs-item:nth-child(3){transform:rotateY(5deg) rotateX(-2deg) translateZ(80px);background:linear-gradient(135deg,rgba(232,255,71,0.12),rgba(255,255,255,0.04));border:1px solid rgba(232,255,71,0.25);backdrop-filter:blur(16px);}.hcs-inner{padding:30px;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;}.hcs-tag{font-family:var(--font-display);font-size:.75rem;letter-spacing:.25em;color:var(--accent);}.hcs-name{font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--text);}.hcs-metric{font-size:.8rem;color:var(--muted);}.hcs-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:8px;animation:pulse-dot 2s infinite;}@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(232,255,71,.4)}50%{box-shadow:0 0 0 8px rgba(232,255,71,0)}}.float-badge{position:absolute;padding:12px 20px;border-radius:50px;background:rgba(8,8,12,0.85);border:1px solid var(--border-accent);backdrop-filter:blur(20px);display:flex;align-items:center;gap:10px;white-space:nowrap;z-index:30;}.float-badge .fb-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;}.float-badge .fb-text{font-size:.8rem;font-weight:600;}.float-badge .fb-sub{font-size:.7rem;color:var(--muted);}.fb1{top:40px;right:-30px;animation:floatY 4s ease-in-out infinite;}.fb2{bottom:60px;left:-20px;animation:floatY 4s ease-in-out infinite .8s reverse;}.fb3{bottom:160px;right:-40px;animation:floatY 3s ease-in-out infinite 1.5s;}@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}#p1{background:#080810;}#p1 .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 80% 20%,rgba(80,50,255,0.08),transparent 60%);}.services-inner{position:relative;z-index:10;width:100%;padding:0 10vw;}.section-header{margin-bottom:60px;}.section-header .eyebrow{font-family:var(--font-display);font-size:.8rem;letter-spacing:.35em;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:16px;}.section-header .eyebrow::before{content:'';display:block;width:40px;height:1px;background:var(--accent);}.section-header h2{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,5rem);line-height:.95;}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}.service-cell{padding:40px;background:var(--bg);position:relative;overflow:hidden;transition:background .3s;}.service-cell:hover{background:#0d0d18;}.service-cell::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out);}.service-cell:hover::after{transform:scaleX(1);}.sc-num{font-family:var(--font-display);font-size:.75rem;letter-spacing:.2em;color:var(--muted);margin-bottom:40px;}.sc-icon{width:56px;height:56px;border:1px solid var(--border-accent);border-radius:2px;display:flex;align-items:center;justify-content:center;margin-bottom:24px;color:var(--accent);font-size:1.4rem;transition:background .3s,border-color .3s;}.service-cell:hover .sc-icon{background:var(--accent);color:#08080c;border-color:var(--accent);}.sc-title{font-family:var(--font-display);font-size:1.8rem;margin-bottom:16px;line-height:1;}.sc-desc{font-size:.85rem;color:var(--muted);line-height:1.7;}#p2{background:#06060e;}#p2 .deco-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 30% 60%,rgba(255,80,120,0.06),transparent 60%);}.portfolio-inner{position:relative;z-index:10;width:100%;padding:0 10vw;}.portfolio-grid{display:grid;grid-template-columns:1.2fr .8fr .9fr;grid-template-rows:1fr 1fr;gap:16px;height:65vh;margin-top:40px;}.proj-card{border-radius:4px;overflow:hidden;position:relative;cursor:none;transition:transform .3s var(--ease-out);}.proj-card:hover{transform:scale(1.01);z-index:5;}.proj-card:nth-child(1){grid-row:1/3;}.proj-card:nth-child(4){grid-row:1/3;}.proj-bg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out);filter:saturate(.7);}.proj-card:hover .proj-bg{transform:scale(1.05);filter:saturate(1);}.proj-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,8,12,0.92) 0%,rgba(8,8,12,0.3) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;opacity:0;transition:opacity .35s;}.proj-card:hover .proj-overlay{opacity:1;}.proj-always{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(8,8,12,.85),transparent);}.proj-tag{font-family:var(--font-display);font-size:.7rem;letter-spacing:.2em;padding:5px 12px;border:1px solid rgba(255,255,255,.25);display:inline-block;margin-bottom:8px;}.proj-title{font-family:var(--font-display);font-size:1.3rem;line-height:1;}.proj-subtitle{font-size:.78rem;color:var(--muted);margin-top:4px;}.proj-arrow{width:40px;height:40px;border:1px solid var(--border-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:16px;color:var(--text);font-size:1.1rem;transition:background .25s,color .25s;}.proj-arrow:hover{background:var(--accent);color:#08080c;border-color:var(--accent);}#p3{background:#070710;}#p3 .glow-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 60% 50%,rgba(232,255,71,0.04),transparent 65%);}.about-inner{position:relative;z-index:10;width:100%;padding:0 10vw;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}.about-left{}.about-right{}.about-desc{font-size:1.05rem;color:var(--muted);line-height:1.8;margin-bottom:40px;}.skills-list{display:flex;flex-direction:column;gap:24px;}.skill-row{display:flex;flex-direction:column;gap:8px;}.skill-head{display:flex;justify-content:space-between;align-items:center;}.skill-name{font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;}.skill-pct{font-family:var(--font-display);font-size:.8rem;color:var(--accent);}.skill-track{height:2px;background:var(--surface);border-radius:2px;overflow:hidden;}.skill-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),#fff);box-shadow:0 0 12px rgba(var(--accent-rgb),.5);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out);}.skill-fill.animated{transform:scaleX(1);}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;}.stat-box{padding:28px;border:1px solid var(--border);position:relative;overflow:hidden;}.stat-box::after{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent);}.stat-val{font-family:var(--font-display);font-size:3.5rem;line-height:1;color:var(--text);}.stat-lab{font-size:.75rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:4px;}.about-visual-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:460px;}.av-main{width:320px;height:400px;border-radius:2px;overflow:hidden;position:relative;border:1px solid var(--border-accent);}.av-main img{width:100%;height:100%;object-fit:cover;filter:contrast(1.1) saturate(.8);}.av-main::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 50%,rgba(8,8,12,.7));}.av-badge{position:absolute;padding:16px 24px;background:rgba(8,8,12,.9);border:1px solid var(--border-accent);backdrop-filter:blur(20px);}.av-b1{top:20px;right:-30px;}.av-b2{bottom:30px;left:-30px;}.av-badge-title{font-family:var(--font-display);font-size:1.4rem;}.av-badge-sub{font-size:.72rem;color:var(--muted);margin-top:2px;}#p4{background:#070810;}#p4 .deco{position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 50% 80%,rgba(0,200,255,0.04),transparent 60%);}.kanban-inner{position:relative;z-index:10;width:100%;padding:0 10vw;}.kanban-board{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;height:58vh;}.k-col{display:flex;flex-direction:column;gap:12px;overflow:hidden;}.k-col-head{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;border-bottom:1px solid var(--border);flex-shrink:0;}.k-col-title{font-family:var(--font-display);font-size:.85rem;letter-spacing:.2em;}.k-badge{font-family:var(--font-display);font-size:.7rem;width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}.k-col-body{display:flex;flex-direction:column;gap:10px;overflow:hidden;flex:1;}.k-card{padding:20px;border-radius:2px;flex-shrink:0;}.k-card-tag{font-family:var(--font-display);font-size:.65rem;letter-spacing:.15em;padding:4px 10px;border:1px solid;display:inline-block;margin-bottom:12px;border-radius:40px;}.k-card-tag.eng{border-color:rgba(0,200,255,.4);color:rgba(0,200,255,.8);}.k-card-tag.des{border-color:rgba(232,255,71,.4);color:rgba(232,255,71,.8);}.k-card-tag.mkt{border-color:rgba(255,100,150,.4);color:rgba(255,100,150,.8);}.k-card-tag.urg{border-color:rgba(255,80,80,.5);color:rgba(255,100,100,.9);}.k-card-title{font-size:.9rem;line-height:1.5;margin-bottom:14px;}.k-card-foot{display:flex;justify-content:space-between;align-items:center;}.k-avs{display:flex;}.k-av{width:22px;height:22px;border-radius:50%;background:var(--border-accent);border:2px solid var(--bg);margin-left:-6px;}.k-av:first-child{margin-left:0;}.k-id{font-size:.7rem;color:var(--muted);}#p5{background:#06060c;}#p5 .deco{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(150,80,255,0.06),transparent 60%);}.analytics-inner{position:relative;z-index:10;width:100%;padding:0 10vw;}.analytics-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;height:62vh;margin-top:40px;}.chart-wrap{position:relative;padding:32px;display:flex;flex-direction:column;}.chart-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}.chart-label{font-family:var(--font-display);font-size:.8rem;letter-spacing:.2em;color:var(--muted);}.chart-area{flex:1;position:relative;}svg.chart-svg{width:100%;height:100%;overflow:visible;}.c-grid line{stroke:var(--border);stroke-width:1;}.c-area{fill:url(#cg);opacity:.6;}.c-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 12px rgba(232,255,71,.4));stroke-dasharray:1500;stroke-dashoffset:1500;transition:stroke-dashoffset 2.5s var(--ease-out);}.c-line.drawn{stroke-dashoffset:0;}.c-dot{fill:var(--bg);stroke:var(--accent);stroke-width:2;r:4;}.chart-legend{display:flex;gap:20px;margin-top:16px;}.cl-item{display:flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);}.cl-dot{width:8px;height:8px;border-radius:50%;}.metrics-col{display:flex;flex-direction:column;gap:16px;}.metric-box{padding:28px;flex:1;display:flex;flex-direction:column;justify-content:space-between;border-radius:4px;}.mb-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}.mb-val{font-family:var(--font-display);font-size:3.2rem;line-height:1;margin-top:auto;padding-top:12px;}.mb-delta{font-size:.8rem;display:flex;align-items:center;gap:4px;}.delta-up{color:#4dffb0;}.delta-dn{color:#ff6b6b;}.mini-chart{height:40px;margin-top:12px;}.mini-chart svg{width:100%;height:100%;overflow:visible;}.mc-line{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.6;}#p6{background:#08080c;background-image:radial-gradient(ellipse 70% 70% at 80% 50%,rgba(232,255,71,0.05),transparent 60%);}.contact-inner{position:relative;z-index:10;width:100%;padding:0 10vw;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}.contact-left h2{font-family:var(--font-display);font-size:clamp(3rem,6vw,6rem);line-height:.9;margin-bottom:30px;}.contact-left h2 em{color:var(--accent);font-style:italic;font-family:var(--font-serif);}.contact-info{display:flex;flex-direction:column;gap:20px;margin-top:40px;}.ci-item{display:flex;align-items:center;gap:16px;padding:20px;border:1px solid var(--border);transition:border-color .3s;}.ci-item:hover{border-color:var(--border-accent);}.ci-icon{width:40px;height:40px;background:var(--accent);color:#08080c;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}.ci-text{font-size:.9rem;}.ci-text small{display:block;font-size:.72rem;color:var(--muted);margin-bottom:2px;letter-spacing:.08em;text-transform:uppercase;}.socials{display:flex;gap:12px;margin-top:36px;}.soc-btn{width:44px;height:44px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:none;transition:all .25s;border-radius:2px;}.soc-btn:hover{background:var(--accent);color:#08080c;border-color:var(--accent);}.contact-form{display:flex;flex-direction:column;gap:20px;}.form-group{display:flex;flex-direction:column;gap:8px;}.form-group label{font-family:var(--font-display);font-size:.75rem;letter-spacing:.2em;color:var(--muted);}.form-input{background:var(--surface);border:1px solid var(--border);color:var(--text);padding:14px 18px;font-family:var(--font-body);font-size:.9rem;border-radius:2px;outline:none;cursor:none;transition:border-color .25s,background .25s;}.form-input:focus{border-color:var(--border-accent);background:rgba(255,255,255,.06);}.form-input::placeholder{color:var(--muted);}textarea.form-input{resize:none;height:120px;}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}.submit-btn{padding:16px;background:var(--accent);color:#08080c;font-family:var(--font-display);font-size:1rem;letter-spacing:.15em;border:none;cursor:none;font-weight:700;position:relative;overflow:hidden;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:background .25s;}.submit-btn:hover{background:#fff;}#footer-band{position:fixed;bottom:0;left:0;right:0;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:150;border-top:1px solid var(--border);background:rgba(8,8,12,.7);backdrop-filter:blur(20px);}.fb-copy{font-size:.7rem;letter-spacing:.1em;color:var(--muted);}.fb-scroll-hint{font-family:var(--font-display);font-size:.7rem;letter-spacing:.25em;color:var(--muted);display:flex;align-items:center;gap:8px;}.scroll-arrow{display:inline-block;animation:slideX 1.5s ease-in-out infinite;}@keyframes slideX{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}#particles{position:fixed;inset:0;z-index:3;pointer-events:none;}.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}.reveal-up.vis{opacity:1;transform:translateY(0);}.delay-1{transition-delay:.1s;}.delay-2{transition-delay:.2s;}.delay-3{transition-delay:.35s;}.delay-4{transition-delay:.5s;}@media (max-width:900px){header{padding:0 20px;}.nav-btn:not(.cta):not(.active){display:none;}.hero-inner{grid-template-columns:1fr;padding:0 6vw;}.hero-visual{display:none;}.services-grid{grid-template-columns:1fr;}.portfolio-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}.proj-card:nth-child(1),.proj-card:nth-child(4){grid-row:auto;}.about-inner{grid-template-columns:1fr;padding:0 6vw;}.av-main{width:100%;}.kanban-board{grid-template-columns:1fr;height:auto;}.analytics-grid{grid-template-columns:1fr;height:auto;}.contact-inner{grid-template-columns:1fr;padding:0 6vw;gap:40px;}.panel{width:100vw;}.hero-title{font-size:clamp(3.5rem,12vw,6rem);}}</style> </head> <body> <div id="noise"></div> <div id="scan"></div> <div id="c-dot"></div> <div id="c-ring"></div> <canvas id="particles"></canvas> <div id="progress"></div> <header> <a href="#" class="logo">METE<em>HAN</em></a> <nav class="nav"> <button class="nav-btn active" data-idx="0">Studio</button> <button class="nav-btn" data-idx="1">Services</button> <button class="nav-btn" data-idx="2">Work</button> <button class="nav-btn" data-idx="3">About</button> <button class="nav-btn" data-idx="4">Tasks</button> <button class="nav-btn" data-idx="5">Analytics</button> <button class="nav-btn cta" data-idx="6">Contact</button> </nav> </header> <div id="viewport"> <div id="rail"> <section class="panel" id="p0"> <div class="hero-bg"></div> <div class="grid-bg"></div> <div class="hero-inner"> <div> <div class="reveal-up" style="display:flex;align-items:center;gap:10px;margin-bottom:24px;"> <span style="width:40px;height:1px;background:var(--accent);display:inline-block;"></span> <span style="font-family:var(--font-display);font-size:.8rem;letter-spacing:.3em;color:var(--accent);">CREATIVE STUDIO</span> </div> <h1 class="hero-title reveal-up delay-1"> <span>DESIGN</span> <span class="outline">MEETS</span> <span class="accent-word">CODE.</span> </h1> <p class="hero-sub reveal-up delay-2"> Dijital dünyada estetik ve fonksiyonelliği buluşturan,modern arayüzler ve deneyimler tasarlayan bir yaratıcıstüdyo. </p> <div class="hero-ctas reveal-up delay-3"> <button class="btn-primary hover-t" onclick="jumpTo(2)">View Work</button> <button class="btn-ghost hover-t" onclick="jumpTo(6)">Get in Touch</button> </div> </div> <div class="hero-visual reveal-up delay-2"> <div class="hero-card-stack"> <div class="hcs-item gc"></div> <div class="hcs-item gc"> <div class="hcs-inner" style="opacity:.5;"> <div style="font-size:.7rem;color:var(--muted);letter-spacing:.1em;">LOADING...</div> <div style="height:2px;background:var(--surface);width:100%;"><div style="height:100%;width:60%;background:var(--border-accent);"></div></div> </div> </div> <div class="hcs-item gc"> <div class="hcs-inner"> <div> <div class="hcs-tag">ACTIVE PROJECT</div> <div class="hcs-name" style="margin-top:8px;">ZEUS-X<br>ELECTRIC</div> </div> <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;"> <div style="padding:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);"> <div style="font-size:1.4rem;font-family:var(--font-display);">150</div> <div style="font-size:.7rem;color:var(--muted);">kW/h</div> </div> <div style="padding:12px;background:rgba(232,255,71,.08);border:1px solid rgba(232,255,71,.2);"> <div style="font-size:1.4rem;font-family:var(--font-display);color:var(--accent);">ECO</div> <div style="font-size:.7rem;color:var(--muted);">MODE</div> </div> </div> <div class="hcs-metric"> <span class="hcs-dot"></span>SYSTEM ONLINE </div> </div> </div> </div> <div class="float-badge fb1 gc hover-t"> <div class="fb-icon" style="background:rgba(232,255,71,.15);color:var(--accent);">~</div> <div> <div class="fb-text">84.2% Efficiency</div> <div class="fb-sub">vs last month</div> </div> </div> <div class="float-badge fb2 gc hover-t"> <div class="fb-icon" style="background:rgba(100,200,255,.15);color:#64c8ff;">*</div> <div> <div class="fb-text">5+ Years</div> <div class="fb-sub">Design & Code</div> </div> </div> <div class="float-badge fb3 gc hover-t"> <div class="fb-icon" style="background:rgba(255,100,150,.15);color:#ff6496;">✦</div> <div> <div class="fb-text">1.2k Projects</div> <div class="fb-sub">Delivered</div> </div> </div> </div> </div> <div class="sect-label">WORKSPACE OS —2025</div> <div class="sect-num">01</div> </section> <section class="panel" id="p1"> <div class="hero-bg"></div> <div class="services-inner"> <div class="section-header reveal-up"> <div class="eyebrow">Services</div> <h2>WHAT<br>WE DO.</h2> </div> <div class="services-grid reveal-up delay-1"> <div class="service-cell hover-t"> <div class="sc-num">001</div> <div class="sc-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/></svg> </div> <div class="sc-title">UI/UX DESIGN</div> <div class="sc-desc">Kullanıcıodaklı,şık ve modern arayüz tasarımları. Her pikselde niyetli kararlar.</div> </div> <div class="service-cell hover-t"> <div class="sc-num">002</div> <div class="sc-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> </div> <div class="sc-title">WEB DEV</div> <div class="sc-desc">Hızlı,güvenli ve tüm cihazlarla uyumlu web siteleri. Temiz,ölçeklenebilir kod.</div> </div> <div class="service-cell hover-t"> <div class="sc-num">003</div> <div class="sc-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg> </div> <div class="sc-title">BRANDING</div> <div class="sc-desc">Markanızın dijital kimliğini sıfırdan inşa ediyoruz. Stratejik ve tutarlıgörsel dil.</div> </div> <div class="service-cell hover-t"> <div class="sc-num">004</div> <div class="sc-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20V10M18 20V4M6 20v-4"/></svg> </div> <div class="sc-title">ANALYTICS</div> <div class="sc-desc">Veri odaklıkararlar için dashboard tasarımıve performans izleme sistemleri.</div> </div> <div class="service-cell hover-t"> <div class="sc-num">005</div> <div class="sc-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5 12 2"/></svg> </div> <div class="sc-title">MOTION</div> <div class="sc-desc">Sinematik animasyonlar ve mikro-etkileşimler. Her hareket bir anlam taşır.</div> </div> <div class="service-cell hover-t" style="background:rgba(232,255,71,0.04);"> <div class="sc-num">006</div> <div class="sc-icon" style="border-color:rgba(232,255,71,.4);color:var(--accent);"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> </div> <div class="sc-title">STRATEGY</div> <div class="sc-desc">Dijital büyüme yol haritası. Hedef kitlenize ulaşmanız için doğru stratejiler.</div> </div> </div> </div> <div class="sect-label">CAPABILITIES</div> <div class="sect-num">02</div> </section> <section class="panel" id="p2"> <div class="deco-bg"></div> <div class="portfolio-inner"> <div class="section-header reveal-up" style="display:flex;justify-content:space-between;align-items:flex-end;"> <div> <div class="eyebrow">Selected Work</div> <h2>CREATIVE<br>WORKS.</h2> </div> <button class="btn-ghost hover-t" style="align-self:flex-end;">View All →</button> </div> <div class="portfolio-grid reveal-up delay-1"> <div class="proj-card hover-t"> <img class="proj-bg" src="https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&w=800&q=80" alt="Nexus Branding"> <div class="proj-always"> <span class="proj-tag">IDENTITY</span> <div class="proj-title">NEXUS BRANDING</div> </div> <div class="proj-overlay"> <span class="proj-tag">IDENTITY DESIGN</span> <div class="proj-title">NEXUS BRANDING</div> <div class="proj-subtitle">Corporate identity for a creative agency.</div> <div class="proj-arrow hover-t">→</div> </div> </div> <div class="proj-card hover-t"> <img class="proj-bg" src="https://images.unsplash.com/photo-1551650975-87deedd944c3?auto=format&fit=crop&w=600&q=80" alt="Beauty App"> <div class="proj-always"> <span class="proj-tag">MOBILE</span> <div class="proj-title">BEAUTY APP</div> </div> <div class="proj-overlay"> <span class="proj-tag">MOBILE UI</span> <div class="proj-title">BEAUTY APP</div> <div class="proj-subtitle">Mobile app design for beauty salons.</div> <div class="proj-arrow hover-t">→</div> </div> </div> <div class="proj-card hover-t"> <img class="proj-bg" src="https://images.unsplash.com/photo-1547658719-da2b51169166?auto=format&fit=crop&w=600&q=80" alt="Cloud System"> <div class="proj-always"> <span class="proj-tag">WEB APP</span> <div class="proj-title">CLOUD SYSTEM</div> </div> <div class="proj-overlay"> <span class="proj-tag">WEB APPLICATION</span> <div class="proj-title">CLOUD SYSTEM</div> <div class="proj-subtitle">Next-gen cloud storage UI prototype.</div> <div class="proj-arrow hover-t">→</div> </div> </div> <div class="proj-card hover-t"> <img class="proj-bg" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=800&q=80" alt="Dev Platform"> <div class="proj-always"> <span class="proj-tag">PLATFORM</span> <div class="proj-title">DEV PLATFORM</div> </div> <div class="proj-overlay"> <span class="proj-tag">DEVELOPMENT</span> <div class="proj-title">DEV PLATFORM</div> <div class="proj-subtitle">Full-stack developer workspace design.</div> <div class="proj-arrow hover-t">→</div> </div> </div> <div class="proj-card hover-t"> <img class="proj-bg" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800&auto=format&fit=crop" alt="Abstract"> <div class="proj-always"> <span class="proj-tag">MOTION</span> <div class="proj-title">ABSTRACT FX</div> </div> <div class="proj-overlay"> <span class="proj-tag">MOTION DESIGN</span> <div class="proj-title">ABSTRACT FX</div> <div class="proj-subtitle">Generative art and motion experiments.</div> <div class="proj-arrow hover-t">→</div> </div> </div> </div> </div> <div class="sect-label">PORTFOLIO</div> <div class="sect-num">03</div> </section> <section class="panel" id="p3"> <div class="glow-bg"></div> <div class="about-inner"> <div class="about-left"> <div class="section-header reveal-up"> <div class="eyebrow">About</div> <h2>METE HAN<br>AKYOL.</h2> </div> <p class="about-desc reveal-up delay-1"> Dijital dünyada estetik ve fonksiyonelliği buluşturan bir tasarımcıve geliştirici. Modern araçlar,keskin bir göz ve temiz kod ile projelerinize hayat veriyorum. </p> <div class="skills-list reveal-up delay-2"> <div class="skill-row"> <div class="skill-head"><span class="skill-name">HTML / CSS</span><span class="skill-pct">95%</span></div> <div class="skill-track"><div class="skill-fill" style="--w:0.95" data-w="0.95"></div></div> </div> <div class="skill-row"> <div class="skill-head"><span class="skill-name">JavaScript</span><span class="skill-pct">80%</span></div> <div class="skill-track"><div class="skill-fill" style="--w:0.80" data-w="0.80"></div></div> </div> <div class="skill-row"> <div class="skill-head"><span class="skill-name">Figma Design</span><span class="skill-pct">92%</span></div> <div class="skill-track"><div class="skill-fill" style="--w:0.92" data-w="0.92"></div></div> </div> <div class="skill-row"> <div class="skill-head"><span class="skill-name">Motion / GSAP</span><span class="skill-pct">75%</span></div> <div class="skill-track"><div class="skill-fill" style="--w:0.75" data-w="0.75"></div></div> </div> </div> <div class="stats-grid reveal-up delay-3"> <div class="stat-box gc"><div class="stat-val">50+</div><div class="stat-lab">Projects Done</div></div> <div class="stat-box gc"><div class="stat-val">5yr</div><div class="stat-lab">Experience</div></div> <div class="stat-box gc"><div class="stat-val">98%</div><div class="stat-lab">Satisfaction</div></div> <div class="stat-box gc"><div class="stat-val">24/7</div><div class="stat-lab">Support</div></div> </div> </div> <div class="about-right reveal-up delay-2"> <div class="about-visual-wrap"> <div class="av-main gc"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=500&q=80" alt="Mete Han"> </div> <div class="av-badge gc av-b1 hover-t"> <div class="av-badge-title">Istanbul</div> <div class="av-badge-sub">►gt;Turkey</div> </div> <div class="av-badge gc av-b2 hover-t"> <div class="av-badge-title" style="color:var(--accent);">Available</div> <div class="av-badge-sub">for new projects →</div> </div> </div> </div> </div> <div class="sect-label">EXPERTISE</div> <div class="sect-num">04</div> </section> <section class="panel" id="p4"> <div class="deco"></div> <div class="kanban-inner"> <div class="section-header reveal-up" style="display:flex;justify-content:space-between;align-items:flex-end;"> <div> <div class="eyebrow">Active Sprints</div> <h2>TASK<br>BOARD.</h2> </div> <div style="display:flex;align-items:center;gap:12px;align-self:flex-end;"> <span style="font-size:.75rem;color:var(--muted);">Q2 2025 Sprint</span> <div style="width:8px;height:8px;border-radius:50%;background:#4dffb0;animation:pulse-dot 2s infinite;"></div> </div> </div> <div class="kanban-board reveal-up delay-1"> <div class="k-col"> <div class="k-col-head"> <span class="k-col-title">BACKLOG</span> <span class="k-badge">12</span> </div> <div class="k-col-body"> <div class="gc k-card hover-t"> <span class="k-card-tag eng">ENGINEERING</span> <div class="k-card-title">Refactor authentication flow to support OAuth 2.0</div> <div class="k-card-foot"><span class="k-id">SYS-412</span><div class="k-avs"><div class="k-av"></div></div></div> </div> <div class="gc k-card hover-t"> <span class="k-card-tag urg">URGENT</span> <div class="k-card-title">Fix memory leak in WebGL render pipeline</div> <div class="k-card-foot"><span class="k-id">SYS-419</span><div class="k-avs"><div class="k-av"></div><div class="k-av"></div></div></div> </div> <div class="gc k-card hover-t"> <span class="k-card-tag des">DESIGN</span> <div class="k-card-title">Create component library v2.0 tokens</div> <div class="k-card-foot"><span class="k-id">DES-088</span><div class="k-avs"><div class="k-av"></div></div></div> </div> </div> </div> <div class="k-col"> <div class="k-col-head"> <span class="k-col-title" style="color:var(--accent);">IN PROGRESS</span> <span class="k-badge" style="border-color:rgba(232,255,71,.3);color:var(--accent);">3</span> </div> <div class="k-col-body"> <div class="gc k-card hover-t" style="border-color:rgba(232,255,71,.15);"> <span class="k-card-tag des">DESIGN</span> <div class="k-card-title">Cinematic scroll interactions for landing page</div> <div class="k-card-foot"><span class="k-id">DES-092</span><div class="k-avs"><div class="k-av"></div><div class="k-av"></div></div></div> </div> <div class="gc k-card hover-t" style="border-color:rgba(232,255,71,.15);"> <span class="k-card-tag eng">ENGINEERING</span> <div class="k-card-title">API integration for real-time dashboard data</div> <div class="k-card-foot"><span class="k-id">ENG-203</span><div class="k-avs"><div class="k-av"></div></div></div> </div> </div> </div> <div class="k-col"> <div class="k-col-head"> <span class="k-col-title">REVIEW</span> <span class="k-badge">5</span> </div> <div class="k-col-body"> <div class="gc k-card hover-t" style="opacity:.7;"> <span class="k-card-tag mkt">MARKETING</span> <div class="k-card-title">Finalize copy for Q3 launch campaign</div> <div class="k-card-foot"><span class="k-id">MKT-110</span><div class="k-avs"><div class="k-av"></div><div class="k-av"></div><div class="k-av"></div></div></div> </div> <div class="gc k-card hover-t" style="opacity:.7;"> <span class="k-card-tag des">DESIGN</span> <div class="k-card-title">Mobile responsive audit for client portal</div> <div class="k-card-foot"><span class="k-id">DES-097</span><div class="k-avs"><div class="k-av"></div></div></div> </div> </div> </div> </div> </div> <div class="sect-label">PROJECT MANAGEMENT</div> <div class="sect-num">05</div> </section> <section class="panel" id="p5"> <div class="deco"></div> <div class="analytics-inner"> <div class="section-header reveal-up" style="display:flex;justify-content:space-between;align-items:flex-end;"> <div> <div class="eyebrow">Performance</div> <h2>ANALYTICS<br>DASH.</h2> </div> <span style="font-size:.75rem;color:var(--muted);align-self:flex-end;">Last 12 months</span> </div> <div class="analytics-grid reveal-up delay-1"> <div class="gc chart-wrap hover-t"> <div class="chart-title-row"> <div> <div style="font-family:var(--font-display);font-size:1.4rem;">REVENUE GROWTH</div> <div class="chart-label">2024 —2025</div> </div> <div style="text-align:right;"> <div style="font-family:var(--font-display);font-size:2rem;color:var(--accent);">+47%</div> <div class="chart-label">YoY Increase</div> </div> </div> <div class="chart-area"> <svg class="chart-svg" viewBox="0 0 800 240" preserveAspectRatio="none"> <defs> <linearGradient id="cg" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="#e8ff47" stop-opacity=".35"/> <stop offset="100%" stop-color="#e8ff47" stop-opacity="0"/> </linearGradient> </defs> <g class="c-grid"> <line x1="0" y1="60" x2="800" y2="60"/> <line x1="0" y1="120" x2="800" y2="120"/> <line x1="0" y1="180" x2="800" y2="180"/> </g> <path class="c-area" d="M0,200 C80,180 160,160 240,140 C320,120 380,100 440,70 C500,40 580,30 640,20 C700,10 760,8 800,5 L800,240 L0,240 Z"/> <path class="c-line" id="mainLine" d="M0,200 C80,180 160,160 240,140 C320,120 380,100 440,70 C500,40 580,30 640,20 C700,10 760,8 800,5"/> <circle class="c-dot" cx="240" cy="140"/> <circle class="c-dot" cx="440" cy="70"/> <circle class="c-dot" cx="640" cy="20"/> </svg> </div> <div class="chart-legend"> <div class="cl-item"><div class="cl-dot" style="background:var(--accent);"></div>Revenue</div> <div class="cl-item"><div class="cl-dot" style="background:rgba(255,255,255,.3);"></div>Target</div> </div> </div> <div class="metrics-col"> <div class="gc metric-box hover-t"> <div class="mb-label">Efficiency Score</div> <div class="mb-val" style="color:var(--accent);">84.2%</div> <div class="mb-delta"><span class="delta-up">▲12%</span><span style="color:var(--muted);font-size:.7rem;">vs prev period</span></div> <div class="mini-chart"> <svg viewBox="0 0 120 40"><polyline class="mc-line" style="color:var(--accent);" points="0,35 20,28 40,30 60,18 80,10 100,8 120,3"/></svg> </div> </div> <div class="gc metric-box hover-t"> <div class="mb-label">Tasks Completed</div> <div class="mb-val">+1.2k</div> <div class="mb-delta"><span class="delta-up">▲8%</span><span style="color:var(--muted);font-size:.7rem;">on schedule</span></div> </div> <div class="gc metric-box hover-t" style="background:rgba(232,255,71,0.06);border-color:rgba(232,255,71,.2);"> <div class="mb-label">Client Satisfaction</div> <div class="mb-val" style="color:var(--accent);">98%</div> <div class="mb-delta"><span class="delta-up">▲3%</span><span style="color:var(--muted);font-size:.7rem;">NPS Score</span></div> </div> </div> </div> </div> <div class="sect-label">PERFORMANCE METRICS</div> <div class="sect-num">06</div> </section> <section class="panel" id="p6"> <div class="contact-inner"> <div class="contact-left"> <div class="section-header reveal-up"> <div class="eyebrow">Contact</div> </div> <h2 class="reveal-up delay-1" style="font-family:var(--font-display);font-size:clamp(3rem,5vw,5.5rem);line-height:.9;margin-bottom:20px;"> LET'S BUILD<br><em>SOMETHING</em><br>AMAZING. </h2> <p class="reveal-up delay-2" style="font-size:.95rem;color:var(--muted);line-height:1.7;max-width:380px;"> Fikirlerinizi gerçeğe dönüştürmek için sabırsızlanıyorum. Her proje bir hikaye —seninki ne? </p> <div class="contact-info reveal-up delay-2"> <div class="ci-item gc hover-t"> <div class="ci-icon">✉</div> <div class="ci-text"><small>Email</small>hello@metehan.com</div> </div> <div class="ci-item gc hover-t"> <div class="ci-icon">►gt;</div> <div class="ci-text"><small>Location</small>Istanbul,Turkey</div> </div> </div> <div class="socials reveal-up delay-3"> <a href="#" class="soc-btn hover-t">in</a> <a href="#" class="soc-btn hover-t">Be</a> <a href="#" class="soc-btn hover-t">ig</a> <a href="#" class="soc-btn hover-t" style="font-size:.75rem;">X/tw</a> </div> </div> <div class="reveal-up delay-2"> <form class="contact-form gc" style="padding:40px;" onsubmit="handleSubmit(event)"> <div style="font-family:var(--font-display);font-size:1.2rem;letter-spacing:.1em;margin-bottom:8px;padding-bottom:16px;border-bottom:1px solid var(--border);">NEW PROJECT INQUIRY</div> <div class="form-row"> <div class="form-group"> <label>YOUR NAME</label> <input class="form-input" type="text" placeholder="John Doe" required> </div> <div class="form-group"> <label>EMAIL</label> <input class="form-input" type="email" placeholder="john@example.com" required> </div> </div> <div class="form-group"> <label>PROJECT TYPE</label> <select class="form-input" style="cursor:none;"> <option value="" style="background:#08080c;">Select a service...</option> <option style="background:#08080c;">UI/UX Design</option> <option style="background:#08080c;">Web Development</option> <option style="background:#08080c;">Branding</option> <option style="background:#08080c;">Motion Design</option> </select> </div> <div class="form-group"> <label>MESSAGE</label> <input class="form-input" placeholder="Tell me about your project,timeline and budget..." required/> </div> <button type="submit" class="submit-btn hover-t">SEND MESSAGE →</button> </form> </div> </div> <div class="sect-label">GET IN TOUCH</div> <div class="sect-num">07</div> </section> </div> </div> <div id="footer-band"> <span class="fb-copy">©2025 Metehan Akyol —Creative Studio</span> <span class="fb-scroll-hint">SCROLL TO EXPLORE <span class="scroll-arrow">→</span></span> </div> <script> const rail = document.getElementById('rail');const progressEl = document.getElementById('progress');const dot = document.getElementById('c-dot');const ring = document.getElementById('c-ring');const navBtns = document.querySelectorAll('.nav-btn[data-idx]');const panels = document.querySelectorAll('.panel');const totalPanels = panels.length;const scroll ={target:0,current:0,ease:0.075,max:0,dragging:false,startX:0,startTarget:0};let mx = window.innerWidth/2,my = window.innerHeight/2;let ringX = mx,ringY = my;function updateCursor(e){mx = e.clientX;my = e.clientY;dot.style.left = mx + 'px';dot.style.top = my + 'px';}window.addEventListener('mousemove',updateCursor);document.querySelectorAll('.hover-t').forEach(el =>{el.addEventListener('mouseenter',() => document.body.classList.add('hov'));el.addEventListener('mouseleave',() => document.body.classList.remove('hov'));});function calcMax(){scroll.max = rail.scrollWidth - window.innerWidth;if (scroll.max < 0) scroll.max = 0;}calcMax();window.addEventListener('resize',calcMax);function clamp(v,mn,mx2){return Math.max(mn,Math.min(v,mx2));}window.addEventListener('wheel',e =>{const d = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX:e.deltaY;scroll.target = clamp(scroll.target + d * 1.4,0,scroll.max);},{passive:true});const vp = document.getElementById('viewport');vp.addEventListener('mousedown',e =>{scroll.dragging = true;scroll.startX = e.pageX;scroll.startTarget = scroll.target;document.body.style.userSelect = 'none';});window.addEventListener('mouseup',() =>{scroll.dragging = false;document.body.style.userSelect = '';});window.addEventListener('mousemove',e =>{if (!scroll.dragging) return;scroll.target = clamp(scroll.startTarget + (scroll.startX - e.pageX) * 1.8,0,scroll.max);});let touchStartX = 0;vp.addEventListener('touchstart',e =>{scroll.dragging = true;touchStartX = e.touches[0].pageX;scroll.startTarget = scroll.target;},{passive:true});window.addEventListener('touchend',() =>{scroll.dragging = false;});window.addEventListener('touchmove',e =>{if (!scroll.dragging) return;scroll.target = clamp(scroll.startTarget + (touchStartX - e.touches[0].pageX) * 2,0,scroll.max);},{passive:true});function jumpTo(idx){const panel = panels[idx];if (!panel) return;// Panel offset within rail const panelLeft = idx * window.innerWidth;scroll.target = clamp(panelLeft,0,scroll.max);}navBtns.forEach(btn => btn.addEventListener('click',() => jumpTo(+btn.dataset.idx)));function updateNav(){const idx = Math.round(scroll.current / window.innerWidth);navBtns.forEach((b,i) =>{b.classList.toggle('active',i === idx && !b.classList.contains('cta'));});}const revealObs = new IntersectionObserver(entries =>{entries.forEach(entry =>{if (entry.isIntersecting){entry.target.classList.add('vis');// Animate skill bars entry.target.querySelectorAll('.skill-fill').forEach(el =>{el.classList.add('animated');el.style.transform = `scaleX(${el.dataset.w})`;});// Animate chart line entry.target.querySelectorAll('.c-line').forEach(el => el.classList.add('drawn'));}});},{threshold:0.15});document.querySelectorAll('.reveal-up').forEach(el => revealObs.observe(el));// Trigger hero reveal immediately setTimeout(() =>{document.querySelectorAll('#p0 .reveal-up').forEach(el => el.classList.add('vis'));},100);document.querySelectorAll('.gc.hover-t,.gc').forEach(card =>{card.addEventListener('mousemove',e =>{const r = card.getBoundingClientRect();const x = e.clientX - r.left,y = e.clientY - r.top;const cx = r.width/2,cy = r.height/2;const rx = (y-cy)/cy * -6;const ry = (x-cx)/cx * 6;card.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) scale3d(1.015,1.015,1.015)`;card.style.setProperty('--mx',x+'px');card.style.setProperty('--my',y+'px');});card.addEventListener('mouseleave',() =>{card.style.transform = '';});});const canvas = document.getElementById('particles');const ctx = canvas.getContext('2d');canvas.style.position = 'fixed';canvas.style.inset = '0';canvas.style.zIndex = '3';canvas.style.pointerEvents = 'none';function resizeCanvas(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;}resizeCanvas();window.addEventListener('resize',resizeCanvas);const particles = [];function spawnParticle(){particles.push({x:Math.random() * canvas.width,y:canvas.height + 10,r:Math.random() * 2 + .5,vx:(Math.random() - .5) * .4,vy:-(Math.random() * .8 + .4),life:0,maxLife:Math.random() * 200 + 100});}function drawParticles(){ctx.clearRect(0,0,canvas.width,canvas.height);for (let i = particles.length-1;i >= 0;i--){const p = particles[i];p.x += p.vx;p.y += p.vy;p.life++;const prog = p.life / p.maxLife;const alpha = prog < .2 ? prog/.2:prog > .8 ? 1-(prog-.8)/.2:1;ctx.beginPath();ctx.arc(p.x,p.y,p.r,0,Math.PI*2);ctx.fillStyle = `rgba(232,255,71,${alpha * .35})`;ctx.fill();if (p.life >= p.maxLife) particles.splice(i,1);}}document.addEventListener('mousemove',e =>{const stack = document.querySelector('.hero-card-stack');if (!stack) return;const cx = window.innerWidth/2,cy = window.innerHeight/2;const rx = (e.clientY - cy) / cy * 8;const ry = (e.clientX - cx) / cx * -8;stack.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;});let lastSpawn = 0;function render(ts){// Smooth scroll scroll.current += (scroll.target - scroll.current) * scroll.ease;if (Math.abs(scroll.target - scroll.current) < .05) scroll.current = scroll.target;rail.style.transform = `translate3d(${-scroll.current}px,0,0)`;// Cursor ring lerp ringX += (mx - ringX) * .12;ringY += (my - ringY) * .12;ring.style.left = ringX + 'px';ring.style.top = ringY + 'px';// Progress const pct = scroll.max > 0 ? (scroll.current / scroll.max) * 100:0;progressEl.style.width = pct + '%';// Nav updateNav();// Particles if (ts - lastSpawn > 400){spawnParticle();lastSpawn = ts;}drawParticles();requestAnimationFrame(render);}requestAnimationFrame(render);function handleSubmit(e){e.preventDefault();const btn = e.target.querySelector('.submit-btn');btn.textContent = 'MESSAGE SENT ✓';btn.style.background = '#4dffb0';setTimeout(() =>{btn.textContent = 'SEND MESSAGE →';btn.style.background = '';e.target.reset();},3000);}</script> </body> </html>
CSS
Copy
<!-- Replace with your CSS Code (Leave empty if not needed) -->
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
