Skip to content

Commit b13aa1b

Browse files
fezcodefezcode
committed
refactor: about me page
1 parent 0c81972 commit b13aa1b

File tree

4 files changed

+282
-64
lines changed

4 files changed

+282
-64
lines changed

‎src/pages/AboutPage.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import { motion, AnimatePresence } from 'framer-motion';
33
import { Link } from 'react-router-dom';
44
import {
55
ArrowLeft,
6-
Desktop,
6+
TreeStructure,
77
Graph,
88
Terminal,
99
Article,
1010
} from '@phosphor-icons/react';
1111
import NeuromancerHUD from './about-views/NeuromancerHUD';
12-
import InteractiveDesk from './about-views/InteractiveDesk';
12+
import SystemArchitecture from './about-views/SystemArchitecture';
1313
import MindMapConstellation from './about-views/MindMapConstellation';
1414
import SimpleText from './about-views/SimpleText';
1515
import { useAchievements } from '../context/AchievementContext';
@@ -18,7 +18,7 @@ const ViewSwitcher = ({ currentView, setView }) => {
1818
const views = [
1919
{ id: 'simple', icon: Article, label: 'Simple' },
2020
{ id: 'hud', icon: Terminal, label: 'Terminal' },
21-
{ id: 'desk', icon: Desktop, label: 'Desk' },
21+
{ id: 'blueprint', icon: TreeStructure, label: 'Blueprint' },
2222
{ id: 'map', icon: Graph, label: 'Mind Map' },
2323
];
2424

@@ -61,6 +61,21 @@ const AboutPage = () => {
6161
};
6262
}, [unlockAchievement]);
6363

64+
const getButtonStyle = (currentView) => {
65+
switch (currentView) {
66+
case 'simple':
67+
return 'bg-transparent text-black border-black border-2 font-mono uppercase tracking-widest text-xs hover:bg-[#4a0404] hover:text-white hover:border-[#4a0404] rounded-none shadow-none';
68+
case 'hud':
69+
return 'bg-black text-green-500 border-green-500 border font-mono tracking-wider hover:bg-green-500 hover:text-black shadow-[0_0_10px_rgba(0,255,0,0.3)] rounded-sm';
70+
case 'blueprint':
71+
return 'bg-[#002b5c]/90 text-cyan-300 border-cyan-400 border-2 font-mono uppercase text-xs tracking-wider hover:bg-cyan-400 hover:text-[#001e40] rounded-none';
72+
case 'map':
73+
return 'bg-gray-900/60 text-purple-200 border-purple-500/50 border hover:bg-purple-600 hover:text-white hover:border-purple-600 rounded-full shadow-lg backdrop-blur-xl';
74+
default:
75+
return 'bg-black/50 text-white border-white/10 hover:bg-white hover:text-black rounded-full font-bold';
76+
}
77+
};
78+
6479
return (
6580
<div className="fixed inset-0 z-[100] bg-black overflow-hidden">
6681
{/* Global Back Button */}
@@ -71,11 +86,7 @@ const AboutPage = () => {
7186
>
7287
<Link
7388
to="/"
74-
className={`group flex items-center gap-2 px-4 py-2 backdrop-blur-md border transition-all ${
75-
view === 'simple'
76-
? 'bg-transparent text-black border-black border-2 font-mono uppercase tracking-widest text-xs hover:bg-[#4a0404] hover:text-white hover:border-[#4a0404] rounded-none'
77-
: 'bg-black/50 text-white border-white/10 hover:bg-white hover:text-black rounded-full font-bold'
78-
}`}
89+
className={`group flex items-center gap-2 px-4 py-2 transition-all duration-300 ${getButtonStyle(view)}`}
7990
>
8091
<ArrowLeft weight="bold" className="group-hover:-translate-x-1 transition-transform" />
8192
<span className="hidden sm:inline">Back to Reality</span>
@@ -93,7 +104,7 @@ const AboutPage = () => {
93104
className="w-full h-full"
94105
>
95106
{view === 'hud' && <NeuromancerHUD />}
96-
{view === 'desk' && <InteractiveDesk />}
107+
{view === 'blueprint' && <SystemArchitecture />}
97108
{view === 'map' && <MindMapConstellation />}
98109
{view === 'simple' && <SimpleText />}
99110
</motion.div>

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

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const ConstellationNode = ({ x, y, size = 40, label, color, icon: Icon, onClick,
2424
delay: delay * 0.1
2525
}}
2626
className="absolute cursor-pointer group"
27-
style={{ left: x, top: y }}
27+
style={{ left: x, top: y, translateX: '-50%', translateY: '-50%' }}
2828
onClick={onClick}
2929
>
3030
{/* Pulse Effect */}
@@ -104,34 +104,42 @@ const MindMapConstellation = () => {
104104
// Center
105105
{ id: 'me', x: '50%', y: '50%', size: 80, label: 'Me', color: '#fff', icon: Sparkle, type: 'root', description: aboutData.profile.tagline },
106106

107-
// Skills Cluster (Top Left)
108-
...aboutData.skills.map((s, i) => ({
109-
id: `skill-${i}`,
110-
x: `${20 + Math.cos(i) * 15}%`,
111-
y: `${30 + Math.sin(i) * 15}%`,
112-
label: s.name,
113-
color: NODE_COLORS[s.type] || '#fff',
114-
icon: s.icon,
115-
type: 'Skill',
116-
description: `Proficiency Level: ${s.level}%`,
117-
stats: { level: s.level }
118-
})),
119-
120-
// Experience Cluster (Bottom Right)
121-
...aboutData.experience.map((e, i) => ({
122-
id: `exp-${i}`,
123-
x: `${70 + Math.cos(i + 2) * 15}%`,
124-
y: `${70 + Math.sin(i + 2) * 15}%`,
125-
label: e.company,
126-
color: NODE_COLORS.experience,
127-
type: 'Experience',
128-
description: e.desc,
129-
stats: { role: e.role, period: e.period }
130-
})),
131-
132-
// Traits Cluster (Top Right / Scattered)
133-
{ id: 'superpower', x: '80%', y: '20%', label: 'Superpower', color: NODE_COLORS.trait, icon: aboutData.traits.superpower.icon, description: aboutData.traits.superpower.desc, type: 'Trait' },
134-
{ id: 'hobby', x: '20%', y: '80%', label: 'Hobby', color: NODE_COLORS.trait, icon: aboutData.traits.hobby.icon, description: aboutData.traits.hobby.desc, type: 'Trait' },
107+
// Skills Cluster (Wide Arc Top-Left to Left)
108+
...aboutData.skills.map((s, i) => {
109+
const angle = (Math.PI * 1.2) + (i * (Math.PI / 4)); // Spread from top-left downwards
110+
const radius = 35; // % distance from center
111+
return {
112+
id: `skill-${i}`,
113+
x: `${50 + Math.cos(angle) * radius}%`,
114+
y: `${50 + Math.sin(angle) * radius}%`,
115+
label: s.name,
116+
color: NODE_COLORS[s.type] || '#fff',
117+
icon: s.icon,
118+
type: 'Skill',
119+
description: `Proficiency Level: ${s.level}%`,
120+
stats: { level: s.level }
121+
};
122+
}),
123+
124+
// Experience Cluster (Wide Arc Bottom-Right to Right)
125+
...aboutData.experience.map((e, i) => {
126+
const angle = (Math.PI * 0.2) + (i * (Math.PI / 5)); // Spread from bottom-right upwards
127+
const radius = 35;
128+
return {
129+
id: `exp-${i}`,
130+
x: `${50 + Math.cos(angle) * radius}%`,
131+
y: `${50 + Math.sin(angle) * radius}%`,
132+
label: e.company,
133+
color: NODE_COLORS.experience,
134+
type: 'Experience',
135+
description: e.desc,
136+
stats: { role: e.role, period: e.period }
137+
};
138+
}),
139+
140+
// Traits (Outliers)
141+
{ id: 'superpower', x: '80%', y: '15%', label: 'Superpower', color: NODE_COLORS.trait, icon: aboutData.traits.superpower.icon, description: aboutData.traits.superpower.desc, type: 'Trait' },
142+
{ id: 'hobby', x: '20%', y: '85%', label: 'Hobby', color: NODE_COLORS.trait, icon: aboutData.traits.hobby.icon, description: aboutData.traits.hobby.desc, type: 'Trait' },
135143
];
136144

137145
return (

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

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import React from 'react';
2+
import { motion } from 'framer-motion';
3+
import { aboutData } from './aboutData';
4+
import {
5+
Cpu,
6+
HardDrives,
7+
Circuitry,
8+
ShareNetwork,
9+
Lightning,
10+
} from '@phosphor-icons/react';
11+
12+
const BlueprintGrid = () => (
13+
<div className="absolute inset-0 z-0 pointer-events-none opacity-30">
14+
<div
15+
className="w-full h-full"
16+
style={{
17+
backgroundImage: `
18+
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
19+
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)
20+
`,
21+
backgroundSize: '40px 40px'
22+
}}
23+
/>
24+
<div
25+
className="absolute inset-0 w-full h-full"
26+
style={{
27+
backgroundImage: `
28+
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
29+
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)
30+
`,
31+
backgroundSize: '10px 10px'
32+
}}
33+
/>
34+
</div>
35+
);
36+
37+
const SchematicBox = ({ title, children, className = '', icon: Icon, delay = 0 }) => (
38+
<motion.div
39+
initial={{ opacity: 0, scale: 0.95 }}
40+
animate={{ opacity: 1, scale: 1 }}
41+
transition={{ duration: 0.5, delay }}
42+
className={`relative border-2 border-white/80 bg-[#002b5c]/50 backdrop-blur-sm p-4 ${className}`}
43+
>
44+
{/* Technical Markers */}
45+
<div className="absolute -top-1 -left-1 w-2 h-2 bg-white" />
46+
<div className="absolute -top-1 -right-1 w-2 h-2 bg-white" />
47+
<div className="absolute -bottom-1 -left-1 w-2 h-2 bg-white" />
48+
<div className="absolute -bottom-1 -right-1 w-2 h-2 bg-white" />
49+
50+
{/* Connector Nodes (Decorative) */}
51+
<div className="absolute top-1/2 -left-3 w-4 h-4 rounded-full border-2 border-white bg-[#002b5c]" />
52+
<div className="absolute top-1/2 -right-3 w-4 h-4 rounded-full border-2 border-white bg-[#002b5c]" />
53+
54+
{/* Header */}
55+
<div className="flex items-center gap-2 border-b border-white/30 pb-2 mb-3">
56+
{Icon && <Icon size={20} className="text-cyan-300" />}
57+
<h3 className="font-mono text-sm uppercase tracking-widest text-cyan-300 font-bold">
58+
{title}
59+
</h3>
60+
<div className="flex-grow h-px bg-white/30 ml-2" />
61+
<span className="text-[10px] text-white/50 font-mono">FIG.{Math.floor(Math.random() * 99)}</span>
62+
</div>
63+
64+
{children}
65+
</motion.div>
66+
);
67+
68+
const ConnectorLine = ({ className }) => (
69+
<div className={`absolute bg-white/50 z-0 ${className}`} />
70+
);
71+
72+
const SystemArchitecture = () => {
73+
return (
74+
<div className="relative min-h-screen bg-[#001e40] text-white overflow-hidden p-8 pt-24 font-mono selection:bg-cyan-500 selection:text-black">
75+
<BlueprintGrid />
76+
77+
{/* Decorative Blueprint Header */}
78+
<div className="absolute bottom-8 right-8 border-2 border-white p-4 max-w-sm hidden md:block opacity-70">
79+
<div className="text-xs uppercase grid grid-cols-[80px_1fr] gap-y-1">
80+
<span className="text-white/60">Project:</span>
81+
<span className="font-bold">FEZ.ARCH.V1</span>
82+
<span className="text-white/60">Architect:</span>
83+
<span className="font-bold">{aboutData.profile.name}</span>
84+
<span className="text-white/60">Date:</span>
85+
<span>{new Date().toLocaleDateString()}</span>
86+
<span className="text-white/60">Scale:</span>
87+
<span>1:100</span>
88+
</div>
89+
</div>
90+
91+
<div className="relative z-10 max-w-6xl mx-auto h-full grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-y-16 items-start">
92+
93+
{/* Central Processing Unit (Profile) */}
94+
<div className="col-span-1 md:col-span-4 md:col-start-5 relative">
95+
<SchematicBox title="Core Processor" icon={Cpu} className="z-10 bg-[#001e40]">
96+
<div className="flex flex-col items-center text-center p-4">
97+
<div className="w-24 h-24 border-2 border-dashed border-cyan-400 rounded-full flex items-center justify-center mb-4 relative">
98+
<div className="absolute inset-0 animate-spin-slow border-t-2 border-cyan-400 rounded-full opacity-50"></div>
99+
<span className="text-4xl">⚡</span>
100+
</div>
101+
<h1 className="text-xl font-bold uppercase mb-1">{aboutData.profile.name}</h1>
102+
<p className="text-xs text-cyan-200 tracking-wider mb-4">{aboutData.profile.role}</p>
103+
<div className="w-full bg-white/10 p-2 text-[10px] text-left">
104+
<p>> SYS.INIT...</p>
105+
<p>> LOADING DRIVERS...</p>
106+
<p>> {aboutData.profile.tagline}</p>
107+
</div>
108+
</div>
109+
</SchematicBox>
110+
{/* Vertical Connector Down */}
111+
<ConnectorLine className="h-16 w-0.5 left-1/2 -bottom-16 hidden md:block" />
112+
</div>
113+
114+
{/* Experience Modules (Left Wing) */}
115+
<div className="col-span-1 md:col-span-4 relative">
116+
<ConnectorLine className="h-0.5 w-16 -right-8 top-12 hidden md:block" />
117+
<SchematicBox title="Memory Banks (Exp)" icon={HardDrives} delay={0.2}>
118+
<div className="space-y-4">
119+
{aboutData.experience.map((exp, i) => (
120+
<div key={i} className="relative pl-4 border-l border-white/20">
121+
<div className="absolute left-[-5px] top-1.5 w-2 h-2 bg-cyan-400 rounded-full" />
122+
<div className="flex justify-between items-baseline mb-1">
123+
<span className="font-bold text-sm">{exp.company}</span>
124+
<span className="text-[10px] bg-white/10 px-1">{exp.period}</span>
125+
</div>
126+
<div className="text-xs text-cyan-200 mb-1">{exp.role}</div>
127+
<p className="text-[10px] text-white/70 leading-relaxed">{exp.desc}</p>
128+
</div>
129+
))}
130+
</div>
131+
</SchematicBox>
132+
</div>
133+
134+
{/* Skills Modules (Right Wing) */}
135+
<div className="col-span-1 md:col-span-4 relative">
136+
<ConnectorLine className="h-0.5 w-16 -left-8 top-12 hidden md:block" />
137+
<SchematicBox title="I/O Interfaces (Skills)" icon={Circuitry} delay={0.3}>
138+
<div className="grid grid-cols-2 gap-3">
139+
{aboutData.skills.map((skill, i) => (
140+
<div key={i} className="bg-white/5 border border-white/10 p-2 flex flex-col justify-between h-20 relative overflow-hidden group">
141+
<div className="absolute top-0 right-0 p-1 opacity-20 group-hover:opacity-100 transition-opacity">
142+
{skill.icon && <skill.icon size={16} />}
143+
</div>
144+
<span className="text-xs font-bold z-10">{skill.name}</span>
145+
<div className="w-full bg-black/50 h-1.5 mt-2">
146+
<div className="bg-cyan-400 h-full" style={{ width: `${skill.level}%` }} />
147+
</div>
148+
<span className="text-[9px] text-right mt-1 font-mono">{skill.level}% EFFICIENCY</span>
149+
</div>
150+
))}
151+
</div>
152+
</SchematicBox>
153+
</div>
154+
155+
{/* Stats / Traits (Bottom) */}
156+
<div className="col-span-1 md:col-span-8 md:col-start-3 relative mt-8">
157+
<SchematicBox title="Auxiliary Systems" icon={ShareNetwork} delay={0.4}>
158+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
159+
{/* Superpower */}
160+
<div className="border border-white/20 p-3 relative">
161+
<div className="absolute -top-3 left-4 bg-[#002b5c] px-2 text-xs text-cyan-300">SPECIAL_ABILITY</div>
162+
<div className="flex items-center gap-3 mb-2">
163+
<Lightning size={24} className="text-yellow-400" />
164+
<div className="font-bold text-sm">{aboutData.traits.superpower.title}</div>
165+
</div>
166+
<p className="text-[10px] text-white/70">{aboutData.traits.superpower.desc}</p>
167+
</div>
168+
169+
{/* Hobby */}
170+
<div className="border border-white/20 p-3 relative">
171+
<div className="absolute -top-3 left-4 bg-[#002b5c] px-2 text-xs text-cyan-300">AUDIO_DRIVER</div>
172+
<div className="font-bold text-sm mb-2">{aboutData.traits.hobby.title}</div>
173+
<p className="text-[10px] text-white/70">{aboutData.traits.hobby.desc}</p>
174+
</div>
175+
176+
{/* Stats */}
177+
<div className="grid grid-cols-2 gap-2">
178+
{aboutData.stats.map((stat, i) => (
179+
<div key={i} className="bg-cyan-900/30 p-2 text-center border border-cyan-500/30">
180+
<div className="text-[10px] text-cyan-200">{stat.label}</div>
181+
<div className="text-lg font-bold">{stat.value}</div>
182+
</div>
183+
))}
184+
</div>
185+
</div>
186+
</SchematicBox>
187+
</div>
188+
189+
</div>
190+
</div>
191+
);
192+
};
193+
194+
export default SystemArchitecture;

0 commit comments

Comments
 (0)