{
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ onClick();
+ }
+ }}
+ >
+
+ );
+}
+
+export default BlogCard;
diff --git a/src/components/BlogCard/__tests__/BlogCard.test.tsx b/src/components/BlogCard/__tests__/BlogCard.test.tsx
new file mode 100644
index 0000000..92f1e77
--- /dev/null
+++ b/src/components/BlogCard/__tests__/BlogCard.test.tsx
@@ -0,0 +1,92 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+import BlogCard from "../BlogCard";
+
+import type { BlogMetadata } from "../../../types/blog";
+
+describe("BlogCard", () => {
+ const mockMetadata: BlogMetadata = {
+ slug: "test-post",
+ title: "Test Post Title",
+ classification: "TOP SECRET",
+ abstract: "This is a test abstract for the blog post.",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ thumbnail: "thumbnails/test.jpg",
+ };
+
+ it("should render blog card with metadata", () => {
+ const onClick = vi.fn();
+ render(
+ 
+
+
+
+ {metadata.classification}
+
+
+
+
+ {metadata.publishDate}
+ v{metadata.version}
+
+
+ {metadata.title}
+ +{metadata.abstract}
+ +
+
+ READ BRIEFING
+
+
+
+ );
+ }
+
+ if (!index) {
+ return {error}
+
+
+ );
+}
+
+export default BlogList;
diff --git a/src/components/BlogList/__tests__/BlogList.test.tsx b/src/components/BlogList/__tests__/BlogList.test.tsx
new file mode 100644
index 0000000..2bbd0fd
--- /dev/null
+++ b/src/components/BlogList/__tests__/BlogList.test.tsx
@@ -0,0 +1,469 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { BrowserRouter } from "react-router";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import * as blogService from "../../../services/blogService";
+import BlogList from "../BlogList";
+
+vi.mock("../../../services/blogService");
+
+const mockBlogIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: { "1": "page-1.json" },
+};
+
+const mockPageData = {
+ page: 1,
+ posts: [
+ {
+ slug: "2025-11-29-hello-world",
+ title: "Hello World",
+ classification: "UNCLASSIFIED",
+ abstract: "First post",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ thumbnail: "thumbnails/default.svg",
+ },
+ {
+ slug: "2025-11-30-second-post",
+ title: "Second Post",
+ classification: "CONFIDENTIAL",
+ abstract: "Second post",
+ publishDate: "2025-11-30",
+ version: "1.1",
+ thumbnail: "thumbnails/default.svg",
+ },
+ ],
+};
+
+describe("BlogList", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.spyOn(blogService, "fetchBlogIndex").mockResolvedValue(mockBlogIndex);
+ vi.spyOn(blogService, "fetchPage").mockResolvedValue(mockPageData);
+ });
+
+ it("should render blog list with posts", async () => {
+ render(
+
+ {/* Header */}
+
+
+
+
+
+ INTELLIGENCE ARCHIVE // EYES ONLY
+
+
+
+ ARCHIVE-{new Date().getFullYear()}
+
+ TOTAL FILES: {index.totalPosts}
+
+ CLASSIFIED BRIEFINGS
+ + {/* Search & Filter Section */} +
+
+
+
+
+
+
+
+ {/* Results count */}
+ {(searchQuery || startDate || endDate) && (
+
+
+
+
+
+ {(segment) => (
+
+
+
+
+
+
+
+
+
+
+
+
+ {(segment) => (
+
+
+
+
+
+
+
+
+
+
+ SHOWING {filteredPosts.length} OF {pageData?.posts.length || 0}{" "}
+ RESULTS
+
+
+ )}
+
+ {/* Posts Grid */}
+ {loading && pageData ? (
+
+
+ ) : filteredPosts.length > 0 ? (
+
+ {filteredPosts.map((post) => (
+ {
+ void navigate(`/blog/${post.slug}`);
+ }}
+ />
+ ))}
+
+ ) : (
+
+
+ )}
+
+ {/* Pagination */}
+ {index.totalPages > 1 && !searchQuery && !startDate && !endDate && (
+ NO MATCHING FILES FOUND
++ Adjust your search criteria and try again +
+
+
+
+ PAGE {currentPage} OF {index.totalPages}
+
+
+
+ )}
+ {children}
;
+}
+
+interface SectionMarkerProps {
+ number: string;
+ children: ReactNode;
+}
+
+/**
+ * Section header with mission-style marker
+ * Creates Cold War briefing style section headers
+ *
+ * Usage: + § {number} + {children} +
+ ); +} + +interface ImageWithCaptionProps { + src: string; + caption: string; + alt?: string; +} + +/** + * Image with styled caption + * Displays images with classification-style captions + * + * Usage:
+
+ );
+}
+
+export default BlogPostLayout;
diff --git a/src/components/BlogPost/__tests__/BlogComponents.test.tsx b/src/components/BlogPost/__tests__/BlogComponents.test.tsx
new file mode 100644
index 0000000..99c972d
--- /dev/null
+++ b/src/components/BlogPost/__tests__/BlogComponents.test.tsx
@@ -0,0 +1,120 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+
+import {
+ Redacted,
+ Highlight,
+ CallOut,
+ SectionMarker,
+ ImageWithCaption,
+} from "../BlogComponents";
+
+describe("BlogComponents", () => {
+ describe("Redacted", () => {
+ it("should render children", () => {
+ render(
+ {/* Header */}
+
+
+
+
+ {/* Classified Stamp */}
+ {metadata.classification}
+
+ DOC-{metadata.slug}
+ CLASSIFIED: {metadata.publishDate}
+ VERSION: {metadata.version}
+
+
+
+
+ {/* Title & Abstract */}
+ CLASSIFIED
+ {metadata.title}
+ +
+
+
+ {/* Post Content */}
+
+ EXECUTIVE SUMMARY
+
+ {metadata.abstract}
+
+
+
+ {/* Footer Navigation */}
+
+
+
+
+ {/* Document Footer */}
+
+
+ {metadata.classification}
+
+ UNAUTHORIZED DISCLOSURE SUBJECT TO CRIMINAL SANCTIONS
+
+ Test MDX Content
;
+
+ vi.spyOn(useBlogPostHook, "useBlogPost").mockReturnValue({
+ MDXContent: MockMDXContent,
+ metadata: mockMetadata,
+ loading: false,
+ error: null,
+ });
+
+ render(
+ Content
;
+
+ vi.spyOn(useBlogPostHook, "useBlogPost").mockReturnValue({
+ MDXContent: MockMDXContent,
+ metadata: mockMetadata,
+ loading: false,
+ error: null,
+ });
+
+ render(
+ Content
;
+
+ vi.spyOn(useBlogPostHook, "useBlogPost").mockReturnValue({
+ MDXContent: MockMDXContent,
+ metadata: mockMetadata,
+ loading: false,
+ error: null,
+ });
+
+ const user = userEvent.setup();
+
+ render(
+ Content
;
+
+ vi.spyOn(useBlogPostHook, "useBlogPost").mockReturnValue({
+ MDXContent: MockMDXContent,
+ metadata: mockMetadata,
+ loading: false,
+ error: null,
+ });
+
+ render(
+ Content
;
+
+ vi.spyOn(useBlogPostHook, "useBlogPost").mockReturnValue({
+ MDXContent: MockMDXContent,
+ metadata: mockMetadata,
+ loading: false,
+ error: null,
+ });
+
+ render(
+ Content
;
+
+ vi.spyOn(useBlogPostHook, "useBlogPost").mockReturnValue({
+ MDXContent: MockMDXContent,
+ metadata: mockMetadata,
+ loading: false,
+ error: null,
+ });
+
+ render(
+
-
);
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index eca4c8f..6eae319 100644
--- a/src/components/Header/Header.css
+++ b/src/components/Header/Header.css
@@ -1,113 +1,387 @@
+/* ============================================
+ * HEADER - INTELLIGENCE AGENCY BRANDING
+ * Cold War era classified document header
+ * Agency seal, classification markings, clearance notices
+ * ============================================ */
+
.app-header {
position: sticky;
top: 0;
- text-align: start;
- font-weight: 600;
z-index: 100;
- animation: slideDown 0.5s ease-out;
+ width: 100%;
}
-@keyframes slideDown {
- from {
- transform: translateY(-100%);
- opacity: 0;
- }
- to {
- transform: translateY(0);
- opacity: 1;
- }
+.header-container {
+ background: var(--gradient-header);
+ backdrop-filter: var(--backdrop-blur-md);
+ border-bottom: 3px solid var(--color-border-primary);
+ box-shadow: var(--shadow-header);
+ padding: 0;
}
-.header-container {
- background: linear-gradient(
- to bottom,
- rgba(10, 14, 39, 0.95),
- rgba(10, 14, 39, 0.85)
- );
- backdrop-filter: blur(20px);
- padding: var(--spectrum-global-dimension-size-200);
- border-bottom: 1px solid rgba(139, 92, 246, 0.4);
- box-shadow:
- 0 4px 20px rgba(0, 0, 0, 0.3),
- 0 0 40px rgba(139, 92, 246, 0.1),
- inset 0 -1px 0 0 rgba(139, 92, 246, 0.2);
-}
-
-.text-header {
- font-family: var(--font-sans);
- font-optical-sizing: auto;
- font-weight: var(--font-weight-semibold);
- font-style: normal;
- letter-spacing: -0.01em;
-}
-
-/* Header link styles with cyberpunk neon glow effect */
-.link-header {
+/* Intelligence Header Container */
+.intelligence-header {
+ font-family: var(--font-mono);
+ color: var(--color-text-primary);
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================
+ * CLASSIFICATION BANNER
+ * ============================================ */
+
+.header-classification-banner {
+ background: var(--classified-500);
+ color: var(--white);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--spacing-xs) var(--spacing-xl);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: 0.15em;
+ box-shadow: var(--glow-primary);
+}
+
+.banner-left,
+.banner-center,
+.banner-right {
+ flex: 1;
+ text-align: center;
+}
+
+.banner-left {
+ text-align: left;
+}
+
+.banner-right {
+ text-align: right;
+}
+
+/* ============================================
+ * AGENCY HEADER SECTION
+ * ============================================ */
+
+.agency-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--spacing-lg) var(--spacing-xl);
+ background: rgba(220, 38, 38, 0.03);
+ border-bottom: 1px solid var(--color-border-primary);
+}
+
+/* Agency Branding (Seal + Name) */
+.agency-branding {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+.agency-link {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-md);
text-decoration: none;
color: inherit;
+ transition: all 0.3s ease;
+}
+
+.agency-link:hover .agency-name {
+ color: var(--classified-400);
+ text-shadow: var(--text-shadow-header-hover);
+}
+
+.agency-link:hover .seal-outer-ring {
+ border-color: var(--classified-400);
+ box-shadow: var(--glow-primary);
+}
+
+/* Agency Seal */
+.agency-seal {
position: relative;
- transition: all 0.3s ease-in-out;
- border-radius: 8px;
- padding: 4px 8px;
- margin: -4px -8px;
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
}
-.link-header::before {
- content: "";
+.seal-outer-ring {
position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- background: radial-gradient(
- circle,
- rgba(139, 92, 246, 0.2) 0%,
- rgba(236, 72, 153, 0.15) 30%,
- rgba(59, 130, 246, 0.1) 60%,
- transparent 100%
- );
- border-radius: 50%;
- transform: translate(-50%, -50%);
- transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- pointer-events: none;
- z-index: -1;
-}
-
-.link-header:hover {
- text-decoration: none;
- color: #ec4899;
- text-shadow:
- 0 0 10px rgba(236, 72, 153, 0.6),
- 0 0 20px rgba(236, 72, 153, 0.4);
-}
-
-.link-header:hover::before {
- width: 120px;
- height: 120px;
- background: radial-gradient(
- circle,
- rgba(139, 92, 246, 0.3) 0%,
- rgba(236, 72, 153, 0.2) 25%,
- rgba(59, 130, 246, 0.15) 50%,
- rgba(245, 158, 11, 0.1) 75%,
- transparent 100%
- );
-}
-
-.link-header-no-effect {
- text-decoration: none;
- color: inherit;
- position: relative;
- transition: all 0.3s ease-in-out;
- border-radius: 8px;
- padding: 4px 8px;
- margin: -4px -8px;
+ width: 100%;
+ height: 100%;
+ border: 3px solid var(--classified-500);
+ border-radius: var(--radius-full);
+ transition: all 0.3s ease;
}
-.link-header-no-effect:hover {
- text-decoration: none;
- color: #8b5cf6;
- text-shadow:
- 0 0 10px rgba(139, 92, 246, 0.6),
- 0 0 20px rgba(139, 92, 246, 0.4);
+.seal-inner-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 75%;
+ height: 75%;
+ background: var(--gradient-button);
+ border-radius: var(--radius-full);
+ border: 2px solid var(--color-border-accent);
+}
+
+.seal-letter {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-2xl);
+ font-weight: var(--font-weight-bold);
+ color: var(--classified-500);
+ text-shadow: var(--text-shadow-glow-primary);
+}
+
+/* Agency Info */
+.agency-info {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-xs);
+}
+
+.agency-name {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-2xl);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ margin: 0;
+ color: var(--color-text-primary);
+ transition: all 0.3s ease;
+}
+
+.agency-subtitle {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-xs);
+ color: var(--color-text-muted);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+/* ============================================
+ * NAVIGATION TABS
+ * ============================================ */
+
+.header-navigation {
+ display: flex;
+ gap: var(--spacing-md);
+ align-items: center;
+}
+
+.nav-tab {
+ background: transparent;
+ border: 2px solid var(--color-border-accent);
+ border-radius: var(--radius-sm);
+ padding: var(--spacing-sm) var(--spacing-lg);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-bold);
+ color: var(--terminal-500);
+ letter-spacing: 0.08em;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ user-select: none;
+}
+
+.tab-marker {
+ color: var(--terminal-500);
+ font-size: var(--font-size-base);
+}
+
+.tab-label {
+ white-space: nowrap;
+}
+
+.nav-tab:hover {
+ background: rgba(34, 197, 94, 0.1);
+ border-color: var(--terminal-400);
+ box-shadow: var(--glow-accent);
+ transform: translateY(-1px);
+}
+
+.nav-tab:active {
+ transform: translateY(0);
+}
+
+.nav-tab:focus-visible {
+ outline: 3px solid var(--color-border-accent);
+ outline-offset: 2px;
+}
+
+/* ============================================
+ * SECURITY CLEARANCE NOTICE
+ * ============================================ */
+
+.clearance-notice {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--spacing-md);
+ padding: var(--spacing-sm) var(--spacing-xl);
+ background: rgba(0, 0, 0, 0.3);
+ font-size: var(--font-size-xs);
+ color: var(--color-text-muted);
+ letter-spacing: 0.08em;
+}
+
+.clearance-icon {
+ font-size: var(--font-size-base);
+}
+
+.clearance-text {
+ font-weight: var(--font-weight-bold);
+ color: var(--warning-500);
+ text-transform: uppercase;
+}
+
+.clearance-separator {
+ color: var(--color-text-muted);
+}
+
+.clearance-access {
+ text-transform: uppercase;
+}
+
+/* ============================================
+ * RESPONSIVE DESIGN
+ * ============================================ */
+
+@media (max-width: 1024px) {
+ .agency-header {
+ flex-direction: column;
+ gap: var(--spacing-lg);
+ align-items: flex-start;
+ }
+
+ .header-navigation {
+ width: 100%;
+ justify-content: flex-start;
+ }
+}
+
+@media (max-width: 768px) {
+ .header-classification-banner {
+ padding: var(--spacing-xs) var(--spacing-md);
+ font-size: 0.625rem;
+ }
+
+ .banner-center {
+ display: none; /* Hide center text on smaller screens */
+ }
+
+ .agency-header {
+ padding: var(--spacing-md);
+ }
+
+ .agency-seal {
+ width: 40px;
+ height: 40px;
+ }
+
+ .seal-letter {
+ font-size: var(--font-size-xl);
+ }
+
+ .agency-name {
+ font-size: var(--font-size-xl);
+ }
+
+ .agency-subtitle {
+ font-size: 0.625rem;
+ }
+
+ .header-navigation {
+ flex-wrap: wrap;
+ gap: var(--spacing-sm);
+ }
+
+ .nav-tab {
+ padding: var(--spacing-xs) var(--spacing-md);
+ font-size: 0.625rem;
+ }
+
+ .clearance-notice {
+ padding: var(--spacing-xs) var(--spacing-md);
+ font-size: 0.625rem;
+ gap: var(--spacing-sm);
+ }
+}
+
+@media (max-width: 480px) {
+ .header-classification-banner {
+ flex-direction: column;
+ gap: var(--spacing-xs);
+ }
+
+ .banner-left,
+ .banner-right {
+ text-align: center;
+ }
+
+ .banner-right {
+ display: none; /* Hide on very small screens */
+ }
+
+ .agency-branding {
+ gap: var(--spacing-sm);
+ }
+
+ .agency-seal {
+ width: 36px;
+ height: 36px;
+ }
+
+ .seal-letter {
+ font-size: var(--font-size-lg);
+ }
+
+ .agency-name {
+ font-size: var(--font-size-lg);
+ letter-spacing: 0.05em;
+ }
+
+ .agency-subtitle {
+ font-size: 0.5rem;
+ }
+
+ .nav-tab {
+ flex: 1;
+ min-width: 0;
+ justify-content: center;
+ }
+
+ .tab-marker {
+ display: none; /* Hide markers on very small screens */
+ }
+
+ .clearance-notice {
+ flex-wrap: wrap;
+ justify-content: center;
+ }
+
+ .clearance-icon {
+ display: none;
+ }
+
+ .clearance-separator {
+ display: none;
+ }
+}
+
+/* ============================================
+ * ACCESSIBILITY
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ .nav-tab:hover {
+ transform: none;
+ }
}
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
index 0aca4dd..813687d 100644
--- a/src/components/Header/Header.test.tsx
+++ b/src/components/Header/Header.test.tsx
@@ -4,44 +4,71 @@ import { APPLICATION_VERSION } from "./constants";
import HeaderComponent from "./Header";
import { render, screen } from "../../test/testUtils";
-describe("HeaderComponent", () => {
- it("renders site title", () => {
+describe("HeaderComponent - Intelligence Agency Branding", () => {
+ it("renders classification banner", () => {
render(
-
);
}
diff --git a/src/components/Homepage/Homepage.css b/src/components/Homepage/Homepage.css
index 91ea4bd..701ad39 100644
--- a/src/components/Homepage/Homepage.css
+++ b/src/components/Homepage/Homepage.css
@@ -1,97 +1,79 @@
-:root {
- --typewriter-character-count: 16;
+/*
+ * ASCII ART NAME STYLING
+ *
+ * Cold War Classified Document Theme
+ * - Monospace font for authentic terminal/typewriter feel
+ * - CLASSIFIED red glow with terminal green accents
+ * - Box shadow for depth and intelligence file aesthetic
+ * - No animations for maximum performance
+ */
+.ascii-art-name {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: var(--spacing-lg);
+ width: 100%;
+ overflow-x: auto;
}
-.text-intro-name {
- font-family: "Bitcount Single Ink", system-ui;
- font-optical-sizing: auto;
- font-weight: 500;
- font-style: normal;
- font-size: 4em;
- font-variation-settings:
- "slnt" 0,
- "CRSV" 1,
- "ELSH" 59.2,
- "ELXP" 21,
- "SZP1" 44,
- "SZP2" 29,
- "XPN1" 19,
- "XPN2" 0,
- "YPN1" -21,
- "YPN2" 0;
-
- /* Typewriter effect setup */
- overflow: hidden;
- white-space: nowrap;
- border-right: 3px solid #ffd700;
- width: 0;
-
- /* Enhanced visual appeal */
- background: linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- background-clip: text;
- text-shadow: none;
- filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.3));
+.ascii-text {
+ font-family: var(--font-mono);
+ font-size: 0.5rem; /* 8px - extra compact for single-line art */
+ line-height: 1.2;
+ color: var(--classified-500);
+ text-shadow: var(--glow-text-primary);
+ margin: 0 auto;
+ padding: var(--spacing-lg);
+ background: rgba(10, 10, 10, 0.8);
+ border: 2px solid var(--color-border-primary);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-card);
+ white-space: pre;
+
+ /* Add subtle terminal green accent to borders */
+ outline: 1px solid var(--color-border-accent);
+ outline-offset: 2px;
+
+ /* Prevent text selection for cleaner look */
+ user-select: none;
+ -webkit-user-select: none;
+
+ /* Anti-aliasing for crisp text */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Custom scrollbar for horizontal overflow */
+ scrollbar-width: thin;
+ scrollbar-color: var(--classified-500) rgba(10, 10, 10, 0.8);
}
-/*
- * TYPEWRITER ANIMATION SYSTEM
- *
- * Timing Breakdown:
- * - 2s total duration (2 seconds for complete typing)
- * - 0.25s delay (250ms before animation starts)
- * - 16 steps = 0.125s per character (2s ÷ 16 = 125ms per character)
- * - 2.25s cursor start (2s typing + 0.25s delay = when cursor blinking begins)
- *
- * Magic Numbers Explained:
- * - 0.25s delay: Smooth entry, prevents jarring start
- * - 2s duration: Realistic typing speed (125ms per character)
- * - 0.75s cursor blink: Natural blinking rhythm (750ms per blink cycle)
- * - 3px cursor: Visible but not overwhelming
- * - 51% cursor timing: Slightly longer visible than hidden for readability
- */
-.text-intro-name.animate {
- animation:
- /* Typewriter: 2s duration, 16 steps, 0.25s delay, runs once, both directions */
- typewriter 2s steps(var(--typewriter-character-count), end) 0.25s 1 normal
- both,
- /* Cursor: 0.75s blink cycle, infinite, starts after 2.25s (typing complete) */
- blink-cursor 0.75s step-end infinite 1.5s;
+/* Webkit scrollbar styling for ASCII art */
+.ascii-text::-webkit-scrollbar {
+ height: 6px;
}
-/* Typewriter width animation - reveals text character by character */
-@keyframes typewriter {
- from {
- width: 0; /* Start: no text visible */
- }
- to {
- /* End: full text width (16 characters × 1 character unit) */
- width: calc(var(--typewriter-character-count) * 1ch);
- }
+.ascii-text::-webkit-scrollbar-track {
+ background: rgba(10, 10, 10, 0.8);
+ border-radius: var(--radius-sm);
}
-/* Cursor blinking animation - creates typing cursor effect */
-@keyframes blink-cursor {
- /* 0-50%: Cursor visible (first half of blink cycle) */
- 0%,
- 50% {
- border-color: #ffd700; /* Golden cursor visible */
- }
- /* 51-100%: Cursor hidden (second half of blink cycle) */
- 51%,
- 100% {
- border-color: transparent; /* Cursor invisible */
- }
+.ascii-text::-webkit-scrollbar-thumb {
+ background: var(--classified-500);
+ border-radius: var(--radius-sm);
}
-/* Enhanced intro section styling */
+.ascii-text::-webkit-scrollbar-thumb:hover {
+ background: var(--classified-400);
+}
+
+/* Enhanced intro section styling - static for performance */
.homepage-intro {
position: relative;
padding: 4rem 2rem;
text-align: center;
}
+/* Removed animated glow for performance - using static shadow instead */
.homepage-intro::before {
content: "";
position: absolute;
@@ -100,28 +82,12 @@
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
- background: radial-gradient(
- circle,
- rgba(139, 92, 246, 0.1) 0%,
- transparent 70%
- );
- border-radius: 50%;
- filter: blur(60px);
+ background: var(--gradient-glow-intro);
+ border-radius: var(--radius-full);
+ filter: blur(40px);
+ opacity: 0.7;
pointer-events: none;
z-index: -1;
- animation: pulse-glow-intro 4s ease-in-out infinite;
-}
-
-@keyframes pulse-glow-intro {
- 0%,
- 100% {
- opacity: 0.6;
- transform: translate(-50%, -50%) scale(1);
- }
- 50% {
- opacity: 0.9;
- transform: translate(-50%, -50%) scale(1.1);
- }
}
/* Enhanced intro content text - cyberpunk style */
@@ -130,26 +96,31 @@
font-size: 1.0625rem;
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
- color: var(--color-text-secondary, #d1d5db);
+ color: var(--color-text-secondary);
max-width: 48rem;
- margin: 2rem auto;
- padding: 1.5rem 2rem;
- background: rgba(10, 14, 39, 0.6);
- backdrop-filter: blur(20px);
- border-radius: 1rem;
- border: 1px solid rgba(139, 92, 246, 0.3);
+ margin: var(--spacing-xl) auto;
+ padding: var(--spacing-lg) var(--spacing-xl);
+ background: rgba(10, 14, 39, var(--opacity-60));
+ backdrop-filter: var(--backdrop-blur-md);
+ border-radius: var(--radius-lg);
+ border: 1px solid rgba(139, 92, 246, var(--opacity-30));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.02em;
- box-shadow:
- 0 0 30px rgba(139, 92, 246, 0.15),
- inset 0 0 60px rgba(139, 92, 246, 0.05);
+ box-shadow: var(--shadow-intro-content);
+}
+
+/* Responsive adjustments - single-line ASCII needs careful sizing */
+@media (max-width: 75rem) {
+ .ascii-text {
+ font-size: 0.4375rem; /* 7px - slightly smaller for medium screens */
+ }
}
-/* Responsive adjustments */
@media (max-width: 48rem) {
- .text-intro-name {
- font-size: 3em;
+ .ascii-text {
+ font-size: 0.375rem; /* 6px - smaller on tablets */
+ padding: var(--spacing-md);
}
.intro-content {
@@ -159,8 +130,9 @@
}
@media (max-width: 30rem) {
- .text-intro-name {
- font-size: 2.5em;
+ .ascii-text {
+ font-size: 0.3125rem; /* 5px - very small on mobile, allows horizontal scroll */
+ padding: var(--spacing-sm);
}
.intro-content {
diff --git a/src/components/Homepage/Homepage.test.tsx b/src/components/Homepage/Homepage.test.tsx
index 5b6c2e5..10970de 100644
--- a/src/components/Homepage/Homepage.test.tsx
+++ b/src/components/Homepage/Homepage.test.tsx
@@ -4,9 +4,10 @@ import Homepage from "./Homepage";
import { render, screen } from "../../test/testUtils";
describe("Homepage", () => {
- it("renders the main heading", () => {
+ it("renders the ASCII art name container", () => {
render(
-
-
-
-
- cagesthrottleus
-
+
+ {/* Classification Banner */}
+
+
+ {/* Security Clearance Notice */}
+
+ TOP SECRET
+ CLASSIFIED MATERIAL
+ NOFORN
+
+
+ {/* Agency Header */}
+
+ {/* Agency Seal & Branding */}
+
+
+
+
+ v{APPLICATION_VERSION}
-
-
+
+
+ {/* Navigation Tabs */}
+
+
+
+
+ C
+
+
+
- CAGESTHROTTLEUS
+ + UNIT [REDACTED] | v{APPLICATION_VERSION} + +
+
+
-
- CagesThrottleUs
-
+
{/* Resume Content with configurable options */}
+
+ {`
+ ██████╗ █████╗ ██████╗ ███████╗███████╗████████╗██╗ ██╗██████╗ ██████╗ ████████╗████████╗██╗ ███████╗██╗ ██╗███████╗
+ ██╔════╝██╔══██╗██╔════╝ ██╔════╝██╔════╝╚══██╔══╝██║ ██║██╔══██╗██╔═══██╗╚══██╔══╝╚══██╔══╝██║ ██╔════╝██║ ██║██╔════╝
+ ██║ ███████║██║ ███╗█████╗ ███████╗ ██║ ███████║██████╔╝██║ ██║ ██║ ██║ ██║ █████╗ ██║ ██║███████╗
+ ██║ ██╔══██║██║ ██║██╔══╝ ╚════██║ ██║ ██╔══██║██╔══██╗██║ ██║ ██║ ██║ ██║ ██╔══╝ ██║ ██║╚════██║
+ ╚██████╗██║ ██║╚██████╔╝███████╗███████║ ██║ ██║ ██║██║ ██║╚██████╔╝ ██║ ██║ ███████╗███████╗╚██████╔╝███████║
+ ╚═════╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝ ╚═════╝ ╚══════╝
+
+ [ CLASSIFIED ]
+
+
+`}
+
+
- I like to code and keep learning. I graduated from BITS Pilani in 2023
- with a B.E. in Computer Science with a CGPA of 8.05
+ I like to code and keep learning. This webpage is meant to be a little
+ trollish and fun. Do not take it seriously as a professional
+ portfolio.
+
-
+ SECRET
+
+ {formatDateRange(item.startDate, item.endDate)}
+
+
-
-
);
};
-interface PositionSectionProps {
+interface AssignmentRecordProps {
position: Position;
- companyLogo: string;
- companyName: string;
- hoverScale: number;
- animationDuration: number;
}
/**
- * Displays a position with its work items
+ * Assignment record section (position)
+ * Styled as personnel assignment documentation
*/
-const PositionSection = ({
- position,
- companyLogo,
- companyName,
- hoverScale,
- animationDuration,
-}: PositionSectionProps) => {
- const sectionRef = useRef(null);
- const isInView = useInView(sectionRef, { once: true, amount: 0.2 });
-
+const AssignmentRecord = ({ position }: AssignmentRecordProps) => {
return (
-
-
-
-
- {item.description}
+
+
+
+
-
-
+ {item.description}
-
-
-
-
+
- {/* Company heading on background (not in card) */}
-
-
-
-
+
+ {/* File Folder Tab */}
+
-
+ {/* File Content */}
+
+
-
+
+
{formatDateRange(position.startDate, position.endDate)}
-
+
{position.title}
+
- {position.workItems.map((workItem, index) => (
-
-
+
);
};
-interface CompanySectionProps {
+interface PersonnelFileProps {
company: CompanyExperience;
- hoverScale: number;
- animationDuration: number;
}
/**
- * Displays a company with all its positions
+ * Personnel file section (company)
+ * Styled as classified personnel dossier with file folder tab
*/
-const CompanySection = ({
- company,
- hoverScale,
- animationDuration,
-}: CompanySectionProps) => {
- const companySectionRef = useRef(null);
- const isInView = useInView(companySectionRef, { once: true, amount: 0.1 });
-
+const PersonnelFile = ({ company }: PersonnelFileProps) => {
return (
-
+ {position.workItems.map((workItem) => (
+
-
+
+
- {/* Timeline marker (vertical line for entire company section) */}
-
+
+ {company.company}
+AUTHORIZED
+
+ {/* Classification Banner */}
+
+
+ PERSONNEL FILE - {company.company.toUpperCase()}
+
+
- {/* All positions for this company */}
-
- {company.positions.map((position) => (
-
-
+
);
};
/**
* Main ResumeContent component
- * Displays a LinkedIn-style timeline of work experience
- *
- * @param config - Configuration object containing experiences and display options
+ * Displays classified personnel dossier with work history
*
* Structure:
- * - Company Name (heading on background)
- * - Position | Date Range
- * - Work Item Cards (specific achievements)
+ * - Personnel File (Company)
+ * - Assignment Record (Position)
+ * - Mission Briefings (Work Items)
*
* Features:
- * - Automatically sorts experiences by most recent position
- * - Scales cards on hover (configurable)
- * - Shows company logo and date on hover (no cursor tracking)
- * - Consistent timeline marker with light color
+ * - Classified document aesthetic
+ * - File folder tabs for companies
+ * - Typed intelligence report style
+ * - Expandable mission briefings
+ * - No animations for static Cold War feel
*/
const ResumeContent = ({
experiences,
- hoverScale = 1.25,
- animationDuration = 300,
+ hoverScale = 1.05,
+ animationDuration = 200,
}: ResumeContentConfig) => {
- // Sort experiences by most recent position end date (or start date if current)
+ // Sort experiences by most recent position end date
const sortedExperiences = [...experiences].sort((a, b) => {
const getLatestDate = (exp: CompanyExperience) => {
const dates = exp.positions.map((pos) => pos.endDate || new Date());
@@ -297,15 +192,39 @@ const ResumeContent = ({
});
return (
-
+ 
+ )}
+
+
+ {/* Timeline Marker */}
+
+
+ {/* All assignments for this company */}
+
+
+ {company.logoUrl && (
+ {company.company}
+
+ FILE NO: {company.id}
+ •
+ CLASSIFICATION: SECRET
+
+
+ {company.positions.map((position) => (
+
+
+ {/* File Footer */}
+
+
+ END OF FILE - AUTHORIZED PERSONNEL ONLY
+
+
- {sortedExperiences.map((experience) => (
-
-
+ {/* Dossier Header */}
+
);
};
diff --git a/src/components/LoadingSpinner/LoadingSpinner.css b/src/components/LoadingSpinner/LoadingSpinner.css
index 95504fc..6660ca3 100644
--- a/src/components/LoadingSpinner/LoadingSpinner.css
+++ b/src/components/LoadingSpinner/LoadingSpinner.css
@@ -1,66 +1,319 @@
-/**
- * Loading Spinner Styles
- */
+/* ============================================
+ * LOADING SPINNER - TELETYPE TRANSMISSION
+ * Cold War era teletype machine aesthetic
+ * Morse code dots/dashes, typewriter style
+ * ============================================ */
+
.loading-container {
display: flex;
- flex-direction: column;
align-items: center;
justify-content: center;
min-height: 50vh;
- gap: 2rem;
+ padding: var(--spacing-xl);
}
-.loading-spinner {
- position: relative;
- width: 60px;
- height: 60px;
+/* Teletype Message Box */
+.teletype-box {
+ max-width: 600px;
+ width: 100%;
+ background: rgba(18, 18, 18, 0.95);
+ border: 3px solid var(--color-border-primary);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-card);
+ font-family: var(--font-mono);
+ overflow: hidden;
}
-.spinner-ring {
- position: absolute;
- width: 100%;
- height: 100%;
- border: 3px solid transparent;
- border-top-color: #8b5cf6;
- border-right-color: #ec4899;
- border-radius: 50%;
- box-shadow:
- 0 0 20px rgba(139, 92, 246, 0.5),
- 0 0 40px rgba(236, 72, 153, 0.3);
+/* Teletype Header */
+.teletype-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--classified-500);
+ color: var(--white);
+ padding: var(--spacing-sm) var(--spacing-lg);
+ font-size: var(--font-size-xs);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: 0.1em;
+ box-shadow: var(--glow-primary);
}
-.spinner-ring-inner {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 70%;
- height: 70%;
- transform: translate(-50%, -50%);
- border: 3px solid transparent;
- border-bottom-color: #f59e0b;
- border-left-color: #3b82f6;
- border-radius: 50%;
- animation: spin-reverse 1s linear infinite;
- box-shadow:
- 0 0 20px rgba(245, 158, 11, 0.5),
- 0 0 40px rgba(59, 130, 246, 0.3);
+.teletype-label {
+ text-transform: uppercase;
}
-@keyframes spin-reverse {
- from {
- transform: translate(-50%, -50%) rotate(0deg);
+.teletype-status {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-xs);
+ animation: pulse-status 2s ease-in-out infinite;
+}
+
+@keyframes pulse-status {
+ 0%,
+ 100% {
+ opacity: 1;
}
- to {
- transform: translate(-50%, -50%) rotate(-360deg);
+ 50% {
+ opacity: 0.5;
}
}
-.loading-text {
+/* Teletype Display Area */
+.teletype-display {
+ padding: var(--spacing-2xl) var(--spacing-xl);
+ text-align: center;
+}
+
+.loading-ascii {
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ line-height: 1.2;
+ color: var(--terminal-500);
+ text-shadow: var(--glow-text-accent);
+ margin: 0 auto var(--spacing-xl);
+ white-space: pre;
+ user-select: none;
+}
+
+/* ============================================
+ * MORSE CODE LOADING ANIMATION
+ * ============================================ */
+
+.morse-container {
+ margin: var(--spacing-2xl) 0;
+ padding: var(--spacing-lg);
+ background: rgba(220, 38, 38, 0.03);
+ border: 1px solid var(--color-border-primary);
+ border-radius: var(--radius-sm);
+}
+
+.morse-line {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+/* Morse Dot */
+.morse-dot {
+ width: 12px;
+ height: 12px;
+ background: var(--terminal-500);
+ border-radius: var(--radius-full);
+ box-shadow: var(--glow-accent);
+ animation: morse-blink 1.5s ease-in-out infinite;
+}
+
+.morse-dot:nth-child(1) {
+ animation-delay: 0s;
+}
+
+.morse-dot:nth-child(3) {
+ animation-delay: 0.5s;
+}
+
+.morse-dot:nth-child(5) {
+ animation-delay: 1s;
+}
+
+/* Morse Dash */
+.morse-dash {
+ width: 36px;
+ height: 12px;
+ background: var(--terminal-500);
+ border-radius: var(--radius-sm);
+ box-shadow: var(--glow-accent);
+ animation: morse-blink 1.5s ease-in-out infinite;
+}
+
+.morse-dash:nth-child(2) {
+ animation-delay: 0.25s;
+}
+
+.morse-dash:nth-child(4) {
+ animation-delay: 0.75s;
+}
+
+@keyframes morse-blink {
+ 0%,
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 50% {
+ opacity: 0.3;
+ transform: scale(0.9);
+ }
+}
+
+/* ============================================
+ * LOADING MESSAGE
+ * ============================================ */
+
+.loading-message {
+ margin: var(--spacing-2xl) 0;
font-family: var(--font-mono);
- font-size: 1rem;
+ font-size: var(--font-size-lg);
+ color: var(--color-text-primary);
+ letter-spacing: 0.1em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--spacing-md);
+}
+
+.loading-prefix {
+ color: var(--classified-500);
+ font-weight: var(--font-weight-bold);
+}
+
+.loading-text {
+ color: var(--terminal-500);
font-weight: var(--font-weight-medium);
- color: var(--color-text-secondary, #d1d5db);
- letter-spacing: 0.15em;
+ min-width: 140px;
+ text-align: left;
+}
+
+/* ============================================
+ * PROGRESS BAR
+ * ============================================ */
+
+.progress-bar-container {
+ margin-top: var(--spacing-xl);
+}
+
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: rgba(10, 10, 10, 0.8);
+ border: 1px solid var(--color-border-primary);
+ border-radius: var(--radius-sm);
+ overflow: hidden;
+ position: relative;
+}
+
+.progress-fill {
+ height: 100%;
+ background: var(--gradient-reading-progress);
+ animation: progress-fill 3s ease-in-out infinite;
+ box-shadow: var(--glow-accent);
+}
+
+@keyframes progress-fill {
+ 0% {
+ width: 0%;
+ }
+ 50% {
+ width: 75%;
+ }
+ 100% {
+ width: 0%;
+ }
+}
+
+.progress-markers {
+ display: flex;
+ justify-content: space-between;
+ margin-top: var(--spacing-sm);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-xs);
+ color: var(--color-text-muted);
+}
+
+/* ============================================
+ * TELETYPE FOOTER
+ * ============================================ */
+
+.teletype-footer {
+ background: rgba(220, 38, 38, 0.1);
+ border-top: 2px solid var(--color-border-primary);
+ padding: var(--spacing-sm) var(--spacing-lg);
+ text-align: center;
+}
+
+.security-notice {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-xs);
+ color: var(--color-text-muted);
+ letter-spacing: 0.1em;
text-transform: uppercase;
- text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
+}
+
+/* ============================================
+ * RESPONSIVE DESIGN
+ * ============================================ */
+
+@media (max-width: 768px) {
+ .teletype-box {
+ max-width: 100%;
+ }
+
+ .loading-ascii {
+ font-size: 0.625rem;
+ }
+
+ .loading-message {
+ font-size: var(--font-size-base);
+ flex-direction: column;
+ gap: var(--spacing-sm);
+ }
+
+ .morse-line {
+ gap: var(--spacing-sm);
+ }
+
+ .morse-dot {
+ width: 10px;
+ height: 10px;
+ }
+
+ .morse-dash {
+ width: 28px;
+ height: 10px;
+ }
+}
+
+@media (max-width: 480px) {
+ .loading-container {
+ padding: var(--spacing-md);
+ }
+
+ .teletype-display {
+ padding: var(--spacing-xl) var(--spacing-md);
+ }
+
+ .loading-ascii {
+ font-size: 0.5rem;
+ }
+
+ .loading-message {
+ font-size: var(--font-size-sm);
+ }
+
+ .loading-text {
+ min-width: 120px;
+ }
+
+ .progress-markers span:nth-child(2),
+ .progress-markers span:nth-child(4) {
+ display: none; /* Hide 25% and 75% markers on small screens */
+ }
+}
+
+/* ============================================
+ * ACCESSIBILITY
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ .morse-dot,
+ .morse-dash,
+ .progress-fill,
+ .teletype-status {
+ animation: none;
+ }
+
+ .progress-fill {
+ width: 50%; /* Static progress state */
+ }
}
diff --git a/src/components/LoadingSpinner/LoadingSpinner.test.tsx b/src/components/LoadingSpinner/LoadingSpinner.test.tsx
index 5c0b9c6..38074f4 100644
--- a/src/components/LoadingSpinner/LoadingSpinner.test.tsx
+++ b/src/components/LoadingSpinner/LoadingSpinner.test.tsx
@@ -1,23 +1,95 @@
-import { describe, expect, it } from "vitest";
+import { act } from "@testing-library/react";
+import { describe, expect, it, beforeEach, afterEach, vi } from "vitest";
import LoadingSpinner from "./LoadingSpinner";
import { render, screen } from "../../test/testUtils";
-describe("LoadingSpinner", () => {
- it("renders loading text", () => {
+describe("LoadingSpinner - Teletype Theme", () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ vi.restoreAllMocks();
+ vi.useRealTimers();
+ });
+ it("renders teletype classification header", () => {
+ render(
+
+
+ {/* Personnel Files */}
+ CLASSIFIED PERSONNEL DOSSIER
+
+ SUBJECT: AGENT [REDACTED]
+ |
+ CLEARANCE: TOP SECRET
+
+
+ {sortedExperiences.map((experience) => (
+
+
+ {/* Dossier Footer */}
+
+
CLASSIFIED
+ + WARNING: UNAUTHORIZED ACCESS TO THIS DOSSIER IS PROHIBITED +
+
-
-
-
-
-
- Loading...
-
+ {/* Teletype Message Box */}
+
);
};
diff --git a/src/components/NotFound/NotFound.css b/src/components/NotFound/NotFound.css
index 882635f..93e07ca 100644
--- a/src/components/NotFound/NotFound.css
+++ b/src/components/NotFound/NotFound.css
@@ -1,4 +1,433 @@
-/* NotFound component styles */
-.not-found-container {
+/* ============================================
+ * NOT FOUND PAGE - CLASSIFIED DOCUMENT THEME
+ * Cold War era intelligence file aesthetic
+ * Typewriter fonts, classification stamps, redactions
+ * ============================================ */
+
+/* Main Wrapper - Dark Intelligence Room */
+.not-found-wrapper {
position: relative;
+ min-height: 100vh;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--spacing-xl);
+ background: var(--dark-primary);
+
+ /* Subtle paper texture effect */
+ background-image: repeating-linear-gradient(
+ 0deg,
+ transparent,
+ transparent 2px,
+ rgba(220, 38, 38, 0.02) 2px,
+ rgba(220, 38, 38, 0.02) 4px
+ );
+}
+
+/* Classified Document Container */
+.classified-document {
+ position: relative;
+ max-width: 900px;
+ width: 100%;
+ background: rgba(18, 18, 18, 0.95);
+ border: 3px solid var(--color-border-primary);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-card);
+ padding: var(--spacing-3xl);
+ font-family: var(--font-mono);
+
+ /* Subtle document texture */
+ background-image: linear-gradient(
+ rgba(220, 38, 38, 0.03) 1px,
+ transparent 1px
+ );
+ background-size: 100% 20px;
+}
+
+/* ============================================
+ * DOCUMENT HEADER - CLASSIFICATION MARKINGS
+ * ============================================ */
+
+.document-header {
+ margin-bottom: var(--spacing-xl);
+}
+
+.classification-bar {
+ background: var(--classified-500);
+ color: var(--white);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-sm);
+ font-weight: var(--font-weight-bold);
+ text-align: center;
+ padding: var(--spacing-sm) var(--spacing-md);
+ letter-spacing: 0.15em;
+ margin-bottom: var(--spacing-md);
+ box-shadow: var(--glow-primary);
+}
+
+.document-meta {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: var(--font-size-xs);
+ color: var(--color-text-secondary);
+ padding: 0 var(--spacing-sm);
+ letter-spacing: 0.05em;
+}
+
+.doc-number,
+.doc-date {
+ font-family: var(--font-mono);
+ text-transform: uppercase;
+}
+
+/* ============================================
+ * CLASSIFICATION STAMPS
+ * ============================================ */
+
+.classified-stamp-container {
+ position: absolute;
+ top: 120px;
+ right: 60px;
+ transform: rotate(15deg);
+ z-index: 10;
+ pointer-events: none;
+}
+
+.classified-stamp {
+ border: 4px solid var(--classified-500);
+ color: var(--classified-500);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-2xl);
+ font-weight: var(--font-weight-bold);
+ padding: var(--spacing-md) var(--spacing-xl);
+ text-align: center;
+ letter-spacing: 0.2em;
+ opacity: 0.4;
+ text-shadow: var(--text-shadow-glow-primary);
+ box-shadow: var(--glow-primary);
+ border-radius: var(--radius-sm);
+}
+
+.file-stamp {
+ position: absolute;
+ bottom: 150px;
+ left: 40px;
+ transform: rotate(-12deg);
+ border: 3px solid var(--classified-400);
+ color: var(--classified-400);
+ font-family: var(--font-mono);
+ font-size: var(--font-size-lg);
+ font-weight: var(--font-weight-bold);
+ padding: var(--spacing-sm) var(--spacing-lg);
+ letter-spacing: 0.15em;
+ opacity: 0.5;
+ pointer-events: none;
+ border-radius: var(--radius-sm);
+}
+
+/* ============================================
+ * ERROR CODE ASCII ART
+ * ============================================ */
+
+.error-code-ascii {
+ font-family: var(--font-mono);
+ font-size: 0.875rem;
+ line-height: 1.2;
+ color: var(--classified-500);
+ text-shadow: var(--glow-text-primary);
+ margin: var(--spacing-2xl) auto;
+ text-align: center;
+ overflow: hidden;
+ white-space: pre;
+ user-select: none;
+}
+
+/* ============================================
+ * DOCUMENT BODY
+ * ============================================ */
+
+.document-body {
+ margin-top: var(--spacing-2xl);
+ text-align: left;
+}
+
+.document-title {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-3xl);
+ font-weight: var(--font-weight-bold);
+ color: var(--color-text-primary);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ margin-bottom: var(--spacing-2xl);
+ text-align: center;
+ border-bottom: 2px solid var(--color-border-primary);
+ padding-bottom: var(--spacing-lg);
+}
+
+/* Document Sections */
+.document-section {
+ margin-bottom: var(--spacing-2xl);
+ padding: var(--spacing-lg);
+ background: rgba(220, 38, 38, 0.02);
+ border-left: 4px solid var(--color-border-primary);
+ border-radius: var(--radius-sm);
+}
+
+.section-header {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ margin-bottom: var(--spacing-md);
+}
+
+.section-marker {
+ color: var(--classified-500);
+ font-size: var(--font-size-lg);
+ font-weight: var(--font-weight-bold);
+}
+
+.section-title {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-lg);
+ font-weight: var(--font-weight-bold);
+ color: var(--color-text-primary);
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+}
+
+.document-text {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-base);
+ color: var(--color-text-secondary);
+ line-height: var(--line-height-relaxed);
+ margin-bottom: var(--spacing-md);
+ letter-spacing: 0.02em;
+}
+
+/* Document List */
+.document-list {
+ list-style: none;
+ padding: 0;
+ margin: var(--spacing-md) 0;
+}
+
+.document-list li {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-base);
+ color: var(--color-text-secondary);
+ padding: var(--spacing-sm) var(--spacing-md);
+ margin-bottom: var(--spacing-sm);
+ background: rgba(10, 10, 10, 0.5);
+ border-left: 3px solid var(--color-border-accent);
+ letter-spacing: 0.02em;
+}
+
+/* Redacted Text Effect */
+.redacted {
+ background: var(--gray-900);
+ color: var(--gray-900);
+ padding: 2px var(--spacing-sm);
+ margin: 0 var(--spacing-xs);
+ border: 1px solid var(--gray-800);
+ font-weight: var(--font-weight-bold);
+ user-select: none;
+ cursor: not-allowed;
+}
+
+/* ============================================
+ * DOCUMENT ACTIONS (Buttons)
+ * ============================================ */
+
+.document-actions {
+ display: flex;
+ gap: var(--spacing-lg);
+ justify-content: center;
+ margin-top: var(--spacing-3xl);
+ flex-wrap: wrap;
+}
+
+.action-btn {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-base);
+ font-weight: var(--font-weight-bold);
+ letter-spacing: 0.08em;
+ padding: var(--spacing-md) var(--spacing-xl);
+ border: 2px solid;
+ border-radius: var(--radius-sm);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ text-transform: uppercase;
+ user-select: none;
+}
+
+.btn-marker {
+ font-size: var(--font-size-lg);
+}
+
+.action-btn-primary {
+ background: var(--gradient-button);
+ border-color: var(--color-border-primary);
+ color: var(--color-text-primary);
+ box-shadow: var(--shadow-card);
+}
+
+.action-btn-primary:hover {
+ background: var(--gradient-button-hover);
+ box-shadow: var(--shadow-card-hover);
+ transform: translateY(-2px);
+}
+
+.action-btn-primary:active {
+ transform: translateY(0);
+}
+
+.action-btn-secondary {
+ background: transparent;
+ border-color: var(--color-border-accent);
+ color: var(--terminal-500);
+}
+
+.action-btn-secondary:hover {
+ background: rgba(34, 197, 94, 0.1);
+ box-shadow: var(--glow-accent);
+ transform: translateY(-2px);
+}
+
+.action-btn-secondary:active {
+ transform: translateY(0);
+}
+
+/* ============================================
+ * DOCUMENT FOOTER
+ * ============================================ */
+
+.document-footer {
+ margin-top: var(--spacing-3xl);
+ padding-top: var(--spacing-xl);
+ border-top: 2px solid var(--color-border-primary);
+}
+
+.footer-warning {
+ font-family: var(--font-mono);
+ font-size: var(--font-size-xs);
+ color: var(--color-text-muted);
+ text-align: center;
+ padding: var(--spacing-sm);
+ letter-spacing: 0.05em;
+ margin-top: var(--spacing-sm);
+}
+
+/* ============================================
+ * RESPONSIVE DESIGN
+ * ============================================ */
+
+@media (max-width: 768px) {
+ .classified-document {
+ padding: var(--spacing-xl) var(--spacing-lg);
+ }
+
+ .classified-stamp-container {
+ top: 80px;
+ right: 20px;
+ }
+
+ .classified-stamp {
+ font-size: var(--font-size-lg);
+ padding: var(--spacing-sm) var(--spacing-md);
+ }
+
+ .file-stamp {
+ bottom: 100px;
+ left: 20px;
+ font-size: var(--font-size-sm);
+ padding: var(--spacing-xs) var(--spacing-sm);
+ }
+
+ .error-code-ascii {
+ font-size: 0.625rem;
+ }
+
+ .document-title {
+ font-size: var(--font-size-2xl);
+ }
+
+ .document-actions {
+ flex-direction: column;
+ gap: var(--spacing-md);
+ }
+
+ .action-btn {
+ width: 100%;
+ justify-content: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .not-found-wrapper {
+ padding: var(--spacing-md);
+ }
+
+ .classified-document {
+ padding: var(--spacing-lg) var(--spacing-md);
+ }
+
+ .classified-stamp-container {
+ top: 60px;
+ right: 10px;
+ }
+
+ .classified-stamp {
+ font-size: var(--font-size-base);
+ padding: var(--spacing-xs) var(--spacing-sm);
+ border-width: 2px;
+ }
+
+ .file-stamp {
+ display: none; /* Hide on very small screens */
+ }
+
+ .error-code-ascii {
+ font-size: 0.5rem;
+ margin: var(--spacing-lg) 0;
+ }
+
+ .document-title {
+ font-size: var(--font-size-xl);
+ letter-spacing: 0.05em;
+ }
+
+ .section-title {
+ font-size: var(--font-size-base);
+ }
+
+ .document-text,
+ .document-list li {
+ font-size: var(--font-size-sm);
+ }
+
+ .action-btn {
+ font-size: var(--font-size-sm);
+ padding: var(--spacing-sm) var(--spacing-md);
+ }
+}
+
+/* ============================================
+ * ACCESSIBILITY
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ .action-btn:hover {
+ transform: none;
+ }
+}
+
+/* Focus states for keyboard navigation */
+.action-btn:focus-visible {
+ outline: 3px solid var(--color-border-accent);
+ outline-offset: 3px;
}
diff --git a/src/components/NotFound/NotFound.test.tsx b/src/components/NotFound/NotFound.test.tsx
index a85e608..055ca2b 100644
--- a/src/components/NotFound/NotFound.test.tsx
+++ b/src/components/NotFound/NotFound.test.tsx
@@ -1,37 +1,104 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
import NotFoundComponent from "./NotFound";
import { render, screen } from "../../test/testUtils";
-describe("NotFoundComponent", () => {
- it("renders 404 error message", () => {
+describe("NotFoundComponent - Classified Document Theme", () => {
+ it("renders 404 error code in ASCII art", () => {
render(
+
+ CLASSIFIED TRANSMISSION
+ █ ACTIVE
+
+
+ {/* ASCII Loading Animation */}
+
+
+
+
+ {`
+ ╔═══════════════════════════════════╗
+ ║ DECRYPTING FILES ║
+ ╚═══════════════════════════════════╝
+`}
+
+
+ {/* Morse Code Style Loading Bar */}
+
+
+
+ {/* Typewriter Loading Text */}
+
+
+
+
+
+
+
+
+ STATUS:
+ PROCESSING{dots}
+
+
+ {/* Progress Indicator */}
+
+
+
+
+
+
+ 0%
+ 25%
+ 50%
+ 75%
+ 100%
+
+
+ TOP SECRET // NOFORN
+
+
-
- Error: 404
-
- Page not found. Return to{" "}
- void navigate("/")}>home
+
- {isVisible && (
-
-
- )}
-
+
);
};
diff --git a/src/hooks/__tests__/useBlogIndex.test.ts b/src/hooks/__tests__/useBlogIndex.test.ts
new file mode 100644
index 0000000..68a7d85
--- /dev/null
+++ b/src/hooks/__tests__/useBlogIndex.test.ts
@@ -0,0 +1,59 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import * as blogService from "../../services/blogService";
+import { useBlogIndex } from "../useBlogIndex";
+
+vi.mock("../../services/blogService");
+
+describe("useBlogIndex", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should fetch blog index on mount", async () => {
+ const mockIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: {},
+ };
+
+ vi.spyOn(blogService, "fetchBlogIndex").mockResolvedValue(mockIndex);
+
+ const { result } = renderHook(() => useBlogIndex());
+
+ expect(result.current.loading).toBe(true);
+ expect(result.current.index).toBeNull();
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.index).toEqual(mockIndex);
+ expect(result.current.error).toBeNull();
+ });
+
+ it("should handle fetch errors", async () => {
+ const consoleErrorSpy = vi
+ .spyOn(console, "error")
+ .mockImplementation(() => {});
+
+ vi.spyOn(blogService, "fetchBlogIndex").mockRejectedValue(
+ new Error("Network error"),
+ );
+
+ const { result } = renderHook(() => useBlogIndex());
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.error).toBe("Failed to load blog index");
+ expect(result.current.index).toBeNull();
+
+ consoleErrorSpy.mockRestore();
+ });
+});
diff --git a/src/hooks/__tests__/useBlogPage.test.ts b/src/hooks/__tests__/useBlogPage.test.ts
new file mode 100644
index 0000000..c77ffbe
--- /dev/null
+++ b/src/hooks/__tests__/useBlogPage.test.ts
@@ -0,0 +1,110 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import * as blogService from "../../services/blogService";
+import { useBlogPage } from "../useBlogPage";
+
+vi.mock("../../services/blogService");
+
+describe("useBlogPage", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should fetch page data when enabled", async () => {
+ const mockPage = {
+ page: 1,
+ posts: [
+ {
+ slug: "test-post",
+ title: "Test Post",
+ classification: "UNCLASSIFIED",
+ abstract: "Test abstract",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ },
+ ],
+ };
+
+ vi.spyOn(blogService, "fetchPage").mockResolvedValue(mockPage);
+
+ const { result } = renderHook(() => useBlogPage(1, true));
+
+ expect(result.current.loading).toBe(true);
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.pageData).toEqual(mockPage);
+ expect(result.current.error).toBeNull();
+ });
+
+ it("should not fetch when disabled", () => {
+ vi.spyOn(blogService, "fetchPage");
+
+ renderHook(() => useBlogPage(1, false));
+
+ expect(blogService.fetchPage).not.toHaveBeenCalled();
+ });
+
+ it("should handle fetch errors", async () => {
+ const consoleErrorSpy = vi
+ .spyOn(console, "error")
+ .mockImplementation(() => {});
+
+ vi.spyOn(blogService, "fetchPage").mockRejectedValue(
+ new Error("Network error"),
+ );
+
+ const { result } = renderHook(() => useBlogPage(1, true));
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.error).toContain("Failed to load page");
+ expect(result.current.pageData).toBeNull();
+
+ consoleErrorSpy.mockRestore();
+ });
+
+ it("should refetch when page number changes", async () => {
+ const mockPage1 = { page: 1, posts: [] };
+ const mockPage2 = { page: 2, posts: [] };
+
+ const fetchPageSpy = vi
+ .spyOn(blogService, "fetchPage")
+ .mockResolvedValueOnce(mockPage1)
+ .mockResolvedValueOnce(mockPage2);
+
+ const { result, rerender } = renderHook(
+ ({ pageNum }) => useBlogPage(pageNum, true),
+ { initialProps: { pageNum: 1 } },
+ );
+
+ await waitFor(() => {
+ expect(result.current.pageData).toEqual(mockPage1);
+ });
+
+ rerender({ pageNum: 2 });
+
+ await waitFor(() => {
+ expect(result.current.pageData).toEqual(mockPage2);
+ });
+
+ expect(fetchPageSpy).toHaveBeenCalledTimes(2);
+ });
+
+ it("should cleanup on unmount", () => {
+ const mockPage = { page: 1, posts: [] };
+ vi.spyOn(blogService, "fetchPage").mockResolvedValue(mockPage);
+
+ const { unmount } = renderHook(() => useBlogPage(1, true));
+
+ unmount();
+
+ // Ensure no errors on unmount
+ expect(true).toBe(true);
+ });
+});
diff --git a/src/hooks/__tests__/useBlogPost.test.ts b/src/hooks/__tests__/useBlogPost.test.ts
new file mode 100644
index 0000000..756adbb
--- /dev/null
+++ b/src/hooks/__tests__/useBlogPost.test.ts
@@ -0,0 +1,165 @@
+import * as mdx from "@mdx-js/mdx";
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+import * as blogService from "../../services/blogService";
+import { useBlogPost } from "../useBlogPost";
+
+vi.mock("../../services/blogService");
+vi.mock("@mdx-js/mdx");
+
+describe("useBlogPost", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should fetch and compile blog post", async () => {
+ const mockMetadata = {
+ slug: "test-post",
+ title: "Test Post",
+ classification: "UNCLASSIFIED",
+ abstract: "Test abstract",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ };
+
+ const mockMDXContent = `---
+title: Test Post
+---
+
+# Test Content`;
+
+ const mockCompiledCode = "function() { return 'compiled'; }";
+ const mockMDXComponent = () => "Test Component";
+
+ vi.spyOn(blogService, "fetchPostMetadata").mockResolvedValue(mockMetadata);
+ vi.spyOn(blogService, "fetchPostContent").mockResolvedValue(mockMDXContent);
+ vi.spyOn(mdx, "compile").mockResolvedValue(mockCompiledCode as never);
+ vi.spyOn(mdx, "run").mockResolvedValue({
+ default: mockMDXComponent,
+ } as never);
+
+ const { result } = renderHook(() => useBlogPost("test-post"));
+
+ expect(result.current.loading).toBe(true);
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.metadata).toEqual(mockMetadata);
+ expect(result.current.MDXContent).toBeTruthy();
+ expect(result.current.error).toBeNull();
+ });
+
+ it("should handle missing slug", async () => {
+ const { result } = renderHook(() => useBlogPost(undefined));
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.error).toBe("No slug provided");
+ expect(result.current.metadata).toBeNull();
+ expect(result.current.MDXContent).toBeNull();
+ });
+
+ it("should handle missing metadata", async () => {
+ vi.spyOn(blogService, "fetchPostMetadata").mockResolvedValue(null);
+ vi.spyOn(blogService, "fetchPostContent").mockResolvedValue("content");
+
+ const { result } = renderHook(() => useBlogPost("nonexistent"));
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.error).toBe("Post not found");
+ expect(result.current.MDXContent).toBeNull();
+ });
+
+ it("should handle fetch errors", async () => {
+ const consoleErrorSpy = vi
+ .spyOn(console, "error")
+ .mockImplementation(() => {});
+
+ vi.spyOn(blogService, "fetchPostMetadata").mockRejectedValue(
+ new Error("Network error"),
+ );
+
+ const { result } = renderHook(() => useBlogPost("test-post"));
+
+ await waitFor(() => {
+ expect(result.current.loading).toBe(false);
+ });
+
+ expect(result.current.error).toBe("Failed to load post");
+ expect(result.current.MDXContent).toBeNull();
+
+ consoleErrorSpy.mockRestore();
+ });
+
+ it("should cleanup on unmount", () => {
+ const mockMetadata = {
+ slug: "test-post",
+ title: "Test Post",
+ classification: "UNCLASSIFIED",
+ abstract: "Test abstract",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ };
+
+ vi.spyOn(blogService, "fetchPostMetadata").mockResolvedValue(mockMetadata);
+ vi.spyOn(blogService, "fetchPostContent").mockResolvedValue("# Content");
+ vi.spyOn(mdx, "compile").mockResolvedValue("code" as never);
+ vi.spyOn(mdx, "run").mockResolvedValue({
+ default: () => "Component",
+ } as never);
+
+ const { unmount } = renderHook(() => useBlogPost("test-post"));
+
+ unmount();
+
+ // Ensure no errors on unmount
+ expect(true).toBe(true);
+ });
+
+ it("should strip frontmatter from MDX content", async () => {
+ const mockMetadata = {
+ slug: "test-post",
+ title: "Test Post",
+ classification: "UNCLASSIFIED",
+ abstract: "Test abstract",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ };
+
+ const mockMDXContent = `---
+title: Test Post
+classification: UNCLASSIFIED
+---
+
+# Actual Content`;
+
+ const compileSpy = vi
+ .spyOn(mdx, "compile")
+ .mockResolvedValue("code" as never);
+
+ vi.spyOn(blogService, "fetchPostMetadata").mockResolvedValue(mockMetadata);
+ vi.spyOn(blogService, "fetchPostContent").mockResolvedValue(mockMDXContent);
+ vi.spyOn(mdx, "run").mockResolvedValue({
+ default: () => "Component",
+ } as never);
+
+ renderHook(() => useBlogPost("test-post"));
+
+ await waitFor(() => {
+ expect(compileSpy).toHaveBeenCalled();
+ });
+
+ // Verify frontmatter was stripped
+ const compiledContent = compileSpy.mock.calls[0][0] as string;
+ expect(compiledContent).not.toContain("---");
+ expect(compiledContent).toContain("# Actual Content");
+ });
+});
diff --git a/src/hooks/useBlogIndex.ts b/src/hooks/useBlogIndex.ts
new file mode 100644
index 0000000..a32537b
--- /dev/null
+++ b/src/hooks/useBlogIndex.ts
@@ -0,0 +1,30 @@
+import { useState, useEffect } from "react";
+
+import { fetchBlogIndex } from "../services/blogService";
+
+import type { BlogIndex } from "../types/blog";
+
+/**
+ * Custom hook to fetch and manage blog index
+ * Handles loading state and error handling
+ */
+export function useBlogIndex() {
+ const [index, setIndex] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ fetchBlogIndex()
+ .then((data) => {
+ setIndex(data);
+ setLoading(false);
+ })
+ .catch((err: unknown) => {
+ console.error("Error fetching blog index:", err);
+ setError("Failed to load blog index");
+ setLoading(false);
+ });
+ }, []);
+
+ return { index, loading, error };
+}
diff --git a/src/hooks/useBlogPage.ts b/src/hooks/useBlogPage.ts
new file mode 100644
index 0000000..cdfbef7
--- /dev/null
+++ b/src/hooks/useBlogPage.ts
@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+
+import { fetchPage } from "../services/blogService";
+
+import type { PageManifest } from "../types/blog";
+
+/**
+ * Custom hook to fetch a specific page of blog posts
+ * Refetches when page number changes
+ */
+export function useBlogPage(pageNumber: number, enabled: boolean = true) {
+ const [pageData, setPageData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!enabled) return;
+
+ let cancelled = false;
+
+ const loadPage = async () => {
+ if (!cancelled) {
+ setLoading(true);
+ setError(null);
+ }
+
+ try {
+ const data = await fetchPage(pageNumber);
+ if (!cancelled) {
+ setPageData(data);
+ setLoading(false);
+ }
+ } catch (err: unknown) {
+ if (!cancelled) {
+ console.error(`Error fetching page ${String(pageNumber)}:`, err);
+ setError(`Failed to load page ${String(pageNumber)}`);
+ setLoading(false);
+ }
+ }
+ };
+
+ void loadPage();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [pageNumber, enabled]);
+
+ return { pageData, loading, error };
+}
diff --git a/src/hooks/useBlogPost.ts b/src/hooks/useBlogPost.ts
new file mode 100644
index 0000000..93741e9
--- /dev/null
+++ b/src/hooks/useBlogPost.ts
@@ -0,0 +1,101 @@
+import { compile, run } from "@mdx-js/mdx";
+import { useEffect, useState } from "react";
+import * as runtime from "react/jsx-runtime";
+
+import { fetchPostContent, fetchPostMetadata } from "../services/blogService";
+
+import type { BlogMetadata } from "../types/blog";
+
+// Type for MDX components that can be passed to compiled MDX
+interface MDXContentProps {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ components?: Record>;
+}
+
+/**
+ * Custom hook to fetch and compile a blog post from MDX
+ * Handles metadata fetching, MDX compilation, and error states
+ */
+export function useBlogPost(slug: string | undefined) {
+ const [MDXContent, setMDXContent] =
+ useState | null>(null);
+ const [metadata, setMetadata] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ const loadPost = async () => {
+ if (!slug) {
+ if (!cancelled) {
+ setLoading(false);
+ setError("No slug provided");
+ }
+ return;
+ }
+
+ if (!cancelled) {
+ setLoading(true);
+ setError(null);
+ }
+
+ try {
+ const [meta, mdxSource] = await Promise.all([
+ fetchPostMetadata(slug),
+ fetchPostContent(slug),
+ ]);
+
+ if (!meta) {
+ if (!cancelled) {
+ setError("Post not found");
+ setLoading(false);
+ }
+ return;
+ }
+
+ // Strip frontmatter from MDX content (everything between --- markers)
+ const contentWithoutFrontmatter = mdxSource.replace(
+ /^---\n.*?\n---\n/s,
+ "",
+ );
+
+ // Compile MDX to JavaScript
+ const code = String(
+ await compile(contentWithoutFrontmatter, {
+ outputFormat: "function-body",
+ development: false,
+ }),
+ );
+
+ // Execute compiled code and get component
+ const { default: Content } = await run(code, {
+ ...runtime,
+ baseUrl: import.meta.url,
+ });
+
+ // Update state only if not cancelled
+ if (!cancelled) {
+ setMetadata(meta);
+ // Type assertion since MDX runtime returns a component accepting our props
+ setMDXContent(() => Content as React.ComponentType);
+ setLoading(false);
+ }
+ } catch (err: unknown) {
+ if (!cancelled) {
+ console.error("Error loading post:", err);
+ setError("Failed to load post");
+ setLoading(false);
+ }
+ }
+ };
+
+ void loadPost();
+
+ return () => {
+ cancelled = true;
+ };
+ }, [slug]);
+
+ return { MDXContent, metadata, loading, error };
+}
diff --git a/src/index.css b/src/index.css
index 87866d3..4d722b9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,6 @@
+/* Import centralized theme variables */
+@import "./theme-variables.css";
+
/* Reset and base styles */
* {
box-sizing: border-box;
@@ -42,41 +45,10 @@ body {
* - Code snippets
* - Technical information
* - Version numbers
+ *
+ * Note: All typography variables are now defined in theme-variables.css
*/
-/* CSS Variables for Typography */
-:root {
- /* Font Families */
- --font-serif: "Crimson Pro", Georgia, serif;
- --font-sans:
- "Space Grotesk", "Red Hat Display", system-ui, -apple-system, sans-serif;
- --font-display: "Red Hat Display", system-ui, -apple-system, sans-serif;
- --font-mono: "JetBrains Mono", "Red Hat Mono", "Courier New", monospace;
-
- /* Font Weights */
- --font-weight-light: 300;
- --font-weight-normal: 400;
- --font-weight-medium: 500;
- --font-weight-semibold: 600;
- --font-weight-bold: 700;
-
- /* Font Sizes */
- --font-size-xs: 0.75rem;
- --font-size-sm: 0.875rem;
- --font-size-base: 1rem;
- --font-size-lg: 1.125rem;
- --font-size-xl: 1.25rem;
- --font-size-2xl: 1.5rem;
- --font-size-3xl: 1.875rem;
- --font-size-4xl: 2.25rem;
-
- /* Line Heights */
- --line-height-tight: 1.25;
- --line-height-normal: 1.5;
- --line-height-relaxed: 1.75;
- --line-height-loose: 2;
-}
-
/* Legacy typography utilities (maintained for backwards compatibility) */
.text-mono {
font-family: var(--font-mono);
@@ -135,13 +107,13 @@ p {
/* Selection styling */
::selection {
- background: rgba(139, 92, 246, 0.3);
- color: #ffffff;
+ background: rgba(139, 92, 246, var(--opacity-30));
+ color: var(--white);
}
::-moz-selection {
- background: rgba(139, 92, 246, 0.3);
- color: #ffffff;
+ background: rgba(139, 92, 246, var(--opacity-30));
+ color: var(--white);
}
/* Custom scrollbar */
@@ -150,23 +122,23 @@ p {
}
::-webkit-scrollbar-track {
- background: rgba(17, 24, 39, 0.5);
+ background: rgba(17, 24, 39, var(--opacity-50));
}
::-webkit-scrollbar-thumb {
- background: linear-gradient(180deg, #8b5cf6 0%, #ec4899 100%);
+ background: var(--gradient-scrollbar);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
- background: linear-gradient(180deg, #9d73ff 0%, #ff5fab 100%);
+ background: var(--gradient-scrollbar-hover);
}
/* Focus styles for accessibility */
*:focus-visible {
- outline: 2px solid rgba(139, 92, 246, 0.6);
+ outline: 2px solid rgba(139, 92, 246, var(--opacity-60));
outline-offset: 2px;
- border-radius: 4px;
+ border-radius: var(--radius-sm);
}
/* Reduced motion for accessibility */
diff --git a/src/services/__tests__/blogService.test.ts b/src/services/__tests__/blogService.test.ts
new file mode 100644
index 0000000..9f93acf
--- /dev/null
+++ b/src/services/__tests__/blogService.test.ts
@@ -0,0 +1,370 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+import {
+ fetchBlogIndex,
+ fetchPage,
+ fetchPostMetadata,
+ fetchPostContent,
+ clearBlogCache,
+ getCacheStats,
+} from "../blogService";
+
+// Mock localStorage
+const localStorageMock = (() => {
+ let store: Record = {};
+
+ return {
+ getItem: (key: string) => store[key] || null,
+ setItem: (key: string, value: string) => {
+ store[key] = value;
+ },
+ removeItem: (key: string) => {
+ // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+ delete store[key];
+ },
+ clear: () => {
+ store = {};
+ },
+ key: (index: number) => Object.keys(store)[index] || null,
+ get length() {
+ return Object.keys(store).length;
+ },
+ // Add keys() method for Object.keys(localStorage)
+ keys: () => Object.keys(store),
+ };
+})();
+
+Object.defineProperty(globalThis, "localStorage", {
+ value: localStorageMock,
+ configurable: true,
+ writable: true,
+});
+
+// Mock Object.keys to work with localStorage
+const originalObjectKeys = Object.keys;
+vi.spyOn(Object, "keys").mockImplementation((obj: unknown) => {
+ if (obj === localStorageMock) {
+ return localStorageMock.keys();
+ }
+ return originalObjectKeys(obj as object);
+});
+
+// Mock fetch
+const mockFetch = vi.fn();
+globalThis.fetch = mockFetch as unknown as typeof fetch;
+
+describe("blogService", () => {
+ beforeEach(() => {
+ localStorageMock.clear();
+ vi.clearAllMocks();
+ });
+
+ describe("fetchBlogIndex", () => {
+ it("should fetch and cache blog index", async () => {
+ const mockIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: {},
+ };
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockIndex),
+ });
+
+ const result = await fetchBlogIndex();
+
+ expect(result).toEqual(mockIndex);
+ expect(mockFetch).toHaveBeenCalledWith(
+ expect.stringContaining("/manifests/index.json"),
+ { cache: "no-cache" },
+ );
+
+ // Verify caching
+ const cached = localStorageMock.getItem("blog-index-v1");
+ expect(cached).toBeTruthy();
+ });
+
+ it("should return cached data if available", async () => {
+ const mockIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: {},
+ };
+
+ // Set cache
+ localStorageMock.setItem(
+ "blog-index-v1",
+ JSON.stringify({
+ data: mockIndex,
+ timestamp: Date.now(),
+ }),
+ );
+
+ const result = await fetchBlogIndex();
+
+ expect(result).toEqual(mockIndex);
+ expect(mockFetch).not.toHaveBeenCalled();
+ });
+
+ it("should throw error on failed fetch", async () => {
+ mockFetch.mockResolvedValueOnce({
+ ok: false,
+ statusText: "Not Found",
+ });
+
+ await expect(fetchBlogIndex()).rejects.toThrow(
+ "Failed to fetch blog index",
+ );
+ });
+ });
+
+ describe("fetchPage", () => {
+ it("should fetch and cache page data", async () => {
+ const mockPage = {
+ page: 1,
+ posts: [],
+ };
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockPage),
+ });
+
+ const result = await fetchPage(1);
+
+ expect(result).toEqual(mockPage);
+ expect(mockFetch).toHaveBeenCalledWith(
+ expect.stringContaining("/manifests/page-1.json"),
+ { cache: "no-cache" },
+ );
+ });
+
+ it("should return cached page data", async () => {
+ const mockPage = {
+ page: 1,
+ posts: [],
+ };
+
+ localStorageMock.setItem(
+ "blog-page-1-v1",
+ JSON.stringify({
+ data: mockPage,
+ timestamp: Date.now(),
+ }),
+ );
+
+ const result = await fetchPage(1);
+
+ expect(result).toEqual(mockPage);
+ expect(mockFetch).not.toHaveBeenCalled();
+ });
+ });
+
+ describe("fetchPostMetadata", () => {
+ it("should fetch and cache post metadata", async () => {
+ const mockMetadata = {
+ slug: "test-post",
+ title: "Test Post",
+ classification: "UNCLASSIFIED",
+ abstract: "Test abstract",
+ publishDate: "2025-11-29",
+ version: "1.0",
+ };
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockMetadata),
+ });
+
+ const result = await fetchPostMetadata("test-post");
+
+ expect(result).toEqual(mockMetadata);
+ });
+
+ it("should return null on 404", async () => {
+ mockFetch.mockResolvedValueOnce({
+ ok: false,
+ });
+
+ const result = await fetchPostMetadata("nonexistent");
+
+ expect(result).toBeNull();
+ });
+
+ it("should return null on fetch error", async () => {
+ const consoleErrorSpy = vi
+ .spyOn(console, "error")
+ .mockImplementation(() => {});
+
+ mockFetch.mockRejectedValueOnce(new Error("Network error"));
+
+ const result = await fetchPostMetadata("test-post");
+
+ expect(result).toBeNull();
+
+ consoleErrorSpy.mockRestore();
+ });
+ });
+
+ describe("fetchPostContent", () => {
+ it("should fetch and cache post content", async () => {
+ const mockContent = "# Test Post\n\nContent here";
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ text: () => Promise.resolve(mockContent),
+ });
+
+ const result = await fetchPostContent("test-post");
+
+ expect(result).toBe(mockContent);
+ });
+
+ it("should throw error on failed fetch", async () => {
+ mockFetch.mockResolvedValueOnce({
+ ok: false,
+ statusText: "Not Found",
+ });
+
+ await expect(fetchPostContent("nonexistent")).rejects.toThrow(
+ "Failed to fetch post",
+ );
+ });
+ });
+
+ describe("clearBlogCache", () => {
+ it("should remove all blog-related cache entries", () => {
+ localStorageMock.setItem("blog-index-v1", "test");
+ localStorageMock.setItem("blog-page-1-v1", "test");
+ localStorageMock.setItem("other-key", "test");
+
+ clearBlogCache();
+
+ expect(localStorageMock.getItem("blog-index-v1")).toBeNull();
+ expect(localStorageMock.getItem("blog-page-1-v1")).toBeNull();
+ expect(localStorageMock.getItem("other-key")).toBe("test");
+ });
+ });
+
+ describe("getCacheStats", () => {
+ it("should return cache statistics", () => {
+ localStorageMock.setItem("blog-index-v1", "test1");
+ localStorageMock.setItem("blog-page-1-v1", "test2");
+ localStorageMock.setItem("other-key", "test3");
+
+ const stats = getCacheStats();
+
+ expect(stats.totalEntries).toBe(2);
+ expect(stats.entries).toEqual(["blog-index-v1", "blog-page-1-v1"]);
+ expect(stats.totalSize).toBeGreaterThan(0);
+ });
+ });
+
+ describe("cache expiration", () => {
+ it("should ignore expired cache entries", async () => {
+ const mockIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: {},
+ };
+
+ // Set expired cache (6 minutes ago)
+ const sixMinutesAgo = Date.now() - 6 * 60 * 1000;
+ localStorageMock.setItem(
+ "blog-index-v1",
+ JSON.stringify({
+ data: mockIndex,
+ timestamp: sixMinutesAgo,
+ }),
+ );
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockIndex),
+ });
+
+ await fetchBlogIndex();
+
+ // Should fetch fresh data
+ expect(mockFetch).toHaveBeenCalled();
+ });
+ });
+
+ describe("cache error handling", () => {
+ it("should handle corrupted cache data gracefully", async () => {
+ const consoleErrorSpy = vi
+ .spyOn(console, "error")
+ .mockImplementation(() => {});
+
+ // Set corrupted cache
+ localStorageMock.setItem("blog-index-v1", "invalid json{");
+
+ const mockIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: {},
+ };
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockIndex),
+ });
+
+ const result = await fetchBlogIndex();
+
+ expect(result).toEqual(mockIndex);
+ expect(consoleErrorSpy).toHaveBeenCalled();
+
+ consoleErrorSpy.mockRestore();
+ });
+
+ it("should handle localStorage write errors gracefully", async () => {
+ const consoleErrorSpy = vi
+ .spyOn(console, "error")
+ .mockImplementation(() => {});
+
+ // Mock setItem to throw error
+ const originalSetItem = localStorageMock.setItem;
+ localStorageMock.setItem = () => {
+ throw new Error("QuotaExceededError");
+ };
+
+ const mockIndex = {
+ version: "2025-11-29",
+ totalPosts: 2,
+ totalPages: 1,
+ postsPerPage: 50,
+ latestPosts: [],
+ pages: {},
+ };
+
+ mockFetch.mockResolvedValueOnce({
+ ok: true,
+ json: () => Promise.resolve(mockIndex),
+ });
+
+ const result = await fetchBlogIndex();
+
+ // Should still return data even if caching fails
+ expect(result).toEqual(mockIndex);
+ expect(consoleErrorSpy).toHaveBeenCalled();
+
+ // Restore
+ localStorageMock.setItem = originalSetItem;
+ consoleErrorSpy.mockRestore();
+ });
+ });
+});
diff --git a/src/services/blogService.ts b/src/services/blogService.ts
new file mode 100644
index 0000000..c39dc86
--- /dev/null
+++ b/src/services/blogService.ts
@@ -0,0 +1,220 @@
+/**
+ * Blog Service
+ *
+ * Fetches blog content from the GitHub blog branch via raw content API.
+ * Implements localStorage caching with configurable TTL.
+ * No authentication required (public repository).
+ */
+
+import type {
+ BlogIndex,
+ BlogMetadata,
+ PageManifest,
+ CacheEntry,
+} from "../types/blog";
+
+// Configuration
+const REPO = "cagesthrottleus/cagesthrottleus.github.io";
+const BLOG_BRANCH = "blog";
+const BASE_URL = `https://raw.githubusercontent.com/${REPO}/${BLOG_BRANCH}`;
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
+
+/**
+ * Get cached data from localStorage
+ */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
+function getCached(key: string): T | null {
+ try {
+ const cached = localStorage.getItem(key);
+ if (!cached) return null;
+
+ const entry = JSON.parse(cached) as CacheEntry;
+
+ // Check if cache is expired
+ if (Date.now() - entry.timestamp > CACHE_DURATION) {
+ localStorage.removeItem(key);
+ return null;
+ }
+
+ return entry.data;
+ } catch (error) {
+ console.error(`Error reading cache for ${key}:`, error);
+ return null;
+ }
+}
+
+/**
+ * Set data in localStorage cache
+ */
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters
+function setCache(key: string, data: T): void {
+ try {
+ const entry: CacheEntry = {
+ data,
+ timestamp: Date.now(),
+ };
+ localStorage.setItem(key, JSON.stringify(entry));
+ } catch (error) {
+ console.error(`Error setting cache for ${key}:`, error);
+ // Don't throw - caching is optional
+ }
+}
+
+/**
+ * Fetch blog index manifest
+ * Contains metadata about all posts, total count, and page links
+ */
+export async function fetchBlogIndex(): Promise {
+ const cacheKey = "blog-index-v1";
+
+ // Try cache first
+ const cached = getCached(cacheKey);
+ if (cached) {
+ return cached;
+ }
+
+ // Fetch from GitHub
+ const response = await fetch(`${BASE_URL}/manifests/index.json`, {
+ cache: "no-cache", // Bypass browser cache, use our localStorage
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch blog index: ${response.statusText}`);
+ }
+
+ const data = (await response.json()) as BlogIndex;
+ setCache(cacheKey, data);
+ return data;
+}
+
+/**
+ * Fetch a specific page of blog posts
+ */
+export async function fetchPage(pageNum: number): Promise {
+ const cacheKey = `blog-page-${String(pageNum)}-v1`;
+
+ // Try cache first
+ const cached = getCached(cacheKey);
+ if (cached) {
+ return cached;
+ }
+
+ // Fetch from GitHub
+ const response = await fetch(
+ `${BASE_URL}/manifests/page-${String(pageNum)}.json`,
+ {
+ cache: "no-cache",
+ },
+ );
+
+ if (!response.ok) {
+ throw new Error(
+ `Failed to fetch page ${String(pageNum)}: ${response.statusText}`,
+ );
+ }
+
+ const data = (await response.json()) as PageManifest;
+ setCache(cacheKey, data);
+ return data;
+}
+
+/**
+ * Fetch metadata for a specific post
+ */
+export async function fetchPostMetadata(
+ slug: string,
+): Promise {
+ const cacheKey = `blog-metadata-${slug}-v1`;
+
+ // Try cache first
+ const cached = getCached(cacheKey);
+ if (cached) {
+ return cached;
+ }
+
+ // Fetch from GitHub
+ try {
+ const response = await fetch(
+ `${BASE_URL}/manifests/metadata/${slug}.json`,
+ {
+ cache: "no-cache",
+ },
+ );
+
+ if (!response.ok) {
+ return null;
+ }
+
+ const data = (await response.json()) as BlogMetadata;
+ setCache(cacheKey, data);
+ return data;
+ } catch (error) {
+ console.error(`Error fetching metadata for ${slug}:`, error);
+ return null;
+ }
+}
+
+/**
+ * Fetch MDX content for a specific post
+ */
+export async function fetchPostContent(slug: string): Promise {
+ const cacheKey = `blog-content-${slug}-v1`;
+
+ // Try cache first
+ const cached = getCached(cacheKey);
+ if (cached) {
+ return cached;
+ }
+
+ // Fetch from GitHub
+ const response = await fetch(`${BASE_URL}/posts/${slug}.mdx`, {
+ cache: "no-cache",
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch post ${slug}: ${response.statusText}`);
+ }
+
+ const content = await response.text();
+ setCache(cacheKey, content);
+ return content;
+}
+
+/**
+ * Clear all blog-related caches
+ * Useful for forcing a refresh
+ */
+export function clearBlogCache(): void {
+ const keys = Object.keys(localStorage);
+ keys.forEach((key) => {
+ if (key.startsWith("blog-")) {
+ localStorage.removeItem(key);
+ }
+ });
+}
+
+/**
+ * Get cache statistics for debugging
+ */
+export function getCacheStats(): {
+ totalEntries: number;
+ totalSize: number;
+ entries: string[];
+} {
+ const keys = Object.keys(localStorage);
+ const blogKeys = keys.filter((key) => key.startsWith("blog-"));
+
+ let totalSize = 0;
+ blogKeys.forEach((key) => {
+ const item = localStorage.getItem(key);
+ if (item) {
+ totalSize += item.length;
+ }
+ });
+
+ return {
+ totalEntries: blogKeys.length,
+ totalSize,
+ entries: blogKeys,
+ };
+}
diff --git a/src/theme-variables.css b/src/theme-variables.css
new file mode 100644
index 0000000..96b3164
--- /dev/null
+++ b/src/theme-variables.css
@@ -0,0 +1,451 @@
+/**
+ * THEME VARIABLES
+ *
+ * Centralized color palette, gradients, and typography system
+ * for the entire application. This ensures visual consistency
+ * and makes theme changes easier to manage.
+ *
+ * Organization:
+ * 1. Base Colors (Solid colors)
+ * 2. Color Aliases (Semantic naming)
+ * 3. Gradients (Linear and Radial)
+ * 4. Typography (Fonts, Sizes, Weights)
+ * 5. Effects (Shadows, Glows, Filters)
+ * 6. Spacing & Layout
+ */
+
+:root {
+ /* ============================================
+ * 1. BASE COLORS
+ * Pure color values used throughout the app
+ * Cold War Classified Documents + Modern Vibrant Theme
+ * ============================================ */
+
+ /* Primary Palette - CLASSIFIED Red Stamps */
+ --classified-400: #ff3838;
+ --classified-500: #dc2626;
+ --classified-600: rgba(220, 38, 38, 1);
+
+ /* Accent Palette - CRT Monitor Green */
+ --terminal-400: #4ade80;
+ --terminal-500: #22c55e;
+ --terminal-600: rgba(34, 197, 94, 1);
+
+ /* Secondary Palette - Cold Steel Blue */
+ --steel-400: #60a5fa;
+ --steel-500: #3b82f6;
+ --steel-600: rgba(59, 130, 246, 1);
+
+ /* Tertiary Palette - Warning Amber */
+ --warning-400: #fbbf24;
+ --warning-500: #f59e0b;
+ --warning-600: rgba(245, 158, 11, 1);
+ --gold: #ffd700;
+
+ /* Grayscale - Cold War Intelligence Gray */
+ --white: #ffffff;
+ --gray-50: #f5f5f5;
+ --gray-200: #e8e8e8;
+ --gray-300: #d4d4d4;
+ --gray-400: #a3a3a3;
+ --gray-500: #737373;
+ --gray-600: #525252;
+ --gray-700: #404040;
+ --gray-800: #2a2a2a;
+ --gray-900: #1a1a1a;
+
+ /* Background Colors - Darkest Intelligence Files */
+ --dark-primary: #0a0a0a;
+ --dark-secondary: #121212;
+ --dark-tertiary: rgba(10, 10, 10, 1);
+ --black: rgba(0, 0, 0, 1);
+
+ /* ============================================
+ * 2. COLOR ALIASES (Semantic Naming)
+ * Use these for consistent UI elements
+ * ============================================ */
+
+ --color-primary: var(--classified-500);
+ --color-accent: var(--terminal-500);
+ --color-text-primary: var(--white);
+ --color-text-secondary: var(--gray-200);
+ --color-text-muted: var(--gray-400);
+ --color-border-primary: rgba(220, 38, 38, 0.4);
+ --color-border-accent: rgba(34, 197, 94, 0.4);
+
+ /* ============================================
+ * 3. GRADIENTS
+ * Linear and radial gradient patterns
+ * Cold War Classified + Modern Vibrant Theme
+ * ============================================ */
+
+ /* Linear Gradients - Directional */
+ --gradient-primary: linear-gradient(135deg, #dc2626 0%, #3b82f6 100%);
+ --gradient-accent: linear-gradient(135deg, #22c55e 0%, #f59e0b 100%);
+ --gradient-purple-pink: linear-gradient(135deg, #dc2626, #22c55e, #f59e0b);
+ --gradient-vertical-dark: linear-gradient(
+ 180deg,
+ #0a0a0a 0%,
+ #121212 50%,
+ #0a0a0a 100%
+ );
+ --gradient-header: linear-gradient(
+ to bottom,
+ rgba(10, 10, 10, 0.95),
+ rgba(10, 10, 10, 0.85)
+ );
+ --gradient-footer: linear-gradient(
+ to top,
+ rgba(10, 10, 10, 0.95),
+ rgba(10, 10, 10, 0.85)
+ );
+ --gradient-scrollbar: linear-gradient(180deg, #dc2626 0%, #22c55e 100%);
+ --gradient-scrollbar-hover: linear-gradient(180deg, #ff3838 0%, #4ade80 100%);
+ --gradient-reading-progress: linear-gradient(
+ 90deg,
+ #dc2626 0%,
+ #22c55e 50%,
+ #f59e0b 100%
+ );
+
+ /* Card & Component Gradients */
+ --gradient-card: linear-gradient(
+ 135deg,
+ rgba(220, 38, 38, 0.1) 0%,
+ rgba(59, 130, 246, 0.1) 100%
+ );
+ --gradient-company-bg: linear-gradient(
+ 135deg,
+ rgba(220, 38, 38, 0.25) 0%,
+ rgba(59, 130, 246, 0.25) 100%
+ );
+ --gradient-position-bg: linear-gradient(
+ 135deg,
+ rgba(34, 197, 94, 0.12) 0%,
+ rgba(245, 158, 11, 0.12) 100%
+ );
+ --gradient-position-hover: linear-gradient(
+ 135deg,
+ rgba(34, 197, 94, 0.08) 0%,
+ rgba(245, 158, 11, 0.08) 100%
+ );
+ --gradient-button: linear-gradient(
+ 135deg,
+ rgba(220, 38, 38, 0.25) 0%,
+ rgba(59, 130, 246, 0.25) 100%
+ );
+ --gradient-button-hover: linear-gradient(
+ 135deg,
+ rgba(220, 38, 38, 0.4) 0%,
+ rgba(59, 130, 246, 0.4) 100%
+ );
+ --gradient-shine: linear-gradient(
+ 90deg,
+ transparent 0%,
+ rgba(255, 255, 255, 0.1) 50%,
+ transparent 100%
+ );
+
+ /* Radial Gradients - Vibrant Intelligence Glows */
+ --gradient-glow-purple: radial-gradient(
+ circle,
+ rgba(220, 38, 38, 0.15) 0%,
+ transparent 70%
+ );
+ --gradient-glow-pink: radial-gradient(
+ circle,
+ rgba(34, 197, 94, 0.12) 0%,
+ transparent 70%
+ );
+ --gradient-glow-blue: radial-gradient(
+ circle,
+ rgba(59, 130, 246, 0.08) 0%,
+ transparent 50%
+ );
+ --gradient-glow-intro: radial-gradient(
+ circle,
+ rgba(220, 38, 38, 0.1) 0%,
+ transparent 70%
+ );
+ --gradient-cursor: radial-gradient(
+ circle,
+ rgba(255, 255, 255, 0.3) 0%,
+ rgba(255, 255, 255, 0.15) 50%,
+ rgba(255, 255, 255, 0.05) 100%
+ );
+
+ /* Complex Multi-stop Radials */
+ --gradient-link-glow: radial-gradient(
+ circle,
+ rgba(220, 38, 38, 0.2) 0%,
+ rgba(34, 197, 94, 0.15) 30%,
+ rgba(59, 130, 246, 0.1) 60%,
+ transparent 100%
+ );
+ --gradient-link-hover: radial-gradient(
+ circle,
+ rgba(220, 38, 38, 0.3) 0%,
+ rgba(34, 197, 94, 0.2) 25%,
+ rgba(59, 130, 246, 0.15) 50%,
+ rgba(245, 158, 11, 0.1) 75%,
+ transparent 100%
+ );
+
+ /* Background Ambient Gradients - Cold War Intelligence Atmosphere */
+ --gradient-ambient-purple: radial-gradient(
+ circle at 20% 30%,
+ rgba(220, 38, 38, 0.15) 0%,
+ transparent 50%
+ );
+ --gradient-ambient-pink: radial-gradient(
+ circle at 80% 70%,
+ rgba(34, 197, 94, 0.12) 0%,
+ transparent 50%
+ );
+ --gradient-ambient-blue: radial-gradient(
+ circle at 50% 50%,
+ rgba(59, 130, 246, 0.08) 0%,
+ transparent 50%
+ );
+ --gradient-ambient-orb-1: radial-gradient(
+ circle,
+ rgba(220, 38, 38, 0.15) 0%,
+ transparent 70%
+ );
+ --gradient-ambient-orb-2: radial-gradient(
+ circle,
+ rgba(34, 197, 94, 0.12) 0%,
+ transparent 70%
+ );
+
+ /* Grid Pattern - Typewriter Grid Lines */
+ --gradient-grid-line-vertical: linear-gradient(
+ rgba(220, 38, 38, 0.03) 1px,
+ transparent 1px
+ );
+ --gradient-grid-line-horizontal: linear-gradient(
+ 90deg,
+ rgba(220, 38, 38, 0.03) 1px,
+ transparent 1px
+ );
+
+ /* ============================================
+ * 4. TYPOGRAPHY SYSTEM
+ * Font families, sizes, weights, and line heights
+ * ============================================ */
+
+ /* Font Families */
+ --font-serif: "Crimson Pro", Georgia, serif;
+ --font-sans:
+ "Space Grotesk", "Red Hat Display", system-ui, -apple-system, sans-serif;
+ --font-display: "Red Hat Display", system-ui, -apple-system, sans-serif;
+ --font-mono: "JetBrains Mono", "Red Hat Mono", "Courier New", monospace;
+ --font-special: "Bitcount Single Ink", system-ui;
+
+ /* Font Weights */
+ --font-weight-light: 300;
+ --font-weight-normal: 400;
+ --font-weight-medium: 500;
+ --font-weight-semibold: 600;
+ --font-weight-bold: 700;
+
+ /* Font Sizes */
+ --font-size-xs: 0.75rem; /* 12px */
+ --font-size-sm: 0.875rem; /* 14px */
+ --font-size-base: 1rem; /* 16px */
+ --font-size-lg: 1.125rem; /* 18px */
+ --font-size-xl: 1.25rem; /* 20px */
+ --font-size-2xl: 1.5rem; /* 24px */
+ --font-size-3xl: 1.875rem; /* 30px */
+ --font-size-4xl: 2.25rem; /* 36px */
+
+ /* Line Heights */
+ --line-height-tight: 1.25;
+ --line-height-normal: 1.5;
+ --line-height-relaxed: 1.75;
+ --line-height-loose: 2;
+
+ /* ============================================
+ * 5. EFFECTS (Shadows, Glows, Filters)
+ * Reusable shadow and glow patterns
+ * Cold War Classified + Modern Vibrant Theme
+ * ============================================ */
+
+ /* Box Shadows - Depth */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+ --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+
+ /* Glow Effects - Vibrant Intelligence Glows */
+ --glow-primary:
+ 0 0 20px rgba(220, 38, 38, 0.4), 0 0 40px rgba(220, 38, 38, 0.2);
+ --glow-accent:
+ 0 0 20px rgba(34, 197, 94, 0.4), 0 0 40px rgba(34, 197, 94, 0.2);
+ --glow-text-primary:
+ 0 0 10px rgba(220, 38, 38, 0.6), 0 0 20px rgba(220, 38, 38, 0.4);
+ --glow-text-accent:
+ 0 0 10px rgba(34, 197, 94, 0.6), 0 0 20px rgba(34, 197, 94, 0.4);
+ --glow-cursor:
+ 0 0 10px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1);
+
+ /* Complex Multi-layer Shadows */
+ --shadow-header:
+ 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(220, 38, 38, 0.1),
+ inset 0 -1px 0 0 rgba(220, 38, 38, 0.2);
+ --shadow-footer:
+ 0 -4px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(220, 38, 38, 0.1),
+ inset 0 1px 0 0 rgba(220, 38, 38, 0.2);
+ --shadow-card:
+ 0 0 20px rgba(220, 38, 38, 0.1), inset 0 0 60px rgba(220, 38, 38, 0.02);
+ --shadow-card-hover:
+ 0 0 2px rgba(220, 38, 38, 0.6), 0 0 40px rgba(220, 38, 38, 0.3),
+ 0 0 80px rgba(34, 197, 94, 0.2), 0 20px 60px rgba(59, 130, 246, 0.15),
+ inset 0 0 60px rgba(220, 38, 38, 0.05);
+ --shadow-company-name:
+ 0 0 40px rgba(220, 38, 38, 0.2), inset 0 0 40px rgba(220, 38, 38, 0.1);
+ --shadow-position-header:
+ 0 0 20px rgba(34, 197, 94, 0.15), inset 0 0 40px rgba(34, 197, 94, 0.05);
+ --shadow-position-hover:
+ 0 0 30px rgba(34, 197, 94, 0.25), 0 0 60px rgba(245, 158, 11, 0.15),
+ inset 0 0 40px rgba(34, 197, 94, 0.08);
+ --shadow-logo:
+ 0 0 0 0.25rem rgba(220, 38, 38, 0.3), 0 0 20px rgba(220, 38, 38, 0.4),
+ 0 4px 20px rgba(0, 0, 0, 0.3);
+ --shadow-logo-hover:
+ 0 0 0 0.35rem rgba(220, 38, 38, 0.5), 0 0 30px rgba(220, 38, 38, 0.6),
+ 0 8px 28px rgba(0, 0, 0, 0.4);
+ --shadow-spinner:
+ 0 0 20px rgba(220, 38, 38, 0.5), 0 0 40px rgba(34, 197, 94, 0.3);
+ --shadow-spinner-inner:
+ 0 0 20px rgba(245, 158, 11, 0.5), 0 0 40px rgba(59, 130, 246, 0.3);
+ --shadow-scroll-button:
+ 0 0 20px rgba(220, 38, 38, 0.5), 0 0 40px rgba(220, 38, 38, 0.3),
+ 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(220, 38, 38, 0.2);
+ --shadow-scroll-button-hover:
+ 0 0 30px rgba(220, 38, 38, 0.8), 0 0 60px rgba(220, 38, 38, 0.5),
+ 0 0 100px rgba(34, 197, 94, 0.3), 0 12px 40px rgba(0, 0, 0, 0.4),
+ inset 0 0 30px rgba(220, 38, 38, 0.3);
+ --shadow-intro-content:
+ 0 0 30px rgba(220, 38, 38, 0.15), inset 0 0 60px rgba(220, 38, 38, 0.05);
+
+ /* Text Shadows */
+ --text-shadow-glow-primary: 0 0 30px rgba(220, 38, 38, 0.5);
+ --text-shadow-glow-accent:
+ 0 0 15px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.5);
+ --text-shadow-link-hover:
+ 0 0 10px rgba(34, 197, 94, 0.6), 0 0 20px rgba(34, 197, 94, 0.4);
+ --text-shadow-header-hover:
+ 0 0 10px rgba(220, 38, 38, 0.6), 0 0 20px rgba(220, 38, 38, 0.4);
+ --text-shadow-loading: 0 0 10px rgba(220, 38, 38, 0.5);
+
+ /* Drop Shadows (for SVG/Icons) */
+ --drop-shadow-primary: drop-shadow(0 0 10px rgba(220, 38, 38, 0.4));
+ --drop-shadow-primary-hover: drop-shadow(0 0 20px rgba(220, 38, 38, 0.6));
+ --drop-shadow-accent: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
+ --drop-shadow-heart: drop-shadow(0 0 8px rgba(34, 197, 94, 0.4));
+ --drop-shadow-intro-name: drop-shadow(0 0 20px rgba(220, 38, 38, 0.3));
+ --drop-shadow-strong: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
+
+ /* Backdrop Filters */
+ --backdrop-blur-sm: blur(10px);
+ --backdrop-blur-md: blur(20px);
+
+ /* ============================================
+ * 6. SPACING & LAYOUT
+ * Common spacing values
+ * ============================================ */
+
+ --spacing-xs: 0.25rem; /* 4px */
+ --spacing-sm: 0.5rem; /* 8px */
+ --spacing-md: 1rem; /* 16px */
+ --spacing-lg: 1.5rem; /* 24px */
+ --spacing-xl: 2rem; /* 32px */
+ --spacing-2xl: 3rem; /* 48px */
+ --spacing-3xl: 4rem; /* 64px */
+
+ /* Border Radius */
+ --radius-xs: 0.125rem; /* 2px */
+ --radius-sm: 0.25rem; /* 4px */
+ --radius-md: 0.5rem; /* 8px */
+ --radius-lg: 1rem; /* 16px */
+ --radius-xl: 1.25rem; /* 20px */
+ --radius-full: 50%;
+
+ /* Border Widths */
+ --border-width-thin: 0.0625rem; /* 1px */
+ --border-width-normal: 0.125rem; /* 2px */
+ --border-width-medium: 0.1875rem; /* 3px */
+ --border-width-thick: 0.25rem; /* 4px */
+
+ /* Container Max-Widths */
+ --container-sm: 37.5rem; /* 600px */
+ --container-md: 56.25rem; /* 900px */
+ --container-lg: 75rem; /* 1200px */
+ --container-xl: 90rem; /* 1440px */
+
+ /* ============================================
+ * 7. OPACITY LEVELS
+ * Consistent opacity values
+ * ============================================ */
+
+ --opacity-0: 0;
+ --opacity-5: 0.05;
+ --opacity-10: 0.1;
+ --opacity-15: 0.15;
+ --opacity-20: 0.2;
+ --opacity-25: 0.25;
+ --opacity-30: 0.3;
+ --opacity-40: 0.4;
+ --opacity-50: 0.5;
+ --opacity-60: 0.6;
+ --opacity-70: 0.7;
+ --opacity-80: 0.8;
+ --opacity-85: 0.85;
+ --opacity-90: 0.9;
+ --opacity-95: 0.95;
+ --opacity-100: 1;
+
+ /* ============================================
+ * 8. ERROR PAGE / 404 THEME
+ * Specific variables for error states
+ * Cold War Classified + Modern Vibrant Theme
+ * ============================================ */
+
+ /* Error Colors - CLASSIFIED Red Alert */
+ --error-primary: #ff0000;
+ --error-secondary: #ff3838;
+ --error-glow: rgba(255, 0, 0, 0.6);
+ --error-shadow: 0 0 20px rgba(255, 0, 0, 0.4), 0 0 40px rgba(255, 0, 0, 0.2);
+
+ /* 404 Gradients */
+ --gradient-error: linear-gradient(
+ 135deg,
+ #ff0000 0%,
+ #dc2626 50%,
+ #3b82f6 100%
+ );
+ --gradient-error-text: linear-gradient(135deg, #ff0000, #ff3838, #dc2626);
+ --gradient-glitch: linear-gradient(
+ 90deg,
+ #ff0000 0%,
+ #22c55e 50%,
+ #dc2626 100%
+ );
+
+ /* Glitch Effects - Typewriter Misalignment + CRT Distortion */
+ --glitch-shadow-1: 2px 2px 0 #ff0000, -2px -2px 0 #22c55e;
+ --glitch-shadow-2: 3px 3px 0 #ff0000, -3px -3px 0 #22c55e, 1px 1px 0 #dc2626;
+ --glitch-text-shadow:
+ 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(34, 197, 94, 0.6);
+
+ /* Error Page Shadows */
+ --shadow-error-card:
+ 0 0 40px rgba(255, 0, 0, 0.2), 0 0 80px rgba(220, 38, 38, 0.15),
+ inset 0 0 60px rgba(255, 0, 0, 0.05);
+ --shadow-error-button:
+ 0 0 20px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.3);
+ --shadow-error-button-hover:
+ 0 0 30px rgba(255, 0, 0, 0.8), 0 0 60px rgba(220, 38, 38, 0.5);
+}
diff --git a/src/types/blog.ts b/src/types/blog.ts
new file mode 100644
index 0000000..9975202
--- /dev/null
+++ b/src/types/blog.ts
@@ -0,0 +1,32 @@
+/**
+ * Blog system type definitions
+ */
+
+export interface BlogMetadata {
+ slug: string;
+ title: string;
+ classification: string;
+ abstract: string;
+ publishDate: string; // YYYY-MM-DD format
+ version: string;
+ thumbnail?: string;
+}
+
+export interface BlogIndex {
+ version: string; // ISO 8601 timestamp
+ totalPosts: number;
+ totalPages: number;
+ postsPerPage: number;
+ latestPosts: BlogMetadata[]; // Preview of latest 10 posts
+ pages: Record; // Page number to manifest URL mapping
+}
+
+export interface PageManifest {
+ page: number;
+ posts: BlogMetadata[];
+}
+
+export interface CacheEntry {
+ data: T;
+ timestamp: number;
+}
diff --git a/test.sh b/test.sh
new file mode 100644
index 0000000..ca87024
--- /dev/null
+++ b/test.sh
@@ -0,0 +1,8 @@
+#! /bin/bash
+
+npm install
+
+npm run format
+npm run lint:fix
+npm test -- --run
+npm run build
\ No newline at end of file
+
);
}
diff --git a/src/components/ReadingProgress/ReadingProgress.css b/src/components/ReadingProgress/ReadingProgress.css
index c56edf2..7325e2d 100644
--- a/src/components/ReadingProgress/ReadingProgress.css
+++ b/src/components/ReadingProgress/ReadingProgress.css
@@ -8,21 +8,21 @@
left: 0;
right: 0;
height: 4px;
- background: rgba(10, 14, 39, 0.8);
- backdrop-filter: blur(10px);
+ background: rgba(10, 14, 39, var(--opacity-80));
+ backdrop-filter: var(--backdrop-blur-sm);
z-index: 9999;
overflow: hidden;
- border-bottom: 1px solid rgba(139, 92, 246, 0.2);
+ border-bottom: 1px solid rgba(139, 92, 246, var(--opacity-20));
}
.reading-progress-bar {
height: 100%;
- background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 50%, #f59e0b 100%);
+ background: var(--gradient-reading-progress);
transform-origin: 0%;
box-shadow:
- 0 0 15px rgba(139, 92, 246, 0.8),
- 0 0 30px rgba(236, 72, 153, 0.6),
- 0 0 50px rgba(245, 158, 11, 0.4);
+ 0 0 15px rgba(139, 92, 246, var(--opacity-80)),
+ 0 0 30px rgba(236, 72, 153, var(--opacity-60)),
+ 0 0 50px rgba(245, 158, 11, var(--opacity-40));
animation: neon-pulse 2s ease-in-out infinite;
}
@@ -30,15 +30,15 @@
0%,
100% {
box-shadow:
- 0 0 15px rgba(139, 92, 246, 0.8),
- 0 0 30px rgba(236, 72, 153, 0.6),
- 0 0 50px rgba(245, 158, 11, 0.4);
+ 0 0 15px rgba(139, 92, 246, var(--opacity-80)),
+ 0 0 30px rgba(236, 72, 153, var(--opacity-60)),
+ 0 0 50px rgba(245, 158, 11, var(--opacity-40));
}
50% {
box-shadow:
- 0 0 20px rgba(139, 92, 246, 1),
- 0 0 40px rgba(236, 72, 153, 0.8),
- 0 0 60px rgba(245, 158, 11, 0.6);
+ 0 0 20px rgba(139, 92, 246, var(--opacity-100)),
+ 0 0 40px rgba(236, 72, 153, var(--opacity-80)),
+ 0 0 60px rgba(245, 158, 11, var(--opacity-60));
}
}
@@ -47,12 +47,12 @@
0%,
100% {
box-shadow:
- 0 0 10px rgba(139, 92, 246, 0.6),
- 0 0 20px rgba(236, 72, 153, 0.4);
+ 0 0 10px rgba(139, 92, 246, var(--opacity-60)),
+ 0 0 20px rgba(236, 72, 153, var(--opacity-40));
}
50% {
box-shadow:
- 0 0 15px rgba(139, 92, 246, 0.8),
- 0 0 30px rgba(236, 72, 153, 0.6);
+ 0 0 15px rgba(139, 92, 246, var(--opacity-80)),
+ 0 0 30px rgba(236, 72, 153, var(--opacity-60));
}
}
diff --git a/src/components/ReadingProgress/ReadingProgress.test.tsx b/src/components/ReadingProgress/ReadingProgress.test.tsx
index 17e3752..eab0f23 100644
--- a/src/components/ReadingProgress/ReadingProgress.test.tsx
+++ b/src/components/ReadingProgress/ReadingProgress.test.tsx
@@ -38,4 +38,21 @@ describe("ReadingProgress", () => {
expect(progressBar).toBeInTheDocument();
});
+
+ it("shows progress bar after scrolling past threshold", async () => {
+ const { rerender } = render(
+
-
+
+
+
+ {/* CLASSIFIED Stamp */}
+ TOP SECRET // NOFORN
+
+ DOC-404-NFND
+
+ CLASSIFIED: {new Date().getFullYear()}
+
+
+
+
+
+ {/* Error Code as Document Number */}
+ CLASSIFIED
+
+ {`
+ ██╗ ██╗ ██████╗ ██╗ ██╗
+ ██║ ██║██╔═████╗██║ ██║
+ ███████║██║██╔██║███████║
+ ╚════██║████╔╝██║╚════██║
+ ██║╚██████╔╝ ██║
+ ╚═╝ ╚═════╝ ╚═╝
+`}
+
+
+ {/* Document Body */}
+
+
+
+ {/* Document Footer - Classification Markings */}
+ PAGE NOT FOUND
+ +
+
-
+
+
+
+ + The requested file could not be located in our archives. This file + may have been: +
+-
+
- + [REDACTED] RELOCATED TO SECURE + FACILITY + +
- + [REDACTED] DESTROYED PER + PROTOCOL + +
- + [REDACTED] NEVER EXISTED + (DISINFORMATION) + +
- + [REDACTED] ABOVE YOUR + CLEARANCE LEVEL + +
+
+
+ {/* Action Buttons styled as Document Actions */}
+
+
+ + You are advised to return to headquarters or review previous + briefing materials. +
+
+
+
+
+
+
+
+
+ {/* FILE NOT FOUND Stamp */}
+ TOP SECRET // NOFORN
+
+ UNAUTHORIZED DISCLOSURE SUBJECT TO CRIMINAL SANCTIONS
+
+ FILE NOT FOUND