const audioCtxRef = useRef(null);

const initAudio = useCallback(() => {

if (!audioCtxRef.current) {

audioCtxRef.current = new (

window.AudioContext || window.webkitAudioContext

)();

}

if (audioCtxRef.current.state === 'suspended') {

audioCtxRef.current.resume();

}

}, []);

const playTone = useCallback((freq, type, duration, vol = 0.1) => {

if (!audioCtxRef.current) return;

const osc = audioCtxRef.current.createOscillator();

const gain = audioCtxRef.current.createGain();

osc.type = type;

osc.frequency.setValueAtTime(freq, audioCtxRef.current.currentTime);

gain.gain.setValueAtTime(vol, audioCtxRef.current.currentTime);

gain.gain.exponentialRampToValueAtTime(

0.01,

audioCtxRef.current.currentTime + duration,

);

osc.connect(gain);

gain.connect(audioCtxRef.current.destination);

osc.start();

osc.stop(audioCtxRef.current.currentTime + duration);

}, []);

const playClick = useCallback(

() => playTone(800, 'square', 0.05, 0.05),

[playTone],

);

const playKeystroke = useCallback(

() => playTone(600 + Math.random() * 200, 'triangle', 0.03, 0.03),

[playTone],

);

const playEnter = useCallback(

() => playTone(400, 'sine', 0.2, 0.1),

[playTone],

);

const playError = useCallback(

() => playTone(150, 'sawtooth', 0.3, 0.1),

[playTone],

);

const playBoot = useCallback(() => {

if (!audioCtxRef.current) return;

const osc = audioCtxRef.current.createOscillator();

const gain = audioCtxRef.current.createGain();

osc.frequency.setValueAtTime(100, audioCtxRef.current.currentTime);

osc.frequency.exponentialRampToValueAtTime(

800,

audioCtxRef.current.currentTime + 2,

);

gain.gain.setValueAtTime(0, audioCtxRef.current.currentTime);

gain.gain.linearRampToValueAtTime(0.2, audioCtxRef.current.currentTime + 1);

gain.gain.linearRampToValueAtTime(0, audioCtxRef.current.currentTime + 3);

osc.connect(gain);

gain.connect(audioCtxRef.current.destination);

osc.start();

osc.stop(audioCtxRef.current.currentTime + 3);

}, []);

return {

initAudio,

playClick,

playKeystroke,

playEnter,

playError,

playBoot,

};

const [step, setStep] = useState(0);

useEffect(() => {

const sequence = [

{

t: 100,

action: () => {

initAudio();

setStep(1);

},

}, // Blank start

{ t: 300, action: () => setStep(2) }, // Logo/Init

{ t: 400, action: () => setStep(4) }, // Fast Progress

{ t: 200, action: () => onComplete() }, // Done

];

let accumulatedTime = 0;

sequence.forEach(({ t, action }) => {

accumulatedTime += t;

setTimeout(action, accumulatedTime);

});

}, [onComplete, initAudio]);

return (

<div className="h-screen w-full flex flex-col items-center justify-center bg-[#000505] text-[#4fffa8] font-mono select-none cursor-none">

{step >= 2 && (

<div className="mb-12 flex flex-col items-center animate-pulse">

<div className="w-16 h-16 border-4 border-[#4fffa8] rounded-full flex items-center justify-center mb-4">

<div className="text-3xl font-black italic">L</div>

</div>

<h1 className="text-2xl tracking-[0.5em] font-bold uppercase">

Fezminal

</h1>

</div>

)}

{step >= 2 && (

<div className="w-64">

<div className="h-1 w-full bg-[#00333b]">

<div

className="h-full bg-[#4fffa8] transition-all duration-[500ms] ease-linear"

style={{ width: step >= 4 ? '100%' : '0%' }}

/>

</div>

</div>

)}

</div>

);

const [time, setTime] = useState(new Date());

useEffect(() => {

const timer = setInterval(() => setTime(new Date()), 1000);

return () => clearInterval(timer);

}, []);

const secondsDegrees = (time.getSeconds() / 60) * 360 + 90;

const minsDegrees = (time.getMinutes() / 60) * 360 + 90;

const hourDegrees =

((time.getHours() % 12) / 12) * 360 + (time.getMinutes() / 60) * 30 + 90;

return (

<div className="flex flex-col items-center gap-4">

{/* Analog Clock */}

<div className="w-20 h-20 border-2 border-[#4fffa8] rounded-full relative bg-[#001a1f] shadow-[0_0_10px_rgba(79,255,168,0.2)]">

<div

className="absolute top-1/2 left-1/2 w-[35%] h-[2px] bg-[#4fffa8] origin-[0%_50%] rounded-full"

style={{ transform: `translate(0, -50%) rotate(${hourDegrees}deg)` }}

/>

<div

className="absolute top-1/2 left-1/2 w-[45%] h-[1px] bg-[#4fffa8] origin-[0%_50%] rounded-full"

style={{ transform: `translate(0, -50%) rotate(${minsDegrees}deg)` }}

/>

<div

className="absolute top-1/2 left-1/2 w-[48%] h-[1px] bg-[#ff4f4f] origin-[0%_50%]"

style={{

transform: `translate(0, -50%) rotate(${secondsDegrees}deg)`,

}}

/>

<div className="absolute top-1/2 left-1/2 w-1 h-1 bg-[#4fffa8] -translate-x-1/2 -translate-y-1/2 rounded-full" />

</div>

{/* Digital Clock */}

<div className="font-mono text-xl font-bold tracking-widest text-[#4fffa8]">

{time.toLocaleTimeString([], { hour12: false })}

</div>

</div>

);

const [ContentComponent, setContentComponent] = useState(null);

const [title, setTitle] = useState('');

useEffect(() => {

const loadVocab = async () => {

const entry = vocabulary[termKey];

if (entry) {

setTitle(entry.title);

try {

const module = await entry.loader();

// The vocab files export a React component as default

setContentComponent(() => module.default);

} catch (e) {

console.error(e);

setContentComponent(() => () => (

<div className="text-red-500">Error loading definition data.</div>

));

}

} else {

setTitle('Unknown Term');

setContentComponent(() => () => (

<div className="text-yellow-500">

Definition not found in local database.

</div>

));

}

};

loadVocab();

}, [termKey]);

return (

<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">

<div className="w-full max-w-2xl bg-[#001a1f] border-2 border-[#4fffa8] shadow-[0_0_20px_rgba(79,255,168,0.3)] animate-in fade-in zoom-in duration-200 flex flex-col max-h-[80vh]">

<div className="flex justify-between items-center p-4 border-b border-[#005f6b] bg-[#001014]">

<h3 className="text-xl font-bold text-[#4fffa8] uppercase tracking-widest">

{title}

</h3>

<button

onClick={onClose}

className="text-[#005f6b] hover:text-[#ff4f4f] transition-colors"

>

<X size={24} weight="bold" />

</button>

</div>

<div className="p-6 overflow-y-auto prose prose-invert prose-p:text-[#e8f7f7] prose-headings:text-[#4fffa8] prose-a:text-[#4fffa8]">

{ContentComponent ? <ContentComponent /> : 'Loading definition...'}

</div>

<div className="p-4 border-t border-[#005f6b] bg-[#001014] text-right">

<button

onClick={onClose}

className="px-6 py-2 bg-[#4fffa8] text-[#001a1f] font-bold uppercase tracking-widest text-xs hover:bg-white transition-colors"

>

Acknowledge

</button>

</div>

</div>

</div>

);

const [content, setContent] = useState(null);

const [loading, setLoading] = useState(false);

useEffect(() => {

if (type === 'post') {

if (file.isSeries) {

const seriesContent = `

setContent(seriesContent);

setLoading(false);

return;

}

setLoading(true);

const fetchPath = file.content

? null

: `/posts/${file.filename || file.slug + '.txt'}`;

if (fetchPath) {

fetch(fetchPath)

.then((res) => {

if (!res.ok) throw new Error('Failed to load');

return res.text();

})

.then((text) => {

const cleanText = text.replace(/^---[\s\S]*?---/, '').trim();

setContent(cleanText);

setLoading(false);

})

.catch((err) => {

console.error(err);

setContent('Error: Data file corrupted or missing from archives.');

setLoading(false);

});

} else {

setContent(file.content || file.excerpt);

setLoading(false);

}

} else if (type === 'about') {

// About content passed directly

setContent(file.content);

}

}, [file, type]);

const MarkdownComponents = {

a: ({ href, children, ...props }) => {

const isVocab = href && href.startsWith('/vocab/');

const handleClick = (e) => {

if (isVocab) {

e.preventDefault();

const term = href.replace('/vocab/', '');

onVocabClick(term);

playClick();

}

};

if (isVocab) {

return (

<a

href={href}

onClick={handleClick}

className="text-[#4fffa8] underline decoration-dashed cursor-pointer"

{...props}

>

{children}

</a>

);

}

return (

<a

href={href}

target="_blank"

rel="noopener noreferrer"

className="text-[#4fffa8] hover:text-white"

{...props}

>

{children}

</a>

);

},

};

return (

<div className="h-full flex flex-col bg-[#001a1f] text-[#e8f7f7] animate-in fade-in slide-in-from-bottom-4 duration-300">

{/* File Header */}

<div className="border-b border-[#005f6b] p-6 flex justify-between items-start bg-[#001014] shrink-0">

<div>

<div className="text-xs uppercase tracking-[0.2em] text-[#4fffa8] mb-2 flex items-center gap-2">

{type === 'about' ? <User size={16} /> : <FileText size={16} />}

{type === 'project'

? 'Project_Manifest'

: type === 'about'

? 'Personnel_File'

: 'Blog_Transmission'}

</div>

<h2 className="text-3xl font-bold tracking-tight text-white mb-1">

{file.title || file.name}

</h2>

{file.date && (

<div className="text-xs text-[#005f6b] font-mono">

{new Date(file.date).toLocaleDateString()}

</div>

)}

</div>

<div className="flex gap-4">

{type === 'project' && (

<>

<Link

to={`/projects/${file.slug}`}

target="_blank"

className="px-4 py-2 border border-[#4fffa8] text-[#4fffa8] text-xs uppercase tracking-widest hover:bg-[#4fffa8] hover:text-[#001a1f] transition-colors flex items-center gap-2"

>

<Monitor size={16} />

GUI View

</Link>

{file.url && (

<a

href={file.url}

target="_blank"

rel="noopener noreferrer"

onClick={playClick}

className="px-4 py-2 border border-[#4fffa8] bg-[#4fffa8] text-[#001a1f] text-xs uppercase tracking-widest hover:bg-white transition-colors flex items-center gap-2"

>

<Globe size={16} />

Launch

</a>

)}

</>

)}

{onClose && (

<button

onClick={() => {

playClick();

onClose();

}}

className="px-4 py-2 border border-[#4fffa8] text-[#4fffa8] text-xs uppercase tracking-widest hover:bg-[#4fffa8] hover:text-[#001a1f] transition-colors"

>

Close_File

</button>

)}

</div>

</div>

{/* File Content */}

<div className="flex-grow p-8 overflow-y-auto font-mono leading-relaxed space-y-6">

{type === 'project' && file.shortDescription && (

<div className="text-[#4fffa8] text-xl font-bold mb-2">

{file.shortDescription}

</div>

)}

{file.description && type === 'project' && (

<div className="border-l-2 border-[#4fffa8] pl-4 py-1 text-lg opacity-90">

{file.description}

</div>

)}

{type === 'project' && (

<div className="space-y-6">

<div className="grid grid-cols-2 gap-4">

<div className="bg-[#00252b] p-4">

<h4 className="text-[10px] uppercase tracking-widest text-[#4fffa8] mb-2">

Status

</h4>

<div className="text-sm">{file.status || 'Archived'}</div>

</div>

<div className="bg-[#00252b] p-4">

<h4 className="text-[10px] uppercase tracking-widest text-[#4fffa8] mb-2">

Stack

</h4>

<div className="flex flex-wrap gap-2">

{file.technologies?.map((tech) => (

<span

key={tech}

className="text-xs border border-[#005f6b] px-1"

>

{tech}

</span>

))}

</div>

</div>

</div>

</div>

)}

{(type === 'post' || type === 'about') && (

<div className="max-w-3xl pb-20 prose prose-invert prose-p:text-[#e8f7f7] prose-headings:text-[#4fffa8] prose-a:text-[#4fffa8] prose-code:text-[#ff4f4f] prose-pre:bg-[#00252b] prose-pre:border prose-pre:border-[#005f6b]">

{loading ? (

<div className="animate-pulse text-[#4fffa8]">

Decryption in progress...

</div>

) : (

<ReactMarkdown

remarkPlugins={[remarkGfm, remarkMath]}

rehypePlugins={[rehypeKatex]}

components={MarkdownComponents}

>

{content || file.excerpt || 'No content data available.'}

</ReactMarkdown>

)}

</div>

)}

</div>

</div>

);

const bottomRef = useRef(null);

useEffect(() => {

bottomRef.current?.scrollIntoView({ behavior: 'smooth' });

}, [history]);

if (isMinimized) return null;

return (

<div className="h-1/3 border-t border-[#00333b] bg-[#001014] flex flex-col shrink-0 transition-all duration-300">

<div className="bg-[#00252b] px-4 py-1 text-[10px] uppercase tracking-widest text-[#4fffa8] flex justify-between items-center border-b border-[#00333b]">

<span>Terminal Output</span>

<span>Active Process: SHELL</span>

</div>

<div

ref={scrollRef}

className="flex-grow overflow-y-auto p-4 font-mono text-sm space-y-2"

>

{history.map((entry, i) => (

<div key={i}>

<div className="opacity-50 text-xs mb-1">{entry.timestamp}</div>

{entry.command && (

<div className="text-[#80a0a0]">

<span className="text-[#4fffa8] mr-2">{'>'}</span>

{entry.command}

</div>

)}

<div className="text-[#e8f7f7] whitespace-pre-wrap pl-4 border-l border-[#00333b] ml-1">

{entry.response}

</div>

</div>

))}

<div ref={bottomRef} />

</div>

</div>

);

const [input, setInput] = useState('');

const inputRef = useRef(null);

const handleSubmit = (e) => {

e.preventDefault();

if (!input.trim()) return;

playEnter();

onCommand(input.trim());

setInput('');

};

const handleChange = (e) => {

setInput(e.target.value);

playKeystroke();

};

const handleKeyDown = (e) => {

if (e.key === 'ArrowUp') {

e.preventDefault();

onScroll('up');

} else if (e.key === 'ArrowDown') {

e.preventDefault();

onScroll('down');

}

};

useEffect(() => {

const focusInterval = setInterval(() => {

if (document.activeElement !== inputRef.current) {

inputRef.current?.focus();

}

}, 100);

return () => clearInterval(focusInterval);

}, []);

return (

<div className="h-12 bg-[#001014] border-t border-[#00333b] flex items-center px-4 font-mono text-sm z-30 shrink-0">

<span className="text-[#4fffa8] mr-2 shrink-0">{'>'}</span>

<form onSubmit={handleSubmit} className="flex-grow">

<input

ref={inputRef}

type="text"

value={input}

onChange={handleChange}

onKeyDown={handleKeyDown}

className="w-full bg-transparent border-none outline-none text-[#e8f7f7] placeholder-[#00333b] uppercase caret-[#4fffa8]"

placeholder="TYPE 'HELP' FOR COMMANDS..."

spellCheck="false"

autoComplete="off"

/>

</form>

</div>

);

initAudio,

playClick,

playKeystroke,

playEnter,

playError,

}) => {

const [activeTab, setActiveTab] = useState('projects');

const [selectedFile, setSelectedFile] = useState(null);

const [searchQuery, setSearchQuery] = useState('');

const [aboutContent, setAboutContent] = useState('');

const [vagueIssues, setVagueIssues] = useState([]);

// Terminal State

const [terminalHistory, setTerminalHistory] = useState([

{

timestamp: new Date().toLocaleTimeString(),

response: "WELCOME TO FEZMINAL OS v2.0.26. TYPE 'HELP' FOR INSTRUCTIONS.",

},

]);

const [isTerminalMinimized, setIsTerminalMinimized] = useState(false);

const terminalScrollRef = useRef(null);

// Vocab Modal State

const [vocabTerm, setVocabTerm] = useState(null);

// Footer Widget State

const [showClock, setShowClock] = useState(true);

const { projects, loading: loadingProjects } = useProjects();

const [posts, setPosts] = useState([]);

const navigate = useNavigate();

// Vocab List

const vocabList = Object.keys(vocabulary)

.map((key) => ({

id: key,

title: vocabulary[key].title,

name: vocabulary[key].title, // Normalized prop

type: 'vocab',

}))

.sort((a, b) => a.title.localeCompare(b.title));

useEffect(() => {

// Fetch posts

fetch('/posts/posts.json')

.then((res) => res.json())

.then((data) => {

const processedItems = data.map((item) => {

if (item.series) {

// This is a series container

return {

...item,

isSeries: true,

// Flatten the nested posts array to the top level for FileViewer compatibility

posts: item.series.posts.map((p) => ({

...p,

// Ensure filename is clean

filename: p.filename?.startsWith('/')

? p.filename.substring(1)

: p.filename,

})),

category: 'series', // Ensure category is set for styling

// Inherit tags from first post or use own

tags:

item.tags ||

(item.series.posts &&

item.series.posts[0] &&

item.series.posts[0].tags) ||

[],

description:

item.description || (item.series && item.series.description),

};

} else {

// Individual post

return {

...item,

filename: item.filename?.startsWith('/')

? item.filename.substring(1)

: item.filename,

};

}

});

// Sort by updated/date

processedItems.sort(

(a, b) =>

new Date(b.updated || b.date) - new Date(a.updated || a.date),

);

setPosts(processedItems);

})

.catch((err) => console.error(err));

// Fetch About

fetch('/about-me/about.txt')

.then((res) => res.text())

.then((text) => setAboutContent(text))

.catch((err) => console.error(err));

// Fetch Vague Issues

fetch('/the_vague/issues.piml')

.then((res) => res.text())

.then((text) => {

const parsed = piml.parse(text);

setVagueIssues(parsed.issues || []);

})

.catch((err) => console.error(err));

}, []);

const handleScroll = (direction) => {

if (terminalScrollRef.current) {

const scrollAmount = 50;

terminalScrollRef.current.scrollTop +=

direction === 'up' ? -scrollAmount : scrollAmount;

}

};

const getFilteredData = () => {

if (activeTab === 'projects')

return searchQuery

? projects.filter((p) =>

p.title.toLowerCase().includes(searchQuery.toLowerCase()),

)

: projects;

if (activeTab === 'blog')

return searchQuery

? posts.filter((p) =>

p.title.toLowerCase().includes(searchQuery.toLowerCase()),

)

: posts;

if (activeTab === 'vocab')

return searchQuery

? vocabList.filter((v) =>

v.title.toLowerCase().includes(searchQuery.toLowerCase()),

)

: vocabList;

if (activeTab === 'vague')

return searchQuery

? vagueIssues.filter((v) =>

v.title.toLowerCase().includes(searchQuery.toLowerCase()),

)

: vagueIssues;

return [];

};

const filteredData = getFilteredData();

const addLog = (command, response) => {

setTerminalHistory((prev) => [

...prev,

{

timestamp: new Date().toLocaleTimeString(),

command,

response,

},

]);

};

const handleCommand = (cmd) => {

const parts = cmd.trim().split(' ');

const command = parts[0].toLowerCase();

const args = parts.slice(1).join(' ');

// Command Logic

if (command === 'help') {

const helpText = `AVAILABLE COMMANDS:

addLog(cmd, helpText);

} else if (command === 'term') {

setIsTerminalMinimized((prev) => !prev);

addLog(

cmd,

isTerminalMinimized ? 'TERMINAL RESTORED' : 'TERMINAL MINIMIZED',

);

} else if (command === 'list' || command === 'ls') {

if (activeTab === 'about' || activeTab === 'system') {

addLog(cmd, 'NO LISTABLE ITEMS IN THIS DIRECTORY.');

} else {

setSearchQuery('');

const itemsList = filteredData

.map(

(item, idx) =>

`[${String(idx + 1).padStart(2, '0')}] ${item.title || item.name}`,

)

.join('\n');

addLog(

cmd,

`LISTING ALL ${activeTab.toUpperCase()} FILES...\n\n${itemsList}\n\nTOTAL: ${filteredData.length} ITEMS.`,

);

}

} else if (command === 'search' || command === 'find') {

if (activeTab === 'about' || activeTab === 'system') {

addLog(cmd, 'SEARCH NOT AVAILABLE IN THIS DIRECTORY.');

} else {

setSearchQuery(args);

const itemsList = getFilteredData()

.map(

(item, idx) =>

`[${String(idx + 1).padStart(2, '0')}] ${item.title || item.name}`,

)

.join('\n');

addLog(

cmd,

args

? `FILTERING BY "${args.toUpperCase()}"...\n\n${itemsList}\n\nFOUND ${getFilteredData().length} MATCHES.`

: 'CLEARED SEARCH FILTER.',

);

}

} else if (command === 'open' || command === 'view') {

if (activeTab === 'about' || activeTab === 'system') {

addLog(cmd, 'NO FILES TO OPEN IN THIS DIRECTORY.');

return;

}

if (!args) {

addLog(cmd, 'ERROR: SPECIFY FILE ID OR NAME.');

playError();

return;

}

const index = parseInt(args) - 1;

if (!isNaN(index) && index >= 0 && index < filteredData.length) {

const item = filteredData[index];

if (activeTab === 'vocab') {

setVocabTerm(item.id);

addLog(cmd, `OPENING DEFINITION: ${item.title.toUpperCase()}...`);