Sitio web de portafolio turco: HTML, CSS, JS, Tailwind

Abrir en el editor Video Publica tu código

Recomendado

28 September 2025

Ejemplo de animación de carga CSS

20 October 2024

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kod Akademi | Mühendislik ve Tasarım</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <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=Poppins:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        /* Değişkenler - AÇIK TEMA */
        :root {
            --bg-color: #f8fafc;
            --primary-color: #e0f2fe;
            --secondary-color: #f0f9ff;
            --card-color: #ffffff;
            --border-color: #bae6fd;
            --text-color: #1e293b;
            --text-secondary: #64748b;
            --accent-color: #38bdf8;
            --accent-hover: #0ea5e9;
            --yellow-accent: #facc15;
            --green-accent: #86efac;
            --purple-accent: #c4b5fd;
            --card-shadow: 0 10px 15px -3px rgba(56, 189, 248, 0.2);
            --font-primary: 'Poppins', sans-serif;
            --font-code: 'Source Code Pro', monospace;
        }

/* Temel stiller */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-primary);
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

section {
            padding: 100px 0;
        }

h1, h2, h3, h4 {
            font-weight: 600;
            color: var(--text-color);
        }

.section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--accent-color);
            border-radius: 2px;
            margin: 1rem auto;
        }

/* Preloader */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid var(--border-color);
            border-top-color: var(--accent-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

/* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            padding: 20px 0;
            transition: all 0.4s ease;
        }

.header.scrolled {
            background-color: rgba(248, 250, 252, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(56, 189, 248, 0.1);
        }

.navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-color);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i { 
            color: var(--accent-color);
            margin-right: 10px;
        }

.nav-menu {
            display: flex;
            list-style: none;
            gap: 40px;
        }

.nav-link {
            text-decoration: none;
            color: var(--text-secondary);
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
            padding-bottom: 5px;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent-color);
            transition: width 0.3s;
        }

.nav-link:hover, .nav-link.active {
            color: var(--text-color);
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            font-size: 1.5rem;
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
        }

/* Hero Section */
        #home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--bg-color) 100%);
        }

.hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
        }

.hero-text {
            flex: 1;
        }

.hero-text h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }
        
        .hero-text h1 .highlight {
            color: var(--accent-color);
        }

.hero-text .subtitle {
            font-size: 1.25rem;
            font-family: var(--font-code);
            margin-bottom: 2rem;
            color: var(--text-secondary);
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--accent-color);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 5px;
            transition: all 0.3s;
            border: 2px solid var(--accent-color);
        }

.btn:hover {
            background-color: transparent;
            color: var(--accent-color);
            transform: translateY(-3px);
        }

.hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .hero-image img {
            max-width: 100%;
            border-radius: 12px;
            border: 3px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }

/* Video Section */
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 2rem;
            box-shadow: var(--card-shadow);
        }

.video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

/* About Section */
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

.about-img {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }
        
        .about-img img {
            width: 100%;
            height: auto;
            transition: transform 0.5s;
        }
        
        .about-img:hover img {
            transform: scale(1.05);
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--accent-color);
        }

/* Skills Section */
        .skills-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }

.skills-item {
            margin-bottom: 1.5rem;
        }

.skills-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

.skills-bar {
            height: 8px;
            background-color: var(--border-color);
            border-radius: 4px;
            overflow: hidden;
        }

.skills-progress {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-color) 0%, var(--purple-accent) 100%);
            border-radius: 4px;
            position: relative;
            width: 0;
            transition: width 1s ease-in-out;
        }

/* Services Section */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.service-card {
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-shadow);
        }

.service-icon {
            font-size: 3rem;
            color: var(--accent-color);
            margin-bottom: 1.5rem;
        }

/* Portfolio Section */
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.portfolio-item {
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

.portfolio-item:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-shadow);
        }

.portfolio-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.4s;
        }
        
        .portfolio-item:hover .portfolio-img {
            transform: scale(1.05);
        }

.portfolio-content {
            padding: 1.5rem;
        }

.portfolio-content h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

/* Blog Section */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.blog-card {
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-shadow);
        }

.blog-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.4s;
        }
        
        .blog-card:hover .blog-img {
            transform: scale(1.05);
        }

.blog-content {
            padding: 1.5rem;
        }

.blog-content .category {
            font-family: var(--font-code);
            font-size: 0.8rem;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
        }

/* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

.contact-icon {
            font-size: 1.5rem;
            color: var(--accent-color);
        }

.contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

.form-input {
            padding: 12px 15px;
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            color: var(--text-color);
            font-family: var(--font-primary);
        }

.form-input:focus {
            outline: none;
            border-color: var(--accent-color);
        }

textarea.form-input {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        .footer {
            background-color: var(--primary-color);
            border-top: 1px solid var(--border-color);
            padding: 50px 0 30px;
            text-align: center;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: var(--card-color);
            color: var(--text-color);
            border-radius: 50%;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

.social-link:hover {
            background-color: var(--accent-color);
            color: white;
            transform: translateY(-3px);
        }

.copyright {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

/* Animasyonlar */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s, transform 0.8s;
        }

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

/* Responsive Tasarım */
        @media (max-width: 992px) {
            .services-grid,
            .portfolio-grid,
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            
            .about-content {
                grid-template-columns: 1fr;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
                z-index: 1001;
            }
            
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                background-color: var(--primary-color);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.5s ease-in-out;
                gap: 2rem;
                box-shadow: -5px 0 15px rgba(0,0,0,0.1);
            }
            
            .nav-menu.active {
                right: 0;
            }
            
            .services-grid,
            .portfolio-grid,
            .blog-grid,
            .skills-container {
                grid-template-columns: 1fr;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    
    <div id="preloader">
        <div class="loader"></div>
    </div>

<header class="header" id="header">
        <div class="container navbar">
            <a href="#" class="logo"><i class="fas fa-code"></i>KodAkademi</a>
            <nav>
                <ul class="nav-menu" id="nav-menu">
                    <li class="nav-item"><a href="#home" class="nav-link active">Ana Sayfa</a></li>
                    <li class="nav-item"><a href="#about" class="nav-link">Hakkımda</a></li>
                    <li class="nav-item"><a href="#skills" class="nav-link">Yetenekler</a></li>
                    <li class="nav-item"><a href="#services" class="nav-link">Hizmetler</a></li>
                    <li class="nav-item"><a href="#portfolio" class="nav-link">Projeler</a></li>
                    <li class="nav-item"><a href="#blog" class="nav-link">Blog</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">İletişim</a></li>
                </ul>
            </nav>
            <button class="menu-toggle" id="menu-toggle"><i class="fas fa-bars"></i></button>
        </div>
    </header>

<main>
        
        <section id="home">
            <div class="container hero-content">
                <div class="hero-text reveal">
                    <h1>Merhaba, ben <span class="highlight">Ahmet</span></h1>
                    <p class="subtitle">// Full-stack developer & UI/UX tasarımcı</p>
                    <p>Teknoloji ve tasarımın kesişiminde, anlamlı dijital deneyimler oluşturuyorum. Modern web teknolojileri ve kullanıcı odaklı tasarım ilkeleriyle çözümler üretiyorum.</p>
                    <div style="margin-top: 2rem;">
                        <a href="#portfolio" class="btn">Projelerimi Gör</a>
                        <a href="#contact" class="btn" style="margin-left: 1rem; background: transparent; color: var(--accent-color);">İletişime Geç</a>
                    </div>
                </div>
                <div class="hero-image reveal">
                    <img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Profil">
                </div>
            </div>
        </section>

<section id="about">
            <div class="container">
                <h2 class="section-title">Hakkımda</h2>
                <div class="about-content">
                    <div class="about-img reveal">
                        <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hakkımda">
                    </div>
                    <div class="about-text reveal">
                        <h3>Yazılım ve tasarım tutkusuyla dolu bir geliştirici</h3>
                        <p>5 yılı aşkın süredir web teknolojileri ve kullanıcı arayüzü tasarımı üzerine çalışıyorum. Amacım, sadece işlevsel değil aynı zamanda kullanıcıların seveceği deneyimler yaratmak.</p>
                        <p style="margin-top: 1rem;">Front-end ve back-end teknolojilerinde uzmanlaşarak, projelerin her aşamasında etkili çözümler sunabiliyorum. Sürekli öğrenmeye ve kendimi geliştirmeye inanıyorum.</p>
                        <div style="margin-top: 2rem;">
                            <a href="#contact" class="btn">İletişime Geç</a>
                            <a href="#" class="btn" style="margin-left: 1rem; background: transparent; color: var(--accent-color);">CV'mi İndir</a>
                        </div>
                    </div>
                </div>
                
                
                <div class="reveal" style="margin-top: 4rem;">
                    <h3 class="text-2xl font-semibold text-center mb-6" style="color: var(--accent-color);">Yazılım Dünyasına Bakışım</h3>
                    <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/1Rs2ND1ryYc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="skills" style="background-color: var(--primary-color);">
            <div class="container">
                <h2 class="section-title">Yetenekler</h2>
                <div class="skills-container">
                    <div class="reveal">
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>HTML/CSS</span>
                                <span>95%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="95%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>JavaScript</span>
                                <span>90%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="90%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>React</span>
                                <span>85%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="85%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="reveal">
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>UI/UX Tasarım</span>
                                <span>88%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="88%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>Node.js</span>
                                <span>80%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="80%"></div>
                            </div>
                        </div>
                        <div class="skills-item">
                            <div class="skills-header">
                                <span>Python</span>
                                <span>75%</span>
                            </div>
                            <div class="skills-bar">
                                <div class="skills-progress" data-width="75%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                
                <div class="reveal" style="margin-top: 4rem;">
                    <h3 class="text-2xl font-semibold text-center mb-6" style="color: var(--accent-color);">Yeteneklerimi Nasıl Geliştiriyorum?</h3>
                    <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/PkZNo7MFNFg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="services">
            <div class="container">
                <h2 class="section-title">Hizmetler</h2>
                <div class="services-grid">
                    <div class="service-card reveal" style="border-top: 4px solid var(--accent-color);">
                        <div class="service-icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h3>Web Geliştirme</h3>
                        <p>Modern, responsive ve kullanıcı dostu web siteleri ve web uygulamaları geliştiriyorum.</p>
                    </div>
                    <div class="service-card reveal" style="border-top: 4px solid var(--yellow-accent);">
                        <div class="service-icon" style="color: var(--yellow-accent);">
                            <i class="fas fa-palette"></i>
                        </div>
                        <h3>UI/UX Tasarım</h3>
                        <p>Kullanıcı ihtiyaçlarına odaklanan, estetik ve işlevsel arayüz tasarımları oluşturuyorum.</p>
                    </div>
                    <div class="service-card reveal" style="border-top: 4px solid var(--purple-accent);">
                        <div class="service-icon" style="color: var(--purple-accent);">
                            <i class="fas fa-mobile-alt"></i>
                        </div>
                        <h3>Mobil Uyumluluk</h3>
                        <p>Tüm cihazlarda sorunsuz çalışan, mobil cihazlara özel optimize edilmiş arayüzler.</p>
                    </div>
                </div>
                
                
                <div class="reveal" style="margin-top: 4rem;">
                    <h3 class="text-2xl font-semibold text-center mb-6" style="color: var(--accent-color);">Hizmetlerimiz Hakkında</h3>
                    <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/1nVUfZg2dSA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="portfolio" style="background-color: var(--primary-color);">
            <div class="container">
                <h2 class="section-title">Projeler</h2>
                <div class="portfolio-grid">
                    <div class="portfolio-item reveal">
                        <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Proje 1" class="portfolio-img">
                        <div class="portfolio-content">
                            <h3>E-ticaret Platformu</h3>
                            <p>React ve Node.js kullanılarak geliştirilmiş modern bir e-ticet sitesi.</p>
                        </div>
                    </div>
                    <div class="portfolio-item reveal">
                        <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Proje 2" class="portfolio-img">
                        <div class="portfolio-content">
                            <h3>Blog Sitesi</h3>
                            <p>Next.js ve Gatsby ile oluşturulmuş yüksek performanslı bir blog platformu.</p>
                        </div>
                    </div>
                    <div class="portfolio-item reveal">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Proje 3" class="portfolio-img">
                        <div class="portfolio-content">
                            <h3>Yönetim Paneli</h3>
                            <p>Vue.js ve Firebase ile geliştirilmiş kapsamlı bir yönetim paneli.</p>
                        </div>
                    </div>
                </div>
                
                
                <div class="reveal" style="margin-top: 4rem;">
                    <h3 class="text-2xl font-semibold text-center mb-6" style="color: var(--accent-color);">Projelerimizden Örnekler</h3>
                    <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="blog">
            <div class="container">
                <h2 class="section-title">Son Yazılar</h2>
                <div class="blog-grid">
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 1" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Web Geliştirme</p>
                            <h3>React'ta State Yönetimi</h3>
                            <p>Modern React uygulamalarında state yönetimi için en iyi yöntemler ve araçlar.</p>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 2" class="blog-img">
                        <div class="blog-content">
                            <p class="category">UI/UX Tasarım</p>
                            <h3>Kullanıcı Deneyimi İlkeleri</h3>
                            <p>Kullanıcı odaklı tasarım için temel ilkeler ve en iyi uygulama örnekleri.</p>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1547394765-185e1e68f34e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 3" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Performans</p>
                            <h3>Web Sitesi Hız Optimizasyonu</h3>
                            <p>Web sitelerinin yüklenme sürelerini optimize etmek için kanıtlanmış teknikler.</p>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </article>
                </div>
                
                
                <div class="reveal" style="margin-top: 4rem;">
                    <h3 class="text-2xl font-semibold text-center mb-6" style="color: var(--accent-color);">Blog Yazılarımızdan</h3>
                    <div class="video-container">
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/8aGhZQkoFbQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" style="background-color: var(--primary-color);">
            <div class="container">
                <h2 class="section-title">İletişim</h2>
                <div class="contact-container">
                    <div class="contact-info reveal">
                        <h3 style="margin-bottom: 1.5rem;">İletişime Geçin</h3>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Konum</h4>
                                <p>İstanbul, Türkiye</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>info@kodakademi.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Telefon</h4>
                                <p>+90 555 123 45 67</p>
                            </div>
                        </div>
                        
                        
                        <div class="reveal" style="margin-top: 2rem;">
                            <h3 class="text-xl font-semibold mb-4" style="color: var(--accent-color);">Bizi Tanıyın</h3>
                            <div class="video-container">
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/qz0aGYrrlhU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                    <form class="contact-form reveal">
                        <div class="form-group">
                            <label for="name">İsim</label>
                            <input type="text" id="name" class="form-input" placeholder="İsminiz">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-input" placeholder="Email adresiniz">
                        </div>
                        <div class="form-group">
                            <label for="message">Mesaj</label>
                            <input id="message" class="form-input" placeholder="Mesajınız..."/>
                        </div>
                        <button type="submit" class="btn">Gönder</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="social-links">
                <a href="#" class="social-link" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" class="social-link" aria-label="GitHub"><i class="fab fa-github"></i></a>
                <a href="#" class="social-link" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="social-link" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                <a href="#" class="social-link" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
            </div>
            <p class="copyright">© 2025 Kod Akademi. Tüm Hakları Saklıdır.</p>
        </div>
    </footer>

// Header Scroll Efekti
            const header = document.getElementById('header');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.classList.add('scrolled');
                } else {
                    header.classList.remove('scrolled');
                }
            });

// Mobil Menü
            const menuToggle = document.getElementById('menu-toggle');
            const navMenu = document.getElementById('nav-menu');
            const navLinks = document.querySelectorAll('.nav-link');

menuToggle.addEventListener('click', () => {
                navMenu.classList.toggle('active');
            });

navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (navMenu.classList.contains('active')) {
                        navMenu.classList.remove('active');
                    }
                });
            });

// Scroll Animasyonları
            const revealElements = document.querySelectorAll('.reveal');
            const revealObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        
                        // Skill barlarını doldur
                        if (entry.target.querySelector('.skills-progress')) {
                            const progressBars = entry.target.querySelectorAll('.skills-progress');
                            progressBars.forEach(bar => {
                                const width = bar.getAttribute('data-width');
                                bar.style.width = width;
                            });
                        }
                    }
                });
            }, {
                threshold: 0.1
            });

revealElements.forEach(el => {
                revealObserver.observe(el);
            });

// Aktif Navigasyon Linki Vurgulama
            const sections = document.querySelectorAll('section[id]');
            const navHighlighter = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const id = entry.target.getAttribute('id');
                        document.querySelector('.nav-link.active').classList.remove('active');
                        document.querySelector(`.nav-link[href="#${id}"]`).classList.add('active');
                    }
                });
            }, {
                rootMargin: '-50% 0px -50% 0px'
            });

sections.forEach(section => {
                navHighlighter.observe(section);
            });

});
    </script>
</body>
</html>

Sitio web de portafolio turco: HTML, CSS, JS, Tailwind

Recomendado

Ejemplo de animación de carga CSS

Botón de degradado CSS

Barra de navegación simple

HTML

CSS

JS

Recomendado

Ejemplo de animación de carga CSS

Botón de degradado CSS

Barra de navegación simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS