Skip to content

Commit 7b67083

Browse files
fezcodefezcode
committed
feat: new visual modes.
1 parent b8e8861 commit 7b67083

File tree

7 files changed

+145
-11
lines changed

7 files changed

+145
-11
lines changed

‎public/posts/visual-modes-easter-eggs.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ For those who want a challenge. This flips the entire website horizontally. Text
1919
### 5. Noir Mode (Dramatic Effect)
2020
It was a dark and stormy night... This mode applies a high-contrast grayscale filter, turning the site into a scene from a classic detective film.
2121

22+
### 6. Terminal Mode (The Hacker)
23+
Jack in. This mode transforms the entire UI into a monochrome green CRT monitor aesthetic. Perfect for feeling like you're browsing the web from a bunker in 1999.
24+
25+
### 7. Blueprint Mode (The Architect)
26+
For those who appreciate structure. This applies a deep blue, inverted schematic look, making the site resemble an architectural blueprint.
27+
28+
### 8. Sepia Mode (The Time Traveler)
29+
Dust off the archives. This gives everything a warm, aged parchment tone, perfect for reading through the D&D logs or imagining the site as an ancient manuscript.
30+
2231
## How to Access Them
2332

2433
You can unlock these modes in two ways:
@@ -30,6 +39,9 @@ Press `Alt + K` (or click the "Commands" button in the sidebar) to open the Comm
3039
* `Party Mode`
3140
* `Toggle Mirror Mode`
3241
* `Toggle Noir Mode`
42+
* `Toggle Terminal Mode`
43+
* `Toggle Blueprint Mode`
44+
* `Toggle Sepia Mode`
3345
* ...or try `Do a Barrel Roll` for a quick spin!
3446

3547
### 2. The Settings Page (For the Clicker)

‎src/components/CommandPalette.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,10 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
5454
isRetro, toggleRetro,
5555
isParty, toggleParty,
5656
isMirror, toggleMirror,
57-
isNoir, toggleNoir
57+
isNoir, toggleNoir,
58+
isTerminal, toggleTerminal,
59+
isBlueprint, toggleBlueprint,
60+
isSepia, toggleSepia
5861
} = useVisualSettings();
5962

6063
const filteredItems = filterItems(items, searchTerm);
@@ -205,6 +208,30 @@ const CommandPalette = ({isOpen, setIsOpen, openGenericModal, toggleDigitalRain}
205208
duration: 2000
206209
});
207210
break;
211+
case 'toggleTerminalMode':
212+
toggleTerminal();
213+
addToast({
214+
title: !isTerminal ? 'Terminal Mode On' : 'Terminal Mode Off',
215+
message: !isTerminal ? 'System Online.' : 'System Offline.',
216+
duration: 2000
217+
});
218+
break;
219+
case 'toggleBlueprintMode':
220+
toggleBlueprint();
221+
addToast({
222+
title: !isBlueprint ? 'Blueprint Mode On' : 'Blueprint Mode Off',
223+
message: !isBlueprint ? 'Entering Construction Mode.' : 'Blueprint Stored.',
224+
duration: 2000
225+
});
226+
break;
227+
case 'toggleSepiaMode':
228+
toggleSepia();
229+
addToast({
230+
title: !isSepia ? 'Sepia Mode On' : 'Sepia Mode Off',
231+
message: !isSepia ? 'Time travel initiated.' : 'Back to the present.',
232+
duration: 2000
233+
});
234+
break;
208235
case 'showTime': {
209236
openGenericModal('Current Time', <LiveClock/>);
210237
break;

‎src/context/VisualSettingsContext.js‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ export const VisualSettingsProvider = ({children}) => {
1313
const [isParty, setIsParty] = usePersistentState('is-party', false);
1414
const [isMirror, setIsMirror] = usePersistentState('is-mirror', false);
1515
const [isNoir, setIsNoir] = usePersistentState('is-noir', false);
16+
const [isTerminal, setIsTerminal] = usePersistentState('is-terminal', false);
17+
const [isBlueprint, setIsBlueprint] = usePersistentState('is-blueprint', false);
18+
const [isSepia, setIsSepia] = usePersistentState('is-sepia', false);
1619

1720
useEffect(() => {
1821
if (isInverted) {
@@ -54,19 +57,49 @@ export const VisualSettingsProvider = ({children}) => {
5457
}
5558
}, [isNoir]);
5659

60+
useEffect(() => {
61+
if (isTerminal) {
62+
document.body.classList.add('terminal-mode');
63+
} else {
64+
document.body.classList.remove('terminal-mode');
65+
}
66+
}, [isTerminal]);
67+
68+
useEffect(() => {
69+
if (isBlueprint) {
70+
document.body.classList.add('blueprint-mode');
71+
} else {
72+
document.body.classList.remove('blueprint-mode');
73+
}
74+
}, [isBlueprint]);
75+
76+
useEffect(() => {
77+
if (isSepia) {
78+
document.body.classList.add('sepia-mode');
79+
} else {
80+
document.body.classList.remove('sepia-mode');
81+
}
82+
}, [isSepia]);
83+
5784
const toggleInvert = () => setIsInverted(prev => !prev);
5885
const toggleRetro = () => setIsRetro(prev => !prev);
5986
const toggleParty = () => setIsParty(prev => !prev);
6087
const toggleMirror = () => setIsMirror(prev => !prev);
6188
const toggleNoir = () => setIsNoir(prev => !prev);
89+
const toggleTerminal = () => setIsTerminal(prev => !prev);
90+
const toggleBlueprint = () => setIsBlueprint(prev => !prev);
91+
const toggleSepia = () => setIsSepia(prev => !prev);
6292

6393
return (
6494
<VisualSettingsContext.Provider value={{
6595
isInverted, toggleInvert,
6696
isRetro, toggleRetro,
6797
isParty, toggleParty,
6898
isMirror, toggleMirror,
69-
isNoir, toggleNoir
99+
isNoir, toggleNoir,
100+
isTerminal, toggleTerminal,
101+
isBlueprint, toggleBlueprint,
102+
isSepia, toggleSepia
70103
}}>
71104
{children}
72105
</VisualSettingsContext.Provider>);

‎src/hooks/useSearchableData.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,9 @@ const useSearchableData = () => {
109109
{ title: 'Toggle Retro Mode', type: 'command', commandId: 'toggleRetroMode' },
110110
{ title: 'Toggle Mirror Mode', type: 'command', commandId: 'toggleMirrorMode' },
111111
{ title: 'Toggle Noir Mode', type: 'command', commandId: 'toggleNoirMode' },
112+
{ title: 'Toggle Terminal Mode', type: 'command', commandId: 'toggleTerminalMode' },
113+
{ title: 'Toggle Blueprint Mode', type: 'command', commandId: 'toggleBlueprintMode' },
114+
{ title: 'Toggle Sepia Mode', type: 'command', commandId: 'toggleSepiaMode' },
112115
];
113116

114117
setItems([...staticRoutes, ...customCommands, ...allPosts, ...allProjects, ...allLogs, ...allApps]);

‎src/index.css‎

Lines changed: 39 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -224,13 +224,6 @@ input[type='number'] {
224224
scrollbar-width: none; /* Firefox */
225225
}
226226

227-
/*Visual Modes*/
228-
/*Visual Modes*/
229-
/*Visual Modes*/
230-
/*Visual Modes*/
231-
/*Visual Modes*/
232-
/*Visual Modes*/
233-
234227
@keyframes barrel-roll {
235228
0% { transform: rotate(0deg); }
236229
100% { transform: rotate(360deg); }
@@ -319,3 +312,42 @@ body.noir-mode::after {
319312
backdrop-filter: grayscale(100%) contrast(1.2);
320313
pointer-events: none;
321314
}
315+
316+
/* Terminal Mode (Green Monochrome) */
317+
body.terminal-mode::after {
318+
content: '';
319+
position: fixed;
320+
top: 0;
321+
left: 0;
322+
right: 0;
323+
bottom: 0;
324+
z-index: 9999;
325+
backdrop-filter: sepia(100%) hue-rotate(70deg) saturate(500%) contrast(1.2);
326+
pointer-events: none;
327+
}
328+
329+
/* Blueprint Mode (Blue Monochrome) */
330+
body.blueprint-mode::after {
331+
content: '';
332+
position: fixed;
333+
top: 0;
334+
left: 0;
335+
right: 0;
336+
bottom: 0;
337+
z-index: 9999;
338+
backdrop-filter: invert(1) sepia(100%) hue-rotate(180deg) saturate(300%) brightness(0.9);
339+
pointer-events: none;
340+
}
341+
342+
/* Sepia Mode */
343+
body.sepia-mode::after {
344+
content: '';
345+
position: fixed;
346+
top: 0;
347+
left: 0;
348+
right: 0;
349+
bottom: 0;
350+
z-index: 9999;
351+
backdrop-filter: sepia(100%);
352+
pointer-events: none;
353+
}

‎src/pages/CommandsPage.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ const commandsData = [
5252
{ title: "Toggle Retro Mode", description: "Enables a retro CRT scanline effect. (Easter Egg)", color: "yellow" },
5353
{ title: "Toggle Mirror Mode", description: "Mirrors the entire page horizontally. (Easter Egg)", color: "indigo" },
5454
{ title: "Toggle Noir Mode", description: "Enables a black and white noir film effect. (Easter Egg)", color: "gray" },
55+
{ title: "Toggle Terminal Mode", description: "Switch to a green monochrome hacker aesthetic. (Easter Egg)", color: "green" },
56+
{ title: "Toggle Blueprint Mode", description: "Switch to a blueprint schematic look. (Easter Egg)", color: "blue" },
57+
{ title: "Toggle Sepia Mode", description: "Switch to an old-timey sepia tone. (Easter Egg)", color: "orange" },
5558
]
5659
},
5760
{

‎src/pages/SettingsPage.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,12 @@ const SettingsPage = () => {
3838
isRetro, toggleRetro,
3939
isParty, toggleParty,
4040
isMirror, toggleMirror,
41-
isNoir, toggleNoir
41+
isNoir, toggleNoir,
42+
isTerminal, toggleTerminal,
43+
isBlueprint, toggleBlueprint,
44+
isSepia, toggleSepia
4245
} = useVisualSettings();
46+
4347
const {addToast} = useToast();
4448
const handleResetSidebarState = () => {
4549
removeLocalStorageItem(KEY_SIDEBAR_STATE);
@@ -200,7 +204,27 @@ const SettingsPage = () => {
200204
checked={isNoir}
201205
onChange={toggleNoir}
202206
/>
203-
207+
<div className="mb-4"></div>
208+
<CustomToggle
209+
id="enable-terminal-mode"
210+
label="> Terminal Mode"
211+
checked={isTerminal}
212+
onChange={toggleTerminal}
213+
/>
214+
<div className="mb-4"></div>
215+
<CustomToggle
216+
id="enable-blueprint-mode"
217+
label="> Blueprint Mode"
218+
checked={isBlueprint}
219+
onChange={toggleBlueprint}
220+
/>
221+
<div className="mb-4"></div>
222+
<CustomToggle
223+
id="enable-sepia-mode"
224+
label="> Sepia Mode"
225+
checked={isSepia}
226+
onChange={toggleSepia}
227+
/>
204228
</div>
205229
{/* Sidebar Stuff */}
206230
<h1 className="text-3xl font-arvo font-normal mb-4 text-app">

0 commit comments

Comments
 (0)