Skip to content

Commit fdfa977

Browse files
DFelipehDEVDFelipehDEV
committed
posts
1 parent 15a7dfb commit fdfa977

File tree

13 files changed

+252
-58
lines changed

13 files changed

+252
-58
lines changed

‎index.html‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="UTF-8" />
56
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
7+
<title>DFelipeh's Corner</title>
68
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
</head>
8-
<body>
9+
<meta name="description" content="I like to write 'code' using a thing called a 'text editor'" />
10+
<meta name="author" content="DFelipeh" />
11+
<meta name="keywords" content="DFelipeh, personal, posts" />
12+
</head>
13+
14+
<body>
915
<div id="root"></div>
1016
<script type="module" src="/src/main.jsx"></script>
11-
</body>
12-
</html>
17+
</body>
18+
19+
</html>

‎package-lock.json‎

Lines changed: 51 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@tailwindcss/vite": "^4.1.16",
1414
"react": "^19.1.1",
1515
"react-dom": "^19.1.1",
16+
"react-feather": "^2.0.10",
1617
"react-router": "^7.9.4",
1718
"tailwindcss": "^4.1.16"
1819
},

‎src/App.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { HashRouter, Routes, Route } from 'react-router'
22
import Home from './pages/Home.jsx'
3-
import Projects from './pages/Projects.jsx'
3+
import Post from "./pages/Post.jsx";
4+
import Posts from './pages/PostList.jsx'
45
import Navbar from './components/Navbar.jsx'
56

67
function App() {
@@ -10,7 +11,8 @@ function App() {
1011
<HashRouter>
1112
<Routes>
1213
<Route path="/" element={<Home />} />
13-
<Route path="/projects" element={<Projects />} />
14+
<Route path="/posts" element={<Posts />} />
15+
<Route path="/post/:slug" element={<Post />} />
1416
</Routes>
1517
</HashRouter>
1618
</>

‎src/Posts.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export const posts = [
2+
{
3+
title: "Hi there!",
4+
slug: "hi-there",
5+
date: "2025-10-25",
6+
description:
7+
"First post!",
8+
content: `
9+
Hello world!
10+
`,
11+
},
12+
{
13+
title: "Test Post 2",
14+
slug: "test-post-2",
15+
date: "2025-10-26",
16+
description:
17+
"Second post!",
18+
content: `
19+
Test again!
20+
`,
21+
},
22+
{
23+
title: "Test Post 3",
24+
slug: "test-post-3",
25+
date: "2025-10-26",
26+
description:
27+
"Third post!",
28+
content: `
29+
<p>Test again! But this time with some <strong>HTML content</strong></p>
30+
<img src="src/assets/lmao.gif"/>
31+
`,
32+
},
33+
{
34+
title: "Test Post 4",
35+
slug: "test-post-4",
36+
date: "2025-10-26",
37+
description:
38+
"Second post!",
39+
content: `
40+
Test again!
41+
`,
42+
},
43+
];

‎src/assets/Avatar500.png‎

-99.2 KB
Loading

‎src/assets/lmao.gif‎

4.24 MB
Loading

‎src/components/Card.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
function Card({ name, description, photo, link }) {
2+
const Wrapper = link ? "a" : "div";
3+
4+
return (
5+
<Wrapper
6+
href={link}
7+
target="_blank"
8+
rel="noopener noreferrer"
9+
className={`bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden shadow-md hover:shadow-lg hover:bg-white/10 transition duration-300 flex flex-col focus:outline-none focus:ring-2 focus:ring-white/20`}
10+
>
11+
{photo && (
12+
<img
13+
src={photo}
14+
alt={name}
15+
className="w-full h-48 object-cover"
16+
/>
17+
)}
18+
19+
<div className="p-5 flex flex-col grow">
20+
<h3 className="text-xl font-semibold text-white mb-2">{name}</h3>
21+
<p className="text-gray-400 text-sm grow leading-relaxed">
22+
{description}
23+
</p>
24+
</div>
25+
</Wrapper>
26+
);
27+
}
28+
29+
export default Card;

‎src/components/Navbar.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ function Navbar() {
1919
<a href="#" className="hover:text-brand">
2020
Home
2121
</a>
22-
<a href="#projects" className="hover:text-brand">
23-
Projects
22+
<a href="#posts" className="hover:text-brand">
23+
Posts
2424
</a>
2525
</div>
2626
</div>

‎src/pages/Home.jsx‎

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,55 @@
1-
import avatar from '../assets/Avatar500.png';
1+
import avatar from "../assets/Avatar500.png";
2+
import PostList from "./PostList";
23

34
function Home() {
45
return (
5-
<section className="mx-auto w-4/5 py-24 text-gray-200">
6-
<div className="flex justify-between items-center gap-3">
7-
<div className="flex-col">
8-
<h1 className="text-5xl font-light mb-6 text-brand">About</h1>
6+
<>
7+
<section className="mx-auto w-11/12 md:w-4/5 py-20 text-gray-200">
8+
<div className="grid md:grid-cols-4 gap-6 items-center">
9+
<div className="md:col-span-3 order-2 md:order-1">
10+
<h1 className="text-4xl md:text-5xl font-light mb-6 text-brand">
11+
About
12+
</h1>
913

10-
<p className="text-lg text-gray-400 leading-relaxed mb-6">
11-
I enjoy making stuff. I work with systems languages like{" "}
12-
<span className="text-white font-medium">C++</span>,{" "}
13-
<span className="text-white font-medium">C#</span>,{" "}
14-
<span className="text-white font-medium">Kotlin</span>,{" "}
15-
<span className="text-white font-medium">Java</span>...
16-
I also do web stuff sometimes using{" "}
17-
<span className="text-white font-medium">JavaScript</span>,{" "}
18-
<span className="text-white font-medium">PHP</span>,{" "}
19-
<span className="text-white font-medium">Laravel</span>,{" "}
20-
and <span className="text-white font-medium">Tailwind</span> when I feel like it.
21-
</p>
14+
<p className="text-base md:text-lg text-gray-400 leading-relaxed mb-6">
15+
I enjoy making stuff. I work with languages like{" "}
16+
<span className="text-white font-medium">C++</span>,{" "}
17+
<span className="text-white font-medium">C#</span>,{" "}
18+
<span className="text-white font-medium">Kotlin</span>,{" "}
19+
<span className="text-white font-medium">Java</span>... I also do web
20+
stuff and i like to use {" "}
21+
<span className="text-white font-medium">JS</span>,{" "}
22+
<span className="text-white font-medium">PHP</span>,{" "}
23+
<span className="text-white font-medium">Laravel</span>, or{" "}
24+
<span className="text-white font-medium">Tailwind</span>.
25+
</p>
2226

23-
<p className="text-lg text-gray-400 leading-relaxed">
24-
I've done some <span className="text-white font-medium">web dev</span>,{" "}
25-
a bit of <span className="text-white font-medium">backend</span>, and I also like
26-
messing with <span className="text-white font-medium">software architecture</span> — still getting the hang of it though.
27-
I mostly just like making things that look nice, write code that doesn't explode after a month,
28-
and code that goes *vroom vroom*.
29-
</p>
30-
</div>
27+
<p className="text-base md:text-lg text-gray-400 leading-relaxed">
28+
I've done some web dev, a bit of backend, and I also like to think in
29+
software architecture. I mostly just like making
30+
things that look nice, write code that doesn't explode after a month,
31+
and code that goes *vroom vroom*.
32+
</p>
33+
</div>
3134

32-
<div className="flex-col">
33-
<img
34-
src={avatar}
35-
alt="Avatar"
36-
className="rounded-full"
37-
/>
38-
<div className="flex justify-center">
39-
<small className="mt-3 text-gray-400 italic">Art by Pablo Tavares</small>
35+
<div className="md:col-span-1 order-1 md:order-2 flex flex-col items-center mb-8 md:mb-0">
36+
<img
37+
src={avatar}
38+
alt="Avatar"
39+
className="w-40 h-40 md:w-56 md:h-56 rounded-full border border-white/10 shadow-md object-cover"
40+
/>
41+
<a
42+
className="mt-3 text-center text-gray-400 italic hover:text-gray-300 transition"
43+
href="https://x.com/Pablowsinistro2"
44+
target="_blank"
45+
>
46+
Art by Pablo Tavares
47+
</a>
4048
</div>
4149
</div>
42-
</div>
43-
</section>
50+
</section>
51+
<PostList />
52+
</>
4453
);
4554
}
4655

0 commit comments

Comments
 (0)