Skip to content

Commit f30dfab

Browse files
benthecoderclaude
benthecoder
and
claude
committed
Improve about and contact page fonts and design
- Add font-serif to Timeline and about page to inherit Averia Serif Libre - Refactor contact page to use clean, data-driven component structure - Add minimal Lucide icons from react-icons for contact links - Use Tailwind classes instead of inline styles for maintainability - Implement subtle opacity transitions on link hover (75% -> 100%) - Remove custom underlines for cleaner, more minimal aesthetic Contact page now follows best practices with reusable components and proper TypeScript types. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 790c848 commit f30dfab

File tree

4 files changed

+146
-35
lines changed

4 files changed

+146
-35
lines changed

‎app/about/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ const ChronologyPage = () => {
303303
];
304304

305305
return (
306-
<div className="min-h-screen">
306+
<div className="min-h-screen font-serif">
307307
<div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
308308
<div className="mb-8 sm:mb-12">
309309
<h1 className="text-md font-normal text-[#595857] dark:text-[#F3F3F3] mb-2">

‎app/contact/contact.md‎

Lines changed: 14 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,18 @@ I also like learning about [art](/tags/art) and reading [good books](https://www
66

77
email: thisis[firstname][lastname][at]gmail[dot]com
88

9-
<div style="white-space: pre; font-family: monospace; line-height: 1.2;">links
10-
├── scroll
11-
│ ├── <a href="https://twitter.com/benxneo">twitter</a>
12-
│ └── <a href="https://www.linkedin.com/in/benedictneo/">linkedin</a>
13-
├── visual
14-
│ ├── <a href="https://vsco.co/benxneo/gallery">vsco</a>
15-
│ ├── <a href="https://www.instagram.com/benthesaint/">instagram</a>
16-
│ └── <a href="https://www.corner.inc/benedict">corner</a>
17-
├── writing
18-
│ ├── <a href="https://substack.com/@bneo">substack</a>
19-
│ ├── <a href="https://benedictxneo.medium.com/">medium</a>
20-
│ └── <a href="https://goodreads.com/bneo">goodreads</a>
21-
├── collect
22-
│ ├── <a href="https://www.are.na/benedict-neo">are.na</a>
23-
│ ├── <a href="https://curius.app/benedict-neo">curius</a>
24-
│ └── <a href="https://www.cosmos.so/benedictneo">cosmos</a>
25-
├── media
26-
│ ├── <a href="https://open.spotify.com/user/31w6rspp4fe5ihwoimt4of5tcwiu">spotify</a>
27-
│ ├── <a href="http://www.youtube.com/@benxneo">youtube</a>
28-
│ └── <a href="https://letterboxd.com/benneo/">letterboxd</a>
29-
└── code
30-
├── <a href="https://github.com/benthecoder">github</a>
31-
└── <a href="https://www.kaggle.com/benthecoder/competitions">kaggle</a>
32-
</div>
9+
---
10+
11+
↓ [twitter](https://twitter.com/benxneo), [linkedin](https://www.linkedin.com/in/benedictneo/)
12+
13+
○ [vsco](https://vsco.co/benxneo/gallery), [instagram](https://www.instagram.com/benthesaint/), [corner](https://www.corner.inc/benedict)
14+
15+
✎ [substack](https://substack.com/@bneo), [medium](https://benedictxneo.medium.com/), [goodreads](https://goodreads.com/bneo)
16+
17+
□ [are.na](https://www.are.na/benedict-neo), [curius](https://curius.app/benedict-neo), [cosmos](https://www.cosmos.so/benedictneo)
18+
19+
▷ [spotify](https://open.spotify.com/user/31w6rspp4fe5ihwoimt4of5tcwiu), [youtube](http://www.youtube.com/@benxneo), [letterboxd](https://letterboxd.com/benneo/)
20+
21+
<> [github](https://github.com/benthecoder), [kaggle](https://www.kaggle.com/benthecoder/competitions)
22+
3323

‎app/contact/page.tsx‎

Lines changed: 130 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,140 @@
1-
import fs from "fs";
2-
import Markdown from "markdown-to-jsx";
3-
import matter from "gray-matter";
1+
"use client";
42

5-
const AboutPage = () => {
6-
const file = "app/contact/contact.md";
7-
const content = fs.readFileSync(file, "utf8");
8-
const about = matter(content);
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import {
6+
LuScroll,
7+
LuCamera,
8+
LuPencil,
9+
LuBox,
10+
LuPlay,
11+
LuCode2,
12+
} from "react-icons/lu";
13+
14+
type LinkItemProps = {
15+
href: string;
16+
children: string;
17+
};
18+
19+
const LinkItem = ({ href, children }: LinkItemProps) => (
20+
<a
21+
href={href}
22+
className="opacity-75 hover:opacity-100 transition-opacity duration-200 no-underline bg-none"
23+
style={{ background: "none", textDecoration: "none" }}
24+
>
25+
{children}
26+
</a>
27+
);
28+
29+
type LinkSectionProps = {
30+
icon: React.ComponentType<{ className?: string }>;
31+
links: { href: string; text: string }[];
32+
};
33+
34+
const LinkSection = ({ icon: Icon, links }: LinkSectionProps) => (
35+
<div className="flex items-center gap-2">
36+
<Icon className="opacity-40 text-sm flex-shrink-0" />
37+
<div>
38+
{links.map((link, idx) => (
39+
<span key={link.href}>
40+
{idx > 0 && ", "}
41+
<LinkItem href={link.href}>{link.text}</LinkItem>
42+
</span>
43+
))}
44+
</div>
45+
</div>
46+
);
47+
48+
const ContactPage = () => {
49+
const sections = [
50+
{
51+
icon: LuScroll,
52+
links: [
53+
{ href: "https://twitter.com/benxneo", text: "twitter" },
54+
{ href: "https://www.linkedin.com/in/benedictneo/", text: "linkedin" },
55+
],
56+
},
57+
{
58+
icon: LuCamera,
59+
links: [
60+
{ href: "https://vsco.co/benxneo/gallery", text: "vsco" },
61+
{ href: "https://www.instagram.com/benthesaint/", text: "instagram" },
62+
{ href: "https://www.corner.inc/benedict", text: "corner" },
63+
],
64+
},
65+
{
66+
icon: LuPencil,
67+
links: [
68+
{ href: "https://substack.com/@bneo", text: "substack" },
69+
{ href: "https://benedictxneo.medium.com/", text: "medium" },
70+
{ href: "https://goodreads.com/bneo", text: "goodreads" },
71+
],
72+
},
73+
{
74+
icon: LuBox,
75+
links: [
76+
{ href: "https://www.are.na/benedict-neo", text: "are.na" },
77+
{ href: "https://curius.app/benedict-neo", text: "curius" },
78+
{ href: "https://www.cosmos.so/benedictneo", text: "cosmos" },
79+
],
80+
},
81+
{
82+
icon: LuPlay,
83+
links: [
84+
{
85+
href: "https://open.spotify.com/user/31w6rspp4fe5ihwoimt4of5tcwiu",
86+
text: "spotify",
87+
},
88+
{ href: "http://www.youtube.com/@benxneo", text: "youtube" },
89+
{ href: "https://letterboxd.com/benneo/", text: "letterboxd" },
90+
],
91+
},
92+
{
93+
icon: LuCode2,
94+
links: [
95+
{ href: "https://github.com/benthecoder", text: "github" },
96+
{
97+
href: "https://www.kaggle.com/benthecoder/competitions",
98+
text: "kaggle",
99+
},
100+
],
101+
},
102+
];
9103

10104
return (
11105
<div>
12106
<article className="prose">
13-
<Markdown>{about.content}</Markdown>
107+
<Image
108+
src="/images/havetea.jpeg"
109+
alt="have tea"
110+
width={800}
111+
height={600}
112+
className="w-full mb-4"
113+
/>
114+
115+
<p>
116+
I love meeting and having interesting conversations with new people!
117+
</p>
118+
119+
<p>
120+
I also like learning about <Link href="/tags/art">art</Link> and
121+
reading{" "}
122+
<a href="https://www.goodreads.com/review/list/103179068-benedict-neo?shelf=to-read">
123+
good books
124+
</a>
125+
.
126+
</p>
127+
128+
<p>email: thisis[firstname][lastname][at]gmail[dot]com</p>
129+
130+
<div className="space-y-0 leading-relaxed">
131+
{sections.map((section, idx) => (
132+
<LinkSection key={idx} icon={section.icon} links={section.links} />
133+
))}
134+
</div>
14135
</article>
15136
</div>
16137
);
17138
};
18139

19-
export default AboutPage;
140+
export default ContactPage;

‎components/Timeline.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ const Timeline: React.FC<TimelineProps> = ({ events }) => {
175175
};
176176

177177
return (
178-
<div className="space-y-6 sm:space-y-10">
178+
<div className="space-y-6 sm:space-y-10 font-serif">
179179
{Object.entries(groupedEvents).map(([year, yearEvents]) => (
180180
<div key={year} className="group/year">
181181
<div className="flex gap-2 sm:gap-4 text-[#595857] dark:text-[#F3F3F3]">

0 commit comments

Comments
 (0)