Metehan

Open In Editor Video Publish Your Code

18 April 2025

Metehan'ın bir kodu

HTML

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SYNTAX | Engineering Systems Studio</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
        
        :root {
            --studio-dark: #0a0a0a;
            --studio-light: #fdfdfd;
            --studio-gray: #717171;
            --studio-accent: #ffffff;
        }

body {
            font-family: 'Inter', sans-serif;
            background-color: var(--studio-light);
            color: var(--studio-dark);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

.mono { font-family: 'JetBrains Mono', monospace; }
        .serif { font-family: 'Playfair Display', serif; }

/* Animasyonlar */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.2, 0, 0.2, 1);
        }

.reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Hero Görsel Alanı */
        .hero-bg {
            background-color: var(--studio-dark);
            background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1518433278983-911a83ad33f1?auto=format&fit=crop&q=80&w=1920');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

/* Kart ve Görsel Efektleri */
        .system-card {
            overflow: hidden;
            background-color: #f7f7f7;
            transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
        }

.system-card:hover {
            transform: translateY(-8px);
        }

.system-image-container {
            position: relative;
            overflow: hidden;
            height: 550px;
        }

.system-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
            filter: grayscale(100%) contrast(110%);
        }

.system-card:hover .system-image {
            transform: scale(1.05);
            filter: grayscale(0%) contrast(100%);
        }

.system-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 70%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 2.5rem;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

.system-card:hover .system-overlay {
            opacity: 1;
        }

/* Navigasyon Alt Çizgisi */
        .nav-link {
            position: relative;
            font-size: 0.875rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -4px;
            left: 0;
            background-color: currentColor;
            transition: width 0.3s ease;
        }

.nav-link:hover::after {
            width: 100%;
        }

.text-outline {
            -webkit-text-stroke: 1px rgba(255,255,255,0.4);
            color: transparent;
        }

.vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }
    </style>
</head>
<body>

<nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-6 py-5 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-8 h-8 bg-black flex items-center justify-center">
                    <span class="text-white text-xs mono font-bold">SX</span>
                </div>
                <span class="text-xl font-bold tracking-tighter uppercase mono">Syntax</span>
            </div>
            
            <div class="hidden md:flex items-center space-x-12">
                <a href="#home" class="nav-link">Ana Sayfa</a>
                <a href="#systems" class="nav-link">Sistemler</a>
                <a href="#approach" class="nav-link">Yaklaşım</a>
                <a href="#journal" class="nav-link">Günlük</a>
                <a href="#contact" class="nav-link">İletişim</a>
                <a href="#contact" class="border border-black px-6 py-2 text-xs uppercase tracking-widest hover:bg-black hover:text-white transition duration-500">
                    Proje Başlat
                </a>
            </div>

<div id="mobile-menu" class="fixed inset-0 bg-white z-[60] flex flex-col items-center justify-center space-y-8 text-2xl font-light translate-x-full transition-transform duration-500">
        <button class="absolute top-8 right-8 text-3xl" onclick="toggleMenu()">×</button>
        <a href="#home" onclick="toggleMenu()">Ana Sayfa</a>
        <a href="#systems" onclick="toggleMenu()">Sistemler</a>
        <a href="#approach" onclick="toggleMenu()">Yaklaşım</a>
        <a href="#journal" onclick="toggleMenu()">Günlük</a>
        <a href="#contact" onclick="toggleMenu()">İletişim</a>
    </div>

<header id="home" class="hero-bg h-screen flex items-center relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 w-full relative z-10">
            <div class="max-w-4xl">
                <p class="mono text-white/50 text-sm mb-6 reveal uppercase tracking-[0.3em]">Disiplinli Mühendislik — v2.5</p>
                <h1 class="text-6xl md:text-8xl font-bold text-white leading-none reveal" style="transition-delay: 200ms;">
                    Sistemleri <br>
                    <span class="text-outline italic serif font-normal">Yeniden</span> Tanımla
                </h1>
                <div class="mt-12 flex flex-col md:flex-row items-start md:items-center space-y-6 md:space-y-0 md:space-x-12 reveal" style="transition-delay: 400ms;">
                    <div class="max-w-xs">
                        <p class="text-white/60 text-sm leading-relaxed border-l border-white/20 pl-6">
                            Karmaşık problemleri, ölçeklenebilir ve yüksek performanslı dijital mimarilere dönüştüren bir mühendislik stüdyosu.
                        </p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#systems" class="bg-white text-black px-10 py-4 text-xs uppercase tracking-widest font-bold hover:bg-gray-200 transition">Sistemleri İncele</a>
                        <a href="#approach" class="border border-white/30 text-white px-10 py-4 text-xs uppercase tracking-widest font-bold hover:bg-white hover:text-black transition">Yaklaşımımız</a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="absolute right-10 bottom-10 text-white/20 mono text-[10px] uppercase tracking-widest vertical-text hidden lg:block">
            System_Status: Operational // Ping: 12ms // Load: 0.04
        </div>
    </header>

<section id="systems" class="py-32 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-end mb-20 reveal">
                <div>
                    <span class="mono text-xs text-gray-400 uppercase tracking-widest mb-4 block">01 / Seçili Çalışmalar</span>
                    <h2 class="text-4xl md:text-6xl font-light serif">Mimari Çözümler</h2>
                </div>
                <div class="mt-6 md:mt-0 text-right">
                    <p class="text-gray-400 max-w-sm text-sm italic">"Performans, tasarımın en saf halidir."</p>
                </div>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                
                <div class="system-card reveal">
                    <div class="system-image-container">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=2070" alt="Data Center System" class="system-image">
                        <div class="system-overlay text-white">
                            <h3 class="text-3xl font-bold mb-2">Vortex Veri Katmanı</h3>
                            <p class="text-white/70 text-sm mb-6">Saniyede milyonlarca işlemi işleyen dağıtık veri mimarisi.</p>
                            <span class="mono text-xs uppercase tracking-widest">Detayları Gör —></span>
                        </div>
                    </div>
                    <div class="py-8 bg-white">
                        <p class="mono text-[10px] text-gray-400 mb-2 uppercase tracking-widest">Bulut Altyapısı</p>
                        <h4 class="text-2xl font-light">Global Senkronizasyon Ağı</h4>
                    </div>
                </div>

<div class="system-card reveal" style="transition-delay: 200ms;">
                    <div class="system-image-container">
                        <img src="https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?auto=format&fit=crop&q=80&w=2070" alt="Hardware Engineering" class="system-image">
                        <div class="system-overlay text-white">
                            <h3 class="text-3xl font-bold mb-2">Nexus Gömülü Sistem</h3>
                            <p class="text-white/70 text-sm mb-6">Düşük gecikmeli donanım ve yazılım entegrasyonu.</p>
                            <span class="mono text-xs uppercase tracking-widest">Detayları Gör —></span>
                        </div>
                    </div>
                    <div class="py-8 bg-white">
                        <p class="mono text-[10px] text-gray-400 mb-2 uppercase tracking-widest">Bilgisayar Mühendisliği</p>
                        <h4 class="text-2xl font-light">Endüstriyel Otomasyon Motoru</h4>
                    </div>
                </div>

<div class="system-card reveal">
                    <div class="system-image-container">
                        <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=2070" alt="Cyber Security Grid" class="system-image">
                        <div class="system-overlay text-white">
                            <h3 class="text-3xl font-bold mb-2">Sentinel Güvenlik Katmanı</h3>
                            <p class="text-white/70 text-sm mb-6">Tehdit algılama ve otonom sistem savunma protokolleri.</p>
                            <span class="mono text-xs uppercase tracking-widest">Detayları Gör —></span>
                        </div>
                    </div>
                    <div class="py-8 bg-white">
                        <p class="mono text-[10px] text-gray-400 mb-2 uppercase tracking-widest">Siber Güvenlik</p>
                        <h4 class="text-2xl font-light">Proaktif Savunma Mimarisi</h4>
                    </div>
                </div>

<div class="system-card reveal" style="transition-delay: 200ms;">
                    <div class="system-image-container">
                        <img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=2070" alt="AI Neural Network" class="system-image">
                        <div class="system-overlay text-white">
                            <h3 class="text-3xl font-bold mb-2">Aura Karar Mekanizması</h3>
                            <p class="text-white/70 text-sm mb-6">Büyük veri setleri üzerinde tahminleme yapan yapay zeka sistemi.</p>
                            <span class="mono text-xs uppercase tracking-widest">Detayları Gör —></span>
                        </div>
                    </div>
                    <div class="py-8 bg-white">
                        <p class="mono text-[10px] text-gray-400 mb-2 uppercase tracking-widest">Yapay Zeka</p>
                        <h4 class="text-2xl font-light">Nöral Veri İşleme Ünitesi</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="approach" class="py-32 bg-gray-50 overflow-hidden">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
                <div class="relative reveal">
                    <img src="https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&q=80&w=1000" alt="Engineering Studio" class="w-full h-[600px] object-cover grayscale">
                    <div class="absolute -bottom-10 -right-10 bg-black text-white p-12 hidden md:block">
                        <p class="mono text-xs uppercase tracking-widest mb-4">Metodolojimiz</p>
                        <h3 class="text-2xl serif italic">"Kod, sadece bir araçtır; <br> mühendislik ise bir sanat."</h3>
                    </div>
                </div>
                
                <div class="reveal" style="transition-delay: 200ms;">
                    <span class="mono text-xs text-gray-400 uppercase tracking-widest mb-4 block">02 / Yaklaşım</span>
                    <h2 class="text-4xl md:text-5xl font-light serif mb-8 leading-tight">Sistem Düşüncesi ve Disiplin.</h2>
                    <p class="text-gray-600 mb-8 leading-relaxed">
                        SYNTAX olarak, bir sistemi inşa etmeden önce onun sınırlarını, hata paylarını ve uzun vadeli sürdürülebilirliğini analiz ederiz. Yazılımı sadece çalışan bir ürün olarak değil, yaşayan bir organizma olarak kurguluyoruz.
                    </p>
                    <ul class="space-y-6">
                        <li class="flex items-center space-x-4">
                            <span class="w-8 h-px bg-black"></span>
                            <span class="text-sm uppercase tracking-widest font-bold">Donanım Odaklı Yazılım Geliştirme</span>
                        </li>
                        <li class="flex items-center space-x-4">
                            <span class="w-8 h-px bg-black"></span>
                            <span class="text-sm uppercase tracking-widest font-bold">Hata Toleranslı Dağıtık Yapılar</span>
                        </li>
                        <li class="flex items-center space-x-4">
                            <span class="w-8 h-px bg-black"></span>
                            <span class="text-sm uppercase tracking-widest font-bold">Düşük Seviyeli Performans Optimizasyonu</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

<section id="journal" class="py-32 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="text-center mb-20 reveal">
                <span class="mono text-xs text-gray-400 uppercase tracking-widest mb-4 block">03 / Mühendislik Notları</span>
                <h2 class="text-4xl md:text-5xl font-light serif italic">Journal</h2>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                
                <article class="reveal group">
                    <div class="aspect-square overflow-hidden mb-6 bg-gray-100">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=1000" alt="Clean Code" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
                    </div>
                    <span class="mono text-[10px] text-gray-400 uppercase">Mimarİ — 12.01.2024</span>
                    <h3 class="text-xl font-medium mt-3 mb-4 group-hover:underline underline-offset-4">Temiz Kodun Ötesinde: Sistem Sağlığı</h3>
                    <p class="text-sm text-gray-500 mb-6 leading-relaxed">Sadece okunabilir değil, aynı zamanda gözlemlenebilir ve test edilebilir sistemler inşa etmenin önemi.</p>
                    <a href="#" class="text-xs uppercase font-bold tracking-widest">Devamını Oku →</a>
                </article>

<article class="reveal group" style="transition-delay: 200ms;">
                    <div class="aspect-square overflow-hidden mb-6 bg-gray-100">
                        <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=1000" alt="Microchips" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
                    </div>
                    <span class="mono text-[10px] text-gray-400 uppercase">Donanım — 05.01.2024</span>
                    <h3 class="text-xl font-medium mt-3 mb-4 group-hover:underline underline-offset-4">Gömülü Sistemlerde Güç Optimizasyonu</h3>
                    <p class="text-sm text-gray-500 mb-6 leading-relaxed">Batarya beslemeli IoT cihazlarında mikro saniye seviyesinde uyku modları yönetimi.</p>
                    <a href="#" class="text-xs uppercase font-bold tracking-widest">Devamını Oku →</a>
                </article>

<article class="reveal group" style="transition-delay: 400ms;">
                    <div class="aspect-square overflow-hidden mb-6 bg-gray-100">
                        <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&q=80&w=1000" alt="Data Grid" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
                    </div>
                    <span class="mono text-[10px] text-gray-400 uppercase">Teorİ — 28.12.2023</span>
                    <h3 class="text-xl font-medium mt-3 mb-4 group-hover:underline underline-offset-4">Dağıtık Sistemlerde Konsensüs Algoritmaları</h3>
                    <p class="text-sm text-gray-500 mb-6 leading-relaxed">Paxos ve Raft protokollerinin modern veri tabanı mimarilerindeki evrimi.</p>
                    <a href="#" class="text-xs uppercase font-bold tracking-widest">Devamını Oku →</a>
                </article>
            </div>
        </div>
    </section>

<section id="contact" class="py-32 bg-black text-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-24">
                <div class="reveal">
                    <h2 class="text-5xl font-light serif mb-10 italic">Bize Katılın.</h2>
                    <p class="text-gray-400 mb-12 max-w-md">
                        Sistemleriniz için mühendislik danışmanlığına mı ihtiyacınız var? Projenizi teknik detaylarıyla bize aktarın.
                    </p>
                    <div class="space-y-4 mono text-xs uppercase tracking-widest">
                        <p><span class="text-gray-600">E-Posta:</span> engineering@syntax.studio</p>
                        <p><span class="text-gray-600">Ofİs:</span> Istanbul / Berlin / Remote</p>
                    </div>
                </div>

<div class="reveal" style="transition-delay: 200ms;">
                    <form class="space-y-12">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
                            <div class="border-b border-white/20 pb-4">
                                <label class="mono text-[10px] text-gray-500 uppercase block mb-2">Ad Soyad</label>
                                <input type="text" class="w-full bg-transparent border-none outline-none text-white p-0">
                            </div>
                            <div class="border-b border-white/20 pb-4">
                                <label class="mono text-[10px] text-gray-500 uppercase block mb-2">Kurum / Proje</label>
                                <input type="text" class="w-full bg-transparent border-none outline-none text-white p-0">
                            </div>
                        </div>
                        <div class="border-b border-white/20 pb-4">
                            <label class="mono text-[10px] text-gray-500 uppercase block mb-2">Teknik Özet</label>
                            <input rows="3" class="w-full bg-transparent border-none outline-none text-white p-0 resize-none"/>
                        </div>
                        <button type="submit" class="bg-white text-black px-12 py-5 text-xs font-bold uppercase tracking-[0.3em] hover:bg-gray-200 transition">
                            Gönder
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer class="bg-black text-white py-12 border-t border-white/10">
        <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-gray-600 text-[10px] mono uppercase tracking-widest">
            <p>© 2024 SYNTAX ENGINEERING SYSTEMS STUDIO. ALL RIGHTS RESERVED.</p>
            <div class="flex space-x-12 mt-6 md:mt-0">
                <a href="#" class="hover:text-white">Github</a>
                <a href="#" class="hover:text-white">LinkedIn</a>
                <a href="#" class="hover:text-white">Privacy_Protocol</a>
            </div>
        </div>
    </footer>

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// Mobil Menü Fonksiyonu
        function toggleMenu() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('translate-x-full');
            menu.classList.toggle('translate-x-0');
        }
    </script>
</body>
</html>

Metehan

Metehan'ın bir kodu

HTML

CSS

JS

Metehan'ın bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS