Skip to content

Commit a32fbda

Browse files
author
“kyraezikeuzor”
committed
Revamp projects page (faster, new design) and fix events page
1 parent 2381581 commit a32fbda

File tree

13 files changed

+320
-576
lines changed

13 files changed

+320
-576
lines changed

‎app/events/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ export const revalidate = 0;
1616
export default async function EventPage() {
1717
const upcomingEvents = await getUpcomingEvents();
1818
const recentEvents = await getRecentEvents();
19+
20+
console.log("recent count:", recentEvents.length);
21+
console.log("statuses:", recentEvents.map(e => e.status));
22+
23+
1924

2025

2126
return (

‎app/projects/Credit.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Link from "next/link";
2+
3+
export default function Credit() {
4+
return (
5+
<div className="font-medium opacity-90 text-right text-lg justify-center items-center gap-4 z-10 pt-12 ">
6+
<div>
7+
Made by {" "}
8+
<Link
9+
className='text-red underline'
10+
target="_blank"
11+
href="https://kyraezikeuzor.com">
12+
Kyra
13+
</Link> from {" "}
14+
<Link
15+
className='text-red underline'
16+
target="_blank"
17+
href="https://hackclub.com">
18+
Hack Club
19+
</Link>.
20+
</div>
21+
</div>
22+
);
23+
}

‎app/projects/GalleryFooter.tsx‎

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

‎app/projects/[githubUsername]/[projectId]/page.tsx‎

Lines changed: 42 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,54 @@
1-
import { getAllProjects } from "@/lib/projects";
21
import Link from "next/link";
3-
import Image from "next/image";
4-
import AthenaAwardsPainting from "@/components/AthenaAwardsPainting";
5-
import { baseAthenaAwardProjectImageUrl } from "@/lib/constants";
2+
import { fetchProjectById } from "@/lib/projects";
3+
import { Project as ProjectType } from "@/types";
4+
import { FaArrowLeftLong } from "react-icons/fa6";
65

7-
export default async function ProjectDetailPage({
6+
export default async function ProjectPage({
87
params,
98
}: {
10-
params: Promise<{ githubUsername: string; projectId: string }>;
9+
params: Promise<{ projectId: string }>;
1110
}) {
12-
const { githubUsername, projectId } = await params;
13-
const projects = await getAllProjects();
14-
const project = projects.find(
15-
(p) => p.id === projectId && p.githubUsername === githubUsername
16-
);
11+
const { projectId } = await params;
12+
const project = await fetchProjectById(projectId);
1713

18-
if (!project) {
19-
return <div className="p-8 text-center text-xl">Project not found. {projects.length}</div>;
20-
}
14+
return (
15+
<div className="py-16 px-6 lg:px-32">
16+
<Link href="/projects" className="text-2xl font-bold opacity-90 flex gap-2 transition-all items-center hover:gap-4 cursor-pointer">
17+
<FaArrowLeftLong /> Athena Gallery
18+
</Link>
19+
20+
<div className="mx-auto max-w-2xl md:max-w-3xl mt-12 px-6 md:px-12 py-10 flex flex-col gap-4 items-center border rounded-2xl border-red shadow-sm">
21+
<h1 className="text-4xl md:text-5xl opacity-90 font-bold text-center">{project.projectName}</h1>
22+
23+
<div className="flex gap-3 items-center">
24+
<Link href={`/projects/${project.githubUsername}`} className="text-red text-lg text-center font-bold hover:underline">
25+
View @{project.githubUsername}&apos;s projects →
26+
</Link>
27+
</div>
2128

22-
return (
23-
<div className=" mx-auto bg-[#8c2e37] min-h-screen">
24-
<Link
25-
href={`/projects/${project.githubUsername}`}
26-
className="text-[#D35648 text-2xl font-bold flex text-white inline-block px-6 lg:px-32 py-8 border-b-2 border-white/10 shadow-md w-full "
27-
>
28-
← {project.githubUsername}&apos;s Projects
29-
</Link>
30-
<div className=" flex flex-col lg:flex-row items-center gap-2 md:gap-16 bg-[url(/bg.svg)] py-12 px-[12vw]">
31-
<div className="w-full lg:w-1/2">
32-
<AthenaAwardsPainting
33-
image={project.imageUrl || `${baseAthenaAwardProjectImageUrl}`}
34-
description={project.projectName}
35-
size="project"
36-
/>
37-
</div>
38-
<div className="w-full lg:w-1/2 bg-[#8C2E37] border-2 border-white/10 rounded-lg p-8 shadow-md">
39-
<h1 className="text-4xl text-white font-bold playfair-display">
40-
{project.projectName}
41-
</h1>
42-
<p className="text-white text-base lg:text-lg my-4 whitespace-pre-wrap">
43-
{project.description}
44-
</p>
45-
<div className="flex flex-col lg:flex-row gap-4">
46-
<div className="flex flex-wrap gap-4 ">
47-
{project.codeUrl && (
48-
<a
49-
href={project.codeUrl}
50-
target="_blank"
51-
rel="noopener noreferrer"
52-
className="text-[#D35648] hover:underline text-lg"
53-
>
54-
View Code
55-
</a>
56-
)}
57-
</div>
58-
<div className="flex flex-wrap gap-4 ">
59-
{project.playableUrl && (
60-
<a
61-
href={project.playableUrl}
62-
target="_blank"
63-
rel="noopener noreferrer"
64-
className="text-[#D35648] hover:underline text-lg"
65-
>
66-
Live Demo
67-
</a>
68-
)}
69-
</div>
70-
<div className="flex flex-wrap gap-4 ">
71-
<a
72-
href={`https://github.com/${project.githubUsername}`}
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
className="text-[#D35648] hover:underline text-lg"
76-
>
77-
View User Github
78-
</a>
79-
</div>
80-
<div className="flex flex-wrap gap-4 ">
81-
<span className="text-white text-lg">
82-
{project.hoursSpent} hours
29+
<p className="text-neutral-700 text-lg md:text-xl leading-relaxed text-center whitespace-pre-wrap">{project.description}</p>
30+
31+
<div className="flex flex-col md:flex-row gap-3 md:gap-6 mt-2 text-lg">
32+
{project.hoursSpent &&
33+
<span className="text-red font-bold opacity-80 text-lg">{project.hoursSpent} hrs
8334
</span>
84-
</div>
85-
</div>
86-
</div>
87-
</div>
88-
<div className="hidden bg-white shadow-lg rounded-lg flex flex-col h-full mx-[8vw] items-start justify-center gap-4 ">
89-
<div className="relative h-[330px] w-full bg-red-500 rounded-t-lg">
90-
<Image
91-
src={project.imageUrl || "https://placehold.co/600x400"}
92-
alt={project.projectName}
93-
className="object-cover rounded-t-xl h-full w-full"
94-
width={600}
95-
height={400}
96-
/>
97-
</div>
98-
<div className="px-6 py-4 h-fit flex flex-col justify-center ">
99-
<h1 className="text-4xl font-bold">{project.projectName}</h1>
100-
<Link
101-
href={`https://github.com/${project.githubUsername}`}
102-
target="_blank"
103-
className="text-[#D35648] text-lg "
104-
>
105-
by @{project.githubUsername}
106-
</Link>
107-
<p className="text-gray-700 text-lg my-4">{project.description}</p>
108-
<div className="mb-4">
109-
<span className="text-gray-600 text-lg">
110-
{project.hoursSpent} hours
111-
</span>
112-
</div>
113-
<div className="flex flex-wrap gap-4 mb-8">
114-
{project.codeUrl && (
115-
<a
116-
href={project.codeUrl}
117-
target="_blank"
118-
rel="noopener noreferrer"
119-
className="text-[#D35648] hover:underline text-lg"
120-
>
121-
View Code
35+
}
36+
37+
{project.codeUrl &&
38+
<a href={project.codeUrl} target="_blank" rel="noopener noreferrer" className="text-red font-bold hover:underline">
39+
View Code →
12240
</a>
123-
)}
124-
{project.playableUrl && (
125-
<a
126-
href={project.playableUrl}
127-
target="_blank"
128-
rel="noopener noreferrer"
129-
className="text-[#D35648] hover:underline text-lg"
130-
>
131-
Live Demo
41+
}
42+
{project.playableUrl &&
43+
<a href={project.playableUrl} target="_blank" rel="noopener noreferrer" className="text-red font-bold hover:underline">
44+
Play Demo →
13245
</a>
133-
)}
46+
}
47+
<a href={`https://github.com/${project.githubUsername}`} target="_blank" rel="noopener noreferrer" className="text-red font-bold hover:underline">
48+
View Github →
49+
</a>
13450
</div>
135-
</div>
51+
</div>
13652
</div>
137-
</div>
138-
);
139-
}
53+
);
54+
}

‎app/projects/[githubUsername]/page.tsx‎

Lines changed: 20 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,30 @@
11
import Link from "next/link";
2-
import Image from "next/image";
3-
import AthenaAwardsPainting from "@/components/AthenaAwardsPainting";
4-
import { getAllProjects } from "@/lib/projects";
5-
import { baseAthenaAwardProjectImageUrl } from "@/lib/constants";
6-
import { Globe, Map, Github } from "lucide-react";
2+
import { fetchProjectsByGithubUsername } from "@/lib/projects";
3+
import Project from "@/components/Project";
4+
import { FaArrowLeftLong } from "react-icons/fa6";
75

86
export default async function UserProjectsPage({
97
params,
108
}: {
11-
params: Promise<{ githubUsername: string }>;
9+
params: Promise<{ githubUsername: string }>;
1210
}) {
13-
const { githubUsername } = await params;
14-
const projects = await getAllProjects();
15-
const userProjects = projects.filter(
16-
(p) => p.githubUsername === githubUsername
17-
);
18-
const stateOrProvince = userProjects[0].stateOrProvince;
19-
const country = userProjects[0].country;
20-
21-
if (userProjects.length === 0) {
22-
return (
23-
<div className="p-8 text-center text-xl">
24-
No projects found for this user.
25-
</div>
11+
const { githubUsername } = await params;
12+
const projects = await fetchProjectsByGithubUsername(githubUsername);
13+
const userProjects = projects.filter(
14+
(p) => p.githubUsername === githubUsername
2615
);
27-
}
28-
29-
return (
30-
<div className="mx-auto bg-[#8c2e37] min-h-screen">
31-
<Link
32-
href="/projects"
33-
className="text-[#D35648 text-2xl font-bold flex text-white px-6 lg:px-32 inline-block py-8 border-b-2 border-white/10 shadow-md "
34-
>
35-
← Athena Gallery
36-
</Link>
37-
<div className="flex flex-col gap-4 py-12 px-[12vw]">
38-
<h1 className="text-4xl lg:text-6xl text-center text-white font-bold playfair-display">
39-
{githubUsername}&apos;s Projects
40-
</h1>
41-
<div className="flex flex-row gap-4 justify-center items-center md:text-xl px-6 lg:px-32 text-white ">
42-
<span className="flex flex-row gap-1 items-center justify-center">
43-
<Globe /> {stateOrProvince}, {country}
44-
</span>
45-
<Link
46-
className="flex flex-row gap-1 items-center justify-center hover:underline text-[#D35648]"
47-
href={`https://github.com/${githubUsername}`}
48-
target="_blank"
49-
>
50-
<Github /> Github Profile
51-
</Link>
16+
return (
17+
<div className="py-16 px-6 lg:px-32 ">
18+
<Link href="/projects" className="text-2xl opacity-90 font-bold flex gap-2 transition-all items-center hover:gap-4 cursor-pointer"><FaArrowLeftLong /> Athena Gallery</Link>
19+
20+
<h1 className="text-4xl md:text-5xl opacity-90 font-bold text-center mb-1 mt-12">{githubUsername}&apos;s Projects</h1>
21+
22+
<div className="px-6 lg:px-32 mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-2 gap-6 w-full ">
23+
{userProjects.map((project) => (
24+
<Project key={project.id} project={project} />
25+
))}
5226
</div>
53-
</div>
5427

55-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 bg-[url(/bg.svg)] px-[12vw] py-12 min-h-screen shadow-lg w-full border-t-2 border-white/10">
56-
{userProjects.map((project) => (
57-
<Link
58-
key={project.id}
59-
href={`/projects/${project.githubUsername}/${project.id}`}
60-
className="group"
61-
>
62-
<AthenaAwardsPainting
63-
key={project.id}
64-
image={project.imageUrl || `${baseAthenaAwardProjectImageUrl}`}
65-
description={project.projectName}
66-
showCaptionOnSmall={true}
67-
/>
68-
</Link>
69-
))}
7028
</div>
71-
</div>
72-
);
73-
}
29+
);
30+
}

0 commit comments

Comments
 (0)