Webleb - Code-Snippets

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

Empfohlen

Ein Code von Metehan

Ein Code von Metehan

Ein Code von Metehan

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code von Metehan

Ein Code von Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS