Skip to content

Commit 8d6869a

Browse files
HyperExtendedRealityHyperExtendedReality
committed
Personalized text and improved Globe3D
1 parent 6feba5e commit 8d6869a

File tree

6 files changed

+116
-94
lines changed

6 files changed

+116
-94
lines changed

‎public/servers.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,16 @@
4141
{ "name": "Hong Kong", "lat": 22.32, "lng": 114.17 },
4242
{ "name": "Sydney, Australia", "lat": -33.87, "lng": 151.21 },
4343
{ "name": "Melbourne, Australia", "lat": -37.81, "lng": 144.96 },
44-
{ "name": "Auckland, New Zealand", "lat": -36.85, "lng": 174.76 }
44+
{ "name": "Auckland, New Zealand", "lat": -36.85, "lng": 174.76 },
45+
{ "name": "Honolulu, Hawaii, USA", "lat": 21.31, "lng": -157.86 },
46+
{ "name": "Seattle, USA", "lat": 47.61, "lng": -122.33 },
47+
{ "name": "Miami, USA", "lat": 25.76, "lng": -80.19 },
48+
{ "name": "New York, USA", "lat": 40.71, "lng": -74.01 },
49+
{ "name": "Querétaro, Mexico", "lat": 20.59, "lng": -100.39 },
50+
{ "name": "Nairobi, Kenya", "lat": -1.29, "lng": 36.82 },
51+
{ "name": "Lagos, Nigeria", "lat": 6.52, "lng": 3.38 },
52+
{ "name": "Delhi, India", "lat": 28.70, "lng": 77.10 },
53+
{ "name": "Beijing, China", "lat": 39.90, "lng": 116.41 },
54+
{ "name": "Shanghai, China", "lat": 31.23, "lng": 121.47 }
4555
]
4656
}

‎src/components/About.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,18 @@ const About = () => {
1515
<div className="border border-green-400/30 rounded-lg p-6 bg-black/50 backdrop-blur-sm">
1616
<pre className="text-green-400 font-mono text-sm overflow-x-auto">
1717
{`const aboutMe = {
18-
background: "Computer Science Graduate",
19-
experience: "5+ years in web development",
20-
passion: "Creating efficient, scalable solutions",
18+
background: [
19+
"Self-Taught Developer",
20+
"Harvard CS50 Certified",
21+
"Meta Front-end Certified"
22+
],
23+
experience: "4+ years in game & web dev",
24+
passion: "Building immersive digital experiences",
2125
currentFocus: [
22-
"Modern React applications",
23-
"RESTful API design",
24-
"Cloud architecture",
25-
"Performance optimization"
26+
"Unreal Engine & XR",
27+
"FiveM Server Development (Lua)",
28+
"Headless Web Architecture"
2629
],
27-
hobbies: ["Open source", "Tech blogging", "Gaming"],
2830
coffee: "☕".repeat(Math.floor(Math.random() * 5) + 1)
2931
};`}
3032
</pre>
@@ -33,11 +35,9 @@ const About = () => {
3335

3436
<div className="space-y-6">
3537
<div className="border border-green-400/30 rounded-lg p-6 bg-black/50 backdrop-blur-sm">
36-
<h3 className="text-xl font-mono text-green-400 mb-4">$ cat philosophy.txt</h3>
38+
<h3 className="text-xl font-mono text-green-400 mb-4">$ cat ./dev_philosophy.md</h3>
3739
<p className="text-green-300/80 leading-relaxed font-mono text-sm">
38-
I believe in writing clean, maintainable code that solves real-world problems.
39-
My approach combines technical excellence with user-centered design, ensuring
40-
that every application I build is both powerful and intuitive.
40+
My journey is rooted in a passion for creating interactive worlds. I apply game design principles to web development, focusing on performance, user engagement, and clean, scalable code. Whether it's a game mechanic or a UI component, I build with purpose and precision.
4141
</p>
4242
<div className="mt-4 p-3 bg-green-400/10 rounded border-l-4 border-green-400">
4343
<p className="text-green-400 font-mono text-xs">
@@ -47,12 +47,12 @@ const About = () => {
4747
</div>
4848

4949
<div className="border border-blue-400/30 rounded-lg p-6 bg-black/50 backdrop-blur-sm">
50-
<h3 className="text-xl font-mono text-blue-400 mb-4">$ ls achievements/</h3>
50+
<h3 className="text-xl font-mono text-blue-400 mb-4">$ ls ./achievements/</h3>
5151
<ul className="space-y-2 text-blue-300/80 font-mono text-sm">
52-
<li>→ 50+ projects deployed to production</li>
53-
<li>→ Led development teams of 5+ engineers</li>
54-
<li>→ Reduced load times by 60% through optimization</li>
55-
<li>→ Active contributor to open-source projects</li>
52+
<li>→ Freelance developer for multiple FiveM communities</li>
53+
<li>→ Shipped numerous self-directed game projects</li>
54+
<li>→ Developed full-stack headless e-commerce sites</li>
55+
<li>→ Completed Harvard's CS50 & Meta's FE Cert</li>
5656
</ul>
5757
</div>
5858
</div>

‎src/components/Globe3D.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const Globe3D = () => {
7373

7474
// --- Globe Layers ---
7575

76-
// MODIFICATION: Add an invisible sphere that occludes (hides) objects on the far side.
76+
// Add an invisible sphere that occludes (hides) objects on the far side.
7777
// It's invisible because colorWrite is false, but it writes to the depth buffer.
7878
const occluder = new THREE.Mesh(
7979
new THREE.SphereGeometry(globeRadius, 64, 64),
@@ -112,7 +112,6 @@ const Globe3D = () => {
112112
}
113113
}
114114
const gridGeom = new THREE.BufferGeometry().setFromPoints(gridPoints);
115-
// MODIFICATION: Set depthTest to false to make the grid visible through the globe.
116115
const gridMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.05, depthTest: false });
117116
const gridLines = new THREE.LineSegments(gridGeom, gridMaterial);
118117
globeGroup.add(gridLines);
@@ -125,7 +124,6 @@ const Globe3D = () => {
125124
]).then(([countriesData, serverJson]) => {
126125
const servers: Server[] = serverJson.servers;
127126

128-
// This material will now be properly occluded by the invisible sphere.
129127
const outlineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.75 });
130128
const outlinePoints: THREE.Vector3[] = [];
131129
countriesData.features.forEach((feature: any) => {
@@ -162,13 +160,14 @@ const Globe3D = () => {
162160
establishedConnections.add(key);
163161

164162
const distance = start.vector.distanceTo(end.vector);
165-
const arcHeight = distance * distance * 0.05;
163+
// MODIFICATION: Increased the arc height factor to prevent long connections from
164+
// visually clipping through the globe. This makes the arcs more pronounced.
165+
const arcHeight = distance * distance * 0.0625;
166166
const controlPoint = start.vector.clone().lerp(end.vector, 0.5).normalize().multiplyScalar(globeRadius + arcHeight);
167167

168168
const curve = new THREE.QuadraticBezierCurve3(start.vector, controlPoint, end.vector);
169169

170170
const tubeGeom = new THREE.TubeGeometry(curve, 32, 0.005, 8, false);
171-
// This material will now be properly occluded by the invisible sphere.
172171
const trailMaterial = new THREE.MeshBasicMaterial({ map: trailTexture, transparent: true, blending: THREE.AdditiveBlending, color: 0xffffff });
173172
globeGroup.add(new THREE.Mesh(tubeGeom, trailMaterial));
174173

@@ -239,20 +238,27 @@ const Globe3D = () => {
239238
}
240239
}
241240

242-
// 4. Create local peering (nearest neighbor)
241+
// MODIFICATION: Connect to the 2 nearest neighbors for denser, more realistic peering.
242+
// This increases the chance of connections like Hawaii-Japan.
243+
const PEERS_TO_CONNECT = 2;
243244
serverPoints.forEach(startServer => {
244-
const nearest = serverPoints
245+
const nearestPeers = serverPoints
245246
.filter(p => p.name !== startServer.name)
246-
.sort((a,b) => startServer.vector.distanceTo(a.vector) - startServer.vector.distanceTo(b.vector))[0];
247-
createConnection(startServer, nearest);
247+
.sort((a,b) => startServer.vector.distanceTo(a.vector) - startServer.vector.distanceTo(b.vector));
248+
249+
for (let i = 0; i < PEERS_TO_CONNECT; i++) {
250+
if (nearestPeers[i]) {
251+
createConnection(startServer, nearestPeers[i]);
252+
}
253+
}
248254
});
249255

250256
});
251257

252258
const animate = () => {
253259
requestAnimationFrame(animate);
254260
connections.forEach(conn => {
255-
if (conn.trailMaterial.map) conn.trailMaterial.map.offset.x -= 0.002;
261+
if (conn.trailMaterial.map) conn.trailMaterial.map.offset.x -= 0.0005;
256262
conn.packet1.position = (conn.packet1.position + conn.packet1.speed) % 1;
257263
conn.packet2.position = (conn.packet2.position + conn.packet2.speed) % 1;
258264
conn.curve.getPointAt(conn.packet1.position, conn.packet1.sprite.position);
@@ -289,7 +295,7 @@ const Globe3D = () => {
289295
};
290296
}, [trailTexture, glowTexture]);
291297

292-
return <div ref={mountRef} style={{ width: '100%', height: '100%' }} className="cursor-grab active:cursor-grabbing" />;
298+
return <div ref={mountRef} style={{ width: '100%', height: '100%', touchAction: 'none' }} className="cursor-grab active:cursor-grabbing" />;
293299
};
294300

295301
export default Globe3D;

‎src/components/Hero.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ const Hero = () => {
88
const [currentIndex, setCurrentIndex] = useState(0);
99
const [showCursor, setShowCursor] = useState(true);
1010

11+
// No changes needed in the state or effects
1112
const codeSnippets = [
12-
"Full-Stack Developer", "React Specialist", "Node.js Expert", "Database Architect",
13+
"Game Developer", "XR Specialist", "FiveM & Lua Expert", "Full-Stack Developer",
1314
];
1415

1516
useEffect(() => {
@@ -39,17 +40,20 @@ const Hero = () => {
3940
}, []);
4041

4142
return (
42-
<section id="home" className="min-h-screen flex items-center justify-center relative px-4 overflow-hidden">
43-
{/* z-0: The absolute bottom layer */}
43+
// MODIFICATION: Changed to flex-col for mobile-first layout.
44+
// lg:relative is crucial for absolute positioning to work relative to the section on desktop.
45+
<section id="home" className="min-h-screen flex flex-col items-center justify-center relative px-4 overflow-hidden py-16 lg:py-0">
4446
<MatrixBackground />
4547

4648
{/*
4749
DEVELOPER CODE SNIPPET (z-10)
48-
- Positioned absolutely to sit behind main content but above the matrix.
49-
- `top-24` leaves space for a potential navbar.
50-
- `left-4` removes the large implicit margin.
50+
MODIFICATION: Becomes a normal block on mobile and absolute only on desktop.
51+
- `order-1` places it first on mobile.
52+
- Responsive classes like `lg:absolute` apply the desktop layout.
53+
- Removed `hidden` to make it visible on mobile.
5154
*/}
52-
<div className="absolute top-24 left-20 p-2 border border-green-400/30 rounded-lg bg-black/50 backdrop-blur-sm z-10 w-100% max-w-sm lg:max-w-md hidden lg:block">
55+
<div className="w-full max-w-sm p-2 border border-green-400/30 rounded-lg bg-black/50 backdrop-blur-sm z-10
56+
lg:absolute lg:top-24 lg:left-20 lg:max-w-md order-1 lg:order-none">
5357
<pre className="text-sm text-green-400 font-mono whitespace-pre-wrap">
5458
{`import { useState } from "react";
5559
@@ -72,31 +76,33 @@ export function hireDeveloper() {
7276

7377
{/*
7478
GLOBE SECTION (z-10)
75-
- Increased size to 40vw for more presence.
76-
- `pointer-events-none` on the container allows clicks to pass through.
77-
- The Globe3D component itself now has `pointer-events-auto` via className.
79+
MODIFICATION: Now responsive. It's a normal block on mobile and absolute on desktop.
80+
- `order-3` places it last on mobile.
81+
- Sizing and positioning are now responsive (`w-[80vw]` on mobile, `lg:w-[40vw]` on desktop).
7882
*/}
79-
<div className="absolute inset-y-0 -right-20 top-28 w-[40vw] flex items-center justify-center pointer-events-none z-10">
80-
<div className="w-full aspect-square relative mr-16">
83+
<div className="relative w-[80vw] sm:w-[60vw] max-w-xs mt-8
84+
lg:absolute lg:inset-y-0 lg:-right-20 lg:w-[40vw] lg:max-w-none
85+
flex items-center justify-center pointer-events-none z-10
86+
order-3 lg:order-none">
87+
<div className="w-full aspect-square relative lg:mr-16">
8188
<div className="absolute inset-0 bg-green-500/10 rounded-full blur-3xl"></div>
82-
{/* Globe component is inside a div to manage pointer events */}
8389
<div className="absolute inset-0 pointer-events-auto">
8490
<Globe3D />
8591
</div>
86-
<div className="absolute top-8 right-12 text-green-400 font-mono text-xs">
92+
<div className="absolute top-8 right-12 text-green-400 font-mono text-xs hidden lg:block">
8793
// Global Network
8894
</div>
8995
</div>
9096
</div>
9197

92-
{/* MAIN CONTENT (z-20) - Sits on top of everything else */}
93-
<div className="max-w-7xl mx-auto w-full flex justify-center items-center relative z-20">
94-
{/*
95-
This container now only holds the central HelloWorld content.
96-
It's centered using flexbox on the main wrapper.
97-
The left and right columns are now absolutely positioned.
98-
*/}
99-
<div className="w-full lg:w-1/2 text-center flex flex-col items-center">
98+
{/*
99+
MAIN CONTENT (z-20)
100+
MODIFICATION: Container width is now constrained on desktop to prevent overlap.
101+
- `lg:max-w-3xl` stops the container from covering the globe.
102+
- `order-2` places it in the middle on mobile.
103+
*/}
104+
<div className="w-full lg:max-w-3xl mx-auto flex justify-center items-center relative z-20 order-2 lg:order-none mt-8 lg:mt-0">
105+
<div className="w-full text-center flex flex-col items-center">
100106
<h1 className="text-5xl md:text-7xl font-bold mb-6 text-green-400 text-center">
101107
{"<HelloWorld />"}
102108
</h1>
@@ -129,7 +135,7 @@ export function hireDeveloper() {
129135
</div>
130136
</div>
131137

132-
{/* Scroll Down Indicator */}
138+
{/* Scroll Down Indicator - No changes needed */}
133139
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce z-20">
134140
<div className="w-6 h-10 border-2 border-green-400/50 rounded-full flex justify-center">
135141
<div className="w-1 h-3 bg-green-400 rounded-full mt-2 animate-pulse"></div>

‎src/components/Projects.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,36 @@ import { Code, Database, Terminal } from "lucide-react";
55
const Projects = () => {
66
const [activeProject, setActiveProject] = useState(0);
77

8-
const projects = [
8+
const projects = [
99
{
1010
id: 1,
11-
title: "E-Commerce Platform",
11+
title: "Munchi - Headless E-Commerce",
1212
type: "Full-Stack Application",
13-
description: "A complete e-commerce solution with real-time inventory management, payment processing, and admin dashboard.",
14-
tech: ["React", "Node.js", "MongoDB", "Stripe", "Redis"],
15-
features: ["User authentication", "Payment integration", "Admin panel", "Real-time updates"],
16-
status: "Production",
17-
lines: "15,000+"
13+
description: "An exotic snacks e-commerce website built with a headless WordPress backend, delivering a fast, modern frontend experience.",
14+
tech: ["Next.js", "React", "WordPress", "GraphQL", "Tailwind CSS"],
15+
features: ["Headless architecture", "Stripe payment integration", "Dynamic inventory", "Custom API routes"],
16+
status: "Portfolio",
17+
lines: "9,000+"
1818
},
1919
{
2020
id: 2,
21-
title: "Task Management API",
22-
type: "Backend Service",
23-
description: "RESTful API with GraphQL support for team collaboration and project management with real-time notifications.",
24-
tech: ["Node.js", "GraphQL", "PostgreSQL", "Docker", "AWS"],
25-
features: ["GraphQL API", "Real-time sync", "Team collaboration", "Cloud deployment"],
26-
status: "Active",
27-
lines: "8,500+"
21+
title: "FiveM Custom Gameplay Systems",
22+
type: "Game & Backend Development",
23+
description: "Developed custom server-side gameplay mechanics, inventories, and UI systems for GTA V FiveM servers as a freelance developer.",
24+
tech: ["Lua", "FiveM", "NUI (JS/HTML/CSS)", "MariaDB", "REST APIs"],
25+
features: ["Server-side logic", "Custom UI with NUI", "Database integration", "Optimized for performance"],
26+
status: "Live on Client Servers",
27+
lines: "20,000+ (aggregate)"
2828
},
2929
{
3030
id: 3,
31-
title: "Analytics Dashboard",
31+
title: "Interactive 3D Portfolio",
3232
type: "Frontend Application",
33-
description: "Interactive data visualization dashboard with custom charts, filters, and export functionality.",
34-
tech: ["React", "TypeScript", "D3.js", "Tailwind", "Vite"],
35-
features: ["Interactive charts", "Data export", "Custom filters", "Responsive design"],
36-
status: "Beta",
37-
lines: "12,000+"
33+
description: "The personal portfolio you are currently viewing, featuring an interactive 3D globe and a responsive, modern design.",
34+
tech: ["React", "Three.js", "TypeScript", "Tailwind CSS", "Vite"],
35+
features: ["Interactive 3D elements", "Responsive design", "Dynamic text effects", "Component-based architecture"],
36+
status: "Live",
37+
lines: "3,000+"
3838
}
3939
];
4040

@@ -47,7 +47,7 @@ const Projects = () => {
4747
</h2>
4848
<div className="w-24 h-1 bg-green-400 mx-auto mb-4"></div>
4949
<p className="text-green-300/80 font-mono">
50-
git log --oneline --decorate --graph
50+
git log --merges --first-parent
5151
</p>
5252
</div>
5353

‎src/components/Skills.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11

22
const Skills = () => {
3-
const skillCategories = [
3+
const skillCategories = [
44
{
5-
title: "Frontend",
5+
title: "Game & Specialized Dev",
66
color: "green",
77
skills: [
8-
{ name: "React", level: 95 },
9-
{ name: "TypeScript", level: 90 },
10-
{ name: "Next.js", level: 85 },
11-
{ name: "Tailwind CSS", level: 92 },
12-
{ name: "Vue.js", level: 78 }
8+
{ name: "Unreal Engine (Blueprints)", level: 85 },
9+
{ name: "Unity (C#)", level: 80 },
10+
{ name: "FiveM (Lua)", level: 95 },
11+
{ name: "XR (VR/AR)", level: 88 },
12+
{ name: "FiveM (C#)", level: 75 },
1313
]
1414
},
1515
{
16-
title: "Backend",
16+
title: "Frontend",
1717
color: "blue",
1818
skills: [
19-
{ name: "Node.js", level: 88 },
20-
{ name: "Express", level: 85 },
21-
{ name: "Python", level: 82 },
22-
{ name: "GraphQL", level: 75 },
23-
{ name: "REST APIs", level: 93 }
19+
{ name: "React / Next.js", level: 90 },
20+
{ name: "Svelte / Astro", level: 85 },
21+
{ name: "TypeScript", level: 88 },
22+
{ name: "Vue.js", level: 80 },
23+
{ name: "jQuery / CSS / HTML", level: 92 },
2424
]
2525
},
2626
{
27-
title: "Database & Cloud",
27+
title: "Backend & Database",
2828
color: "purple",
2929
skills: [
30-
{ name: "MongoDB", level: 87 },
31-
{ name: "PostgreSQL", level: 83 },
32-
{ name: "AWS", level: 80 },
33-
{ name: "Docker", level: 78 },
34-
{ name: "Redis", level: 72 }
30+
{ name: "Node.js / REST APIs", level: 85 },
31+
{ name: "Python", level: 70 },
32+
{ name: "PostgreSQL / MySQL", level: 82 },
33+
{ name: "MariaDB", level: 88 },
34+
{ name: "Drizzle ORM", level: 80 },
3535
]
3636
}
3737
];
@@ -50,11 +50,11 @@ const Skills = () => {
5050
<div className="max-w-6xl mx-auto">
5151
<div className="text-center mb-16">
5252
<h2 className="text-4xl font-bold mb-4 text-green-400 font-mono">
53-
{"/* Technical Skills */"}
53+
{"/* Technical Arsenal */"}
5454
</h2>
5555
<div className="w-24 h-1 bg-green-400 mx-auto mb-4"></div>
5656
<p className="text-green-300/80 font-mono">
57-
const skills = require('./my-expertise.json');
57+
const expertise = require('./skills.json');
5858
</p>
5959
</div>
6060

0 commit comments

Comments
 (0)