Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Aether Systems | Yazılım & Bilgisayar Mühendisliği</title>

<style>

/* -------------------------------------------------------------------------- */

/* DEĞİŞKENLER (VARIABLES)                                  */

/* -------------------------------------------------------------------------- */

:root {

--bg-body: #0f172a;       /* Koyu Arduvaz */

--bg-card: #1e293b;       /* Daha Açık Arduvaz */

--bg-card-hover: #334155;

--text-main: #f1f5f9;     /* Kırık Beyaz */

--text-muted: #94a3b8;    /* Soluk Mavi-Gri */

--accent-primary: #3b82f6; /* Elektrik Mavisi */

--accent-glow: rgba(59, 130, 246, 0.5);

--border-light: rgba(148, 163, 184, 0.15);

--font-ui: 'Inter', system-ui, -apple-system, sans-serif;

--font-code: 'JetBrains Mono', monospace;

--transition-speed: 0.3s;

}

/* -------------------------------------------------------------------------- */

/* TEMEL AYARLAR (RESET)                                    */

/* -------------------------------------------------------------------------- */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

}

body {

font-family: var(--font-ui);

background-color: var(--bg-body);

color: var(--text-main);

line-height: 1.6;

overflow-x: hidden;

-webkit-font-smoothing: antialiased;

}

a {

text-decoration: none;

color: inherit;

transition: color var(--transition-speed);

}

ul {

list-style: none;

}

button, input, textarea {

font-family: inherit;

border: none;

outline: none;

}

img {

max-width: 100%;

height: auto;

display: block;

}

/* -------------------------------------------------------------------------- */

/* TİPOGRAFİ                                 */

/* -------------------------------------------------------------------------- */

h1, h2, h3, h4 {

font-weight: 700;

line-height: 1.2;

letter-spacing: -0.02em;

}

h1 { font-size: 3rem; }

h2 { font-size: 2.25rem; margin-bottom: 1rem; }

h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }

.mono-text {

font-family: var(--font-code);

font-size: 0.9rem;

color: var(--accent-primary);

letter-spacing: -0.05em;

}

.section-header {

margin-bottom: 4rem;

max-width: 800px;

}

.section-header h2 {

position: relative;

display: inline-block;

}

.section-header h2::after {

content: '';

position: absolute;

left: 0;

bottom: -10px;

width: 60px;

height: 4px;

background-color: var(--accent-primary);

}

.section-header p {

color: var(--text-muted);

margin-top: 1rem;

font-size: 1.1rem;

max-width: 600px;

}

/* -------------------------------------------------------------------------- */

/* DÜZEN (LAYOUT)                                    */

/* -------------------------------------------------------------------------- */

.container {

width: 100%;

max-width: 1200px;

margin: 0 auto;

padding: 0 2rem;

}

section {

padding: 6rem 0;

position: relative;

}

/* -------------------------------------------------------------------------- */

/* NAVİGASYON                                  */

/* -------------------------------------------------------------------------- */

nav {

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 1.5rem 0;

z-index: 1000;

background: rgba(15, 23, 42, 0.9);

backdrop-filter: blur(10px);

border-bottom: 1px solid var(--border-light);

transition: padding 0.3s ease;

}

nav.scrolled {

padding: 1rem 0;

}

.nav-inner {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-family: var(--font-code);

font-weight: 700;

font-size: 1.25rem;

color: var(--text-main);

display: flex;

align-items: center;

gap: 0.5rem;

}

.logo i {

color: var(--accent-primary);

}

.nav-links {

display: flex;

gap: 2rem;

}

.nav-links a {

font-size: 0.95rem;

font-weight: 500;

color: var(--text-muted);

position: relative;

}

.nav-links a:hover {

color: var(--accent-primary);

}

.nav-links a::after {

content: '';

position: absolute;

width: 0;

height: 2px;

bottom: -4px;

left: 0;

background-color: var(--accent-primary);

transition: width 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

.mobile-menu-btn {

display: none;

font-size: 1.5rem;

color: var(--text-main);

cursor: pointer;

}

/* -------------------------------------------------------------------------- */

/* HERO (ANA GİRİŞ)                                     */

/* -------------------------------------------------------------------------- */

.hero {

min-height: 100vh;

display: flex;

align-items: center;

position: relative;

padding-top: 80px; /* Navbar payı */

overflow: hidden;

}

#hero-canvas {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

opacity: 0.6;

}

.hero-grid {

display: grid;

grid-template-columns: 1.2fr 1fr;

gap: 4rem;

align-items: center;

position: relative;

z-index: 1;

}

.hero-content {

max-width: 800px;

}

.hero-tag {

display: inline-block;

padding: 0.5rem 1rem;

background: rgba(59, 130, 246, 0.1);

border: 1px solid rgba(59, 130, 246, 0.2);

color: var(--accent-primary);

font-family: var(--font-code);

font-size: 0.85rem;

border-radius: 4px;

margin-bottom: 1.5rem;

}

.hero h1 {

margin-bottom: 1.5rem;

line-height: 1.1;

}

.hero h1 span {

color: var(--accent-primary);

position: relative;

}

/* İmleç efekti */

.cursor-blink {

display: inline-block;

width: 3px;

height: 1em;

background-color: var(--accent-primary);

animation: blink 1s step-end infinite;

vertical-align: middle;

margin-left: 5px;

}

.hero p {

font-size: 1.15rem;

color: var(--text-muted);

margin-bottom: 2.5rem;

max-width: 90%;

line-height: 1.7;

}

/* Hero Görsel Alanı */

.hero-visual {

position: relative;

border-radius: 12px;

overflow: hidden;

box-shadow: 0 20px 50px rgba(0,0,0,0.5);

border: 1px solid var(--border-light);

aspect-ratio: 4/3;

}

.hero-visual img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.5s ease;

}

.hero-visual:hover img {

transform: scale(1.03);

}

/* Görsel Üzeri Kod Kartı (Dekoratif) */

.code-overlay {

position: absolute;

bottom: 20px;

right: -20px;

background: rgba(15, 23, 42, 0.95);

padding: 1rem;

border-radius: 8px;

border: 1px solid var(--border-light);

font-family: var(--font-code);

font-size: 0.75rem;

color: var(--text-muted);

box-shadow: 0 10px 30px rgba(0,0,0,0.3);

width: 200px;

backdrop-filter: blur(5px);

z-index: 2;

}

.code-line { margin-bottom: 4px; }

.c-purple { color: #c084fc; }

.c-blue { color: #60a5fa; }

.c-green { color: #4ade80; }

.cta-group {

display: flex;

gap: 1rem;

}

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

padding: 0.85rem 1.75rem;

font-weight: 600;

border-radius: 6px;

cursor: pointer;

transition: all var(--transition-speed);

font-size: 1rem;

}

.btn-primary {

background-color: var(--accent-primary);

color: #fff;

box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);

}

.btn-primary:hover {

background-color: #2563eb;

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);

}

.btn-secondary {

background-color: transparent;

border: 1px solid var(--border-light);

color: var(--text-main);

}

.btn-secondary:hover {

border-color: var(--text-muted);

background-color: rgba(255, 255, 255, 0.05);

}

/* -------------------------------------------------------------------------- */

/* HAKKIMIZDA                                     */

/* -------------------------------------------------------------------------- */

.about-section-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 4rem;

align-items: center;

}

.about-image {

position: relative;

border-radius: 8px;

overflow: hidden;

aspect-ratio: 1/1;

}

.about-image img {

width: 100%;

height: 100%;

object-fit: cover;

filter: grayscale(20%);

transition: filter 0.3s;

}

.about-image:hover img {

filter: grayscale(0%);

}

.about-text p {

color: var(--text-muted);

margin-bottom: 1.5rem;

font-size: 1.05rem;

}

.about-stats {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 2rem;

margin-top: 2rem;

}

.stat-card {

background: var(--bg-card);

padding: 1.5rem;

border-radius: 8px;

border: 1px solid var(--border-light);

text-align: center;

}

.stat-number {

font-family: var(--font-code);

font-size: 2.5rem;

font-weight: 700;

color: var(--accent-primary);

margin-bottom: 0.5rem;

display: block;

}

.stat-label {

font-size: 0.9rem;

color: var(--text-muted);

}

/* -------------------------------------------------------------------------- */

/* HİZMETLER                                   */

/* -------------------------------------------------------------------------- */

.services-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 2rem;

}

.service-card {

background: var(--bg-card);

border: 1px solid var(--border-light);

padding: 2.5rem;

border-radius: 8px;

transition: all var(--transition-speed);

position: relative;

overflow: hidden;

display: flex;

flex-direction: column;

}

.service-card:hover {

transform: translateY(-5px);

border-color: var(--accent-primary);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}

.service-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 4px;

background: var(--accent-primary);

transform: scaleX(0);

transform-origin: left;

transition: transform 0.3s ease;

}

.service-card:hover::before {

transform: scaleX(1);

}

.service-icon {

font-size: 2.5rem;

color: var(--accent-primary);

margin-bottom: 1.5rem;

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;

background: rgba(59, 130, 246, 0.1);

border-radius: 12px;

}

.service-card h3 {

margin-bottom: 1rem;

font-size: 1.35rem;

}

.service-card p {

color: var(--text-muted);

font-size: 0.95rem;

flex-grow: 1;

}

.service-tech {

margin-top: 1.5rem;

display: flex;

flex-wrap: wrap;

gap: 0.5rem;

}

.tech-tag {

font-family: var(--font-code);

font-size: 0.75rem;

padding: 0.25rem 0.5rem;

background: rgba(255, 255, 255, 0.05);

border-radius: 4px;

color: var(--text-muted);

border: 1px solid rgba(255,255,255,0.05);

}

/* -------------------------------------------------------------------------- */

/* PROJELER / GALERİ                                   */

/* -------------------------------------------------------------------------- */

.projects-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

gap: 2rem;

}

.project-card {

position: relative;

background: var(--bg-card);

border-radius: 8px;

overflow: hidden;

aspect-ratio: 16/10;

border: 1px solid var(--border-light);

cursor: pointer;

}

.project-img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.project-card:hover .project-img {

transform: scale(1.1);

}

.project-overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 20%, rgba(15, 23, 42, 0.4));

display: flex;

flex-direction: column;

justify-content: flex-end;

padding: 2rem;

opacity: 1;

transition: opacity var(--transition-speed);

}

.project-content {

transform: translateY(10px);

transition: transform 0.3s;

}

.project-card:hover .project-content {

transform: translateY(0);

}

.project-tag {

font-family: var(--font-code);

font-size: 0.75rem;

color: var(--accent-primary);

margin-bottom: 0.5rem;

display: block;

}

.project-overlay h3 {

color: var(--text-main);

margin-bottom: 0.5rem;

}

.project-overlay p {

color: var(--text-muted);

font-size: 0.9rem;

margin-top: 0;

max-width: 90%;

}

/* -------------------------------------------------------------------------- */

/* BLOG / İÇGÖRÜLER                                    */

/* -------------------------------------------------------------------------- */

.blog-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

}

.blog-card {

background: var(--bg-card);

border: 1px solid var(--border-light);

padding: 2rem;

border-radius: 8px;

transition: transform var(--transition-speed);

display: flex;

flex-direction: column;

justify-content: space-between;

height: 100%;

}

.blog-card:hover {

transform: translateY(-5px);

background: var(--bg-card-hover);

}

.blog-meta {

font-family: var(--font-code);

font-size: 0.8rem;

color: var(--accent-primary);

margin-bottom: 1rem;

display: flex;

justify-content: space-between;

}

.blog-card h4 {

font-size: 1.25rem;

margin-bottom: 1rem;

color: var(--text-main);

}

.blog-card p {

color: var(--text-muted);

font-size: 0.95rem;

margin-bottom: 1.5rem;

flex-grow: 1;

}

.read-more {

font-size: 0.9rem;

font-weight: 600;

color: var(--text-main);

display: inline-flex;

align-items: center;

gap: 0.5rem;

}

.read-more:hover {

color: var(--accent-primary);

}

/* -------------------------------------------------------------------------- */

/* İLETİŞİM                                   */

/* -------------------------------------------------------------------------- */

.contact-wrapper {

display: grid;

grid-template-columns: 1fr 1.5fr;

gap: 4rem;

background: var(--bg-card);

padding: 4rem;

border-radius: 12px;

border: 1px solid var(--border-light);

box-shadow: 0 10px 40px rgba(0,0,0,0.2);

}

.contact-info h3 {

margin-bottom: 1.5rem;

}

.info-item {

display: flex;

align-items: flex-start;

gap: 1rem;

margin-bottom: 2rem;

}

.info-item i {

color: var(--accent-primary);

font-size: 1.25rem;

margin-top: 0.25rem;

background: rgba(59, 130, 246, 0.1);

padding: 10px;

border-radius: 50%;

}

.info-content h4 {

font-size: 1.1rem;

margin-bottom: 0.25rem;

}

.info-content p {

color: var(--text-muted);

}

.form-group {

margin-bottom: 1.5rem;

}

.form-group label {

display: block;

font-size: 0.9rem;

margin-bottom: 0.5rem;

color: var(--text-main);

font-weight: 500;

}

.form-control {

width: 100%;

background: var(--bg-body);

border: 1px solid var(--border-light);

padding: 1rem;

border-radius: 6px;

color: var(--text-main);

transition: border-color var(--transition-speed);

}

.form-control:focus {

border-color: var(--accent-primary);

}

.form-feedback {

font-size: 0.85rem;

margin-top: 0.5rem;

display: none;

}

.form-feedback.error {

color: #ef4444;

display: block;

}

.form-feedback.success {

color: #22c55e;

display: block;

}

/* -------------------------------------------------------------------------- */

/* FOOTER                                    */

/* -------------------------------------------------------------------------- */

footer {

background: #020617;

padding: 4rem 0 2rem;

border-top: 1px solid var(--border-light);

margin-top: 4rem;

}

.footer-content {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 3rem;

flex-wrap: wrap;

gap: 2rem;

}

.footer-quote {

max-width: 400px;

font-style: italic;

color: var(--text-muted);

border-left: 3px solid var(--accent-primary);

padding-left: 1rem;

}

.footer-bottom {

display: flex;

justify-content: space-between;

align-items: center;

padding-top: 2rem;

border-top: 1px solid rgba(255, 255, 255, 0.05);

color: var(--text-muted);

font-size: 0.9rem;

}

/* -------------------------------------------------------------------------- */

/* RESPONSIVE                                  */

/* -------------------------------------------------------------------------- */

@media (max-width: 968px) {

h1 { font-size: 2.5rem; }

.hero-grid { grid-template-columns: 1fr; gap: 3rem; text-align: center; }

.hero-content { margin: 0 auto; }

.hero h1 { font-size: 2.5rem; }

.cta-group { justify-content: center; }

.code-overlay { display: none; } /* Mobilde karmaşayı önlemek için */

.about-section-grid { grid-template-columns: 1fr; gap: 3rem; }

.contact-wrapper { grid-template-columns: 1fr; padding: 2rem; }

}

@media (max-width: 768px) {

.nav-links { display: none; }

.mobile-menu-btn { display: block; }

.services-grid { grid-template-columns: 1fr; }

.footer-content { flex-direction: column; align-items: flex-start; }

.footer-bottom { flex-direction: column; gap: 1rem; align-items: flex-start; }

.hero-visual {

aspect-ratio: 16/9;

}

/* -------------------------------------------------------------------------- */

/* ANİMASYONLAR                                  */

/* -------------------------------------------------------------------------- */

.fade-in {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

.fade-in.visible {

opacity: 1;

transform: translateY(0);

}

@keyframes blink {

50% { opacity: 0; }

}

</style>

</head>

<body>

AETHER<span class="mono-text">_SYSTEMS</span>

</a>

<a href="#home">Ana Sayfa</a>

<a href="#about">Hakkımızda</a>

<a href="#services">Hizmetler</a>

<a href="#projects">Projeler</a>

<a href="#contact" style="color: var(--accent-primary); font-weight: 600;">İletişim</a>

</div>

</div>

</nav>

<span class="hero-tag">EST. 2024 // SİSTEM MİMARİSİ</span>

<h1>Yazılımı Mühendislik ile<br><span>İnşa Ediyoruz</span><div class="cursor-blink"></div></h1>

<p>Karmaşık problemleri disiplinli bilgisayar mühendisliği ile çözüyoruz. Ölçeklenebilir sistemler, yüksek performanslı algoritmalar ve güvenilir altyapılar tasarlıyoruz. Kof vaatler değil, çalışan kodlar sunuyoruz.</p>

<a href="#services" class="btn btn-primary">Hizmetleri İncele</a>

<a href="#contact" class="btn btn-secondary">İletişime Geç</a>

</div>

<div class="code-line"><span class="c-purple">const</span> <span class="c-blue">System</span> = {</div>

<div class="code-line">  status: <span class="c-green">'Online'</span>,</div>

<div class="code-line">  uptime: <span class="c-green">'99.9%'</span>,</div>

<div class="code-line">  security: <span class="c-purple">true</span></div>

</div>

</section>

<span class="mono-text">01. PROFİL</span>

<h2>Mühendislik Yaklaşımı</h2>

</div>

</div>

<h3>Disiplin ve Süreklilik</h3>

<p>Aether Systems olarak sadece kod yazmıyoruz, çözüm mühendisliği yapıyoruz. Felsefemiz bilgisayar bilimlerinin temel prensiplerine dayanır: verimlilik, modülerlik ve güvenilirlik.</p>

<p>Karmaşık sistemlerin sadece kod satırlarına değil, berrak bir düşünce yapısına ihtiyaç duyduğuna inanıyoruz. İster düşük seviyeli sürücü optimizasyonu, ister dağıtık bulut mimarileri olsun; yaklaşımımız sabittir: İki kez ölç, bir kez biç.</p>

<span class="stat-label">Yıl Tecrübe</span>

</div>

<span class="stat-label">Proje Teslimi</span>

</div>

</section>

<span class="mono-text">02. YETENEKLER</span>

<h2>Teknik Çözümler</h2>

<p>Kritik görev uygulamaları için uçtan uca mühendislik hizmetleri.</p>

</div>

<h3>Backend Mimarisi</h3>

<p>Yüksek trafik yüklerini minimum gecikme ile karşılayan ölçeklenebilir mikroservisler ve API tasarımları.</p>

</div>

<h3>Web Uygulama Sistemleri</h3>

<p>Performans odaklı, modern reaktif frameworkler kullanan, veri yoğunluklu frontend uygulamaları.</p>

<span class="tech-tag">TypeScript</span>

<span class="tech-tag">React</span>

</div>

<h3>Veri Mühendisliği</h3>

<p>Veritabanı şemalarının optimizasyonu ve ETL süreçleri. Veri bütünlüğü ve tutarlılığı odaklı yapılar.</p>

<span class="tech-tag">PostgreSQL</span>

<span class="tech-tag">Kafka</span>

<span class="tech-tag">Redis</span>

</div>

<h3>Güvenlik Mühendisliği</h3>

<p>Fikri mülkiyetinizi ve kullanıcı verilerini korumak için kriptografik standartlar ve güvenli kodlama.</p>

<span class="tech-tag">OAuth2</span>

</div>

</section>

<span class="mono-text">03. SEÇİLMİŞ İŞLER</span>

<h2>Canlı Sistemler</h2>

<p>Teoriden pratiğe; gerçek dünyada çalışan mühendislik harikaları.</p>

</div>

<span class="project-tag">YAPAY ZEKA & IOT</span>

<h3>Project: NEURAL_NET</h3>

<p>Dağıtık makine öğrenimi boru hattı mimarisi ve sensör veri işleme.</p>

</div>

<span class="project-tag">FINTECH</span>

<h3>Project: VORTEX_API</h3>

<p>Saniyede 50.000 işlem kapasiteli yüksek frekanslı ticaret ağ geçidi.</p>

</div>

<span class="project-tag">MOBİL & BULUT</span>

<h3>Project: AERO_SYNC</h3>

<p>Havacılık sektörü için gerçek zamanlı veri senkronizasyon platformu.</p>

</div>

</section>

<span class="mono-text">04. GÜNLÜK</span>

<h2>Mühendislik Notları</h2>

</div>

<span>SİSTEM TASARIMI</span>

</div>

<h4>Önce Monolit, Sonra Mikroservis</h4>

<p>Erken aşama karmaşıklığı yönetimi için neden monolitik mimarinin genellikle daha üstün bir mühendislik kararı olduğu üzerine.</p>

<a href="#" class="read-more">Okumaya Devam Et <i class="fa-solid fa-arrow-right-long"></i></a>

</div>

</article>

<span>OPTİMİZASYON</span>

<span>28 ARALIK 2023</span>

</div>

<h4>Yüksek Yüklü Sistemlerde Bellek Yönetimi</h4>

<p>Milisaniye altı gecikme gereksinimleri için Rust ve C++ dillerinde yığın (stack) vs öbek (heap) tahsis stratejileri.</p>

<a href="#" class="read-more">Okumaya Devam Et <i class="fa-solid fa-arrow-right-long"></i></a>

</div>

</article>

<span>15 KASIM 2023</span>

</div>

<h4>Mühendisin Etik Sorumlulukları</h4>

<p>Gerçek dünya kararlarını etkileyen algoritmalar geliştirirken sahip olduğumuz sorumlulukları anlamak.</p>

<a href="#" class="read-more">Okumaya Devam Et <i class="fa-solid fa-arrow-right-long"></i></a>

</div>

</article>

</div>

</section>

<span class="mono-text">05. PROTOKOLÜ BAŞLAT</span>

<h2>Mühendislikle Tanışın</h2>

</div>

<h3>İletişim Kanalları</h3>

<p style="color:var(--text-muted); margin-bottom: 2rem;">Projeleriniz için teknik danışmanlık veya geliştirme hizmeti almak için aşağıdaki kanalları kullanabilirsiniz.</p>

<h4>Merkez Ofis</h4>

<p>Teknoloji Vadisi, Blok B<br>İstanbul, TR</p>

</div>

<h4>E-Posta</h4>

<p>iletisim@aethersystems.dev</p>

</div>

<h4>PGP Anahtarı</h4>

</div>

<label for="name">Kimlik (Ad Soyad)</label>

<div class="form-feedback" id="nameError">Kimlik bilgisi gerekli.</div>

</div>

<label for="email">Dönüş Adresi (E-Posta)</label>

<div class="form-feedback" id="emailError">Geçerli sözdizimi gerekli.</div>

</div>

<label for="message">Veri Paketi (Mesaj)</label>

<div class="form-feedback" id="messageError">Boş paket tespit edildi.</div>

</div>

<button type="submit" class="btn btn-primary">Mesajı İlet</button>

<div class="form-feedback success" id="formSuccess" style="margin-top: 1rem;">İletim başarılı. Onay bekleniyor.</div>

</form>

</div>

</section>

AETHER<span class="mono-text">_SYSTEMS</span>

</div>

"Yazılım mühendisliği, programlamaya zaman ve diğer programcılar eklendiğinde olan şeydir." — Russ Cox

</div>

</div>

<a href="#" style="margin-left: 1.5rem;">Gizlilik Protokolü</a>

<a href="#" style="margin-left: 1.5rem;">Sistem Durumu</a>

<a href="#" style="margin-left: 1.5rem;">GitHub</a>

</div>

</footer>

// --------------------------------------------------------------------------

//                               CANVAS ANİMASYONU

// --------------------------------------------------------------------------

const canvas = document.getElementById('hero-canvas');

const ctx = canvas.getContext('2d');

let width, height;

let particles = [];

// Ayarlar

const particleCount = 60; // Parçacık sayısı (Daha az ama net)

const connectionDistance = 140;

const mouseDistance = 180;

let mouse = { x: null, y: null };

window.addEventListener('mousemove', (e) => {

const rect = canvas.getBoundingClientRect();

// Scroll pozisyonunu hesaba katmak için

mouse.x = e.clientX - rect.left;

mouse.y = e.clientY - rect.top;

});

window.addEventListener('mouseleave', () => {

mouse.x = null;

mouse.y = null;

});

function resize() {

width = canvas.width = window.innerWidth;

height = canvas.height = window.innerHeight;

}

class Particle {

constructor() {

this.x = Math.random() * width;

this.y = Math.random() * height;

this.vx = (Math.random() - 0.5) * 0.4;

this.vy = (Math.random() - 0.5) * 0.4;

this.size = Math.random() * 2 + 1;

}

update() {

this.x += this.vx;

this.y += this.vy;

if (this.x < 0 || this.x > width) this.vx *= -1;

if (this.y < 0 || this.y > height) this.vy *= -1;

if (mouse.x != null) {

let dx = mouse.x - this.x;

let dy = mouse.y - this.y;

let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < mouseDistance) {

const forceDirectionX = dx / distance;

const forceDirectionY = dy / distance;

const force = (mouseDistance - distance) / mouseDistance;

const directionX = forceDirectionX * force * 0.05;

const directionY = forceDirectionY * force * 0.05;

this.vx += directionX;

this.vy += directionY;

}

draw() {

ctx.fillStyle = '#3b82f6';

ctx.beginPath();

ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

ctx.fill();

}

function initParticles() {

particles = [];

for (let i = 0; i < particleCount; i++) {

particles.push(new Particle());

}

function animate() {

ctx.clearRect(0, 0, width, height);

for (let a = 0; a < particles.length; a++) {

for (let b = a; b < particles.length; b++) {

let dx = particles[a].x - particles[b].x;

let dy = particles[a].y - particles[b].y;

let distance = Math.sqrt(dx * dx + dy * dy);

if (distance < connectionDistance) {

ctx.strokeStyle = `rgba(59, 130, 246, ${1 - distance/connectionDistance})`;

ctx.lineWidth = 0.5;

ctx.beginPath();

ctx.moveTo(particles[a].x, particles[a].y);

ctx.lineTo(particles[b].x, particles[b].y);

ctx.stroke();

}

particles.forEach(particle => {

particle.update();

particle.draw();

});

requestAnimationFrame(animate);

}

window.addEventListener('resize', () => {

resize();

initParticles();

});

// Başlangıç

resize();

initParticles();

animate();

// --------------------------------------------------------------------------

//                           GÖRÜNME ANİMASYONU (Observer)

// --------------------------------------------------------------------------

const observerOptions = {

threshold: 0.1,

rootMargin: "0px 0px -50px 0px"

};

const observer = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

if(entry.target.querySelector('.stat-number')) {

const numbers = entry.target.parentElement.querySelectorAll('.stat-number');

numbers.forEach(num => animateValue(num));

}

observer.unobserve(entry.target);

}

});

}, observerOptions);

document.querySelectorAll('.fade-in').forEach(el => {

observer.observe(el);

});

// --------------------------------------------------------------------------

//                             SAYAÇ ANİMASYONU

// --------------------------------------------------------------------------

function animateValue(obj) {

const target = parseFloat(obj.getAttribute('data-target'));

const isFloat = target % 1 !== 0;

let start = 0;

const duration = 2000;

let startTimestamp = null;

const step = (timestamp) => {

if (!startTimestamp) startTimestamp = timestamp;

const progress = Math.min((timestamp - startTimestamp) / duration, 1);

const ease = 1 - Math.pow(1 - progress, 4);

const current = start + (target - start) * ease;

obj.innerHTML = isFloat ? current.toFixed(1) : Math.floor(current);

if (progress < 1) {

window.requestAnimationFrame(step);

} else {

obj.innerHTML = target;

}

};

window.requestAnimationFrame(step);

}

// --------------------------------------------------------------------------

//                                NAVBAR SCROLL

// --------------------------------------------------------------------------

const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {

if (window.scrollY > 50) {

navbar.classList.add('scrolled');

} else {

navbar.classList.remove('scrolled');

}

});

// --------------------------------------------------------------------------

//                             FORM KONTROLÜ

// --------------------------------------------------------------------------

const form = document.getElementById('contactForm');

form.addEventListener('submit', (e) => {

e.preventDefault();

const name = document.getElementById('name');

const email = document.getElementById('email');

const message = document.getElementById('message');

let isValid = true;

document.querySelectorAll('.form-feedback.error').forEach(el => el.style.display = 'none');

document.getElementById('formSuccess').style.display = 'none';

if (name.value.trim() === '') {

document.getElementById('nameError').style.display = 'block';

isValid = false;

}

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email.value.trim())) {

document.getElementById('emailError').style.display = 'block';

isValid = false;

}

if (message.value.trim() === '') {

document.getElementById('messageError').style.display = 'block';

isValid = false;

}

if (isValid) {

const btn = form.querySelector('button');

const originalText = btn.innerText;

btn.innerText = 'İletiliyor...';

btn.disabled = true;

setTimeout(() => {

btn.innerText = originalText;

btn.disabled = false;

document.getElementById('formSuccess').style.display = 'block';

form.reset();

}, 1500);

}

});

// --------------------------------------------------------------------------

//                           MOBİL MENÜ TOGGLE

// --------------------------------------------------------------------------

const mobileMenuBtn = document.querySelector('.mobile-menu-btn');

const navLinks = document.querySelector('.nav-links');

mobileMenuBtn.addEventListener('click', () => {

// Basit toggle

if (navLinks.style.display === 'flex') {

navLinks.style.display = 'none';

} else {

navLinks.style.display = 'flex';

navLinks.style.flexDirection = 'column';

navLinks.style.position = 'absolute';

navLinks.style.top = '100%';

navLinks.style.left = '0';

navLinks.style.width = '100%';

navLinks.style.backgroundColor = 'rgba(15, 23, 42, 0.95)';

navLinks.style.padding = '1rem';

navLinks.style.borderBottom = '1px solid var(--border-light)';

}

});

</script>

</body>

</html>

Metehan

A Code by Metehan

HTML

CSS

JS

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS