Skip to content

Commit 294bcb0

Browse files
System-EndSystem-End
committed
ee
1 parent b3eb3e9 commit 294bcb0

20 files changed

+456
-251
lines changed

‎src/App.js‎

Lines changed: 27 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,34 @@
1-
import React, { useEffect, useState } from 'react';
2-
import './styles/App.css';
3-
import SpotifyList from './components/SpotifyList';
4-
import LoadingAnimation from './components/LoadingAnimation';
5-
import GithubRepos from './components/GithubRepos';
6-
import { Music, Code, Twitch, Github, Cpu, Shield } from 'lucide-react';
1+
import React from 'react';
2+
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
3+
import Navbar from './components/Navbar';
4+
import AboutPage from './pages/AboutPage';
5+
import APCSPPage from './pages/APCSPPage';
6+
import ProjectsPage from './pages/ProjectsPage';
7+
import ErrorBoundary from './components/ErrorBoundary';
8+
import './App.css';
79

810
const App = () => {
9-
const [age, setAge] = useState(0);
10-
11-
useEffect(() => {
12-
// Age calculation
13-
const calculateAge = () => {
14-
const birthDate = new Date('2009-05-15');
15-
const today = new Date();
16-
let age = today.getFullYear() - birthDate.getFullYear();
17-
const monthDiff = today.getMonth() - birthDate.getMonth();
18-
19-
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
20-
age--;
21-
}
22-
return age;
23-
};
24-
setAge(calculateAge());
25-
26-
// Particle effect setup
27-
const createParticles = () => {
28-
const particleContainer = document.querySelector('.particle-container');
29-
if (particleContainer) {
30-
for (let i = 0; i < 50; i++) {
31-
const particle = document.createElement('div');
32-
particle.className = 'particle';
33-
particle.style.left = `${Math.random() * 100}vw`;
34-
particle.style.animationDuration = `${Math.random() * 3 + 2}s`;
35-
particle.style.animationDelay = `${Math.random() * 2}s`;
36-
particleContainer.appendChild(particle);
37-
}
38-
}
39-
};
40-
41-
createParticles();
42-
}, []);
43-
44-
const interests = [
45-
{ icon: <Code size={24} />, title: 'Programming', description: 'Full-stack development & coding projects' },
46-
{ icon: <Cpu size={24} />, title: 'Robotics', description: 'Building & programming robots' },
47-
{ icon: <Shield size={24} />, title: 'Cybersecurity', description: 'Network security & ethical hacking' },
48-
{ icon: <Music size={24} />, title: 'Music', description: 'Music production & listening' },
49-
{ icon: <Twitch size={24} />, title: 'Streaming', description: 'FiveM & variety gaming on Twitch' },
50-
{ icon: <Github size={24} />, title: 'Open Source', description: 'Contributing to GitHub projects' }
51-
];
52-
5311
return (
54-
<div className="app-container animated-bg">
55-
<div className="particle-container" />
56-
57-
{/* Header Section */}
58-
<header className="header neon-text">
59-
<h1>EndofTimee</h1>
60-
<p className="subtitle">Programmer • Streamer • Foxgirl 🦊</p>
61-
</header>
62-
63-
{/* About Section */}
64-
<section className="content-section about-section">
65-
<h2 className="neon-text">About Me</h2>
66-
<div className="about-content">
67-
<p>Hey there! I'm a {age}-year-old transfem programmer and content creator.
68-
When I'm not coding or building robots, you can find me streaming on
69-
<a href="https://twitch.tv/EndofTimee" target="_blank" rel="noopener noreferrer"
70-
className="twitch-link">Twitch</a>!</p>
12+
<ErrorBoundary>
13+
<Router>
14+
<div className="app-container animated-bg">
15+
<Navbar />
16+
<main className="main-content">
17+
<Routes>
18+
<Route path="/" element={<AboutPage />} />
19+
<Route path="/apcsp" element={<APCSPPage />} />
20+
<Route path="/projects" element={<ProjectsPage />} />
21+
<Route path="*" element={
22+
<div className="error-page">
23+
<h1 className="text-glow">404: Page Not Found</h1>
24+
<p>Oops! This fox couldn't find what you're looking for.</p>
25+
</div>
26+
} />
27+
</Routes>
28+
</main>
7129
</div>
72-
</section>
73-
74-
{/* Interests Grid */}
75-
<section className="content-section interests-section">
76-
<h2 className="neon-text">What I Do</h2>
77-
<div className="interests-grid">
78-
{interests.map((interest, index) => (
79-
<div key={index} className="interest-card">
80-
<div className="interest-icon">{interest.icon}</div>
81-
<h3>{interest.title}</h3>
82-
<p>{interest.description}</p>
83-
</div>
84-
))}
85-
</div>
86-
</section>
87-
88-
{/* Streaming Section */}
89-
<section className="content-section stream-section">
90-
<h2 className="neon-text">Streaming</h2>
91-
<div className="stream-content">
92-
<p>Join me on Twitch for FiveM roleplay and various other games!
93-
I love interacting with chat and building a positive community.</p>
94-
<a href="https://twitch.tv/EndofTimee" target="_blank"
95-
rel="noopener noreferrer" className="twitch-button">
96-
<Twitch className="icon" />
97-
Watch Live
98-
</a>
99-
</div>
100-
</section>
101-
102-
{/* GitHub Section */}
103-
<div className="github-section">
104-
<GithubRepos />
105-
</div>
106-
107-
{/* Music Section */}
108-
<div className="music-section">
109-
<SpotifyList />
110-
</div>
111-
</div>
30+
</Router>
31+
</ErrorBoundary>
11232
);
11333
};
11434

‎src/assets/images/fox-icons/coding.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/images/fox-icons/gaming.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/assets/images/fox-icons/happy.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/assets/images/fox-icons/music.svg‎

Lines changed: 7 additions & 0 deletions
Loading

‎src/components/FoxCar.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/LoadingFox.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import '../styles/LoadingFox.css';
3+
4+
const LoadingFox = () => {
5+
return (
6+
<div className="loading-fox-container">
7+
<div className="fox-loader">
8+
<div className="fox-face">
9+
<div className="fox-ears">
10+
<div className="ear left"></div>
11+
<div className="ear right"></div>
12+
</div>
13+
<div className="fox-eyes">
14+
<div className="eye left"></div>
15+
<div className="eye right"></div>
16+
</div>
17+
<div className="fox-nose"></div>
18+
</div>
19+
<div className="loading-text">Loading...</div>
20+
</div>
21+
</div>
22+
);
23+
};
24+
25+
export default LoadingFox;

‎src/components/LoadingScreen.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎src/components/Navbar.js‎

Lines changed: 55 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,59 @@
11
import React from 'react';
2+
import { Link, useLocation } from 'react-router-dom';
3+
import ThemeToggle from './ThemeToggle';
4+
import { Home, Code, BookOpen, Twitch } from 'lucide-react';
25

3-
function Navbar() {
4-
return (
5-
<nav>
6-
<ul>
7-
<li><a href="/">Home</a></li>
8-
<li><a href="/pages/APCSP.html">APCSP Project</a></li>
9-
<li><a href="/pages/github-repos.html">GitHub Projects</a></li>
10-
</ul>
11-
<input type="color" id="theme-color-picker" title="Choose your color" />
12-
</nav>
13-
);
14-
}
6+
const Navbar = () => {
7+
const location = useLocation();
8+
9+
return (
10+
<nav className="navbar">
11+
<div className="nav-content">
12+
<Link to="/" className="nav-brand">
13+
<img src="/logo.jpg" alt="Logo" className="nav-logo" />
14+
<span className="text-glow">EndofTimee</span>
15+
</Link>
16+
17+
<div className="nav-links">
18+
<Link
19+
to="/"
20+
className={`nav-link ${location.pathname === '/' ? 'active' : ''}`}
21+
>
22+
<Home size={20} />
23+
<span>About</span>
24+
</Link>
25+
26+
<Link
27+
to="/projects"
28+
className={`nav-link ${location.pathname === '/projects' ? 'active' : ''}`}
29+
>
30+
<Code size={20} />
31+
<span>Projects</span>
32+
</Link>
33+
34+
<Link
35+
to="/apcsp"
36+
className={`nav-link ${location.pathname === '/apcsp' ? 'active' : ''}`}
37+
>
38+
<BookOpen size={20} />
39+
<span>APCSP</span>
40+
</Link>
41+
42+
<a
43+
href="https://twitch.tv/EndofTimee"
44+
target="_blank"
45+
rel="noopener noreferrer"
46+
className="nav-link"
47+
>
48+
<Twitch size={20} />
49+
<span>Stream</span>
50+
</a>
51+
</div>
52+
53+
<ThemeToggle />
54+
</div>
55+
</nav>
56+
);
57+
};
1558

1659
export default Navbar;

‎src/hooks/useGithubRepos.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { useState, useEffect } from 'react';
2+
3+
const useGithubRepos = () => {
4+
const [repos, setRepos] = useState([]);
5+
const [loading, setLoading] = useState(true);
6+
const [error, setError] = useState(null);
7+
8+
useEffect(() => {
9+
const fetchRepos = async () => {
10+
try {
11+
const response = await fetch('https://api.github.com/users/EndofTimee/repos?sort=updated');
12+
if (!response.ok) {
13+
throw new Error('Failed to fetch repositories');
14+
}
15+
const data = await response.json();
16+
17+
// Get additional details for each repo
18+
const repoDetails = await Promise.all(
19+
data.map(async (repo) => {
20+
try {
21+
const languagesResponse = await fetch(repo.languages_url);
22+
const languages = await languagesResponse.json();
23+
return {
24+
...repo,
25+
languages: Object.keys(languages)
26+
};
27+
} catch (error) {
28+
console.error(`Error fetching languages for ${repo.name}:`, error);
29+
return {
30+
...repo,
31+
languages: []
32+
};
33+
}
34+
})
35+
);
36+
37+
setRepos(repoDetails);
38+
} catch (err) {
39+
setError(err.message);
40+
console.error('Error fetching repos:', err);
41+
} finally {
42+
setLoading(false);
43+
}
44+
};
45+
46+
fetchRepos();
47+
}, []);
48+
49+
return { repos, loading, error };
50+
};
51+
52+
export default useGithubRepos;

0 commit comments

Comments
 (0)