commit 785e92cbeac06593aefdd6f153bef7669793a6a2
Author: t3jfel <t3jfel@localhost.localdomain>
Date:   Wed Apr 29 17:09:16 2026 +0200

    initial commit

diff --git a/assets/images/cat1.jpg b/assets/images/cat1.jpg
new file mode 100755
index 0000000..798303f
Binary files /dev/null and b/assets/images/cat1.jpg differ
diff --git a/assets/images/cat2.jpg b/assets/images/cat2.jpg
new file mode 100755
index 0000000..80423ae
Binary files /dev/null and b/assets/images/cat2.jpg differ
diff --git a/assets/images/logo.jpg b/assets/images/logo.jpg
new file mode 100755
index 0000000..272d3ed
Binary files /dev/null and b/assets/images/logo.jpg differ
diff --git a/assets/images/m01-p01.png b/assets/images/m01-p01.png
new file mode 100755
index 0000000..ae833f1
Binary files /dev/null and b/assets/images/m01-p01.png differ
diff --git a/assets/images/m01-p02.png b/assets/images/m01-p02.png
new file mode 100755
index 0000000..ab654ba
Binary files /dev/null and b/assets/images/m01-p02.png differ
diff --git a/assets/images/m01-p03.png b/assets/images/m01-p03.png
new file mode 100755
index 0000000..4b31e3a
Binary files /dev/null and b/assets/images/m01-p03.png differ
diff --git a/assets/images/m01-p04.png b/assets/images/m01-p04.png
new file mode 100755
index 0000000..2a10aee
Binary files /dev/null and b/assets/images/m01-p04.png differ
diff --git a/assets/images/m01-thumb.png b/assets/images/m01-thumb.png
new file mode 100755
index 0000000..380a3fc
Binary files /dev/null and b/assets/images/m01-thumb.png differ
diff --git a/assets/images/s01-p01.png b/assets/images/s01-p01.png
new file mode 100755
index 0000000..489e213
Binary files /dev/null and b/assets/images/s01-p01.png differ
diff --git a/assets/images/s02-p01.png b/assets/images/s02-p01.png
new file mode 100755
index 0000000..610a8f6
Binary files /dev/null and b/assets/images/s02-p01.png differ
diff --git a/components/footer.html b/components/footer.html
new file mode 100755
index 0000000..8d496d7
--- /dev/null
+++ b/components/footer.html
@@ -0,0 +1,6 @@
+<div class="container">
+    <p class="mono" style="opacity: 0.8;">
+        &copy; 2026 Made with ❤ by t3jfel in Europe.
+    </p>
+</div>
+
diff --git a/components/header.html b/components/header.html
new file mode 100755
index 0000000..deb0751
--- /dev/null
+++ b/components/header.html
@@ -0,0 +1,13 @@
+<div class="container">
+    <nav>
+        <div class="logo mono">
+            <a href="{{prefix}}index.html">t3jfel<span class="text-gradient">SEC</span></a>
+        </div>
+        <div class="nav-links">
+            <a href="{{prefix}}index.html#about">About</a>
+            <a href="{{prefix}}sec.html">SEC</a>
+            <a href="{{prefix}}magic.html">Magic</a> <a href="{{prefix}}index.html#contact">Contact</a>
+        </div>
+    </nav>
+</div>
+
diff --git a/css/style.css b/css/style.css
new file mode 100755
index 0000000..e8cf861
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1097 @@
+:root {
+    --bg-color: #020617;
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
+    --surface-gradient: linear-gradient(to bottom, #020617 0%, #0f172a 100%);
+    --border-color: #1e293b;
+    --card-bg: #0f172a;
+    --accent-blue: #3b82f6;
+    --accent-purple: #a855f7;
+    --code-bg: #000000;
+    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', ui-monospace, 'Courier New', monospace;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+html, body {
+    max-width: 100%;
+    overflow-x: hidden;
+}
+
+body {
+    background: var(--surface-gradient);
+    color: var(--text-main);
+    font-family: var(--font-main);
+    line-height: 1.6;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    top: -120px;
+    left: -120px;
+    width: 480px;
+    height: 480px;
+    border-radius: 50%;
+    background: var(--accent-blue);
+    filter: blur(140px);
+    opacity: 0.10;
+    z-index: -1;
+    pointer-events: none;
+    transform: translate3d(0, calc(var(--scroll, 0) * 0.18px), 0);
+    transition: transform 0.05s linear;
+}
+
+body::after {
+    content: '';
+    position: fixed;
+    bottom: -120px;
+    right: -120px;
+    width: 480px;
+    height: 480px;
+    border-radius: 50%;
+    background: #1d4ed8;
+    filter: blur(140px);
+    opacity: 0.10;
+    z-index: -1;
+    pointer-events: none;
+    transform: translate3d(0, calc(var(--scroll, 0) * -0.12px), 0);
+    transition: transform 0.05s linear;
+}
+
+.bg-grid {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background-image:
+        linear-gradient(rgba(59, 130, 246, 0.045) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(59, 130, 246, 0.045) 1px, transparent 1px);
+    background-size: 60px 60px;
+    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 75%);
+    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 0%, transparent 75%);
+    transform: translate3d(0, calc(var(--scroll, 0) * -0.05px), 0);
+    transition: transform 0.05s linear;
+}
+
+.bg-orb {
+    position: fixed;
+    width: 320px;
+    height: 320px;
+    border-radius: 50%;
+    filter: blur(120px);
+    opacity: 0.08;
+    z-index: -1;
+    pointer-events: none;
+    background: var(--accent-blue);
+    top: 40%;
+    left: 50%;
+    transform: translate3d(-50%, calc(-50% + var(--scroll, 0) * 0.08px), 0);
+    transition: transform 0.05s linear;
+}
+
+a {
+    text-decoration: none;
+    color: var(--text-main);
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: var(--accent-blue);
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+}
+
+.mono {
+    font-family: var(--font-mono);
+}
+
+.text-blue {
+    color: var(--accent-blue);
+}
+
+.text-gradient {
+    background: var(--brand-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+
+header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 18px 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: rgba(2, 6, 23, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    z-index: 1000;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    font-size: 1.2rem;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+}
+
+.nav-links {
+    display: flex;
+    gap: 30px;
+}
+
+.nav-links a {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: var(--text-muted);
+    position: relative;
+}
+
+.nav-links a::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: -4px;
+    left: 0;
+    background-color: var(--accent-blue);
+    transition: width 0.3s ease;
+}
+
+.nav-links a:hover {
+    color: var(--accent-blue);
+}
+
+.nav-links a:hover::after {
+    width: 100%;
+}
+
+main {
+    padding-top: 75px;
+    position: relative;
+    z-index: 1;
+    flex: 1 0 auto;
+    width: 100%;
+}
+
+section {
+    padding: 80px 0;
+    border-bottom: 1px solid var(--border-color);
+    position: relative;
+    z-index: 1;
+}
+
+section:last-child {
+    border-bottom: none;
+}
+
+section h2 {
+    font-size: 2rem;
+    margin-bottom: 40px;
+    position: relative;
+    display: inline-block;
+    padding-bottom: 10px;
+}
+
+section h2::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 50px;
+    height: 4px;
+    background: var(--brand-gradient);
+    border-radius: 2px;
+    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+section.in-view h2::after {
+    width: 100%;
+}
+
+.hero {
+    padding: 120px 0 100px 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-content {
+    position: relative;
+    z-index: 2;
+}
+
+.hero h1 {
+    font-size: 4rem;
+    line-height: 1.1;
+    margin-bottom: 20px;
+    font-weight: 800;
+    letter-spacing: -2px;
+}
+
+.hero p {
+    font-size: 1.25rem;
+    max-width: 650px;
+    color: var(--text-muted);
+}
+
+.hero-typed {
+    border-right: 2px solid var(--accent-blue);
+    padding-right: 4px;
+    min-height: 1.8em;
+    animation: typingCursor 0.9s step-end infinite;
+}
+
+.hero-typed.done {
+    border-right-color: transparent;
+    animation: none;
+}
+
+@keyframes typingCursor {
+    0%, 100% { border-right-color: var(--accent-blue); }
+    50%      { border-right-color: transparent; }
+}
+
+.status-badge {
+    display: inline-block;
+    background: #1e293b;
+    color: var(--accent-blue);
+    padding: 6px 12px;
+    font-size: 0.75rem;
+    margin-bottom: 25px;
+    font-weight: 700;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.status-badge:hover {
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
+}
+
+.reveal {
+    opacity: 0;
+    transform: translate3d(0, 24px, 0);
+    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: opacity, transform;
+}
+
+.reveal.in-view {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+.reveal-stagger > * {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0);
+    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
+                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: opacity, transform;
+}
+
+.reveal-stagger.in-view > * {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+}
+
+.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.00s; }
+.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.06s; }
+.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.12s; }
+.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.18s; }
+.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.24s; }
+.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.30s; }
+.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.36s; }
+.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.42s; }
+.reveal-stagger.in-view > *:nth-child(n+9) { transition-delay: 0.48s; }
+
+.skills-grid {
+    counter-reset: skill-counter;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+    gap: 20px;
+}
+
+.skill-card {
+    counter-increment: skill-counter;
+    background: linear-gradient(145deg, #0f172a 0%, #0c1424 100%);
+    border: 1px solid var(--border-color);
+    border-left: 3px solid rgba(59, 130, 246, 0.35);
+    padding: 26px 22px 22px 22px;
+    border-radius: 10px;
+    transition: border-left-color 0.25s ease, border-color 0.25s ease,
+                box-shadow 0.25s ease, transform 0.25s ease;
+    transform: translateZ(0);
+    position: relative;
+    overflow: hidden;
+}
+
+.skill-card::before {
+    content: counter(skill-counter, decimal-leading-zero);
+    position: absolute;
+    top: 16px;
+    right: 18px;
+    font-family: var(--font-mono);
+    font-size: 0.68rem;
+    color: rgba(59, 130, 246, 0.3);
+    letter-spacing: 2px;
+    font-weight: 700;
+    line-height: 1;
+}
+
+.skill-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: radial-gradient(ellipse at 0% 100%, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.skill-card:hover {
+    border-left-color: var(--accent-blue);
+    border-color: rgba(59, 130, 246, 0.35);
+    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.14);
+    transform: translateY(-3px);
+}
+
+.skill-card:hover::after {
+    opacity: 1;
+}
+
+.skill-card h3 {
+    font-size: 0.82rem;
+    margin-bottom: 10px;
+    color: var(--text-main);
+    font-weight: 700;
+    font-family: var(--font-mono);
+    letter-spacing: 0.4px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+    padding-right: 28px;
+}
+
+.skill-card p {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    line-height: 1.6;
+    margin-top: 4px;
+}
+
+.post-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.post-item {
+    display: block;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    padding: 30px;
+    border-radius: 12px;
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.post-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--brand-gradient);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+}
+
+.post-item:hover {
+    transform: translateY(-3px);
+    border-color: var(--accent-blue);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+}
+
+.post-item:hover::before {
+    opacity: 1;
+}
+
+.post-item h3 {
+    font-size: 1.4rem;
+    margin-bottom: 10px;
+    font-weight: 700;
+    color: var(--text-main);
+}
+
+.post-item p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+}
+
+.post-meta {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+    display: block;
+}
+
+.post-tag {
+    color: var(--accent-blue);
+    font-weight: 700;
+    background: rgba(59, 130, 246, 0.1);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    margin-right: 8px;
+}
+
+.contact-box {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 30px;
+}
+
+.contact-box ul li {
+    margin-bottom: 8px;
+    line-height: 1.8;
+}
+
+.contact-box ul li a {
+    color: var(--accent-blue);
+}
+
+.contact-box img {
+    max-width: 320px;
+    width: 100%;
+    display: block;
+    margin: 24px auto;
+    border-radius: 8px;
+    border: 2px solid var(--accent-blue);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+footer {
+    padding: 40px 0;
+    text-align: center;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    background: #020617;
+    border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
+    width: 100%;
+}
+
+.search-wrapper {
+    margin-bottom: 30px;
+    position: relative;
+}
+
+.search-input {
+    width: 100%;
+    padding: 15px 20px;
+    background: rgba(15, 23, 42, 0.6);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-main);
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    background: rgba(15, 23, 42, 0.9);
+}
+
+.compact-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 20px;
+}
+
+.sec-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    overflow: hidden;
+    text-decoration: none;
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+    min-height: 120px;
+}
+
+.sec-card:hover {
+    transform: translateY(-4px);
+    border-color: var(--accent-blue);
+    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
+}
+
+.sec-card .card-img {
+    width: 100%;
+    height: 150px;
+    background-size: cover;
+    background-position: center;
+    border-bottom: 1px solid var(--border-color);
+    transition: transform 0.5s ease;
+}
+
+.sec-card:hover .card-img {
+    transform: scale(1.05);
+}
+
+.sec-card .card-content {
+    padding: 18px 20px;
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.sec-card.has-image .card-content {
+    justify-content: flex-start;
+}
+
+.sec-card h3 {
+    font-size: 1rem;
+    margin: 0 0 6px 0;
+    color: var(--accent-blue);
+    line-height: 1.4;
+}
+
+.sec-card .card-meta {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    display: block;
+}
+
+.archive-hero {
+    padding: 60px 0 30px 0 !important;
+}
+
+.archive-hero h1 {
+    font-size: 2.6rem;
+    margin-bottom: 12px;
+}
+
+.archive-hero p {
+    font-size: 1.05rem;
+    color: var(--text-muted);
+}
+
+.empty-state {
+    color: var(--text-muted);
+    padding: 30px;
+    text-align: center;
+    border: 1px dashed var(--border-color);
+    border-radius: 8px;
+}
+
+.case-hero {
+    padding: 60px 0 40px 0 !important;
+}
+
+.case-hero #case-title {
+    font-size: 3.6rem;
+    line-height: 1.08;
+    letter-spacing: -1.5px;
+    margin-bottom: 14px;
+}
+
+#back-link {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    display: inline-block;
+    margin-bottom: 18px;
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+
+#back-link:hover {
+    color: var(--accent-blue);
+    transform: translateX(-3px);
+}
+
+#case-meta {
+    color: var(--text-muted);
+    font-size: 1rem;
+    margin-top: 10px;
+}
+
+.case-hero-inner {
+    
+    display: flex;
+    flex-direction: column;
+    max-width: 1060px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.case-hero-inner #back-link,
+.case-hero-inner #case-tag {
+    align-self: flex-start;
+}
+
+.case-hero-inner #back-link {
+    margin-bottom: 18px;
+}
+
+.case-hero-inner #case-tag {
+    margin-bottom: 18px;
+    font-size: 0.85rem;
+    padding: 7px 14px;
+}
+
+.case-hero-inner #case-title {
+    margin-bottom: 12px;
+}
+
+#case-intro {
+    font-size: 1.1rem;
+    line-height: 1.8;
+    color: var(--text-main);
+    margin: 0 auto 50px auto;
+    max-width: 1020px;
+    padding-left: 16px;
+    border-left: 3px solid var(--accent-blue);
+}
+
+.analysis-steps-container {
+    max-width: 1020px;
+    margin: 0 auto;
+}
+
+.blog-step {
+    max-width: 1020px;
+    margin: 0 auto 60px auto;
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+
+.step-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--border-color);
+    width: 100%;
+}
+
+.blog-step .step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--accent-blue);
+    background: rgba(59, 130, 246, 0.08);
+    border: 1px solid rgba(59, 130, 246, 0.25);
+    padding: 5px 10px;
+    border-radius: 4px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    white-space: nowrap;
+    flex-shrink: 0;
+    
+}
+
+.blog-step .step-title {
+    display: block;
+    font-size: 2.3rem;
+    font-weight: 700;
+    color: var(--text-main);
+    line-height: 1.25;
+    margin: 0;
+    padding: 0;
+    border: none;
+    flex: 1;
+}
+
+.blog-step .step-title::after {
+    content: none;
+}
+
+.blog-step .step-body p {
+    font-size: 1.05rem;
+    line-height: 1.85;
+    color: var(--text-main);
+    margin-bottom: 18px;
+}
+
+.blog-step .step-body img {
+    max-width: 100%;
+    margin: 24px 0;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: #000;
+    padding: 6px;
+}
+
+.blog-step .step-body pre {
+    background: #0d1117;
+    border: 1px solid var(--border-color);
+    border-left: 3px solid #4ade80;
+    border-radius: 4px;
+    padding: 18px;
+    margin: 22px 0;
+    font-family: var(--font-mono);
+    font-size: 0.92rem;
+    overflow-x: auto;
+    color: #4ade80;
+}
+
+.blog-step .step-body code {
+    font-family: var(--font-mono);
+}
+
+.expert-container {
+    max-width: 1020px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+.expert-section {
+    margin-bottom: 50px;
+}
+
+.expert-h2 {
+    display: block;
+    width: 100%;
+    font-family: var(--font-mono);
+    font-size: 1.7rem;
+    font-weight: 700;
+    color: var(--accent-blue);
+    border-left: 4px solid var(--accent-blue);
+    padding: 10px 24px 10px 20px;
+    margin-bottom: 26px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    background: rgba(59, 130, 246, 0.05);
+    box-sizing: border-box;
+}
+
+.expert-h2::after {
+    content: none;
+}
+
+.expert-p {
+    font-size: 1.05rem;
+    line-height: 1.85;
+    color: var(--text-main);
+    margin-bottom: 18px;
+}
+
+.expert-code-block {
+    background: #0d1117;
+    border: 1px solid var(--border-color);
+    border-left: 3px solid #4ade80;
+    border-radius: 4px;
+    padding: 18px;
+    margin: 24px 0;
+    font-family: var(--font-mono);
+    font-size: 0.92rem;
+    overflow-x: auto;
+    color: #4ade80;
+}
+
+.expert-image-wrapper {
+    margin: 30px 0;
+    background: #000;
+    border: 1px solid var(--border-color);
+    padding: 12px;
+    border-radius: 4px;
+    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
+}
+
+.expert-image-wrapper img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+}
+
+#case-title.expert-title {
+    background: none;
+    -webkit-text-fill-color: var(--text-main);
+    color: var(--text-main);
+    font-weight: 800;
+    border-bottom: 2px solid var(--border-color);
+    padding-bottom: 14px;
+}
+
+.lightbox-trigger {
+    cursor: zoom-in;
+    transition: opacity 0.2s ease, box-shadow 0.2s ease;
+}
+
+.lightbox-trigger:hover {
+    opacity: 0.88;
+    box-shadow: 0 0 0 2px var(--accent-blue);
+}
+
+#lightbox-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(2, 6, 23, 0.96);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+}
+
+#lightbox-overlay.active {
+    opacity: 1;
+    pointer-events: all;
+}
+
+#lightbox-content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#lightbox-img {
+    max-width: 88vw;
+    max-height: 88vh;
+    object-fit: contain;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    transform-origin: 0 0;
+    user-select: none;
+    cursor: crosshair;
+}
+
+#lightbox-close {
+    position: fixed;
+    top: 18px;
+    right: 24px;
+    background: rgba(15, 23, 42, 0.8);
+    border: 1px solid var(--border-color);
+    color: var(--text-main);
+    font-size: 1.6rem;
+    line-height: 1;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 0.2s ease, border-color 0.2s ease;
+    z-index: 10000;
+}
+
+#lightbox-close:hover {
+    opacity: 1;
+    border-color: var(--accent-blue);
+}
+
+.ticker-wrap {
+    width: 100%;
+    overflow: hidden;
+    height: 35px;
+    background: rgba(59, 130, 246, 0.08);
+    padding-left: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    border-top: 1px solid rgba(59, 130, 246, 0.4);
+    border-bottom: 1px solid rgba(59, 130, 246, 0.4);
+    margin-top: 30px;
+}
+
+.ticker-content {
+    display: inline-block;
+    white-space: nowrap;
+    padding-right: 100%;
+    box-sizing: content-box;
+    animation: ticker 90s linear infinite;
+    font-family: var(--font-mono);
+    font-weight: 700;
+    color: var(--accent-blue);
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    will-change: transform;
+}
+
+.ticker-item {
+    display: inline-block;
+    padding: 0 2rem;
+}
+
+@keyframes ticker {
+    0%   { transform: translate3d(0, 0, 0); }
+    100% { transform: translate3d(-100%, 0, 0); }
+}
+
+.crypto-list {
+    text-align: left;
+    max-width: 800px;
+    margin: 30px auto 0;
+    list-style: none;
+}
+
+.crypto-list li {
+    margin-bottom: 22px;
+    border-left: 2px solid var(--border-color);
+    padding-left: 20px;
+    transition: border-color 0.3s ease;
+}
+
+.crypto-list li:hover {
+    border-left-color: var(--accent-blue);
+}
+
+.currency-label {
+    display: block;
+    color: var(--accent-blue);
+    font-weight: 800;
+    font-size: 0.85rem;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.crypto-addr {
+    display: inline-block;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px dashed var(--border-color);
+    padding: 8px 15px;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    word-break: break-all;
+    cursor: pointer;
+    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.crypto-addr:hover {
+    border-color: var(--accent-blue);
+    color: #fff;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
+}
+
+.crypto-addr.copied {
+    border-color: #4ade80 !important;
+    color: #4ade80 !important;
+    background-color: rgba(74, 222, 128, 0.1) !important;
+}
+
+@media (max-width: 768px) {
+    .hero {
+        padding: 70px 0 60px 0;
+    }
+    .hero h1 {
+        font-size: 2.4rem;
+    }
+    .hero p {
+        font-size: 1.05rem;
+    }
+    nav {
+        flex-direction: column;
+        gap: 12px;
+        text-align: center;
+    }
+    .nav-links {
+        gap: 14px;
+        flex-wrap: wrap;
+        justify-content: center;
+        width: 100%;
+    }
+    .nav-links a {
+        padding: 5px 10px;
+        background: rgba(30, 41, 59, 0.5);
+        border-radius: 4px;
+    }
+    main {
+        padding-top: 110px;
+    }
+    section {
+        padding: 50px 0;
+    }
+    .post-item {
+        padding: 22px;
+    }
+    .post-item h3 {
+        font-size: 1.2rem;
+    }
+    .skills-grid {
+        grid-template-columns: 1fr;
+    }
+    .blog-step .step-title {
+        font-size: 1.3rem;
+    }
+    .step-header {
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+    .case-hero #case-title {
+        font-size: 2.2rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+    .reveal, .reveal-stagger > * {
+        opacity: 1 !important;
+        transform: none !important;
+    }
+}
+
diff --git a/index.html b/index.html
new file mode 100755
index 0000000..bd1fc98
--- /dev/null
+++ b/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>t3jfel SEC</title>
+    <link rel="icon" type="image/x-icon" href="assets/images/logo.jpg">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+    <div class="bg-grid"></div>
+    <div class="bg-orb"></div>
+
+    <header></header>
+
+    <main>
+        <section class="hero">
+            <div class="container hero-content">
+                <span class="status-badge mono">STATUS: NSA Probably watching.</span>
+                <h1>All Things About <br><span class="text-gradient">Cybersecurity</span></h1>
+                <p class="mono hero-typed"></p>
+            </div>
+        </section>
+
+        <section id="about">
+            <div class="container">
+                <h2><span class="text-gradient">&gt;</span> Operator Profile</h2>
+                <p>I'm a student trying to become Cybersecurity Professional because I'm curious about the "how"
+                    and "why".</p>
+                <br>
+            </div>
+        </section>
+
+        <section id="skills">
+            <div class="container">
+                <h2><span class="text-gradient">&gt;</span> Obsessions</h2>
+                <div class="skills-grid reveal-stagger">
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">SOC Operations</h3>
+                        <p>Splunk SPL, ELK Stack</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">Digital Forensics</h3>
+                        <p>Disk Imaging, Memory Forensics</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">Malware Analysis</h3>
+                        <p>IDA, Ghidra, x64dbg, Static &amp; Dynamic Analysis</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">0-Day Research</h3>
+                        <p>Exploit Development</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">Scripting</h3>
+                        <p>Bash, PowerShell, Python, C/C++.</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">Blockchain</h3>
+                        <p>Crypto Networks &amp;&amp; Payments</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">Electronics</h3>
+                        <p>Hardware Hacking &amp;&amp; Messing around with hardware in general</p>
+                    </div>
+                    <div class="skill-card">
+                        <h3 class="mono text-blue">Digital World</h3>
+                        <p>Security &amp;&amp; Privacy, Steam Collector, E-Sports</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section id="cases">
+            <div class="container">
+                <h2><span class="text-gradient">&gt;</span> SEC</h2>
+                <div id="post-container" class="post-list">
+                    <p class="mono">Loading...</p>
+                </div>
+            </div>
+        </section>
+
+        <section id="contact">
+            <div class="container">
+                <h2><span class="text-gradient">&gt;</span> Slide into DM's</h2>
+                <div class="contact-box">
+                    <p>Only unserious business!</p>
+                    <ul class="mono" style="list-style: none;">
+                        <li>E-mail: <a href="mailto:t3jfelsec.catalyst652@passmail.net" class="text-blue">t3jfelsec.catalyst652@passmail.net</a></li>
+                        <li>HackTheBox: <a href="https://app.hackthebox.com/users/2301507" target="_blank" class="text-blue">HTB</a></li>
+                        <li>pwn.college: <a href="pwn.college" target="_blank" class="text-blue">t3jfel</a></li>
+                        <li>LetsDefend: <a href="https://app.letsdefend.io/user/t3jfel" target="_blank" class="text-blue">LD</a></li>
+                        <li>Codeberg: <a href="https://code.t3jfel.dev" target="_blank" class="text-blue">Codeberg (Forgejo)</a></li>
+                        <li>Matrix Protocol: <a href="https://matrix.to/#/@t3jfel:t3jfel.dev" target="_blank" class="text-blue">Matrix</a></li>
+                        <li>Mastodon Social: <a href="https://mastodon.social/@t3jfel" target="_blank" class="text-blue">Mastodon</a></li>
+                        <li>In CTF's my name is also: <a target="_blank" class="text-blue">t3jfel</a></li>
+                        <li>I also take my steam account and video games seriously: <a href="https://steamcommunity.com/profiles/76561199191057192/" target="_blank" class="text-blue">Steam</a></li>
+                        <li>Antique Steam Account: <a href="https://steamcommunity.com/profiles/76561197991879304/" target="_blank" class="text-blue">Steam OLD</a></li>
+                    </ul>
+
+                    <img src="assets/images/cat2.jpg" alt="cat2">
+
+                    <div class="ticker-wrap">
+                        <div class="ticker-content" id="skill-issue-feed"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer></footer>
+
+    <script src="js/main.js"></script>
+</body>
+
+</html>
+
diff --git a/js/main.js b/js/main.js
new file mode 100755
index 0000000..0e8a4c1
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,276 @@
+document.addEventListener('DOMContentLoaded', () => {
+    loadComponents().then(() => {
+        initSkillIssueTicker();
+        initCryptoCopier();
+    });
+
+    loadRecentPosts();
+    initTypingEffect();
+    initScrollReveal();
+    initScrollParallax();
+
+    if (document.getElementById('sec-grid')) {
+        initSearchableGrid('sec', 'sec-grid', 'sec-search');
+    }
+    if (document.getElementById('magic-grid')) {
+        initSearchableGrid('magic', 'magic-grid', 'magic-search');
+    }
+});
+
+function initScrollParallax() {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    const root = document.documentElement;
+    let scrollY = 0;
+    let ticking = false;
+
+    function update() {
+        root.style.setProperty('--scroll', scrollY);
+        ticking = false;
+    }
+
+    window.addEventListener('scroll', () => {
+        scrollY = window.scrollY || window.pageYOffset || 0;
+        if (!ticking) {
+            requestAnimationFrame(update);
+            ticking = true;
+        }
+    }, { passive: true });
+}
+
+async function loadComponents() {
+    try {
+        const headerRes = await fetch('components/header.html');
+        if (headerRes.ok) {
+            let headerHtml = await headerRes.text();
+            headerHtml = headerHtml.replaceAll('{{prefix}}', '');
+            const headerEl = document.querySelector('header');
+            if (headerEl) headerEl.innerHTML = headerHtml;
+        }
+
+        const footerRes = await fetch('components/footer.html');
+        if (footerRes.ok) {
+            const footerEl = document.querySelector('footer');
+            if (footerEl) footerEl.innerHTML = await footerRes.text();
+        }
+    } catch (e) {
+        console.error('Component load error:', e);
+    }
+}
+
+function initScrollReveal() {
+    const sections = document.querySelectorAll('main > section');
+    sections.forEach(section => {
+        if (!section.classList.contains('hero')) {
+            section.classList.add('reveal');
+        }
+    });
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('in-view');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
+
+    document.querySelectorAll('.reveal, .reveal-stagger, main > section').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+function attachStaggerObserver(root) {
+    if (!root) return;
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('in-view');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
+    observer.observe(root);
+}
+
+function initTypingEffect() {
+    const el = document.querySelector('.hero-typed');
+    if (!el) return;
+
+    const text = "My Computer Science notes, mostly focused on trying to master cybersecurity.";
+    let index = 0;
+
+    function type() {
+        if (index < text.length) {
+            el.textContent += text[index];
+            index++;
+            setTimeout(type, 28 + Math.random() * 35);
+        } else {
+            el.classList.add('done');
+        }
+    }
+
+    setTimeout(type, 700);
+}
+
+async function loadRecentPosts() {
+    const container = document.getElementById('post-container');
+    if (!container) return;
+
+    try {
+        const response = await fetch('/api/collections/cases/records?sort=-created');
+        if (!response.ok) throw new Error('Status: ' + response.status);
+
+        const data = await response.json();
+        const posts = (data.items || []).slice(0, 6);
+
+        if (posts.length === 0) {
+            container.innerHTML = '<p class="empty-state mono">No posts yet.</p>';
+            return;
+        }
+
+        container.classList.add('reveal-stagger');
+        container.innerHTML = posts.map(post => {
+            const linkUrl = 'walkthroughs/view.html?id=' + post.id;
+            const tagStyle = post.category === 'magic'
+                ? 'color: #a855f7; background: rgba(168, 85, 247, 0.1);'
+                : '';
+            const date = (post.created || '').split(' ')[0];
+            return `
+                <a href="${linkUrl}" class="post-item">
+                    <span class="post-meta mono">
+                        <span class="post-tag" style="${tagStyle}">[${escapeHtml(post.tag || '')}]</span>
+                        ${escapeHtml(date)}
+                    </span>
+                    <h3>${escapeHtml(post.title || '')}</h3>
+                    <p>${escapeHtml(post.summary || '')}</p>
+                </a>`;
+        }).join('');
+
+        attachStaggerObserver(container);
+    } catch (e) {
+        console.error('Failed to sync data:', e);
+        container.innerHTML = '<p class="empty-state mono">Failed to load posts.</p>';
+    }
+}
+
+async function initSearchableGrid(category, gridId, searchId) {
+    const grid = document.getElementById(gridId);
+    const searchInput = document.getElementById(searchId);
+    if (!grid) return;
+
+    try {
+        const response = await fetch('/api/collections/cases/records?sort=-created');
+        if (!response.ok) throw new Error('Status: ' + response.status);
+
+        const data = await response.json();
+        const allPosts = data.items || [];
+        const categoryPosts = allPosts.filter(p => p.category === category);
+
+        const render = (items) => {
+            grid.classList.add('reveal-stagger');
+            grid.classList.remove('in-view');
+
+            if (items.length === 0) {
+                grid.classList.remove('reveal-stagger');
+                grid.innerHTML = '<p class="empty-state mono">No results found.</p>';
+                return;
+            }
+
+            grid.innerHTML = items.map(post => {
+                let imageHtml = '';
+                let cardClass = 'sec-card';
+                const date = (post.created || '').split(' ')[0];
+
+                if (category === 'magic' && post.thumbnail) {
+                    imageHtml = `<div class="card-img" style="background-image: url('${escapeAttr(post.thumbnail)}');"></div>`;
+                    cardClass += ' has-image';
+                }
+
+                return `
+                    <a href="walkthroughs/view.html?id=${encodeURIComponent(post.id)}" class="${cardClass}">
+                        ${imageHtml}
+                        <div class="card-content">
+                            <h3 class="mono">${escapeHtml(post.title || '')}</h3>
+                            <span class="card-meta mono">[${escapeHtml(post.tag || '')}] ${escapeHtml(date)}</span>
+                        </div>
+                    </a>`;
+            }).join('');
+
+            requestAnimationFrame(() => grid.classList.add('in-view'));
+        };
+
+        render(categoryPosts);
+
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                const term = e.target.value.toLowerCase();
+                const filtered = categoryPosts.filter(post =>
+                    (post.title || '').toLowerCase().includes(term) ||
+                    (post.tag || '').toLowerCase().includes(term) ||
+                    (post.summary || '').toLowerCase().includes(term)
+                );
+                render(filtered);
+            });
+        }
+    } catch (e) {
+        console.error('Grid error:', e);
+        grid.innerHTML = '<p class="empty-state mono">Failed to load.</p>';
+    }
+}
+
+function initSkillIssueTicker() {
+    const tickerContainer = document.getElementById('skill-issue-feed');
+    if (!tickerContainer) return;
+
+    const messages = [
+        "Zero Days found: 0",
+        "Imposter Syndrome kicking in",
+        "Pigeons are liars",
+        "CERTIFICATIONS: Trust me bro",
+        "The S in IOT stand for Security.",
+        "Must be a layer 8 issue.",
+        "The best way to secure a computer is to turn it off and never power it on.",
+        "And then?"
+    ];
+
+    const content = [...messages, ...messages, ...messages]
+        .map(msg => `<span class="ticker-item">${escapeHtml(msg)}</span>`)
+        .join('');
+    tickerContainer.innerHTML = content;
+}
+
+function initCryptoCopier() {
+    document.querySelectorAll('.crypto-addr').forEach(addr => {
+        addr.addEventListener('click', async () => {
+            const originalText = addr.innerText;
+            const cleanAddress = originalText.replace(/\s/g, '');
+            try {
+                await navigator.clipboard.writeText(cleanAddress);
+                addr.classList.add('copied');
+                addr.innerText = '[ ADDRESS COPIED ]';
+                setTimeout(() => {
+                    addr.classList.remove('copied');
+                    addr.innerText = originalText;
+                }, 1500);
+            } catch (err) {
+                console.error('Copy failed:', err);
+            }
+        });
+    });
+}
+
+function escapeHtml(str) {
+    if (str == null) return '';
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function escapeAttr(str) {
+    if (str == null) return '';
+    return String(str).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
diff --git a/js/viewer.js b/js/viewer.js
new file mode 100755
index 0000000..6e3fc1b
--- /dev/null
+++ b/js/viewer.js
@@ -0,0 +1,251 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadComponents();
+    initScrollParallax();
+    initLightbox();
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const caseId = urlParams.get('id');
+
+    if (!caseId) {
+        document.getElementById('main-content').innerHTML =
+            '<div class="container"><h2>Error: No case ID specified.</h2></div>';
+        return;
+    }
+
+    await loadCaseData(caseId);
+    attachLightboxToImages();
+});
+
+function initScrollParallax() {
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const root = document.documentElement;
+    let scrollY = 0;
+    let ticking = false;
+    function update() {
+        root.style.setProperty('--scroll', scrollY);
+        ticking = false;
+    }
+    window.addEventListener('scroll', () => {
+        scrollY = window.scrollY || window.pageYOffset || 0;
+        if (!ticking) {
+            requestAnimationFrame(update);
+            ticking = true;
+        }
+    }, { passive: true });
+}
+
+async function loadComponents() {
+    try {
+        const headerRes = await fetch('../components/header.html');
+        if (headerRes.ok) {
+            let headerHtml = await headerRes.text();
+            headerHtml = headerHtml.replaceAll('{{prefix}}', '../');
+            document.querySelector('header').innerHTML = headerHtml;
+        }
+        const footerRes = await fetch('../components/footer.html');
+        if (footerRes.ok) {
+            document.querySelector('footer').innerHTML = await footerRes.text();
+        }
+    } catch (e) {
+        console.error('Component load error', e);
+    }
+}
+
+async function loadCaseData(id) {
+    try {
+        const response = await fetch('/api/collections/cases/records');
+        const data = await response.json();
+        const cases = data.items || [];
+        const currentCase = cases.find(c => c.id === id);
+
+        if (!currentCase) {
+            document.getElementById('main-content').innerHTML =
+                '<div class="container"><h2>Error: Case not found.</h2></div>';
+            return;
+        }
+
+        const backLink = document.getElementById('back-link');
+        if (backLink) {
+            if (currentCase.category === 'magic') {
+                backLink.href = '../magic.html';
+                backLink.innerHTML = '&larr; BACK TO MAGIC';
+            } else {
+                backLink.href = '../sec.html';
+                backLink.innerHTML = '&larr; BACK TO SEC';
+            }
+        }
+
+        const titleElement = document.getElementById('case-title');
+        titleElement.innerText = currentCase.title || '';
+
+        if (currentCase.category === 'magic') {
+            titleElement.classList.add('expert-title');
+            titleElement.classList.remove('text-gradient');
+        }
+
+        document.title = (currentCase.title || 'Case Study') + ' | t3jfel SEC';
+        document.getElementById('case-tag').innerText = currentCase.tag || '';
+        const date = (currentCase.created || '').split(' ')[0];
+        document.getElementById('case-meta').innerText =
+            'DATE: ' + date + ' | ID: ' + currentCase.id;
+        document.getElementById('case-intro').innerText = currentCase.intro || '';
+
+        const container = document.getElementById('steps-container');
+        container.innerHTML = '';
+
+        if (currentCase.category === 'magic' && currentCase.sections) {
+            container.className = 'expert-container';
+            currentCase.sections.forEach(section => {
+                let sectionHtml =
+                    '<div class="expert-section">' +
+                    '<h2 class="expert-h2">' + escapeHtml(section.heading || '') + '</h2>';
+
+                (section.content || []).forEach(block => {
+                    if (block.type === 'text') {
+                        sectionHtml += '<p class="expert-p">' + escapeHtml(block.value) + '</p>';
+                    } else if (block.type === 'code') {
+                        const codeVal = Array.isArray(block.value) ? block.value.join('\n') : block.value;
+                        sectionHtml +=
+                            '<pre class="expert-code-block"><code>' +
+                            escapeHtml(codeVal) + '</code></pre>';
+                    } else if (block.type === 'image') {
+                        const imgPath = block.value.startsWith('http') ? block.value : '../' + block.value;
+                        sectionHtml +=
+                            '<div class="expert-image-wrapper">' +
+                            '<img src="' + escapeAttr(imgPath) + '" alt="Documentation Image" class="lightbox-trigger">' +
+                            '</div>';
+                    }
+                });
+
+                sectionHtml += '</div>';
+                container.insertAdjacentHTML('beforeend', sectionHtml);
+            });
+        } else {
+            container.className = 'analysis-steps-container';
+            (currentCase.steps || []).forEach((step, idx) => {
+                let bodyHtml = '';
+                if (step.body) {
+                    step.body.forEach(block => {
+                        if (block.type === 'text') {
+                            bodyHtml += '<p>' + escapeHtml(block.value) + '</p>';
+                        } else if (block.type === 'code') {
+                            const codeVal = Array.isArray(block.value) ? block.value.join('\n') : block.value;
+                            bodyHtml += '<pre><code>' + escapeHtml(codeVal) + '</code></pre>';
+                        } else if (block.type === 'image') {
+                            const imgPath = block.value.startsWith('http') ? block.value : '../' + block.value;
+                            bodyHtml += '<img src="' + escapeAttr(imgPath) + '" alt="Step image" class="lightbox-trigger">';
+                        }
+                    });
+                }
+
+                const num = String(idx + 1).padStart(2, '0');
+                const stepHtml =
+                    '<article class="blog-step">' +
+                        '<div class="step-header">' +
+                            '<span class="step-number mono">Step ' + num + '</span>' +
+                            '<h2 class="step-title">' + escapeHtml(step.title || '') + '</h2>' +
+                        '</div>' +
+                        '<div class="step-body">' + bodyHtml + '</div>' +
+                    '</article>';
+                container.insertAdjacentHTML('beforeend', stepHtml);
+            });
+        }
+    } catch (e) {
+        console.error(e);
+    }
+}
+
+var lb = { scale: 1, tx: 0, ty: 0 };
+
+function initLightbox() {
+    const overlay = document.createElement('div');
+    overlay.id = 'lightbox-overlay';
+    overlay.innerHTML =
+        '<div id="lightbox-content">' +
+            '<img id="lightbox-img" src="" alt="Enlarged image">' +
+        '</div>' +
+        '<button id="lightbox-close" aria-label="Close">&times;</button>';
+    document.body.appendChild(overlay);
+
+    const img = document.getElementById('lightbox-img');
+
+    function applyTransform() {
+        img.style.transform =
+            'translate(' + lb.tx + 'px, ' + lb.ty + 'px) scale(' + lb.scale + ')';
+    }
+
+    overlay.addEventListener('click', function (e) {
+        if (e.target === overlay || e.target.id === 'lightbox-content') {
+            closeLightbox();
+        }
+    });
+
+    document.getElementById('lightbox-close').addEventListener('click', closeLightbox);
+
+    overlay.addEventListener('wheel', function (e) {
+        e.preventDefault();
+
+        const rect = img.getBoundingClientRect();
+        const dx = e.clientX - rect.left;
+        const dy = e.clientY - rect.top;
+
+        const factor   = e.deltaY < 0 ? 1.12 : 0.9;
+        const newScale = Math.min(Math.max(lb.scale * factor, 0.15), 10);
+        const ratio    = newScale / lb.scale;
+
+        lb.tx    = lb.tx + dx * (1 - ratio);
+        lb.ty    = lb.ty + dy * (1 - ratio);
+        lb.scale = newScale;
+
+        applyTransform();
+    }, { passive: false });
+
+    document.addEventListener('keydown', function (e) {
+        if (overlay.classList.contains('active') && e.key === 'Escape') {
+            closeLightbox();
+        }
+    });
+}
+
+function openLightbox(src) {
+    lb.scale = 1;
+    lb.tx    = 0;
+    lb.ty    = 0;
+
+    const img = document.getElementById('lightbox-img');
+    img.src = src;
+    img.style.transform = '';
+
+    document.getElementById('lightbox-overlay').classList.add('active');
+    document.body.style.overflow = 'hidden';
+}
+
+function closeLightbox() {
+    document.getElementById('lightbox-overlay').classList.remove('active');
+    document.body.style.overflow = '';
+}
+
+function attachLightboxToImages() {
+    document.querySelectorAll('.lightbox-trigger').forEach(function (img) {
+        img.addEventListener('click', function () {
+            openLightbox(img.src);
+        });
+    });
+}
+
+
+function escapeHtml(str) {
+    if (str == null) return '';
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function escapeAttr(str) {
+    if (str == null) return '';
+    return String(str).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
diff --git a/magic.html b/magic.html
new file mode 100755
index 0000000..fb3de00
--- /dev/null
+++ b/magic.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ohh Magic! | t3jfel SEC</title>
+    <link rel="icon" type="image/x-icon" href="assets/images/logo.jpg">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+    <div class="bg-grid"></div>
+    <div class="bg-orb"></div>
+
+    <header></header>
+
+    <main>
+        <section class="hero archive-hero">
+            <div class="container">
+                <h1><span class="text-gradient">&gt;</span> It's Magic</h1>
+                <p class="mono"><b>Deep dives into how the world actually works and how it is getting bypassed or hacked. Maybe some mathematics and physics, cuz I hate it.</b></p>
+            </div>
+        </section>
+
+        <section>
+            <div class="container">
+                <div class="search-wrapper">
+                    <input type="text" id="magic-search" class="search-input" placeholder="Search...">
+                </div>
+
+                <div id="magic-grid" class="compact-grid">
+                    <p class="mono">Loading...</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer></footer>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
+
diff --git a/sec.html b/sec.html
new file mode 100755
index 0000000..57d26e7
--- /dev/null
+++ b/sec.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Security | t3jfel SEC</title>
+    <link rel="icon" type="image/x-icon" href="assets/images/logo.jpg">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+
+    <div class="bg-grid"></div>
+    <div class="bg-orb"></div>
+
+    <header></header>
+
+    <main>
+        <section class="hero archive-hero">
+            <div class="container">
+                <h1><span class="text-gradient">&gt;</span> Security Archive</h1>
+                <p class="mono"><b>These might help APT's compromise me, but I always report my findings (if i have :)) first ofc.</b></p>
+            </div>
+        </section>
+
+        <section>
+            <div class="container">
+                <div class="search-wrapper">
+                    <input type="text" id="sec-search" class="search-input" placeholder="Search...">
+                </div>
+
+                <div id="sec-grid" class="compact-grid">
+                    <p class="mono">Loading...</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer></footer>
+    <script src="js/main.js"></script>
+</body>
+
+</html>
+
diff --git a/walkthroughs/view.html b/walkthroughs/view.html
new file mode 100755
index 0000000..14fbb70
--- /dev/null
+++ b/walkthroughs/view.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Case Study | Loading...</title>
+    <link rel="icon" type="image/x-icon" href="../assets/images/logo.jpg">
+    <link rel="stylesheet" href="../css/style.css">
+</head>
+
+<body>
+    <div class="bg-grid"></div>
+    <div class="bg-orb"></div>
+    <header></header>
+    <main id="main-content">
+        <section class="hero case-hero">
+            <div class="container case-hero-inner">
+                <a id="back-link" href="../sec.html" class="mono">&larr; BACK TO OPERATIONS</a>
+                <span id="case-tag" class="status-badge mono">LOADING...</span>
+                <h1 id="case-title">Loading...</h1>
+                <p id="case-meta" class="mono">...</p>
+            </div>
+        </section>
+        <section>
+            <div class="container">
+                <div id="case-intro"></div>
+                <div id="steps-container" class="analysis-steps-container"></div>
+            </div>
+        </section>
+    </main>
+    <footer></footer>
+    <script src="../js/viewer.js"></script>
+</body>
+
+</html>
+