Metehan

306 Metehan

Abrir en el editor Publica tu código

Recomendado

14 June 2025

Un código de Metehan

25 April 2025

Un código de Metehan

18 April 2025

Un código de Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>M.HAN — Creative Designer & Developer</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=Syne:wght@400;600;700;800&family=Cormorant+Garamond:ital,wght@1,400;1,600;1,700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <style>
        /* =========================================
           ROOT & RESET
           ========================================= */
        :root {
            --bg:      #070707;
            --surface: #0e0e0e;
            --card:    #141414;
            --border:  rgba(255,255,255,0.06);
            --lime:    #d4ff00;
            --cream:   #f0ebe0;
            --muted:   #666;
            --dim:     #3a3a3a;

--sans:  'Syne', sans-serif;
            --serif: 'Cormorant Garamond', serif;
            --mono:  'Space Mono', monospace;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--bg);
            color: var(--cream);
            font-family: var(--sans);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            cursor: none;
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }

/* ---- Scrollbar ---- */
        ::-webkit-scrollbar { width: 3px; }
        ::-webkit-scrollbar-track { background: var(--bg); }
        ::-webkit-scrollbar-thumb { background: var(--lime); border-radius: 2px; }
        ::selection { background: var(--lime); color: var(--bg); }

/* =========================================
           CURSOR
           ========================================= */
        .cursor {
            width: 10px; height: 10px;
            background: var(--lime);
            border-radius: 50%;
            position: fixed; top: 0; left: 0;
            pointer-events: none; z-index: 9999;
            transform: translate(-50%,-50%);
            transition: width .25s, height .25s;
            mix-blend-mode: difference;
        }
        .cursor-ring {
            width: 38px; height: 38px;
            border: 1px solid rgba(212,255,0,.4);
            border-radius: 50%;
            position: fixed; top: 0; left: 0;
            pointer-events: none; z-index: 9998;
            transform: translate(-50%,-50%);
            transition: width .25s, height .25s;
        }

/* =========================================
           ANIMATIONS
           ========================================= */
        @keyframes marquee { to { transform: translateX(-50%); } }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
        @keyframes blink  { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
        @keyframes pulse  {
            0%   { box-shadow: 0 0 0 0 rgba(212,255,0,.5); }
            70%  { box-shadow: 0 0 0 8px rgba(212,255,0,0); }
            100% { box-shadow: 0 0 0 0 rgba(212,255,0,0); }
        }

.afu  { opacity: 0; animation: fadeUp .9s cubic-bezier(.16,1,.3,1) forwards; }
        .d1   { animation-delay: .1s; }
        .d2   { animation-delay: .28s; }
        .d3   { animation-delay: .46s; }
        .d4   { animation-delay: .64s; }

/* scroll-reveal hook */
        .rv { opacity: 0; transform: translateY(36px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
        .rv.in { opacity: 1; transform: translateY(0); }
        .rv.td1 { transition-delay: .12s; }
        .rv.td2 { transition-delay: .24s; }
        .rv.td3 { transition-delay: .36s; }

/* =========================================
           NAV
           ========================================= */
        nav {
            position: fixed; top: 0; left: 0; right: 0; z-index: 200;
            display: flex; justify-content: space-between; align-items: center;
            padding: 1.6rem 2.5rem;
            transition: background .35s, backdrop-filter .35s, padding .35s, border-color .35s;
        }
        nav.stuck {
            background: rgba(7,7,7,.9);
            backdrop-filter: blur(24px);
            border-bottom: 1px solid var(--border);
            padding: 1rem 2.5rem;
        }
        .logo {
            font-family: var(--sans); font-weight: 800;
            font-size: 1.05rem; letter-spacing: 3px; text-transform: uppercase;
        }
        .logo span { color: var(--lime); }
        .nav-links { display: flex; gap: 2.5rem; }
        .nav-links a {
            font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
            letter-spacing: 1px; color: var(--muted);
            transition: color .2s;
        }
        .nav-links a:hover { color: var(--lime); }
        .nav-pill {
            font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
            letter-spacing: 1px; color: var(--lime);
            border: 1px solid rgba(212,255,0,.3); padding: .5rem 1.3rem; border-radius: 2px;
            transition: background .2s, color .2s;
        }
        .nav-pill:hover { background: var(--lime); color: var(--bg); }
        .hmbg { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
        .hmbg span { width: 22px; height: 1.5px; background: var(--cream); transition: all .3s; display: block; }

/* =========================================
           MOBILE OVERLAY
           ========================================= */
        .mob-overlay {
            position: fixed; inset: 0; z-index: 190;
            background: var(--bg);
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
            clip-path: circle(0% at 100% 0);
            transition: clip-path .6s ease;
        }
        .mob-overlay.open { clip-path: circle(160% at 100% 0); }
        .mob-overlay a {
            font-family: var(--sans); font-weight: 800; font-size: 2.4rem;
            text-transform: uppercase; letter-spacing: -1px;
            opacity: 0; transform: translateY(16px);
            transition: opacity .4s, transform .4s, color .2s;
        }
        .mob-overlay.open a { opacity: 1; transform: translateY(0); }
        .mob-overlay a:hover { color: var(--lime); }
        .mob-overlay.open a:nth-child(1) { transition-delay: .12s; }
        .mob-overlay.open a:nth-child(2) { transition-delay: .22s; }
        .mob-overlay.open a:nth-child(3) { transition-delay: .32s; }
        .mob-overlay.open a:nth-child(4) { transition-delay: .42s; }
        .mob-overlay.open a:nth-child(5) { transition-delay: .52s; }

/* =========================================
           HERO
           ========================================= */
        .hero {
            min-height: 100vh;
            display: grid; grid-template-columns: 1fr 1fr; align-items: center;
            padding: 6rem 2.5rem 2rem;
            position: relative; overflow: hidden; gap: 3rem;
        }
        .hero::before {
            content: '';
            position: absolute; top: -250px; right: -200px;
            width: 700px; height: 700px;
            background: radial-gradient(circle, rgba(212,255,0,.05) 0%, transparent 60%);
            pointer-events: none;
        }
        .side-label {
            position: absolute; left: 1.4rem; top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            font-family: var(--mono); font-size: .6rem; color: var(--muted);
            letter-spacing: 3px; text-transform: uppercase;
        }
        .hero-l { padding-left: 3.5rem; }
        .hero-eyebrow {
            font-family: var(--mono); font-size: .68rem;
            color: var(--lime); text-transform: uppercase; letter-spacing: 3px;
            margin-bottom: 1.4rem;
            display: flex; align-items: center; gap: .75rem;
        }
        .hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--lime); }
        .dot-live {
            width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
            display: inline-block; animation: pulse 2s infinite;
        }
        .hero-h1 {
            font-family: var(--sans); font-weight: 800;
            font-size: clamp(3.2rem, 6.5vw, 6.2rem);
            line-height: .93; text-transform: uppercase; letter-spacing: -2px;
        }
        .hero-h1 em {
            font-family: var(--serif); font-weight: 400; font-style: italic;
            color: var(--lime); letter-spacing: -1px; display: block;
        }
        .hero-body {
            font-family: var(--mono); font-size: .77rem;
            color: var(--muted); line-height: 1.9;
            max-width: 380px; margin: 1.6rem 0 2.4rem;
        }
        .btns { display: flex; gap: 1rem; flex-wrap: wrap; }
        .btn-solid {
            display: inline-block; background: var(--lime); color: var(--bg);
            font-family: var(--mono); font-size: .72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 2px;
            padding: .9rem 2.1rem; border-radius: 2px; border: none;
            transition: transform .2s, box-shadow .2s;
        }
        .btn-solid:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(212,255,0,.28); }
        .btn-line {
            display: inline-block; background: transparent; color: var(--cream);
            font-family: var(--mono); font-size: .72rem;
            text-transform: uppercase; letter-spacing: 2px;
            padding: .9rem 2.1rem; border-radius: 2px;
            border: 1px solid var(--border); transition: border-color .2s, color .2s;
        }
        .btn-line:hover { border-color: var(--lime); color: var(--lime); }

/* Right visual */
        .hero-r { position: relative; height: 88vh; }
        .hero-img {
            width: 88%; height: 100%;
            overflow: hidden; border-radius: 4px;
            position: absolute; right: 0; top: 0;
        }
        .hero-img img {
            width: 100%; height: 100%; object-fit: cover;
            filter: grayscale(100%) contrast(1.1);
            transition: filter .5s;
        }
        .hero-img:hover img { filter: grayscale(25%) contrast(1.05); }
        .hero-img::after {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(to right, rgba(7,7,7,.65) 0%, transparent 40%),
                        linear-gradient(to top,  rgba(7,7,7,.45) 0%, transparent 40%);
        }

/* floating cards */
        .f-card {
            position: absolute; z-index: 10;
            background: rgba(20,20,20,.9);
            backdrop-filter: blur(16px);
            border: 1px solid var(--border); border-radius: 10px; padding: 1.4rem 1.6rem;
        }
        .f-card-1 {
            bottom: 3rem; left: -1.5rem;
            width: 200px;
            animation: float 4.5s ease-in-out infinite;
        }
        .f-card-2 {
            top: 2rem; left: -.5rem;
            animation: float 5.5s ease-in-out infinite reverse;
        }
        .fc-label { font-family: var(--mono); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; margin-bottom: .6rem; }
        .fc-val { font-family: var(--sans); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--lime); }
        .fc-sub { font-family: var(--mono); font-size: .62rem; color: var(--muted); margin-top: .3rem; display: flex; align-items: center; gap: 6px; }
        .fc2-row { font-family: var(--mono); font-size: .65rem; color: var(--muted); }
        .fc2-row span { color: var(--lime); }

/* =========================================
           TICKER
           ========================================= */
        .ticker-wrap {
            background: var(--lime); color: var(--bg);
            overflow: hidden; white-space: nowrap;
            padding: .95rem 0;
            border-top: 1px solid rgba(212,255,0,.2);
        }
        .ticker-track {
            display: inline-block;
            animation: marquee 22s linear infinite;
        }
        .ti {
            display: inline-flex; align-items: center; gap: 1rem;
            font-family: var(--mono); font-weight: 700; font-size: .72rem;
            text-transform: uppercase; letter-spacing: 2px; padding: 0 3rem;
        }
        .ti .sep { color: rgba(7,7,7,.3); font-size: 1.1rem; }

/* =========================================
           SHARED SECTION
           ========================================= */
        .wrap { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; }
        .sec { padding: 7rem 0; }
        .sec-label {
            font-family: var(--mono); font-size: .63rem;
            color: var(--lime); text-transform: uppercase; letter-spacing: 3px;
            margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem;
        }
        .sec-label::after { content: ''; width: 60px; height: 1px; background: var(--border); }
        .sec-h2 {
            font-family: var(--sans); font-weight: 800;
            font-size: clamp(2.4rem, 5vw, 4.5rem);
            line-height: .93; text-transform: uppercase; letter-spacing: -1.5px;
        }
        .sec-h2 em { font-family: var(--serif); font-weight: 400; font-style: italic; color: var(--muted); }

/* =========================================
           STATS ROW
           ========================================= */
        .stats-bg { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
        .stats-grid {
            display: grid; grid-template-columns: repeat(4,1fr);
            border-left: 1px solid var(--border);
        }
        .s-card {
            padding: 3.5rem 2.5rem;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            position: relative; overflow: hidden;
            transition: background .3s;
        }
        .s-card:hover { background: var(--card); }
        .s-card::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
            background: var(--lime); transform: scaleX(0); transform-origin: left;
            transition: transform .45s ease;
        }
        .s-card:hover::before { transform: scaleX(1); }
        .s-num {
            font-family: var(--sans); font-weight: 800;
            font-size: clamp(3.2rem, 5vw, 5.2rem); line-height: 1; color: var(--cream);
        }
        .s-num span { color: var(--lime); }
        .s-txt { font-family: var(--mono); font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; line-height: 1.7; margin-top: .6rem; }

/* =========================================
           WORKS
           ========================================= */
        .works-hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3.5rem; }
        .all-link {
            font-family: var(--mono); font-size: .68rem; color: var(--muted);
            text-transform: uppercase; letter-spacing: 2px;
            display: flex; align-items: center; gap: .5rem; transition: color .2s;
        }
        .all-link:hover { color: var(--lime); }
        .all-link .arr { transition: transform .2s; }
        .all-link:hover .arr { transform: translateX(4px); }
        .works-bento {
            display: grid; grid-template-columns: repeat(12,1fr);
            gap: 1.2rem;
        }
        .w-card {
            position: relative; overflow: hidden; background: var(--card);
            border: 1px solid var(--border); border-radius: 4px;
            cursor: pointer; transition: border-color .3s, transform .4s;
        }
        .w-card:hover { border-color: rgba(212,255,0,.2); transform: translateY(-5px); }
        .w-card img {
            width: 100%; height: 100%; object-fit: cover;
            position: absolute; inset: 0;
            filter: grayscale(80%); transition: filter .5s, transform .6s;
        }
        .w-card:hover img { filter: grayscale(15%); transform: scale(1.05); }
        .w-ovl {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(7,7,7,.88) 0%, transparent 55%);
        }
        .w-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; }
        .w-cat { font-family: var(--mono); font-size: .58rem; color: var(--lime); text-transform: uppercase; letter-spacing: 2px; margin-bottom: .35rem; }
        .w-title { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.3px; }
        .w1 { grid-column: span 7; min-height: 420px; }
        .w2 { grid-column: span 5; min-height: 420px; }
        .w3,.w4,.w5 { grid-column: span 4; min-height: 290px; }

/* =========================================
           SERVICES
           ========================================= */
        .srv-bg { background: var(--surface); border-top: 1px solid var(--border); }
        .srv-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 6rem; align-items: start; }
        .srv-blurb { font-family: var(--mono); font-size: .78rem; color: var(--muted); line-height: 2; margin-top: 1.5rem; }
        .srv-grid { display: grid; grid-template-columns: 1fr 1fr; }
        .srv-item {
            border: 1px solid var(--border); padding: 2.4rem;
            margin: -1px -1px 0 0;
            position: relative; transition: background .3s, z-index 0s;
        }
        .srv-item:hover { background: var(--card); z-index: 1; border-color: rgba(212,255,0,.15); }
        .srv-n { font-family: var(--mono); font-size: .6rem; color: var(--muted); margin-bottom: 1.2rem; }
        .srv-name { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; margin-bottom: .7rem; transition: color .25s; }
        .srv-item:hover .srv-name { color: var(--lime); }
        .srv-desc { font-family: var(--mono); font-size: .7rem; color: var(--muted); line-height: 1.9; }

/* =========================================
           SKILLS
           ========================================= */
        .skl-bg { background: var(--surface); border-top: 1px solid var(--border); }
        .skl-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: center; }
        .skl-grp { margin-bottom: 2.2rem; }
        .skl-hd { display: flex; justify-content: space-between; margin-bottom: .55rem; }
        .skl-nm { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; }
        .skl-pc { font-family: var(--mono); font-size: .65rem; color: var(--lime); }
        .skl-track { height: 2px; background: var(--dim); border-radius: 2px; overflow: hidden; }
        .skl-fill { height: 100%; background: var(--lime); border-radius: 2px; width: 0; transition: width 1.6s cubic-bezier(.25,1,.5,1); }

/* Terminal card */
        .term {
            background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
        }
        .term-bar {
            background: var(--surface); padding: .7rem 1.2rem;
            display: flex; align-items: center; gap: .5rem;
            border-bottom: 1px solid var(--border);
        }
        .td { width: 10px; height: 10px; border-radius: 50%; }
        .term-file { font-family: var(--mono); font-size: .6rem; color: var(--muted); margin-left: .5rem; }
        .term-body { padding: 2rem; font-family: var(--mono); font-size: .74rem; line-height: 2.3; }
        .tk { color: var(--lime); }
        .tv { color: var(--cream); }
        .tn { color: #ff9d5c; }
        .ts { color: #7ec8e3; }
        .tg { color: var(--muted); }

/* =========================================
           CONTACT
           ========================================= */
        .ctn-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 6rem; align-items: start; }
        .ctn-tagline { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,2.5vw,2rem); color: var(--muted); line-height: 1.55; margin: 1.5rem 0 2.5rem; }
        .ctn-row { border-top: 1px solid var(--border); padding: 1.2rem 0; display: flex; justify-content: space-between; align-items: center; }
        .ctn-key { font-family: var(--mono); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }
        .ctn-val { font-family: var(--mono); font-size: .73rem; color: var(--cream); transition: color .2s; }
        .ctn-val:hover { color: var(--lime); }
        .ctn-form { display: flex; flex-direction: column; gap: 1rem; }
        .f-lbl { font-family: var(--mono); font-size: .58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; display: block; margin-bottom: .45rem; }
        .f-in {
            width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 2px;
            color: var(--cream); font-family: var(--mono); font-size: .78rem;
            padding: .85rem 1rem; outline: none; transition: border-color .2s;
        }
        .f-in:focus { border-color: rgba(212,255,0,.4); }
        textarea.f-in { resize: vertical; min-height: 130px; }

/* =========================================
           FOOTER
           ========================================= */
        footer {
            background: var(--surface); border-top: 1px solid var(--border);
            padding: 2.5rem 2.5rem;
            display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
        }
        .f-logo { font-family: var(--sans); font-weight: 800; font-size: 1.4rem; letter-spacing: 3px; text-transform: uppercase; }
        .f-logo span { color: var(--lime); }
        .f-copy { font-family: var(--mono); font-size: .62rem; color: var(--muted); text-align: center; letter-spacing: 1px; }
        .f-socials { display: flex; justify-content: flex-end; gap: 2rem; }
        .f-socials a { font-family: var(--mono); font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; transition: color .2s; }
        .f-socials a:hover { color: var(--lime); }

/* =========================================
           RESPONSIVE
           ========================================= */
        @media (max-width: 1100px) {
            .hero { grid-template-columns: 1fr; padding-top: 7rem; }
            .hero-l { padding-left: .5rem; }
            .hero-r { height: 55vw; max-height: 480px; }
            .side-label { display: none; }
            .stats-grid { grid-template-columns: repeat(2,1fr); }
            .w1,.w2 { grid-column: span 6; }
            .w3,.w4,.w5 { grid-column: span 4; }
            .srv-layout { grid-template-columns: 1fr; gap: 3rem; }
            .skl-layout { grid-template-columns: 1fr; }
            .ctn-layout { grid-template-columns: 1fr; gap: 3rem; }
            footer { grid-template-columns: 1fr; text-align: center; gap: 1.2rem; }
            .f-socials { justify-content: center; }
            .nav-links,.nav-pill { display: none; }
            .hmbg { display: flex; }
        }
        @media (max-width: 700px) {
            .works-bento { grid-template-columns: 1fr; }
            .w1,.w2,.w3,.w4,.w5 { grid-column: span 1; min-height: 270px; }
            .srv-grid { grid-template-columns: 1fr; }
            .stats-grid { grid-template-columns: repeat(2,1fr); }
            .f-card-1,.f-card-2 { display: none; }
            .hero-img { width: 100%; }
            .sec { padding: 5rem 0; }
        }
    </style>
</head>
<body>

<div class="cursor" id="cur"></div>
<div class="cursor-ring" id="curR"></div>

<div class="mob-overlay" id="mobMenu">
    <a href="#about" onclick="closeMenu()">About</a>
    <a href="#works" onclick="closeMenu()">Works</a>
    <a href="#services" onclick="closeMenu()">Services</a>
    <a href="#skills" onclick="closeMenu()">Skills</a>
    <a href="#contact" onclick="closeMenu()">Contact</a>
</div>

<nav id="nav">
    <div class="logo">M.<span>HAN</span></div>
    <div class="nav-links">
        <a href="#about">About</a>
        <a href="#works">Works</a>
        <a href="#services">Services</a>
        <a href="#skills">Skills</a>
    </div>
    <a href="#contact" class="nav-pill">Let's Talk</a>
    <div class="hmbg" id="hmbg">
        <span></span><span></span><span></span>
    </div>
</nav>

<section class="hero" id="home">
    <span class="side-label">Portfolio — 2025</span>

<div class="hero-l">
        <div class="hero-eyebrow afu d1">
            <span class="dot-live"></span>
            Available for work
        </div>
        <h1 class="hero-h1 afu d2">
            Creative<br>
            <em>Designer</em><br>
            & Developer
        </h1>
        <p class="hero-body afu d3">
            Crafting digital experiences at the intersection of visual design and engineering. Specializing in UI/UX, web development, and brand systems.
        </p>
        <div class="btns afu d4">
            <a href="#works" class="btn-solid">View Work</a>
            <a href="#contact" class="btn-line">Get in Touch</a>
        </div>
    </div>

<div class="hero-r afu d2">
        <div class="hero-img">
            <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=1400&q=80" alt="Creative Design" loading="eager"/>
        </div>

<div class="f-card f-card-1">
            <div class="fc-label">Projects Shipped</div>
            <div class="fc-val">84<span style="font-size:1.5rem">+</span></div>
            <div class="fc-sub"><span class="dot-live"></span>All on time</div>
        </div>

<div class="f-card f-card-2">
            <div class="fc-label" style="margin-bottom:.5rem">Current Stack</div>
            <div class="fc2-row"><span>React</span> · <span>Figma</span> · <span>GSAP</span></div>
        </div>
    </div>
</section>

<div class="ticker-wrap">
    <div class="ticker-track">
        <span class="ti">UI/UX Design<span class="sep"> ◆</span></span>
        <span class="ti">Web Development<span class="sep"> ◆</span></span>
        <span class="ti">Brand Identity<span class="sep"> ◆</span></span>
        <span class="ti">Design Systems<span class="sep"> ◆</span></span>
        <span class="ti">Motion Design<span class="sep"> ◆</span></span>
        <span class="ti">Interactive Web<span class="sep"> ◆</span></span>
        <span class="ti">UI/UX Design<span class="sep"> ◆</span></span>
        <span class="ti">Web Development<span class="sep"> ◆</span></span>
        <span class="ti">Brand Identity<span class="sep"> ◆</span></span>
        <span class="ti">Design Systems<span class="sep"> ◆</span></span>
        <span class="ti">Motion Design<span class="sep"> ◆</span></span>
        <span class="ti">Interactive Web<span class="sep"> ◆</span></span>
    </div>
</div>

<section class="stats-bg" id="about">
    <div class="stats-grid">
        <div class="s-card rv">
            <div class="s-num">5<span>+</span></div>
            <div class="s-txt">Years of<br>Experience</div>
        </div>
        <div class="s-card rv td1">
            <div class="s-num">84<span>+</span></div>
            <div class="s-txt">Projects<br>Completed</div>
        </div>
        <div class="s-card rv td2">
            <div class="s-num">32<span>+</span></div>
            <div class="s-txt">Happy<br>Clients</div>
        </div>
        <div class="s-card rv td3" style="border-bottom:none">
            <div class="s-num">99<span>%</span></div>
            <div class="s-txt">Client<br>Satisfaction</div>
        </div>
    </div>
</section>

<section class="sec" id="works">
    <div class="wrap">
        <div class="works-hd rv">
            <div>
                <div class="sec-label">Selected Work</div>
                <h2 class="sec-h2">Recent<br><em>Projects</em></h2>
            </div>
            <a href="#" class="all-link">All Projects <span class="arr">→</span></a>
        </div>

<div class="works-bento">
            <div class="w-card w1 rv">
                <img src="https://images.unsplash.com/photo-1555099962-4199c345e5dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Analytics Platform" loading="lazy"/>
                <div class="w-ovl"></div>
                <div class="w-info">
                    <div class="w-cat">Dashboard UI · 2025</div>
                    <div class="w-title">Analytics Platform</div>
                </div>
            </div>
            <div class="w-card w2 rv td1">
                <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&q=80" alt="Fashion Store" loading="lazy"/>
                <div class="w-ovl"></div>
                <div class="w-info">
                    <div class="w-cat">E-Commerce · 2025</div>
                    <div class="w-title">Fashion Store</div>
                </div>
            </div>
            <div class="w-card w3 rv">
                <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Fintech App" loading="lazy"/>
                <div class="w-ovl"></div>
                <div class="w-info">
                    <div class="w-cat">Mobile App</div>
                    <div class="w-title">Fintech App</div>
                </div>
            </div>
            <div class="w-card w4 rv td1">
                <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Tech Startup" loading="lazy"/>
                <div class="w-ovl"></div>
                <div class="w-info">
                    <div class="w-cat">Brand Identity</div>
                    <div class="w-title">Tech Startup</div>
                </div>
            </div>
            <div class="w-card w5 rv td2">
                <img src="https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Product Render" loading="lazy"/>
                <div class="w-ovl"></div>
                <div class="w-info">
                    <div class="w-cat">3D & Motion</div>
                    <div class="w-title">Product Render</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec srv-bg" id="services">
    <div class="wrap">
        <div class="srv-layout">
            <div class="rv">
                <div class="sec-label">What I Do</div>
                <h2 class="sec-h2">Core<br><em>Services</em></h2>
                <p class="srv-blurb">Turning ideas into polished digital products with a focus on clarity, performance, and aesthetic precision. Every pixel, intentional.</p>
            </div>
            <div class="srv-grid rv td2">
                <div class="srv-item">
                    <div class="srv-n">01</div>
                    <div class="srv-name">UI / UX Design</div>
                    <div class="srv-desc">User-centered interfaces using Figma. Wireframes, prototypes, and full design systems.</div>
                </div>
                <div class="srv-item">
                    <div class="srv-n">02</div>
                    <div class="srv-name">Web Development</div>
                    <div class="srv-desc">Front-end engineering with React & Next.js. Performance-first, always responsive.</div>
                </div>
                <div class="srv-item">
                    <div class="srv-n">03</div>
                    <div class="srv-name">Brand Identity</div>
                    <div class="srv-desc">Visual identities that communicate strategy — logo, type, color, and collateral.</div>
                </div>
                <div class="srv-item">
                    <div class="srv-n">04</div>
                    <div class="srv-name">Motion Design</div>
                    <div class="srv-desc">Micro-interactions, scroll animations, and cinematic transitions with GSAP.</div>
                </div>
                <div class="srv-item">
                    <div class="srv-n">05</div>
                    <div class="srv-name">Dashboard Systems</div>
                    <div class="srv-desc">Data visualization dashboards — charts, real-time widgets, analytics interfaces.</div>
                </div>
                <div class="srv-item">
                    <div class="srv-n">06</div>
                    <div class="srv-name">Consulting</div>
                    <div class="srv-desc">Design audits, strategic roadmaps, and direction for digital products & teams.</div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec skl-bg" id="skills">
    <div class="wrap">
        <div class="skl-layout">
            <div class="rv">
                <div class="sec-label">Expertise</div>
                <h2 class="sec-h2" style="margin-bottom:3rem">Technical<br><em>Skills</em></h2>

<div class="skl-grp">
                    <div class="skl-hd"><span class="skl-nm">HTML / CSS</span><span class="skl-pc">96%</span></div>
                    <div class="skl-track"><div class="skl-fill" data-w="96"></div></div>
                </div>
                <div class="skl-grp">
                    <div class="skl-hd"><span class="skl-nm">JavaScript / React</span><span class="skl-pc">88%</span></div>
                    <div class="skl-track"><div class="skl-fill" data-w="88"></div></div>
                </div>
                <div class="skl-grp">
                    <div class="skl-hd"><span class="skl-nm">Figma / Design Systems</span><span class="skl-pc">94%</span></div>
                    <div class="skl-track"><div class="skl-fill" data-w="94"></div></div>
                </div>
                <div class="skl-grp">
                    <div class="skl-hd"><span class="skl-nm">UI/UX Strategy</span><span class="skl-pc">90%</span></div>
                    <div class="skl-track"><div class="skl-fill" data-w="90"></div></div>
                </div>
                <div class="skl-grp">
                    <div class="skl-hd"><span class="skl-nm">Motion / Animation</span><span class="skl-pc">76%</span></div>
                    <div class="skl-track"><div class="skl-fill" data-w="76"></div></div>
                </div>
            </div>

<div class="term rv td2">
                <div class="term-bar">
                    <div class="td" style="background:#ff5f56"></div>
                    <div class="td" style="background:#ffbd2e"></div>
                    <div class="td" style="background:#27c93f"></div>
                    <span class="term-file">profile.json</span>
                </div>
                <div class="term-body">
                    <span class="tg">{</span><br>
                      <span class="tk">"name"</span>: <span class="ts">"Mete Han"</span>,<br>
                      <span class="tk">"role"</span>: <span class="ts">"Designer & Developer"</span>,<br>
                      <span class="tk">"experience"</span>: <span class="tn">5</span>,<br>
                      <span class="tk">"stack"</span>: [<br>
                        <span class="ts">"React"</span>, <span class="ts">"Next.js"</span>, <span class="ts">"Figma"</span>,<br>
                        <span class="ts">"GSAP"</span>, <span class="ts">"Tailwind"</span>, <span class="ts">"WebGL"</span><br>
                      ],<br>
                      <span class="tk">"projects"</span>: <span class="tn">84</span>,<br>
                      <span class="tk">"status"</span>: <span class="ts">"available"</span>,<br>
                      <span class="tk">"location"</span>: <span class="ts">"Istanbul, TR"</span>,<br>
                      <span class="tk">"open_from"</span>: <span class="ts">"April 2025"</span><br>
                    <span class="tg">}</span><br>
                    <br>
                    <span style="color:var(--lime)">▌<span style="animation:blink 1.1s infinite;display:inline-block">_</span></span>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec" id="contact">
    <div class="wrap">
        <div class="ctn-layout">
            <div class="rv">
                <div class="sec-label">Contact</div>
                <h2 class="sec-h2" style="margin-bottom:.5rem">Let's<br><em>Work Together</em></h2>
                <p class="ctn-tagline">
                    Have a project in mind? I'd love to help bring your vision to life. Let's build something extraordinary.
                </p>
                <div class="ctn-row">
                    <span class="ctn-key">Email</span>
                    <a href="mailto:hello@mhan.dev" class="ctn-val">hello@mhan.dev</a>
                </div>
                <div class="ctn-row">
                    <span class="ctn-key">Location</span>
                    <span class="ctn-val">Istanbul, Turkey</span>
                </div>
                <div class="ctn-row">
                    <span class="ctn-key">Status</span>
                    <span class="ctn-val" style="color:var(--lime)"><span class="dot-live" style="margin-right:7px"></span>Open to Work</span>
                </div>
            </div>

<div class="rv td2">
                <div class="ctn-form">
                    <div>
                        <label class="f-lbl">Full Name</label>
                        <input type="text" class="f-in" placeholder="John Doe" />
                    </div>
                    <div>
                        <label class="f-lbl">Email Address</label>
                        <input type="email" class="f-in" placeholder="john@company.com" />
                    </div>
                    <div>
                        <label class="f-lbl">Project Brief</label>
                        <input class="f-in" placeholder="Tell me about your project..."/>
                    </div>
                    <button class="btn-solid" onclick="this.textContent='Message Sent ✓';this.style.background='#27c93f'">Send Message →</button>
                </div>
            </div>
        </div>
    </div>
</section>

<footer>
    <div class="f-logo">M.<span>HAN</span></div>
    <div class="f-copy">© 2025 Mete Han. Crafted with precision.</div>
    <div class="f-socials">
        <a href="#">GitHub</a>
        <a href="#">LinkedIn</a>
        <a href="#">Behance</a>
        <a href="#">Instagram</a>
    </div>
</footer>

document.addEventListener('mousemove', e => {
    mx = e.clientX; my = e.clientY;
    cur.style.left = mx + 'px';
    cur.style.top  = my + 'px';
});

(function animR() {
    rx += (mx - rx) * .14;
    ry += (my - ry) * .14;
    curR.style.left = rx + 'px';
    curR.style.top  = ry + 'px';
    requestAnimationFrame(animR);
})();

/* ---- Navbar ---- */
const nav = document.getElementById('nav');
window.addEventListener('scroll', () => {
    nav.classList.toggle('stuck', window.scrollY > 50);
});

/* ---- Mobile Menu ---- */
const hmbg    = document.getElementById('hmbg');
const mobMenu = document.getElementById('mobMenu');
let open = false;

hmbg.addEventListener('click', () => {
    open = !open;
    mobMenu.classList.toggle('open', open);
    const [a,b,c] = hmbg.querySelectorAll('span');
    a.style.transform = open ? 'rotate(45deg) translate(5px,5px)' : '';
    b.style.opacity   = open ? '0' : '1';
    c.style.transform = open ? 'rotate(-45deg) translate(5px,-5px)' : '';
    document.body.style.overflow = open ? 'hidden' : '';
});

function closeMenu() {
    open = false;
    mobMenu.classList.remove('open');
    const [a,b,c] = hmbg.querySelectorAll('span');
    a.style.transform = b.style.opacity = c.style.transform = '';
    b.style.opacity = '1';
    document.body.style.overflow = '';
}

/* ---- Scroll Reveal ---- */
const rvEls = document.querySelectorAll('.rv');
const rvObs = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); } });
}, { threshold: 0.1 });
rvEls.forEach(el => rvObs.observe(el));

/* ---- Skill Bars ---- */
const fills = document.querySelectorAll('.skl-fill');
const fObs = new IntersectionObserver(entries => {
    entries.forEach(e => {
        if (e.isIntersecting) {
            e.target.style.width = e.target.dataset.w + '%';
            fObs.unobserve(e.target);
        }
    });
}, { threshold: 0.5 });
fills.forEach(el => fObs.observe(el));
</script>
</body>
</html>

CSS