erkbaserver/batuhanerkek-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

30012026-01 VDS aktarım Batuhan

Browse Source
This commit is contained in:
M. Batuhan Erkek
2026-01-30 00:53:50 +03:00
commit d00a5fac34
6 changed files with 1109 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
admin.css Normal file
View File

@@ -0,0 +1,231 @@
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");
:root {
color-scheme: dark;
--bg: #05070d;
--bg-alt: #0a0f1f;
--primary: #0c1b3a;
--primary-strong: #10224f;
--accent: #1f3a7a;
--text: #e6ecff;
--muted: #a3b1d4;
--border: rgba(125, 140, 180, 0.2);
--glow: rgba(35, 70, 150, 0.35);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Manrope", system-ui, -apple-system, sans-serif;
background: radial-gradient(circle at top left, #0c1b3a 0%, #05070d 40%, #000 100%);
color: var(--text);
min-height: 100vh;
}
.panel {
max-width: 980px;
margin: 0 auto;
padding: 80px 24px;
}
.login-card,
.panel-card {
background: linear-gradient(135deg, rgba(16, 34, 79, 0.9), rgba(5, 7, 13, 0.95));
border-radius: 24px;
border: 1px solid var(--border);
padding: 32px;
box-shadow: 0 25px 80px rgba(2, 6, 20, 0.7);
}
.hidden {
display: none;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.card-header h1 {
font-size: clamp(1.8rem, 2.6vw, 2.4rem);
}
.card-header p {
color: var(--muted);
}
.card-form {
display: grid;
gap: 18px;
}
label {
display: grid;
gap: 8px;
font-weight: 500;
}
input,
textarea {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
color: var(--text);
font-size: 0.95rem;
}
input:focus,
textarea:focus {
outline: 2px solid rgba(31, 58, 122, 0.5);
border-color: rgba(31, 58, 122, 0.5);
}
button {
border: none;
border-radius: 999px;
padding: 12px 24px;
font-weight: 600;
background: linear-gradient(120deg, #1f3a7a, #10224f);
color: var(--text);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 10px 30px var(--glow);
}
button:hover {
transform: translateY(-2px);
}
button.ghost {
background: transparent;
border: 1px solid var(--border);
box-shadow: none;
}
.hint {
color: var(--muted);
font-size: 0.85rem;
}
.grid {
display: grid;
gap: 16px;
}
.grid.two {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.posts {
margin-top: 32px;
}
.posts h2 {
margin-bottom: 16px;
}
.posts-list {
display: grid;
gap: 16px;
}
.tag-input {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
min-height: 44px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg-alt);
}
.tag-input input {
border: none;
background: transparent;
padding: 6px 4px;
min-width: 160px;
flex: 1;
}
.tag-input input:focus {
outline: none;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(10, 15, 31, 0.5);
font-size: 0.85rem;
}
.tag button {
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0;
box-shadow: none;
}
.tag button:hover {
color: var(--text);
}
.post-item {
padding: 18px;
border-radius: 16px;
border: 1px solid var(--border);
background: var(--bg-alt);
display: grid;
gap: 6px;
}
.post-item h3 {
font-size: 1.1rem;
}
.post-meta {
color: var(--muted);
font-size: 0.85rem;
}
.post-actions {
display: flex;
gap: 12px;
margin-top: 8px;
}
.post-actions button {
padding: 8px 16px;
font-size: 0.85rem;
}
@media (max-width: 720px) {
.card-header {
flex-direction: column;
align-items: flex-start;
}
}

90
admin.html Normal file
View File

@@ -0,0 +1,90 @@
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Admin Panel | Blog Yönetimi</title>
<meta name="description" content="Blog yazıları için admin paneli." />
<link rel="stylesheet" href="admin.css" />
</head>
<body>
<main class="panel">
<section class="login-card" id="login-card">
<div class="card-header">
<h1>Admin Girişi</h1>
<p>Blog yazılarını eklemek için giriş yapın.</p>
</div>
<form class="card-form" id="login-form">
<label>
E-posta
<input type="email" name="email" placeholder="ornek@mail.com" required />
</label>
<label>
Şifre
<input type="password" name="password" placeholder="••••••••" required />
</label>
<button type="submit">Giriş Yap</button>
<p class="hint">Firebase Authentication e-posta/şifre.</p>
</form>
</section>
<section class="panel-card hidden" id="admin-panel">
<div class="card-header">
<div>
<h1>Blog Yönetimi</h1>
<p>Yeni yazı ekleyin ve mevcut yazıları yönetin.</p>
</div>
<button class="ghost" id="logout-btn" type="button">Çıkış</button>
</div>
<form class="card-form" id="blog-form">
<div class="grid two">
<label>
Başlık
<input type="text" name="title" placeholder="Başlık girin" required />
</label>
<label>
Etiketler
<div class="tag-input" id="tag-input">
<div class="tags" id="tags-list" aria-live="polite"></div>
<input
type="text"
name="tags"
id="tags-input"
placeholder="Etiket yazıp Enter'a basın"
autocomplete="off"
/>
</div>
</label>
</div>
<label>
Kısa Açıklama
<input type="text" name="summary" placeholder="Özet metni" required />
</label>
<label>
İçerik
<textarea name="content" rows="6" placeholder="Yazı içeriği" required></textarea>
</label>
<div class="grid two">
<label>
Tarih
<input type="date" name="date" required />
</label>
<label>
Kapak Görseli (URL)
<input type="url" name="image" placeholder="https://..." />
</label>
</div>
<button type="submit">Yazıyı Kaydet</button>
</form>
<div class="posts">
<h2>Mevcut Yazılar</h2>
<div id="posts-list" class="posts-list"></div>
</div>
</section>
</main>
<script type="module" src="admin.js"></script>
</body>
</html>

194
admin.js Normal file
View File

@@ -0,0 +1,194 @@
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.8.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/12.8.0/firebase-analytics.js";
import {
getAuth,
onAuthStateChanged,
signInWithEmailAndPassword,
signOut,
} from "https://www.gstatic.com/firebasejs/12.8.0/firebase-auth.js";
import {
addDoc,
collection,
deleteDoc,
doc,
getFirestore,
onSnapshot,
orderBy,
query,
serverTimestamp,
} from "https://www.gstatic.com/firebasejs/12.8.0/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyAdLH7HMwCMZ4lThoWGEiI5TEjfvBMXem8",
authDomain: "batuhanerkeksite.firebaseapp.com",
projectId: "batuhanerkeksite",
storageBucket: "batuhanerkeksite.firebasestorage.app",
messagingSenderId: "439489523058",
appId: "1:439489523058:web:ce15dc3127f1ce03a8c1eb",
measurementId: "G-FC46PNZJHX",
};
const app = initializeApp(firebaseConfig);
try {
getAnalytics(app);
} catch {
// Analytics optional in local/dev environments.
}
const auth = getAuth(app);
const db = getFirestore(app);
const loginCard = document.getElementById("login-card");
const adminPanel = document.getElementById("admin-panel");
const loginForm = document.getElementById("login-form");
const blogForm = document.getElementById("blog-form");
const postsList = document.getElementById("posts-list");
const logoutBtn = document.getElementById("logout-btn");
const tagsInput = document.getElementById("tags-input");
const tagsList = document.getElementById("tags-list");
let currentTags = [];
const postsRef = collection(db, "posts");
const renderPosts = (posts) => {
postsList.innerHTML = "";
if (!posts.length) {
const empty = document.createElement("div");
empty.className = "post-item";
empty.textContent = "Henüz blog yazısı yok.";
postsList.appendChild(empty);
return;
}
posts.forEach((post) => {
const wrapper = document.createElement("div");
wrapper.className = "post-item";
const title = document.createElement("h3");
title.textContent = post.title;
const meta = document.createElement("div");
meta.className = "post-meta";
const tagsLabel = post.tags?.length ? post.tags.join(", ") : "Etiket yok";
meta.textContent = `${post.date || "-"} · ${tagsLabel}`;
const summary = document.createElement("p");
summary.textContent = post.summary;
const actions = document.createElement("div");
actions.className = "post-actions";
const removeBtn = document.createElement("button");
removeBtn.className = "ghost";
removeBtn.type = "button";
removeBtn.textContent = "Sil";
removeBtn.addEventListener("click", () => {
deleteDoc(doc(db, "posts", post.id));
});
actions.appendChild(removeBtn);
wrapper.append(title, meta, summary, actions);
postsList.appendChild(wrapper);
});
};
const setAuthState = (isLoggedIn) => {
loginCard.classList.toggle("hidden", isLoggedIn);
adminPanel.classList.toggle("hidden", !isLoggedIn);
};
const renderTags = () => {
tagsList.innerHTML = "";
if (!currentTags.length) return;
currentTags.forEach((tag, index) => {
const chip = document.createElement("span");
chip.className = "tag";
chip.textContent = tag;
const removeBtn = document.createElement("button");
removeBtn.type = "button";
removeBtn.setAttribute("aria-label", `${tag} etiketini kaldır`);
removeBtn.textContent = "×";
removeBtn.addEventListener("click", () => {
currentTags = currentTags.filter((_, i) => i !== index);
renderTags();
});
chip.appendChild(removeBtn);
tagsList.appendChild(chip);
});
};
const addTag = (rawValue) => {
const value = rawValue.trim();
if (!value) return;
if (currentTags.includes(value)) return;
currentTags = [...currentTags, value];
renderTags();
};
tagsInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
event.preventDefault();
addTag(tagsInput.value);
tagsInput.value = "";
}
});
loginForm.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(loginForm);
const email = formData.get("email");
const password = formData.get("password");
signInWithEmailAndPassword(auth, email, password)
.then(() => {
loginForm.reset();
})
.catch(() => {
alert("Giriş başarısız. E-posta veya şifre hatalı.");
});
});
logoutBtn.addEventListener("click", () => {
signOut(auth);
});
blogForm.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(blogForm);
const newPost = {
title: formData.get("title").trim(),
tags: currentTags,
summary: formData.get("summary").trim(),
content: formData.get("content").trim(),
date: formData.get("date"),
image: formData.get("image").trim(),
createdAt: serverTimestamp(),
};
addDoc(postsRef, newPost)
.then(() => {
blogForm.reset();
currentTags = [];
renderTags();
})
.catch(() => {
alert("Yazı kaydedilemedi. Tekrar deneyin.");
});
});
onAuthStateChanged(auth, (user) => {
setAuthState(!!user);
});
const postsQuery = query(postsRef, orderBy("createdAt", "desc"));
onSnapshot(postsQuery, (snapshot) => {
const posts = snapshot.docs.map((docSnap) => ({
id: docSnap.id,
...docSnap.data(),
}));
renderPosts(posts);
});

BIN
assets/MBE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

231
index.html Normal file
View File

@@ -0,0 +1,231 @@
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Kişisel Website | İsim Soyisim</title>
<meta
name="description"
content="İsim Soyisim kişisel websitesi: özgeçmiş, eğitimler, şirketler, blog, sosyal medya ve ödüller."
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="site-header">
<nav class="nav">
<a class="logo" href="#top">Mehmet Batuhan Erkek</a>
<div class="nav-links">
<a href="#ozgecmis">Özgeçmiş</a>
<a href="#egitimler">Eğitimler</a>
<a href="#sirketler">Şirketler</a>
<a href="#blog">Blog</a>
<a href="#oduller">Ödüller</a>
<a href="#iletisim">İletişim</a>
</div>
</nav>
</header>
<main id="top">
<section class="hero reveal">
<div class="hero-content">
<p class="eyebrow">Merhaba, ben</p>
<h1>Mehmet Batuhan Erkek</h1>
<p class="subtitle">
Girişimci - Mühendis - Eğitmen
</p>
<div class="hero-actions">
<a class="btn primary" href="#ozgecmis">Özgeçmişi Gör</a>
<a class="btn ghost" href="#egitimler">Eğitimlerim</a>
</div>
</div>
<div class="hero-media">
<div class="avatar">
<img src="assets/MBE.png" alt="İsim Soyisim fotoğrafı" />
</div>
</div>
</section>
<section id="ozgecmis" class="section reveal">
<div class="section-header">
<h2>Özgeçmiş</h2>
</div>
<div class="grid two">
<div class="card reveal">
<h3>Hakkımda</h3>
<p>
Makine Mühendisliği mezunuyum. Malzeme Bilimi ve Mühendisliği alanında yüksek lisans yaptım, aynı zamanda Yönetim Bilişim Sistemleri ve Egzersiz & Spor Bilimleri alanlarında eğitimime devam ediyorum. 2020 yılından bu yana Erkba Ar-Ge Mühendislik bünyesinde genel müdür olarak çalışıyor, sanayi, sağlık teknolojileri ve yapay zekâ odaklı Ar-Ge projeleri geliştiriyorum.
<br /><br />
TÜBİTAK ve KOSGEB destekli birçok projede aktif rol aldım; robotik rehabilitasyon cihazları, üretim teknolojileri ve yazılım tabanlı mühendislik çözümleri üzerine çalışıyorum. CAD, CAM ve CAE yazılımları başta olmak üzere ileri mühendislik araçlarıyla hem proje geliştiriyor hem de teknik eğitimler veriyorum.
<br /><br />
Amacım, disiplinler arası mühendislik yaklaşımıyla yenilikçi fikirleri uygulanabilir ve sürdürülebilir çözümlere dönüştürmek.
</p>
</div>
<div class="card reveal">
<h3>Yetkinlikler</h3>
<ul class="list">
<li>Mekanik tasarım, üretim ve mühendislik analizleri</li>
<li>CAD, CAM ve CAE tabanlı tasarım ve simülasyon süreçleri</li>
<li>Üretim ve malzeme simülasyon teknolojileri</li>
<li>Robotik, mekatronik ve rehabilitasyon cihazları geliştirme</li>
<li>Yazılım geliştirme ve veri tabanı sistemleri</li>
<li>Elektronik, gömülü sistemler ve otomasyon</li>
<li>Ar-Ge, proje ve teknik ekip yönetimi</li>
<li>Teknik eğitim, danışmanlık ve ürün geliştirme</li>
</ul>
</div>
</div>
</section>
<section id="sirketler" class="section reveal">
<div class="section-header">
<h2>ERKBA</h2>
</div>
<div class="grid two">
<div class="card reveal">
<p>
Yapay zeka, sensör teknolojisi ve oyunlaştırma ile fizik tedaviye
yeni bir standart kazandırıyoruz. ERKBA, hastaların tedavi
süreçlerini ölçülebilir, motive edici ve erişilebilir hale
getiren dijital rehabilitasyon çözümleri sunar.
</p>
<a class="inline-link" href="https://erkba.com/" target="_blank" rel="noreferrer">
erkba.com →
</a>
</div>
</div>
</section>
<section id="egitimler" class="section reveal">
<div class="section-header">
<h2>Verdiğim Eğitimler</h2>
</div>
<div class="grid three">
<div class="card reveal">
<h3>Ansys Mechanical</h3>
<p>Yapısal analiz ve simülasyon odaklı eğitim.</p>
</div>
<div class="card reveal">
<h3>Fusion 360</h3>
<p>3D modelleme, tasarım ve üretim süreçleri.</p>
</div>
<div class="card reveal">
<h3>Proje Yönetimi</h3>
<p>Planlama, kaynak yönetimi ve süreç optimizasyonu.</p>
</div>
</div>
</section>
<section id="blog" class="section reveal">
<div class="section-header">
<h2>Blog</h2>
</div>
<div class="grid two">
<article class="card reveal">
<h3>Ürün Ekiplerinde Tasarım Sistemi</h3>
<p>Küçük ekiplerde ölçeklenebilir sistem kurma rehberi.</p>
<a class="inline-link" href="#">Devamını oku →</a>
</article>
<article class="card reveal">
<h3>Eğitimde Etkileşimli Öğrenme</h3>
<p>Öğrenci katılımını artıran pratik yöntemler.</p>
<a class="inline-link" href="#">Devamını oku →</a>
</article>
</div>
</section>
<section id="oduller" class="section reveal">
<div class="section-header">
<h2>Ödüller</h2>
</div>
<div class="grid three">
<div class="card reveal">
<h3>12. GIV Girişimcilik Ödülleri</h3>
<p>Girişimci birincilik ödülü</p>
</div>
<div class="card reveal">
<h3>4. Kristal Çam Ödülü</h3>
<p>Yılın sağlık teknolojisi girişimcisi</p>
</div>
<div class="card reveal">
<h3>Türk Patent ISIF 24</h3>
<p>Adana Uluslararası Buluş Fuarı · Gümüş madalya</p>
</div>
<div class="card reveal">
<h3>Türk Patent ISIF 25</h3>
<p>İstanbul Uluslararası Buluş Fuarı · Gümüş madalya</p>
</div>
</div>
</section>
</main>
<footer id="iletisim" class="footer reveal">
<div>
<h2>İletişim ve Sosyal Medya</h2>
</div>
<div class="socials">
<a href="https://www.instagram.com/batuhanerkek/" target="_blank" rel="noreferrer">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" focusable="false">
<path
d="M7.5 4h9A3.5 3.5 0 0 1 20 7.5v9A3.5 3.5 0 0 1 16.5 20h-9A3.5 3.5 0 0 1 4 16.5v-9A3.5 3.5 0 0 1 7.5 4Zm0 1.5A2 2 0 0 0 5.5 7.5v9A2 2 0 0 0 7.5 18.5h9a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-9Zm4.5 3.25A3.75 3.75 0 1 1 8.25 12 3.76 3.76 0 0 1 12 8.75Zm0 1.5A2.25 2.25 0 1 0 14.25 12 2.25 2.25 0 0 0 12 10.25ZM16.88 7.4a.88.88 0 1 1-.88-.9.89.89 0 0 1 .88.9Z"
fill="currentColor"
/>
</svg>
</span>
Instagram
</a>
<a href="https://www.linkedin.com/in/mehmet-batuhan-erkek/" target="_blank" rel="noreferrer">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" focusable="false">
<path
d="M6.94 7.5a1.44 1.44 0 1 1 0-2.88 1.44 1.44 0 0 1 0 2.88ZM5.5 9h2.88v9H5.5V9Zm5.63 0h2.76v1.23h.04c.38-.72 1.3-1.48 2.68-1.48 2.87 0 3.4 1.89 3.4 4.35V18h-2.88v-3.92c0-.94-.02-2.15-1.31-2.15-1.31 0-1.51 1.02-1.51 2.08V18h-2.88V9Z"
fill="currentColor"
/>
</svg>
</span>
LinkedIn
</a>
<a href="https://www.youtube.com/@batuhanerkek" target="_blank" rel="noreferrer">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" focusable="false">
<path
d="M21.8 8.1a2.73 2.73 0 0 0-1.92-1.94C18.2 5.7 12 5.7 12 5.7s-6.2 0-7.88.46A2.73 2.73 0 0 0 2.2 8.1 28.5 28.5 0 0 0 1.75 12a28.5 28.5 0 0 0 .45 3.9 2.73 2.73 0 0 0 1.92 1.94c1.68.46 7.88.46 7.88.46s6.2 0 7.88-.46a2.73 2.73 0 0 0 1.92-1.94A28.5 28.5 0 0 0 22.25 12a28.5 28.5 0 0 0-.45-3.9ZM10.25 15.1V8.9l5.2 3.1-5.2 3.1Z"
fill="currentColor"
/>
</svg>
</span>
YouTube
</a>
<a href="mailto:batuhanerkek@erkba.com">
<span class="icon" aria-hidden="true">
<svg viewBox="0 0 24 24" role="img" focusable="false">
<path
d="M5.5 6h13A1.5 1.5 0 0 1 20 7.5v9A1.5 1.5 0 0 1 18.5 18h-13A1.5 1.5 0 0 1 4 16.5v-9A1.5 1.5 0 0 1 5.5 6Zm0 1.5v.23l6.5 4.06 6.5-4.06V7.5h-13Zm13 2.2-5.93 3.7a1 1 0 0 1-1.07 0L5.5 9.7v6.8h13V9.7Z"
fill="currentColor"
/>
</svg>
</span>
batuhanerkek@erkba.com
</a>
</div>
<p class="copyright">© 2026 Mehmet Batuhan Erkek. Tüm hakları saklıdır.</p>
</footer>
<script>
const revealItems = document.querySelectorAll(".reveal");
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.2 }
);
revealItems.forEach((item) => observer.observe(item));
</script>
</body>
</html>

363
styles.css Normal file
View File

@@ -0,0 +1,363 @@
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap");
:root {
color-scheme: dark;
--bg: #05070d;
--bg-alt: #0a0f1f;
--primary: #0c1b3a;
--primary-strong: #10224f;
--accent: #1f3a7a;
--text: #e6ecff;
--muted: #a3b1d4;
--border: rgba(125, 140, 180, 0.2);
--glow: rgba(35, 70, 150, 0.35);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Manrope", system-ui, -apple-system, sans-serif;
background: radial-gradient(circle at top left, #0c1b3a 0%, #05070d 40%, #000 100%);
color: var(--text);
line-height: 1.6;
}
a {
color: inherit;
text-decoration: none;
}
.site-header {
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(12px);
background: rgba(5, 7, 13, 0.7);
border-bottom: 1px solid var(--border);
}
.nav {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 26px 24px;
}
.logo {
font-weight: 700;
letter-spacing: 0.5px;
font-size: 1.2rem;
}
.nav-links {
display: flex;
gap: 20px;
font-size: 1.05rem;
color: var(--muted);
}
.nav-links a {
transition: color 0.2s ease;
}
.nav-links a:hover {
color: var(--text);
}
main {
max-width: 1100px;
margin: 0 auto;
padding: 60px 24px 80px;
}
.hero {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
padding: 40px;
border-radius: 28px;
background: linear-gradient(135deg, rgba(16, 34, 79, 0.9), rgba(5, 7, 13, 0.95));
box-shadow: 0 25px 80px rgba(2, 6, 20, 0.7);
border: 1px solid var(--border);
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.75rem;
color: var(--muted);
}
.hero h1 {
font-size: clamp(2.6rem, 4vw, 3.6rem);
margin: 12px 0;
white-space: nowrap;
}
.subtitle {
font-size: 1.05rem;
color: var(--muted);
max-width: 520px;
}
.hero-actions {
display: flex;
gap: 16px;
margin: 24px 0;
flex-wrap: wrap;
}
.btn {
padding: 12px 22px;
border-radius: 999px;
border: 1px solid transparent;
font-weight: 600;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn.primary {
background: linear-gradient(120deg, #1f3a7a, #10224f);
box-shadow: 0 10px 30px var(--glow);
}
.btn.ghost {
border: 1px solid var(--border);
color: var(--muted);
}
.btn:hover {
transform: translateY(-2px);
}
.hero-badges {
display: flex;
gap: 16px;
flex-wrap: wrap;
color: var(--muted);
font-size: 0.9rem;
}
.hero-media {
display: grid;
align-content: center;
gap: 12px;
justify-items: end;
}
.avatar {
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at top right, #1f3a7a, #0a0f1f);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 30px rgba(31, 58, 122, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5);
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.media-note {
font-size: 0.85rem;
color: var(--muted);
}
.section {
margin-top: 80px;
}
.section-header {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
.section-header h2 {
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
}
.section-header p {
color: var(--muted);
}
.grid {
display: grid;
gap: 20px;
}
.grid.two {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid.three {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid.four {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 18px;
padding: 22px;
box-shadow: 0 15px 35px rgba(4, 8, 20, 0.5);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.15);
}
.card h3 {
margin-bottom: 10px;
font-size: 1.1rem;
}
.card p {
color: var(--muted);
}
.card.compact {
text-align: center;
font-weight: 600;
}
.link-card span {
display: inline-block;
margin-top: 12px;
color: var(--text);
font-weight: 600;
}
.list {
display: grid;
gap: 8px;
color: var(--muted);
list-style: none;
margin-bottom: 14px;
}
.inline-link {
font-weight: 600;
color: var(--text);
}
.footer {
margin-top: 100px;
padding: 50px 24px 60px;
border-top: 1px solid var(--border);
background: rgba(5, 7, 13, 0.8);
}
.footer > div {
max-width: 1100px;
margin: 0 auto;
}
.footer h2 {
margin-bottom: 8px;
}
.socials {
display: flex;
flex-direction: row;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin: 20px auto 30px;
max-width: 1100px;
color: var(--muted);
}
.socials a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 16px;
border-radius: 999px;
border: 1px solid rgba(125, 140, 180, 0.2);
background: rgba(10, 15, 31, 0.4);
transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.socials .icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.socials .icon svg {
width: 100%;
height: 100%;
display: block;
}
.socials a:hover {
color: var(--text);
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.2);
}
.copyright {
max-width: 1100px;
margin: 0 auto;
color: var(--muted);
font-size: 0.85rem;
}
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease, transform 0.6s ease;
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 720px) {
.nav {
flex-direction: column;
gap: 12px;
}
.nav-links {
flex-wrap: wrap;
justify-content: center;
}
.hero {
padding: 30px;
}
.avatar {
width: 180px;
height: 180px;
}
.logo {
font-size: 1.1rem;
}
.nav-links {
font-size: 1rem;
}
}