Skip to content

Commit fff6527

Browse files
陈济民claude
陈济民
and
claude
committed
Promote Publications to standalone section, card styling, tighter spacing
- Extract Publications from About into its own section - Add Publications to Navbar (About / Work / Publications / Contact) - Card-style layout for publications - Center-align Publications heading - Reduce section padding from py-24 to py-16 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 2001137 commit fff6527

6 files changed

Lines changed: 72 additions & 55 deletions

File tree

‎src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Navbar from "./components/Navbar";
22
import Hero from "./components/Hero";
33
import About from "./components/About";
44
import Work from "./components/Work";
5+
import Publications from "./components/Publications";
56
import Contact from "./components/Contact";
67
import Footer from "./components/Footer";
78

@@ -12,6 +13,7 @@ export default function App() {
1213
<Hero />
1314
<About />
1415
<Work />
16+
<Publications />
1517
<Contact />
1618
<Footer />
1719
</div>

‎src/components/About.jsx‎

Lines changed: 1 addition & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { profile } from "../data/profile";
22

33
export default function About() {
44
return (
5-
<section id="about" className="py-24 px-6">
5+
<section id="about" className="py-16 px-6">
66
<div className="max-w-3xl mx-auto">
77
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-10">
88
About
@@ -105,58 +105,6 @@ export default function About() {
105105
</div>
106106
</div>
107107

108-
{/* Publications */}
109-
{profile.publications.length > 0 && (
110-
<div>
111-
<h4 className="text-sm font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-4">
112-
Publications
113-
</h4>
114-
<div className="space-y-6">
115-
{profile.publications.map((pub, i) => {
116-
const isLinked = pub.link && pub.link !== "#";
117-
const sharedClasses = "group block pb-6 border-b border-gray-200 dark:border-gray-800 last:border-0";
118-
const content = (
119-
<>
120-
<h5 className={`text-lg font-semibold text-gray-900 dark:text-white ${isLinked ? "group-hover:text-purple-600 dark:group-hover:text-purple-400" : ""} transition-colors`}>
121-
{pub.title}
122-
</h5>
123-
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
124-
{pub.authors.split(", ").map((author, j) => (
125-
<span key={j}>
126-
{j > 0 && ", "}
127-
{author === "Jimin Chen" ? (
128-
<span className="font-semibold text-purple-600 dark:text-purple-400">{author}</span>
129-
) : (
130-
author
131-
)}
132-
</span>
133-
))}
134-
</p>
135-
<div className="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500 mt-1">
136-
<span>{pub.venue}</span>
137-
<span>·</span>
138-
<time dateTime={pub.date}>
139-
{new Date(pub.date).toLocaleDateString("en-US", {
140-
year: "numeric",
141-
month: "long",
142-
})}
143-
</time>
144-
</div>
145-
</>
146-
);
147-
const extraProps = isLinked
148-
? { href: pub.link, target: "_blank", rel: "noopener noreferrer" }
149-
: {};
150-
const Tag = isLinked ? "a" : "div";
151-
return (
152-
<Tag key={i} className={sharedClasses} {...extraProps}>
153-
{content}
154-
</Tag>
155-
);
156-
})}
157-
</div>
158-
</div>
159-
)}
160108
</div>
161109
</section>
162110
);

‎src/components/Contact.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { profile } from "../data/profile";
22

33
export default function Contact() {
44
return (
5-
<section id="contact" className="py-24 px-6">
5+
<section id="contact" className="py-16 px-6">
66
<div className="max-w-xl mx-auto text-center">
77
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-6">
88
Get in Touch

‎src/components/Navbar.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
33
const navItems = [
44
{ id: "about", label: "About" },
55
{ id: "work", label: "Work" },
6+
{ id: "publications", label: "Publications" },
67
{ id: "contact", label: "Contact" },
78
];
89

‎src/components/Publications.jsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { profile } from "../data/profile";
2+
3+
export default function Publications() {
4+
return (
5+
<section id="publications" className="py-16 px-6 bg-gray-50 dark:bg-gray-900/50">
6+
<div className="max-w-3xl mx-auto">
7+
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-12 text-center">
8+
Publications
9+
</h2>
10+
<div className="space-y-6">
11+
{profile.publications.map((pub, i) => {
12+
const isLinked = pub.link && pub.link !== "#";
13+
const sharedClasses =
14+
"group block p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 hover:border-purple-300 dark:hover:border-purple-700 hover:shadow-lg transition-all duration-300";
15+
const content = (
16+
<>
17+
<h5
18+
className={`text-lg font-semibold text-gray-900 dark:text-white ${
19+
isLinked
20+
? "group-hover:text-purple-600 dark:group-hover:text-purple-400"
21+
: ""
22+
} transition-colors`}
23+
>
24+
{pub.title}
25+
</h5>
26+
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
27+
{pub.authors.split(", ").map((author, j) => (
28+
<span key={j}>
29+
{j > 0 && ", "}
30+
{author === "Jimin Chen" ? (
31+
<span className="font-semibold text-purple-600 dark:text-purple-400">
32+
{author}
33+
</span>
34+
) : (
35+
author
36+
)}
37+
</span>
38+
))}
39+
</p>
40+
<div className="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500 mt-2">
41+
<span>{pub.venue}</span>
42+
<span>·</span>
43+
<time dateTime={pub.date}>
44+
{new Date(pub.date).toLocaleDateString("en-US", {
45+
year: "numeric",
46+
month: "long",
47+
})}
48+
</time>
49+
</div>
50+
</>
51+
);
52+
const extraProps = isLinked
53+
? { href: pub.link, target: "_blank", rel: "noopener noreferrer" }
54+
: {};
55+
const Tag = isLinked ? "a" : "div";
56+
return (
57+
<Tag key={i} className={sharedClasses} {...extraProps}>
58+
{content}
59+
</Tag>
60+
);
61+
})}
62+
</div>
63+
</div>
64+
</section>
65+
);
66+
}

‎src/components/Work.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { works } from "../data/work";
22

33
export default function Work() {
44
return (
5-
<section id="work" className="py-24 px-6 bg-gray-50 dark:bg-gray-900/50">
5+
<section id="work" className="py-16 px-6 bg-gray-50 dark:bg-gray-900/50">
66
<div className="max-w-5xl mx-auto">
77
<h2 className="text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-12">
88
Work

0 commit comments

Comments
 (0)