Skip to content

Commit a074ea4

Browse files
CodeChangingMeCodeChangingMe
committed
feat: add Home and About page
1 parent db8b024 commit a074ea4

File tree

20 files changed

+629
-51
lines changed

20 files changed

+629
-51
lines changed

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@tailwindcss/typography": "^0.5.15",
13+
"next": "14.2.13",
1214
"react": "^18",
13-
"react-dom": "^18",
14-
"next": "14.2.13"
15+
"react-dom": "^18"
1516
},
1617
"devDependencies": {
17-
"postcss": "^8",
18-
"tailwindcss": "^3.4.1",
1918
"eslint": "^8",
20-
"eslint-config-next": "14.2.13"
19+
"eslint-config-next": "14.2.13",
20+
"postcss": "^8",
21+
"tailwindcss": "^3.4.1"
2122
}
2223
}

‎pnpm-lock.yaml‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/about/page.jsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { work, skill, learn, education, language } from "@/constants/about";
2+
import Work from "@/components/work";
3+
import Skill from "@/components/skill";
4+
import Education from "@/components/education";
5+
import Language from "@/components/language";
6+
7+
export default function About() {
8+
return (
9+
<div className="mx-auto sm:w-9/12 md:w-144">
10+
{work && work?.content?.length ? (
11+
<section classNameName="py-5">
12+
<h2 className="pb-6 text-3xl font-bold text-#525252">{work.title}</h2>
13+
<Work workExperience={work.content} />
14+
</section>
15+
) : null}
16+
17+
{skill && skill?.content?.length ? (
18+
<section className="py-10">
19+
<h2 className="mb-10 text-3xl font-bold text-#525252">
20+
{skill.title}
21+
</h2>
22+
<Skill skills={skill.content} />
23+
</section>
24+
) : null}
25+
26+
{learn && learn?.content?.length ? (
27+
<section className="py-10">
28+
<h2 className="mb-10 text-3xl font-bold text-#525252">
29+
{learn.title}
30+
</h2>
31+
<Skill skills={learn.content} />
32+
</section>
33+
) : null}
34+
35+
{education && education?.content?.length ? (
36+
<section className="py-8">
37+
<h2 className="pb-3 text-3xl font-bold text-#525252">
38+
{education?.title}
39+
</h2>
40+
<Education educations={education?.content || []} />
41+
</section>
42+
) : null}
43+
44+
{language && language?.content?.length ? (
45+
<section className="py-8">
46+
<h2 className="pb-3 text-3xl font-bold text-#525252">
47+
{language.title}
48+
</h2>
49+
<Language languages={language.content} />
50+
</section>
51+
) : null}
52+
</div>
53+
);
54+
}

‎src/app/globals.css‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,49 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
5+
html {
6+
height: 100%;
7+
scroll-behavior: smooth;
8+
background-color: var(--theme-bg)
89
}
910

10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
11+
body {
12+
font-family: Inter Variable, sans-serif;
13+
margin: 0 auto;
14+
height: 100%;
15+
max-width: 48rem;
16+
padding-left: 1rem;
17+
padding-right: 1rem;
18+
font-size: .875rem;
19+
line-height: 1.25rem;
20+
font-weight: 400;
21+
color: var(--theme-text);
22+
-webkit-font-smoothing: antialiased;
23+
-moz-osx-font-smoothing: grayscale
1524
}
1625

17-
body {
18-
color: var(--foreground);
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
26+
@media (min-width: 768px) {
27+
body {
28+
padding-left: 0;
29+
padding-right: 0
30+
}
2131
}
2232

23-
@layer utilities {
24-
.text-balance {
25-
text-wrap: balance;
33+
.arrow {
34+
position: relative;
35+
36+
&::before {
37+
content: "▹";
38+
position: absolute;
39+
left: 0;
40+
font-size: 14px;
41+
font-weight: bold;
42+
color: #f59e0b;
43+
}
44+
45+
&.rotate-z-90 {
46+
&::before {
47+
transform: rotateZ(90deg);
48+
}
2649
}
2750
}

‎src/app/layout.js‎

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

‎src/app/layout.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import "./globals.css";
2+
import { SITE_TITLE } from "@/constants";
3+
import Header from "@/components/header";
4+
import Footer from "@/components/footer";
5+
6+
export default function RootLayout({ children, header }) {
7+
return (
8+
<html lang="en">
9+
<head>
10+
<title>{SITE_TITLE}</title>
11+
</head>
12+
<body className="max-w-3xl mx-auto min-h-screen flex flex-col">
13+
<Header />
14+
<main className="flex-grow">{children}</main>
15+
<Footer />
16+
</body>
17+
</html>
18+
);
19+
}

‎src/app/page.js‎

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

‎src/app/page.jsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Intro from "@/components/intro";
2+
3+
export default function Home() {
4+
return <Intro />;
5+
}

‎src/components/education/index.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export default function Education({ educations = [] }) {
2+
return (
3+
<>
4+
{educations.map((education, index) => {
5+
return (
6+
<ul className="mb-4" key={index}>
7+
<li className="mb-3 text-#525252 text-xl">
8+
{education?.name} - {education?.degree}
9+
</li>
10+
<li className="pl-5 arrow text-base text-#525252">
11+
{education?.date}
12+
</li>
13+
<li className="pl-5 arrow text-base text-#525252">
14+
{education?.profession}
15+
</li>
16+
</ul>
17+
);
18+
})}
19+
</>
20+
);
21+
}

‎src/components/footer/index.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const year = new Date().getFullYear();
2+
const link = "https://nextjs.org/";
3+
4+
export default function Footer() {
5+
return (
6+
<footer className="mt-8 py-12">
7+
<p className="text-center">
8+
Copyright &copy; {year} Lei Wu. Powered by{" "}
9+
<a className="font-semibold hover:italic" href={link} target="_blank">
10+
next.js
11+
</a>
12+
.
13+
</p>
14+
</footer>
15+
);
16+
}

0 commit comments

Comments
 (0)