Skip to content

Commit f118786

Browse files
jiwonacjiwonac
committed
Major website redesign
Redesigned the website with a link-destination style landing page with two types of links: pages in the website and links on the external web. - Implemented handwritten-like cards for landing page - Implemented polaroid-like cards for external links - Implemented tumblr or pinterest-like grid-based layout for microblog - Removed education and professional folders; now using the CV PDF as source of truth instead - Rewrote research page as a research blog page; will modify and move content over in the future
1 parent 855a7f6 commit f118786

37 files changed

Lines changed: 1266 additions & 389 deletions

‎.eleventy.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,34 @@
11
const markdownIt = require("markdown-it");
22
const pluginRss = require("@11ty/eleventy-plugin-rss");
3+
const fs = require("fs");
4+
const path = require("path");
35

46
module.exports = function(eleventyConfig) {
7+
/* Bundle CSS files from src/_css into src/style.css */
8+
eleventyConfig.on("eleventy.before", () => {
9+
const cssDir = "src/_css";
10+
const cssFiles = [
11+
"base.css",
12+
"theme.css",
13+
"typography.css",
14+
"landing.css",
15+
"blog.css",
16+
"microblog.css",
17+
"images.css",
18+
"layout.css",
19+
"responsive.css",
20+
"utilities.css"
21+
];
22+
const combined = cssFiles
23+
.map(f => fs.readFileSync(path.join(cssDir, f), "utf8"))
24+
.join("\n");
25+
fs.writeFileSync("src/style.css", combined);
26+
});
527

628
/* Copy some files directly */
729
eleventyConfig.addPassthroughCopy("src/style.css");
30+
eleventyConfig.addPassthroughCopy("src/_scripts/theme-toggle.js");
31+
eleventyConfig.addPassthroughCopy("src/_scripts/rough-cards.js");
832
eleventyConfig.addPassthroughCopy("src/favicon.ico");
933
eleventyConfig.addPassthroughCopy("src/assets");
1034
eleventyConfig.addPassthroughCopy("src/admin");
@@ -19,7 +43,7 @@ module.exports = function(eleventyConfig) {
1943

2044
/* Enable RSS */
2145
eleventyConfig.addPlugin(pluginRss);
22-
46+
2347
/* Set directories */
2448
return {
2549
dir: {

‎src/_css/base.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* Import subtle handwritten font for headings */
2+
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Caveat:wght@400;600&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
4+
5+
:root {
6+
/* Shadows & Effects */
7+
--shadow-subtle: 0 2px 4px rgba(0, 0, 0, 0.08);
8+
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.12);
9+
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.16);
10+
11+
/* Spacing */
12+
--default-margin: 10px;
13+
--card-padding: 1.5rem;
14+
--section-spacing: 3rem;
15+
16+
/* Typography */
17+
--font-sansserif: 'Inter', 'Arial';
18+
--font-handwriting: 'Architects Daughter', 'Cabin', 'Arial';
19+
20+
/* Layout */
21+
--max-width: 1280px;
22+
--content-width: 80%;
23+
24+
scroll-behavior: smooth;
25+
}
26+
27+
/* ============================================
28+
BASE STYLES
29+
============================================ */
30+
31+
body {
32+
counter-reset: sidenote-counter;
33+
max-width: var(--max-width);
34+
width: 90%;
35+
margin: auto;
36+
padding: 2.5%;
37+
background-color: var(--color-bg);
38+
color: var(--color-text-body);
39+
font-family: var(--font-sansserif), sans-serif;
40+
font-size: 1.4rem;
41+
line-height: 1.6;
42+
position: relative;
43+
}

‎src/_css/blog.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/* ============================================
2+
BLOG
3+
============================================ */
4+
5+
/* Blog List Item */
6+
.blog-item {
7+
background: var(--color-off-white);
8+
border: 6px solid var(--color-off-white);
9+
border-bottom-width: 30px;
10+
box-shadow: var(--shadow-card);
11+
padding: 2rem;
12+
margin-bottom: 2rem;
13+
transition: transform 200ms ease, box-shadow 200ms ease;
14+
}
15+
16+
.blog-item:hover {
17+
transform: translateY(-2px);
18+
box-shadow: var(--shadow-hover);
19+
}
20+
21+
.blog-item h2 {
22+
margin-top: 0;
23+
font-size: 2.2em;
24+
}
25+
26+
.blog-meta {
27+
color: var(--color-text-secondary);
28+
font-size: 1rem;
29+
margin-bottom: 1rem;
30+
}
31+
32+
.blog-tags {
33+
display: inline-flex;
34+
gap: 0.5rem;
35+
flex-wrap: wrap;
36+
}
37+
38+
.tag {
39+
background: var(--color-deco-B);
40+
padding: 0.3em 0.8em;
41+
border-radius: 3px;
42+
font-size: 0.9rem;
43+
color: var(--color-text-body);
44+
text-decoration: none;
45+
box-shadow: var(--shadow-subtle);
46+
}
47+
48+
.tag:hover {
49+
background: var(--color-deco-A);
50+
}

‎src/_css/images.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* ============================================
2+
IMAGES
3+
============================================ */
4+
5+
/* By default, images are centered and slightly less than 100% wide */
6+
img {
7+
max-width: 80%;
8+
display: block;
9+
margin: auto;
10+
}
11+
12+
/* Full-width images */
13+
.full-image {
14+
max-width: 100%;
15+
}
16+
17+
/* Slightly wider images; used for post thumbnails */
18+
.wide-image {
19+
max-width: 90%;
20+
margin: auto;
21+
}
22+
23+
.small-image {
24+
float: right;
25+
aspect-ratio: 4/3;
26+
object-fit: cover;
27+
width: 200px;
28+
margin-left: 1.5rem;
29+
margin-bottom: 1rem;
30+
box-shadow: var(--shadow-card);
31+
border: 4px solid var(--color-off-white);
32+
}
33+
34+
.textsize-image {
35+
height: 1em;
36+
width: auto;
37+
display: inline;
38+
}

‎src/_css/landing.css‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/* ============================================
2+
CARD COMPONENTS
3+
============================================ */
4+
5+
.landing-intro {
6+
background: var(--color-off-white);
7+
padding: 1.5rem 2rem;
8+
margin-bottom: 2rem;
9+
box-shadow: var(--shadow-card);
10+
}
11+
12+
.landing-intro p {
13+
margin: 0 0 1rem 0;
14+
}
15+
16+
.landing-intro p:last-child {
17+
margin-bottom: 0;
18+
}
19+
20+
.card {
21+
background: var(--color-off-white);
22+
border: 8px solid var(--color-off-white);
23+
border-bottom-width: 40px; /* Polaroid bottom margin */
24+
box-shadow: var(--shadow-card);
25+
padding: var(--card-padding);
26+
margin-bottom: 2rem;
27+
transition: transform 300ms ease, box-shadow 300ms ease;
28+
}
29+
30+
.card:hover {
31+
transform: translateY(-4px);
32+
box-shadow: var(--shadow-hover);
33+
}
34+
35+
/* Link cards for landing page.
36+
* Link cards are wide and short; a .link-card div contains
37+
*/
38+
39+
.link-card {
40+
position: relative;
41+
padding: 1.5rem 2rem;
42+
margin-bottom: 1.5rem;
43+
text-decoration: none;
44+
display: flex;
45+
align-items: center;
46+
transition: transform 300ms ease;
47+
background: transparent;
48+
border: none;
49+
}
50+
51+
/* Canvas for rough.js sketch background */
52+
.link-card-canvas {
53+
position: absolute;
54+
top: 0;
55+
left: 0;
56+
width: 100%;
57+
height: 100%;
58+
pointer-events: none;
59+
z-index: -1;
60+
}
61+
62+
.link-card:hover {
63+
transform: translateY(-4px) rotate(0deg);
64+
}
65+
66+
.link-card-text {
67+
flex-grow: 1;
68+
display: flex;
69+
flex-direction: column;
70+
}
71+
72+
.link-card-title {
73+
font-family: var(--font-handwriting), sans-serif;
74+
font-size: 1.6em;
75+
margin: 0;
76+
color: var(--color-accent);
77+
line-height: 1.2;
78+
display: block;
79+
}
80+
81+
.link-card-description {
82+
color: var(--color-text-secondary);
83+
margin: 0.3em 0 0 0;
84+
font-size: 1rem;
85+
display: block;
86+
}
87+
88+
.external-links-grid {
89+
display: grid;
90+
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
91+
gap: 1rem;
92+
margin-top: 1rem;
93+
}
94+
95+
.external-link {
96+
display: flex;
97+
flex-direction: column;
98+
align-items: center;
99+
gap: 0.5rem;
100+
padding: 1rem;
101+
background: var(--color-off-white);
102+
border: 10px solid var(--color-deco-C);
103+
border-bottom-width: 25px;
104+
box-shadow: var(--shadow-subtle);
105+
text-decoration: none;
106+
color: var(--color-text-body);
107+
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
108+
text-align: center;
109+
}
110+
111+
.external-link:hover {
112+
transform: translateY(-2px) rotate(-0.5deg);
113+
box-shadow: var(--shadow-card);
114+
color: var(--color-accent);
115+
border-color: var(--color-accent);
116+
}
117+
118+
.external-link-icon {
119+
width: 2em;
120+
height: 2em;
121+
display: block;
122+
}

‎src/_css/layout.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* ============================================
2+
LAYOUT UTILITIES
3+
============================================ */
4+
5+
.title {
6+
margin-bottom: 0;
7+
}
8+
9+
footer {
10+
width: 100%;
11+
text-align: center;
12+
margin: 2.5%;
13+
padding-top: 3rem;
14+
border-top: 1px solid var(--color-deco-A);
15+
color: var(--color-text-secondary);
16+
}
17+
18+
/* Portfolio Grid */
19+
.portfolio-grid {
20+
display: grid;
21+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
22+
gap: 2rem;
23+
margin: 2rem 0;
24+
}

0 commit comments

Comments
 (0)