Skip to content

Commit ac77427

Browse files
fezcodefezcode
committed
Page titles.
new icons
1 parent 806cf79 commit ac77427

File tree

8 files changed

+207
-8
lines changed

8 files changed

+207
-8
lines changed

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
body {
66
margin: 0;
7-
background-color: #1a0a0a;
7+
background-color: #030712;
88
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
99
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
1010
sans-serif;

‎src/pages/AboutPage.js‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ const LinkRenderer = ({ href, children }) => {
1313
);
1414
};
1515

16+
1617
const AboutPage = () => {
1718
usePageTitle('About Me');
1819
const [content, setContent] = useState('');
1920
const [email, setEmail] = useState('');
2021
const [title, setTitle] = useState('About Me');
22+
const [loading, setLoading] = useState(true);
2123

2224
useEffect(() => {
2325
const fetchAboutContent = async () => {
@@ -47,12 +49,43 @@ const AboutPage = () => {
4749

4850
} catch (err) {
4951
console.error("Error fetching about page content:", err);
50-
}
51-
};
52+
} finally {
53+
setLoading(false);
54+
}
55+
};
56+
5257

5358
fetchAboutContent();
5459
}, []);
5560

61+
if (loading) {
62+
// Skeleton loading screen for AboutPage
63+
return (
64+
<div className="py-16 sm:py-24">
65+
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
66+
<div className="border border-gray-700 p-8 rounded-lg shadow-xl flex">
67+
<div className="w-1 bg-gray-600 mr-1"></div>
68+
<div className="w-1 bg-gray-700 mr-1"></div>
69+
<div className="w-1 bg-gray-800 mr-8"></div>
70+
<div className="flex-grow">
71+
<div className="h-10 bg-gray-800 rounded w-3/4 mb-8 animate-pulse"></div>
72+
<div className="space-y-4">
73+
<div className="h-6 bg-gray-800 rounded w-full animate-pulse"></div>
74+
<div className="h-6 bg-gray-800 rounded w-5/6 animate-pulse"></div>
75+
<div className="h-6 bg-gray-800 rounded w-full animate-pulse"></div>
76+
<div className="h-6 bg-gray-800 rounded w-2/3 animate-pulse"></div>
77+
</div>
78+
<div className="mt-8">
79+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4 animate-pulse"></div>
80+
<div className="h-6 bg-gray-800 rounded w-1/2 animate-pulse"></div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
);
87+
}
88+
5689
return (
5790
<div className="py-16 sm:py-24">
5891
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">

‎src/pages/BlogPage.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ArrowLeftIcon } from '@phosphor-icons/react';
77
const BlogPage = () => {
88
usePageTitle('Blog');
99
const [posts, setPosts] = useState([]);
10+
const [loading, setLoading] = useState(true);
1011

1112
useEffect(() => {
1213
const fetchPostSlugs = async () => {
@@ -22,12 +23,37 @@ const BlogPage = () => {
2223
} catch (error) {
2324
console.error('Error fetching post slugs:', error);
2425
setPosts([]);
26+
} finally {
27+
setLoading(false);
2528
}
2629
};
2730

2831
fetchPostSlugs();
2932
}, []);
3033

34+
if (loading) {
35+
// Skeleton loading screen for BlogPage
36+
return (
37+
<div className="py-16 sm:py-24 animate-pulse">
38+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
39+
<div className="mx-auto max-w-2xl text-center">
40+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4 mx-auto"></div>
41+
<div className="h-12 bg-gray-800 rounded w-3/4 mb-4 mx-auto"></div>
42+
<div className="h-6 bg-gray-800 rounded w-1/2 mb-8 mx-auto"></div>
43+
</div>
44+
<div className="mt-16 space-y-8">
45+
{[...Array(5)].map((_, i) => (
46+
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6">
47+
<div className="h-6 bg-gray-700 rounded w-3/4 mb-4"></div>
48+
<div className="h-4 bg-gray-700 rounded w-1/2"></div>
49+
</div>
50+
))}
51+
</div>
52+
</div>
53+
</div>
54+
);
55+
}
56+
3157
return (
3258
<div className="py-16 sm:py-24">
3359
<div className="mx-auto max-w-7xl px-6 lg:px-8">

‎src/pages/BlogPostPage.js‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,35 @@ const BlogPostPage = () => {
7777
}, [post]); // Re-attach scroll listener if post changes
7878

7979
if (loading) {
80-
return <div className="text-center py-16">Loading...</div>;
80+
// Skeleton loading screen for BlogPostPage
81+
return (
82+
<div className="bg-gray-900 py-16 sm:py-24 animate-pulse">
83+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
84+
<div className="lg:grid lg:grid-cols-4 lg:gap-8">
85+
<div className="lg:col-span-3">
86+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4"></div>
87+
<div className="h-12 bg-gray-800 rounded w-3/4 mb-8"></div>
88+
<div className="space-y-4">
89+
<div className="h-6 bg-gray-800 rounded w-full"></div>
90+
<div className="h-6 bg-gray-800 rounded w-5/6"></div>
91+
<div className="h-6 bg-gray-800 rounded w-full"></div>
92+
<div className="h-6 bg-gray-800 rounded w-2/3"></div>
93+
</div>
94+
</div>
95+
<div className="hidden lg:block">
96+
<div className="bg-gray-800 rounded-lg shadow-lg p-6">
97+
<div className="h-8 bg-gray-700 rounded w-1/2 mb-4"></div>
98+
<div className="space-y-2">
99+
<div className="h-4 bg-gray-700 rounded w-full"></div>
100+
<div className="h-4 bg-gray-700 rounded w-3/4"></div>
101+
<div className="h-4 bg-gray-700 rounded w-1/2"></div>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
);
81109
}
82110

83111
if (!post) {

‎src/pages/HomePage.js‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import usePageTitle from '../utils/usePageTitle';
1010
const HomePage = () => {
1111
usePageTitle('Home');
1212
const [posts, setPosts] = useState([]);
13+
const [loadingPosts, setLoadingPosts] = useState(true);
1314
const { projects, loading, error } = useProjects();
1415
const pinnedProjects = projects.filter(p => p.pinned);
1516

@@ -27,14 +28,50 @@ const HomePage = () => {
2728
} catch (error) {
2829
console.error('Error fetching post slugs:', error);
2930
setPosts([]);
31+
} finally {
32+
setLoadingPosts(false);
3033
}
3134
};
3235

3336
fetchPostSlugs();
3437
}, []);
3538

36-
if (loading) {
37-
return <div className="py-16 sm:py-24 text-center text-white">Loading projects...</div>;
39+
if (loading || loadingPosts) {
40+
// Skeleton loading screen for HomePage
41+
return (
42+
<div className="py-16 sm:py-24">
43+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
44+
<div className="mx-auto max-w-2xl text-center">
45+
<div className="h-10 bg-gray-800 rounded w-3/4 mx-auto mb-4"></div>
46+
<div className="h-6 bg-gray-800 rounded w-1/2 mx-auto"></div>
47+
</div>
48+
49+
<div className="mt-16">
50+
<div className="h-8 bg-gray-800 rounded w-1/3 mx-auto mb-8"></div>
51+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
52+
{[...Array(2)].map((_, i) => (
53+
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6 animate-pulse">
54+
<div className="h-6 bg-gray-700 rounded w-3/4 mb-4"></div>
55+
<div className="h-4 bg-gray-700 rounded w-1/2"></div>
56+
</div>
57+
))}
58+
</div>
59+
</div>
60+
61+
<div className="mt-8">
62+
<div className="h-8 bg-gray-800 rounded w-1/3 mx-auto mb-8"></div>
63+
<div className="space-y-4">
64+
{[...Array(3)].map((_, i) => (
65+
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6 animate-pulse">
66+
<div className="h-6 bg-gray-700 rounded w-full mb-2"></div>
67+
<div className="h-4 bg-gray-700 rounded w-5/6"></div>
68+
</div>
69+
))}
70+
</div>
71+
</div>
72+
</div>
73+
</div>
74+
);
3875
}
3976

4077
if (error) {

‎src/pages/LogsPage.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import usePageTitle from "../utils/usePageTitle";
88
const LogsPage = () => {
99
usePageTitle('Logs <?>');
1010
const [logs, setLogs] = useState([]);
11+
const [loading, setLoading] = useState(true);
1112

1213
useEffect(() => {
1314
const fetchLogs = async () => {
@@ -17,12 +18,37 @@ const LogsPage = () => {
1718
setLogs(data);
1819
} catch (err) {
1920
console.error("Error fetching logs:", err);
21+
} finally {
22+
setLoading(false);
2023
}
2124
};
2225

2326
fetchLogs();
2427
}, []);
2528

29+
if (loading) {
30+
// Skeleton loading screen for LogsPage
31+
return (
32+
<div className="py-16 sm:py-24 animate-pulse">
33+
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
34+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4"></div>
35+
<hr className="border-gray-700 mb-8" />
36+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
37+
{[...Array(6)].map((_, i) => (
38+
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6">
39+
<div className="h-6 bg-gray-700 rounded w-3/4 mb-4"></div>
40+
<div className="h-4 bg-gray-700 rounded w-1/2 mb-4"></div>
41+
<div className="h-4 bg-gray-700 rounded w-full"></div>
42+
<div className="h-4 bg-gray-700 rounded w-full"></div>
43+
<div className="h-4 bg-gray-700 rounded w-1/3"></div>
44+
</div>
45+
))}
46+
</div>
47+
</div>
48+
</div>
49+
);
50+
}
51+
2652
return (
2753
<div className="py-16 sm:py-24">
2854
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">

‎src/pages/ProjectPage.js‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,36 @@ const ProjectPage = () => {
1111
const { projects, loading, error } = useProjects();
1212

1313
if (loading) {
14-
return <div className="py-16 sm:py-24 text-center text-white">Loading project...</div>;
14+
// Skeleton loading screen for ProjectPage
15+
return (
16+
<div className="bg-gray-900 py-16 sm:py-24 animate-pulse">
17+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
18+
<div className="lg:grid lg:grid-cols-4 lg:gap-8">
19+
<div className="lg:col-span-3">
20+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4"></div>
21+
<div className="h-12 bg-gray-800 rounded w-3/4 mb-8"></div>
22+
<div className="h-64 bg-gray-800 rounded w-full mb-8"></div>
23+
<div className="space-y-4">
24+
<div className="h-6 bg-gray-800 rounded w-full"></div>
25+
<div className="h-6 bg-gray-800 rounded w-5/6"></div>
26+
<div className="h-6 bg-gray-800 rounded w-full"></div>
27+
<div className="h-6 bg-gray-800 rounded w-2/3"></div>
28+
</div>
29+
</div>
30+
<div className="hidden lg:block">
31+
<div className="bg-gray-800 rounded-lg shadow-lg p-6">
32+
<div className="h-8 bg-gray-700 rounded w-1/2 mb-4"></div>
33+
<div className="space-y-2">
34+
<div className="h-4 bg-gray-700 rounded w-full"></div>
35+
<div className="h-4 bg-gray-700 rounded w-3/4"></div>
36+
<div className="h-4 bg-gray-700 rounded w-1/2"></div>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</div>
43+
);
1544
}
1645

1746
if (error) {

‎src/pages/ProjectsPage.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,27 @@ const ProjectsPage = () => {
1010
const { projects, loading, error } = useProjects();
1111

1212
if (loading) {
13-
return <div className="py-16 sm:py-24 text-center text-white">Loading projects...</div>;
13+
// Skeleton loading screen for ProjectsPage
14+
return (
15+
<div className="py-16 sm:py-24 animate-pulse">
16+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
17+
<div className="mx-auto max-w-2xl text-center">
18+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4 mx-auto"></div>
19+
<div className="h-12 bg-gray-800 rounded w-3/4 mb-4 mx-auto"></div>
20+
<div className="h-6 bg-gray-800 rounded w-1/2 mb-8 mx-auto"></div>
21+
</div>
22+
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
23+
{[...Array(6)].map((_, i) => (
24+
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6">
25+
<div className="h-6 bg-gray-700 rounded w-3/4 mb-4"></div>
26+
<div className="h-4 bg-gray-700 rounded w-1/2 mb-4"></div>
27+
<div className="h-4 bg-gray-700 rounded w-full"></div>
28+
</div>
29+
))}
30+
</div>
31+
</div>
32+
</div>
33+
);
1434
}
1535

1636
if (error) {

0 commit comments

Comments
 (0)