216 lines
9.9 KiB
TypeScript
216 lines
9.9 KiB
TypeScript
import Link from "next/link";
|
||
import { getPosts } from "@/lib/posts";
|
||
import { getActivity } from "@/lib/activity";
|
||
|
||
export default function Home() {
|
||
const blogPosts = getPosts("blog").slice(0, 3);
|
||
const infosecPosts = getPosts("infosec").slice(0, 3);
|
||
const notes = getPosts("notebook").slice(0, 3);
|
||
const activities = getActivity().slice(0, 5);
|
||
|
||
return (
|
||
<div style={{ maxWidth: "100%" }}>
|
||
{/* Hero */}
|
||
<div className="card" style={{ marginBottom: "2rem" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }}>
|
||
<span style={{ color: "var(--accent)", fontSize: "0.8rem" }}>root@denizbektas.com.tr:~$</span>
|
||
<span style={{ color: "var(--text)", fontSize: "0.8rem" }}>whoami</span>
|
||
</div>
|
||
<h1 style={{ fontSize: "1.6rem", fontWeight: 800, color: "var(--accent)", marginBottom: "0.5rem" }}>
|
||
denizbektas
|
||
</h1>
|
||
<p style={{ color: "var(--text-muted)", fontSize: "0.875rem", lineHeight: 1.7, maxWidth: "600px" }}>
|
||
Siber güvenlik araştırmacısı, red teamer, CTF oyuncusu. Sistemlerin nasıl kırıldığını anlayarak
|
||
onları nasıl koruyacağımızı öğreniyoruz. Bu site o yolculuğun kayıtlarıdır.
|
||
</p>
|
||
<div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem", flexWrap: "wrap" }}>
|
||
<span className="tag">red team</span>
|
||
<span className="tag">pentest</span>
|
||
<span className="tag">CTF</span>
|
||
<span className="tag">OSINT</span>
|
||
<span className="tag">malware analysis</span>
|
||
</div>
|
||
<div style={{ marginTop: "1rem", display: "flex", gap: "1rem", fontSize: "0.8rem" }}>
|
||
<Link href="/merhaba" style={{ color: "var(--accent)" }}>→ Merhaba</Link>
|
||
<Link href="/hakkimda" style={{ color: "var(--text-muted)" }}>Hakkımda</Link>
|
||
<Link href="/iletisim" style={{ color: "var(--text-muted)" }}>İletişim</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Grid */}
|
||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1rem" }}>
|
||
|
||
{/* Blog Widget */}
|
||
<WidgetCard title="Personal Blog" href="/blog" icon="✍">
|
||
{blogPosts.length === 0 ? (
|
||
<EmptyState text="Henüz yazı yok" />
|
||
) : (
|
||
<ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
|
||
{blogPosts.map((p) => (
|
||
<li key={p.slug}>
|
||
<Link href={`/blog/${p.slug}`} style={{ color: "var(--text)", fontSize: "0.82rem", display: "block", lineHeight: 1.4 }}>
|
||
{p.title}
|
||
</Link>
|
||
<span style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>{formatDate(p.date)}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</WidgetCard>
|
||
|
||
{/* Infosec Widget */}
|
||
<WidgetCard title="Infosec Posts" href="/infosec" icon="⚔">
|
||
{infosecPosts.length === 0 ? (
|
||
<EmptyState text="Henüz yazı yok" />
|
||
) : (
|
||
<ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
|
||
{infosecPosts.map((p) => (
|
||
<li key={p.slug}>
|
||
<Link href={`/infosec/${p.slug}`} style={{ color: "var(--text)", fontSize: "0.82rem", display: "block", lineHeight: 1.4 }}>
|
||
{p.title}
|
||
</Link>
|
||
<div style={{ display: "flex", gap: "0.25rem", flexWrap: "wrap", marginTop: "0.2rem" }}>
|
||
{p.tags.slice(0, 2).map((t) => <span key={t} className="tag">{t}</span>)}
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</WidgetCard>
|
||
|
||
{/* Notebook Widget */}
|
||
<WidgetCard title="Notebook" href="/notebook" icon="◎">
|
||
{notes.length === 0 ? (
|
||
<EmptyState text="Henüz not yok" />
|
||
) : (
|
||
<ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: "0.6rem" }}>
|
||
{notes.map((p) => (
|
||
<li key={p.slug}>
|
||
<Link href={`/notebook/${p.slug}`} style={{ color: "var(--text)", fontSize: "0.82rem" }}>
|
||
{p.title}
|
||
</Link>
|
||
<br />
|
||
<span style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>{p.excerpt.slice(0, 60)}...</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</WidgetCard>
|
||
|
||
{/* Activity Widget */}
|
||
<WidgetCard title="Son Aktivite" href="/aktivite" icon="▶">
|
||
<ul style={{ listStyle: "none", display: "flex", flexDirection: "column" }}>
|
||
{activities.map((a) => (
|
||
<li key={a.id} className="terminal-line" style={{ fontSize: "0.75rem" }}>
|
||
<span className="prompt" style={{ flexShrink: 0, fontSize: "0.65rem" }}>
|
||
{typeIcon(a.type)}
|
||
</span>
|
||
<span style={{ flex: 1 }}>
|
||
{a.link ? <Link href={a.link}>{a.message}</Link> : a.message}
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</WidgetCard>
|
||
|
||
{/* Now Widget */}
|
||
<WidgetCard title="Şu Anda" href="/su-anda" icon="◉">
|
||
<div style={{ fontSize: "0.82rem", color: "var(--text-muted)", lineHeight: 1.9 }}>
|
||
<p>🔴 <strong style={{ color: "var(--text)" }}>Odak:</strong> Red team metodolojileri</p>
|
||
<p>📖 <strong style={{ color: "var(--text)" }}>Okuma:</strong> The Hacker Playbook 3</p>
|
||
<p>🎯 <strong style={{ color: "var(--text)" }}>Hedef:</strong> OSCP sertifikası</p>
|
||
<p>🎵 <strong style={{ color: "var(--text)" }}>Dinleme:</strong> Darksynth</p>
|
||
</div>
|
||
</WidgetCard>
|
||
|
||
{/* RSS Widget */}
|
||
<WidgetCard title="RSS Beslemeleri" href="/rss-beslemeleri" icon="◈">
|
||
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
|
||
{[
|
||
{ label: "Tüm İçerikler", href: "/api/rss/all" },
|
||
{ label: "Blog", href: "/api/rss/blog" },
|
||
{ label: "Infosec", href: "/api/rss/infosec" },
|
||
{ label: "Podcast", href: "/api/rss/podcast" },
|
||
].map((r) => (
|
||
<a key={r.href} href={r.href} style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.8rem", color: "var(--text-muted)" }}>
|
||
<span style={{ color: "#f26522", fontSize: "0.7rem" }}>⊞</span>
|
||
{r.label}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</WidgetCard>
|
||
|
||
{/* Statboard Widget */}
|
||
<WidgetCard title="Statboard" href="/statboard" icon="▦">
|
||
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
|
||
{[
|
||
{ label: "Blog Yazısı", value: "1" },
|
||
{ label: "Infosec Yazı", value: "1" },
|
||
{ label: "CTF Çözümü", value: "47" },
|
||
{ label: "Çay ☕", value: "∞" },
|
||
].map((s) => (
|
||
<div key={s.label} style={{ textAlign: "center", padding: "0.5rem", background: "var(--bg)", borderRadius: "4px", border: "1px solid var(--border)" }}>
|
||
<div style={{ fontSize: "1.1rem", fontWeight: 700, color: "var(--accent)" }}>{s.value}</div>
|
||
<div style={{ fontSize: "0.65rem", color: "var(--text-muted)" }}>{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</WidgetCard>
|
||
|
||
{/* Projeler Widget */}
|
||
<WidgetCard title="Projeler" href="/projeler" icon="◈">
|
||
<div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
|
||
<ProjectItem name="denizbektas.com.tr" desc="Bu site — kişisel alan" status="active" />
|
||
<ProjectItem name="recon-toolkit" desc="Otomasyon keşif aracı" status="wip" />
|
||
<ProjectItem name="ctf-writeups" desc="CTF çözüm yazıları" status="active" />
|
||
</div>
|
||
</WidgetCard>
|
||
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function WidgetCard({ title, href, icon, children }: { title: string; href: string; icon: string; children: React.ReactNode }) {
|
||
return (
|
||
<div className="card" style={{ display: "flex", flexDirection: "column" }}>
|
||
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }}>
|
||
<div style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontSize: "0.75rem", fontWeight: 700, color: "var(--text)", letterSpacing: "0.02em" }}>
|
||
<span style={{ color: "var(--accent)", fontSize: "0.7rem" }}>{icon}</span>
|
||
{title}
|
||
</div>
|
||
<Link href={href} style={{ fontSize: "0.65rem", color: "var(--text-muted)" }}>tümü →</Link>
|
||
</div>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EmptyState({ text }: { text: string }) {
|
||
return <div style={{ fontSize: "0.8rem", color: "var(--text-muted)", fontStyle: "italic" }}>{text}</div>;
|
||
}
|
||
|
||
function ProjectItem({ name, desc, status }: { name: string; desc: string; status: string }) {
|
||
const colors: Record<string, string> = { active: "#00d4aa", wip: "#f59e0b", archived: "#64748b" };
|
||
return (
|
||
<div style={{ display: "flex", alignItems: "flex-start", gap: "0.5rem" }}>
|
||
<span style={{ color: colors[status] || "var(--text-muted)", fontSize: "0.5rem", marginTop: "0.3rem", flexShrink: 0 }}>●</span>
|
||
<div>
|
||
<div style={{ fontSize: "0.82rem", color: "var(--text)" }}>{name}</div>
|
||
<div style={{ fontSize: "0.7rem", color: "var(--text-muted)" }}>{desc}</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function typeIcon(type: string) {
|
||
const icons: Record<string, string> = {
|
||
post: "✍", notebook: "◎", infosec: "⚔", project: "◈", link: "⊞", update: "▲", system: "⚙",
|
||
};
|
||
return icons[type] || "▶";
|
||
}
|
||
|
||
function formatDate(date: string) {
|
||
return new Date(date).toLocaleDateString("tr-TR", { year: "numeric", month: "short", day: "numeric" });
|
||
}
|