Skip to content

Commit ab4cf84

Browse files
fezcodefezcode
committed
fix: about pages
1 parent b96d4aa commit ab4cf84

File tree

10 files changed

+67
-59
lines changed

10 files changed

+67
-59
lines changed

‎src/components/AnimatedRoutes.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,10 @@ const AnimatedRoutes = ({
309309
/>
310310
<Route
311311
path="/about"
312+
element={<Navigate to="/about/brutalist" replace />}
313+
/>
314+
<Route
315+
path="/about/:viewId"
312316
element={
313317
<motion.div
314318
initial="initial"

‎src/components/CodeModal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ const CodeModal = ({ isOpen, onClose, children, language }) => {
99
if (isOpen) {
1010
document.body.style.overflow = 'hidden';
1111
} else {
12-
document.body.style.overflow = 'unset';
12+
document.body.style.overflow = '';
1313
}
1414
return () => {
15-
document.body.style.overflow = 'unset';
15+
document.body.style.overflow = '';
1616
};
1717
}, [isOpen]);
1818

‎src/components/GenericModal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ const GenericModal = ({ isOpen, onClose, title, children }) => {
1515
document.body.style.overflow = 'hidden';
1616
} else {
1717
document.removeEventListener('keydown', handleKeyDown);
18-
document.body.style.overflow = 'auto';
18+
document.body.style.overflow = '';
1919
}
2020

2121
return () => {
2222
document.removeEventListener('keydown', handleKeyDown);
23-
document.body.style.overflow = 'auto';
23+
document.body.style.overflow = '';
2424
};
2525
}, [isOpen, onClose]);
2626

‎src/components/ImageModal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ const ImageModal = ({ src, alt, onClose }) => {
77
if (src) {
88
document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
99
} else {
10-
document.body.style.overflow = 'unset';
10+
document.body.style.overflow = '';
1111
}
1212
return () => {
13-
document.body.style.overflow = 'unset'; // Clean up on unmount
13+
document.body.style.overflow = ''; // Clean up on unmount
1414
};
1515
}, [src]);
1616

‎src/components/Layout.js‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@ const Layout = ({
3838
} = useVisualSettings();
3939
const location = useLocation();
4040

41+
// Check if we are on the about page to conditionally render layout elements
42+
const isAboutPage = location.pathname.startsWith('/about');
43+
4144
if (location.pathname.startsWith('/stories')) {
4245
return (
4346
<DndProvider>
@@ -52,46 +55,52 @@ const Layout = ({
5255

5356
return (
5457
<>
55-
{isGarden && <DigitalFlowers />}
56-
{isAutumn && <DigitalLeaves />}
57-
{isRain && <NaturalRain />}
58+
{isGarden && !isAboutPage && <DigitalFlowers />}
59+
{isAutumn && !isAboutPage && <DigitalLeaves />}
60+
{isRain && !isAboutPage && <NaturalRain />}
5861
<CommandPalette
5962
isOpen={isPaletteOpen}
6063
setIsOpen={setIsPaletteOpen}
6164
openGenericModal={openGenericModal}
6265
toggleDigitalRain={toggleDigitalRain}
6366
toggleBSOD={toggleBSOD}
6467
/>
65-
<SidePanel />
68+
{!isAboutPage && <SidePanel />}
6669
<div className="bg-gray-950 min-h-screen font-sans flex">
67-
{sidebarMode === 'classic' ? (
68-
<Sidebar
69-
isOpen={isSidebarOpen}
70-
toggleSidebar={toggleSidebar}
71-
toggleModal={toggleModal}
72-
setIsPaletteOpen={setIsPaletteOpen}
73-
sidebarColor={sidebarColor}
74-
/>
75-
) : (
76-
<BrutalistSidebar
77-
isOpen={isSidebarOpen}
78-
toggleSidebar={toggleSidebar}
79-
toggleModal={toggleModal}
80-
setIsPaletteOpen={setIsPaletteOpen}
81-
/>
82-
)}
70+
{!isAboutPage &&
71+
(sidebarMode === 'classic' ? (
72+
<Sidebar
73+
isOpen={isSidebarOpen}
74+
toggleSidebar={toggleSidebar}
75+
toggleModal={toggleModal}
76+
setIsPaletteOpen={setIsPaletteOpen}
77+
sidebarColor={sidebarColor}
78+
/>
79+
) : (
80+
<BrutalistSidebar
81+
isOpen={isSidebarOpen}
82+
toggleSidebar={toggleSidebar}
83+
toggleModal={toggleModal}
84+
setIsPaletteOpen={setIsPaletteOpen}
85+
/>
86+
))}
8387
<div
84-
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen ? (sidebarMode === 'classic' ? 'md:ml-64' : 'md:ml-72') : 'md:ml-0'}`}
88+
className={`flex-1 flex flex-col transition-all duration-300 ${isSidebarOpen && !isAboutPage ? (sidebarMode === 'classic' ? 'md:ml-64' : 'md:ml-72') : 'md:ml-0'}`}
8589
>
86-
<Navbar
87-
toggleSidebar={toggleSidebar}
88-
isSidebarOpen={isSidebarOpen}
89-
isSearchVisible={isSearchVisible}
90-
toggleSearch={toggleSearch}
91-
/>
92-
{isSearchVisible && <Search isVisible={isSearchVisible} />}
90+
{!isAboutPage && (
91+
<Navbar
92+
toggleSidebar={toggleSidebar}
93+
isSidebarOpen={isSidebarOpen}
94+
isSearchVisible={isSearchVisible}
95+
toggleSearch={toggleSearch}
96+
/>
97+
)}
98+
{!isAboutPage && isSearchVisible && (
99+
<Search isVisible={isSearchVisible} />
100+
)}
93101
<main className="flex-grow">{children}</main>
94-
{location.pathname !== '/projects' &&
102+
{!isAboutPage &&
103+
location.pathname !== '/projects' &&
95104
location.pathname !== '/blog' &&
96105
location.pathname !== '/commands' && <Footer />}
97106
</div>

‎src/pages/AboutPage.js‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { motion, AnimatePresence } from 'framer-motion';
3-
import { Link, useSearchParams } from 'react-router-dom';
3+
import { Link, useParams, Navigate } from 'react-router-dom';
44
import {
55
ArrowLeft,
66
TreeStructure,
@@ -19,7 +19,7 @@ import Brutalist from './about-views/Brutalist';
1919
import { useAchievements } from '../context/AchievementContext';
2020
import useSeo from '../hooks/useSeo';
2121

22-
const ViewSwitcher = ({ currentView, setView }) => {
22+
const ViewSwitcher = ({ currentView }) => {
2323
const views = [
2424
{ id: 'brutalist', icon: Bug, label: 'Brutalist' },
2525
{ id: 'dossier', icon: Article, label: 'Dossier' },
@@ -31,9 +31,9 @@ const ViewSwitcher = ({ currentView, setView }) => {
3131
return (
3232
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 bg-black/50 backdrop-blur-md p-2 rounded-full border border-white/10 shadow-2xl flex gap-2">
3333
{views.map((view) => (
34-
<button
34+
<Link
3535
key={view.id}
36-
onClick={() => setView(view.id)}
36+
to={`/about/${view.id}`}
3737
className={`relative px-4 py-2 rounded-full flex items-center gap-2 transition-all ${
3838
currentView === view.id
3939
? 'bg-white text-black font-bold shadow-lg'
@@ -48,21 +48,15 @@ const ViewSwitcher = ({ currentView, setView }) => {
4848
className="absolute inset-0 bg-white rounded-full mix-blend-difference -z-10"
4949
/>
5050
)}
51-
</button>
51+
</Link>
5252
))}
5353
</div>
5454
);
5555
};
5656

5757
const AboutPage = () => {
58-
const [searchParams, setSearchParams] = useSearchParams();
58+
const { viewId } = useParams();
5959
const validViews = ['dossier', 'hud', 'blueprint', 'map', 'brutalist'];
60-
const viewParam = searchParams.get('v');
61-
const view = validViews.includes(viewParam) ? viewParam : 'brutalist';
62-
63-
const setView = (newView) => {
64-
setSearchParams({ v: newView }, { replace: true });
65-
};
6660

6761
const { unlockAchievement } = useAchievements();
6862
const { isPaletteOpen, setIsPaletteOpen } = useCommandPalette();
@@ -82,13 +76,14 @@ const AboutPage = () => {
8276

8377
useEffect(() => {
8478
unlockAchievement('curious_soul');
85-
// Hide overflow on body when this component is mounted
86-
document.body.style.overflow = 'hidden';
87-
return () => {
88-
document.body.style.overflow = 'auto';
89-
};
9079
}, [unlockAchievement]);
9180

81+
if (!validViews.includes(viewId)) {
82+
return <Navigate to="/404" replace />;
83+
}
84+
85+
const view = viewId;
86+
9287
const getButtonStyle = (currentView) => {
9388
switch (currentView) {
9489
case 'dossier':
@@ -107,7 +102,7 @@ const AboutPage = () => {
107102
};
108103

109104
return (
110-
<div className="fixed inset-0 z-[100] bg-black overflow-hidden">
105+
<div className="min-h-screen bg-black relative">
111106
{/* Global Back Button */}
112107
<motion.div
113108
initial={{ opacity: 0, y: -20 }}
@@ -134,7 +129,7 @@ const AboutPage = () => {
134129
animate={{ opacity: 1 }}
135130
exit={{ opacity: 0 }}
136131
transition={{ duration: 0.5 }}
137-
className="w-full h-full overflow-y-auto"
132+
className="w-full h-full"
138133
>
139134
{view === 'hud' && <NeuromancerHUD />}
140135
{view === 'blueprint' && <SystemArchitecture />}
@@ -145,7 +140,7 @@ const AboutPage = () => {
145140
</AnimatePresence>
146141

147142
{/* Switcher Controls */}
148-
<ViewSwitcher currentView={view} setView={setView} />
143+
<ViewSwitcher currentView={view} />
149144
<CommandPalette isOpen={isPaletteOpen} setIsOpen={setIsPaletteOpen} />
150145
</div>
151146
);

‎src/pages/about-views/Brutalist.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const Brutalist = () => {
7676
}
7777

7878
return (
79-
<div className="h-full bg-[#050505] text-white overflow-y-auto selection:bg-white selection:text-black font-mono relative">
79+
<div className="min-h-screen bg-[#050505] text-white selection:bg-white selection:text-black font-mono relative">
8080
{/* Visual Background Layer */}
8181
<div
8282
className="fixed inset-0 pointer-events-none z-0 opacity-[0.03] mix-blend-overlay"

‎src/pages/about-views/ClassifiedDossier.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const ClassifiedDossier = () => {
7474
}
7575

7676
return (
77-
<div className="h-full bg-[#f3f3f3] text-[#111] overflow-y-auto selection:bg-black selection:text-white custom-scrollbar font-sans relative">
77+
<div className="min-h-screen bg-[#f3f3f3] text-[#111] selection:bg-black selection:text-white custom-scrollbar font-sans relative">
7878
<GrainOverlay />
7979
<CoffeeStain />
8080

‎src/pages/about-views/NeuromancerHUD.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -646,7 +646,7 @@ const NeuromancerHUD = () => {
646646

647647
return (
648648
<div
649-
className={`relative h-full bg-black ${THEMES[theme].text} font-mono overflow-y-auto overflow-x-hidden p-4 md:p-8 pt-24 pb-32`}
649+
className={`relative min-h-screen bg-black ${THEMES[theme].text} font-mono p-4 md:p-8 pt-24 pb-32`}
650650
>
651651
<ScanLine theme={theme} />
652652

‎src/pages/about-views/SystemArchitecture.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const SchematicBox = ({
6262

6363
const SystemArchitecture = () => {
6464
return (
65-
<div className="relative min-h-full h-auto bg-[#001e40] text-white overflow-y-auto overflow-x-hidden p-4 pt-24 font-mono selection:bg-cyan-500 selection:text-black pb-32">
65+
<div className="relative min-h-screen bg-[#001e40] text-white p-4 pt-24 font-mono selection:bg-cyan-500 selection:text-black pb-32">
6666
<BlueprintGrid />
6767
<div className="relative z-10 max-w-5xl mx-auto flex flex-col gap-0 border-2 border-cyan-500/50 p-1 bg-[#001830]/50 shadow-[0_0_30px_rgba(0,255,255,0.1)]">
6868
{/* Top Section: Processor */}

0 commit comments

Comments
 (0)