Portfólio de Desenvolvedor Web: HTML, CSS, JavaScript

Abrir no Editor Video Publique Seu Código

Recomendado

18 October 2025

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kod Vizyonu | Mühendislik ve Tasarım</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=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">

/* 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(26, 0, 5, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(255, 0, 0, 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;
        }

.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);
        }

/* 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-color: var(--accent-color);
            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;
        }

.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;
            }
            
            .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>KodVizyonu</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>
        </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>
        </section>

<section id="services">
            <div class="container">
                <h2 class="section-title">Hizmetler</h2>
                <div class="services-grid">
                    <div class="service-card reveal">
                        <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">
                        <div class="service-icon">
                            <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">
                        <div class="service-icon">
                            <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>
        </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>
        </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>
        </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@kodvizyonu.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>
                    <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>
            </div>
            <p class="copyright">© 2023 KodVizyonu. Tüm Hakları Saklıdır.</p>
        </div>
    </footer>

// Preloader
            const preloader = document.getElementById('preloader');
            window.addEventListener('load', () => {
                preloader.style.opacity = '0';
                preloader.style.visibility = 'hidden';
            });

// 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>

Portfólio de Desenvolvedor Web: HTML, CSS, JavaScript

Recomendado

Exemplo básico de botão HTML

Diagrama de Venn animado

Efeito de texto com falha CSS

HTML

CSS

JS

Recomendado

Exemplo básico de botão HTML

Diagrama de Venn animado

Efeito de texto com falha CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS