Skip to content

Commit 6126ec1

Browse files
fezcodefezcode
committed
v3
1 parent 5766548 commit 6126ec1

File tree

8 files changed

+110
-2
lines changed

8 files changed

+110
-2
lines changed

‎src/App.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Layout from './components/Layout';
44
import HomePage from './pages/HomePage';
55
import BlogPage from './pages/BlogPage';
66
import BlogPostPage from './pages/BlogPostPage';
7+
import ProjectsPage from './pages/ProjectsPage';
8+
import ProjectPage from './pages/ProjectPage';
79
import NotFoundPage from './pages/NotFoundPage';
810

911
function App() {
@@ -14,6 +16,8 @@ function App() {
1416
<Route path="/" element={<HomePage />} />
1517
<Route path="/blog" element={<BlogPage />} />
1618
<Route path="/blog/:slug" element={<BlogPostPage />} />
19+
<Route path="/projects" element={<ProjectsPage />} />
20+
<Route path="/projects/:slug" element={<ProjectPage />} />
1721
<Route path="*" element={<NotFoundPage />} />
1822
</Routes>
1923
</Layout>

‎src/components/Footer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Footer = () => {
2828
<div className="flex flex-wrap items-center gap-6 text-sm font-medium text-gray-400">
2929
<Link to="/" className="hover:text-white transition-colors">Home</Link>
3030
<Link to="/blog" className="hover:text-white transition-colors">Blog</Link>
31+
<Link to="/projects" className="hover:text-white transition-colors">Projects</Link>
3132
</div>
3233
<p className="text-sm text-gray-500">
3334
&copy; {new Date().getFullYear()} My Awesome Blog. All rights reserved.

‎src/components/Navbar.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const Navbar = () => {
1111
<div className="flex items-center space-x-6">
1212
<Link to="/" className="text-sm font-medium hover:text-gray-300 transition-colors">Home</Link>
1313
<Link to="/blog" className="text-sm font-medium hover:text-gray-300 transition-colors">Blog</Link>
14+
<Link to="/projects" className="text-sm font-medium hover:text-gray-300 transition-colors">Projects</Link>
1415
<button className="bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded-full transition-colors">
1516
Play Latest
1617
</button>

‎src/components/ProjectCard.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
const ProjectCard = ({ project }) => {
5+
return (
6+
<div className="bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors">
7+
<h3 className="text-xl font-bold text-white">{project.title}</h3>
8+
<p className="mt-2 text-gray-400">{project.description}</p>
9+
<Link to={`/projects/${project.slug}`} className="mt-4 inline-block text-teal-400 hover:text-teal-500 transition-colors">
10+
View Project &rarr;
11+
</Link>
12+
</div>
13+
);
14+
};
15+
16+
export default ProjectCard;

‎src/data/projects.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const projects = [
2+
{
3+
slug: 'project-one',
4+
title: 'Project One',
5+
description: 'A short description of the first project.',
6+
pinned: true,
7+
},
8+
{
9+
slug: 'project-two',
10+
title: 'Project Two',
11+
description: 'A short description of the second project.',
12+
pinned: true,
13+
},
14+
{
15+
slug: 'project-three',
16+
title: 'Project Three',
17+
description: 'A short description of the third project.',
18+
pinned: false,
19+
},
20+
];
21+
22+
export default projects;

‎src/pages/HomePage.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React, { useState, useEffect } from 'react';
22
import PostItem from '../components/PostItem';
3+
import ProjectCard from '../components/ProjectCard';
4+
import projects from '../data/projects';
35

46
const HomePage = () => {
57
const [posts, setPosts] = useState([]);
8+
const pinnedProjects = projects.filter(p => p.pinned);
69

710
useEffect(() => {
811
// In a real app, you'd fetch this from a CMS or API
@@ -21,9 +24,20 @@ const HomePage = () => {
2124
Exploring the world of code, one post at a time.
2225
</p>
2326
</div>
27+
28+
<div className="mt-16">
29+
<h2 className="text-2xl font-bold tracking-tight text-white text-center">Pinned Projects</h2>
30+
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
31+
{pinnedProjects.map(project => (
32+
<ProjectCard key={project.slug} project={project} />
33+
))}
34+
</div>
35+
</div>
36+
2437
<div className="mt-16">
25-
<div className="divide-y divide-gray-700">
26-
{posts.map(slug => (
38+
<h2 className="text-2xl font-bold tracking-tight text-white text-center">Recent Blog Posts</h2>
39+
<div className="mt-8 divide-y divide-gray-700">
40+
{posts.slice(0, 5).map(slug => (
2741
<PostItem key={slug} slug={slug} />
2842
))}
2943
</div>

‎src/pages/ProjectPage.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { useParams } from 'react-router-dom';
3+
import projects from '../data/projects';
4+
5+
const ProjectPage = () => {
6+
const { slug } = useParams();
7+
const project = projects.find(p => p.slug === slug);
8+
9+
if (!project) {
10+
return <div>Project not found</div>;
11+
}
12+
13+
return (
14+
<div className="py-16 sm:py-24">
15+
<div className="mx-auto max-w-3xl px-6 lg:px-8">
16+
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">{project.title}</h1>
17+
<p className="mt-6 text-lg leading-8 text-gray-300">{project.description}</p>
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default ProjectPage;

‎src/pages/ProjectsPage.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import projects from '../data/projects';
3+
import ProjectCard from '../components/ProjectCard';
4+
5+
const ProjectsPage = () => {
6+
return (
7+
<div className="py-16 sm:py-24">
8+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
9+
<div className="mx-auto max-w-2xl text-center">
10+
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
11+
My Projects
12+
</h1>
13+
<p className="mt-6 text-lg leading-8 text-gray-300">
14+
A collection of my work and experiments.
15+
</p>
16+
</div>
17+
<div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
18+
{projects.map(project => (
19+
<ProjectCard key={project.slug} project={project} />
20+
))}
21+
</div>
22+
</div>
23+
</div>
24+
);
25+
};
26+
27+
export default ProjectsPage;

0 commit comments

Comments
 (0)