-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathClassifiedDossier.jsx
More file actions
153 lines (135 loc) · 5.89 KB
/
ClassifiedDossier.jsx
File metadata and controls
153 lines (135 loc) · 5.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';
import piml from 'piml';
import { ArrowSquareOut, SealCheck } from '@phosphor-icons/react';
import GrainOverlay from '../../components/GrainOverlay';
import CoffeeStain from '../../components/CoffeeStain';
import CensoredPolaroid from '../../components/CensoredPolaroid';
const LinkRenderer = ({ href, children }) => {
const isExternal = href.startsWith('http') || href.startsWith('https');
return (
<a
href={href}
className="inline-block px-1 bg-black/5 hover:bg-black hover:text-white transition-all font-mono text-sm mx-0.5 rounded-sm"
target={isExternal ? '_blank' : undefined}
rel={isExternal ? 'noopener noreferrer' : undefined}
>
{children}{' '}
{isExternal && <ArrowSquareOut className="text-xs inline mb-1" />}
</a>
);
};
const ClassifiedDossier = () => {
const [content, setContent] = useState('');
const [title, setTitle] = useState('');
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchAboutContent = async () => {
try {
const [metaResponse, contentResponse] = await Promise.all([
fetch('/about-me/about.piml'),
fetch('/about-me/about.txt'),
]);
let attributes = {};
if (metaResponse.ok) {
const pimlText = await metaResponse.text();
attributes = piml.parse(pimlText);
}
let body = '';
if (contentResponse.ok) {
body = await contentResponse.text();
}
setTitle(attributes.title || 'About Me');
setContent(body);
} catch (err) {
console.error('Error fetching about page content:', err);
} finally {
setLoading(false);
}
};
fetchAboutContent();
}, []);
if (loading) {
return (
<div className="h-full bg-[#f3f3f3] flex items-center justify-center">
<div className="flex flex-col items-center gap-4">
<div className="w-12 h-12 border-4 border-black border-t-transparent animate-spin rounded-full" />
<span className="font-mono text-xs uppercase tracking-widest">
Retrieving Archive...
</span>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-[#f3f3f3] text-[#111] selection:bg-black selection:text-white custom-scrollbar font-sans relative">
<GrainOverlay />
<CoffeeStain />
{/* Top Secret Stamp / Decor */}
<div className="fixed top-0 right-0 p-8 opacity-10 pointer-events-none z-0">
<div className="border-4 border-black p-4 rounded-sm transform rotate-12">
<span className="text-6xl font-black uppercase tracking-widest font-mono">
CONFIDENTIAL
</span>
</div>
</div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: 'circOut' }}
className="max-w-4xl mx-auto px-6 py-24 md:py-32 relative z-10"
>
<CensoredPolaroid imageUrl="/images/herdaim.jpg" censored={true} />
<header className="mb-20">
<div className="flex flex-col items-start gap-4 mb-8">
<span className="bg-black text-white px-3 py-1 font-mono text-xs tracking-[0.3em] uppercase">
Fezcodex Archive // File #8942
</span>
<div className="w-24 h-1 bg-black"></div>
</div>
<h1 className="text-6xl md:text-8xl font-playfairDisplay font-medium tracking-tight text-black mb-6">
{title}
</h1>
<p className="font-mono text-sm text-gray-500 uppercase tracking-wide max-w-lg">
Subject is a Senior Software Engineer specializing in distributed
systems. Clearance Level: Maximum.
</p>
</header>
<article
className="prose prose-lg md:prose-xl max-w-none font-mono
prose-headings:font-playfairDisplay prose-headings:font-normal prose-headings:text-black prose-headings:uppercase prose-headings:tracking-widest prose-headings:text-sm prose-headings:mt-16 prose-headings:mb-6 prose-headings:border-b prose-headings:border-black prose-headings:pb-2
prose-p:font-mono prose-p:text-[#333] prose-p:leading-8 prose-p:mb-6
prose-strong:font-bold prose-strong:text-white prose-strong:bg-black prose-strong:px-1
prose-li:marker:text-black prose-li:font-mono
/* Table Styling - Clean & Redacted Vibe */
prose-table:w-full prose-table:border-collapse prose-table:font-mono prose-table:text-sm prose-table:my-8
prose-thead:bg-black prose-thead:text-white
prose-th:p-4 prose-th:uppercase prose-th:tracking-wider prose-th:font-normal prose-th:text-left prose-th:text-white
prose-td:p-4 prose-td:border-b prose-td:border-gray-300 prose-td:text-gray-700
prose-blockquote:border-l-4 prose-blockquote:border-black prose-blockquote:pl-6 prose-blockquote:italic prose-blockquote:bg-white prose-blockquote:p-6 prose-blockquote:shadow-sm"
>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw]}
components={{ a: LinkRenderer }}
>
{content}
</ReactMarkdown>
</article>
<footer className="mt-32 pt-12 border-t border-black flex flex-col md:flex-row justify-between items-center gap-6 font-mono text-xs uppercase tracking-widest text-gray-500">
<div className="flex items-center gap-2">
<SealCheck size={24} className="text-black" weight="fill" />
<span>Verified Record</span>
</div>
<div>
<span>Generated: {new Date().toLocaleDateString()}</span>
</div>
</footer>
</motion.div>
</div>
);
};
export default ClassifiedDossier;