Skip to content

Commit 09bef1d

Browse files
author
dphuang2
committed
style better for mobile
1 parent a0bb315 commit 09bef1d

File tree

2 files changed

+96
-95
lines changed

2 files changed

+96
-95
lines changed

‎src/components/Home.tsx‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -241,15 +241,18 @@ function About({ recentPosts }: Props) {
241241
{filteredPosts.length > 0 && (
242242
<>
243243
<h3 className="mb-6">My blog posts:</h3>
244-
<ul className="list-none mb-12">
244+
<ul className="list-none mb-12 pl-0">
245245
{filteredPosts.map(({ content }) => {
246246
return (
247-
<li key={content.metadata.permalink}>
248-
<span className="mr-3 text-gray-400 font-semibold">
247+
<li key={content.metadata.permalink} className="flex flex-row">
248+
<span className="shrink-0 w-16 sm:w-20 text-gray-400 font-semibold text-sm sm:text-base">
249249
{new Date(content.metadata.date).getFullYear()}-
250250
{new Date(content.metadata.date).getMonth() + 1}
251251
</span>
252-
<a href={content.metadata.permalink}>
252+
<a
253+
href={content.metadata.permalink}
254+
className="text-sm sm:text-base"
255+
>
253256
{content.metadata.title}{" "}
254257
</a>
255258
</li>
@@ -263,35 +266,37 @@ function About({ recentPosts }: Props) {
263266
<h3 className="mb-0">My proudest achievements:</h3>
264267
<button
265268
onClick={() => setShowPersonal(!showPersonal)}
266-
className="text-xs px-2 py-0.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors cursor-pointer bg-white self-start"
269+
className="text-xs px-1.5 sm:px-2 py-0.5 rounded-full border border-gray-200 text-gray-500 hover:bg-gray-100 hover:text-gray-700 transition-colors cursor-pointer bg-white self-start"
267270
>
268271
{showPersonal ? "Hide" : "Show"} personal achievements
269272
</button>
270273
</div>
271-
<ul className="list-none mb-12">
274+
<ul className="list-none mb-12 pl-0">
272275
{filteredAchievements.map((achievement, index) => (
273-
<li key={index}>
274-
<span className="mr-3 text-gray-400 font-semibold">
276+
<li key={index} className="flex flex-row">
277+
<span className="shrink-0 w-12 sm:w-14 text-gray-400 font-semibold text-sm sm:text-base">
275278
{achievement.year}
276279
</span>
277-
{achievement.description}
278-
{achievement.type === "personal" && (
279-
<span className="ml-2 text-xs px-1.5 py-0.5 text-gray-500 border border-gray-300 rounded">
280-
personal
281-
</span>
282-
)}
283-
{achievement.links?.map((link, i) => (
284-
<a key={i} target="_blank" href={link.url}>
285-
{" "}
286-
{link.text}
287-
</a>
288-
))}
280+
<div className="text-sm sm:text-base">
281+
{achievement.description}
282+
{achievement.type === "personal" && (
283+
<span className="ml-1 sm:ml-2 text-xs px-1 sm:px-1.5 py-0.5 text-gray-500 border border-gray-300 rounded">
284+
personal
285+
</span>
286+
)}
287+
{achievement.links?.map((link, i) => (
288+
<a key={i} target="_blank" href={link.url}>
289+
{" "}
290+
{link.text}
291+
</a>
292+
))}
293+
</div>
289294
</li>
290295
))}
291296
</ul>
292297

293298
<h3 className="mb-6">What colleagues have said about me:</h3>
294-
<blockquote className="mb-8">
299+
<blockquote className="mb-8 text-sm sm:text-base">
295300
I have no hesitation in saying that Dylan exhibited exceptional drive,
296301
competency and leadership abilities. I wholeheartedly recommend him and
297302
would welcome the opportunity to work together again. Dylan would be a
@@ -300,7 +305,7 @@ function About({ recentPosts }: Props) {
300305
<a href="https://www.linkedin.com/in/cherifjazra">Cherif Jazra</a>
301306
</blockquote>
302307

303-
<blockquote>
308+
<blockquote className="text-sm sm:text-base">
304309
With organizational growth and new projects, it was an easy decision for
305310
me to make Dylan the technical lead for a new engineering team in my
306311
org, working on a greenfield project at the intersection of data

‎tailwind.config.js‎

Lines changed: 69 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -9,79 +9,75 @@ module.exports = {
99
darkMode: ["class", '[data-theme="dark"]'],
1010
content: ["./src/**/*.{jsx,tsx,html}"],
1111
theme: {
12-
extend: {
13-
fontFamily: {
14-
sans: ['Inter"', ...fontFamily.sans],
15-
jakarta: ['Plus Jakarta Sans"', ...fontFamily.sans],
16-
mono: ['Fira Code"', ...fontFamily.mono]
17-
},
18-
screens: {
19-
sm: '0px',
20-
lg: '997px'
21-
},
22-
colors: {
23-
border: 'hsl(var(--border))',
24-
input: 'hsl(var(--input))',
25-
ring: 'hsl(var(--ring))',
26-
background: 'hsl(var(--background))',
27-
foreground: 'hsl(var(--foreground))',
28-
primary: {
29-
DEFAULT: 'hsl(var(--primary))',
30-
foreground: 'hsl(var(--primary-foreground))'
31-
},
32-
secondary: {
33-
DEFAULT: 'hsl(var(--secondary))',
34-
foreground: 'hsl(var(--secondary-foreground))'
35-
},
36-
destructive: {
37-
DEFAULT: 'hsl(var(--destructive))',
38-
foreground: 'hsl(var(--destructive-foreground))'
39-
},
40-
muted: {
41-
DEFAULT: 'hsl(var(--muted))',
42-
foreground: 'hsl(var(--muted-foreground))'
43-
},
44-
accent: {
45-
DEFAULT: 'hsl(var(--accent))',
46-
foreground: 'hsl(var(--accent-foreground))'
47-
},
48-
popover: {
49-
DEFAULT: 'hsl(var(--popover))',
50-
foreground: 'hsl(var(--popover-foreground))'
51-
},
52-
card: {
53-
DEFAULT: 'hsl(var(--card))',
54-
foreground: 'hsl(var(--card-foreground))'
55-
}
56-
},
57-
borderRadius: {
58-
lg: '`var(--radius)`',
59-
md: '`calc(var(--radius) - 2px)`',
60-
sm: 'calc(var(--radius) - 4px)'
61-
},
62-
keyframes: {
63-
'accordion-down': {
64-
from: {
65-
height: '0'
66-
},
67-
to: {
68-
height: 'var(--radix-accordion-content-height)'
69-
}
70-
},
71-
'accordion-up': {
72-
from: {
73-
height: 'var(--radix-accordion-content-height)'
74-
},
75-
to: {
76-
height: '0'
77-
}
78-
}
79-
},
80-
animation: {
81-
'accordion-down': 'accordion-down 0.2s ease-out',
82-
'accordion-up': 'accordion-up 0.2s ease-out'
83-
}
84-
}
12+
extend: {
13+
fontFamily: {
14+
sans: ['Inter"', ...fontFamily.sans],
15+
jakarta: ['Plus Jakarta Sans"', ...fontFamily.sans],
16+
mono: ['Fira Code"', ...fontFamily.mono],
17+
},
18+
colors: {
19+
border: "hsl(var(--border))",
20+
input: "hsl(var(--input))",
21+
ring: "hsl(var(--ring))",
22+
background: "hsl(var(--background))",
23+
foreground: "hsl(var(--foreground))",
24+
primary: {
25+
DEFAULT: "hsl(var(--primary))",
26+
foreground: "hsl(var(--primary-foreground))",
27+
},
28+
secondary: {
29+
DEFAULT: "hsl(var(--secondary))",
30+
foreground: "hsl(var(--secondary-foreground))",
31+
},
32+
destructive: {
33+
DEFAULT: "hsl(var(--destructive))",
34+
foreground: "hsl(var(--destructive-foreground))",
35+
},
36+
muted: {
37+
DEFAULT: "hsl(var(--muted))",
38+
foreground: "hsl(var(--muted-foreground))",
39+
},
40+
accent: {
41+
DEFAULT: "hsl(var(--accent))",
42+
foreground: "hsl(var(--accent-foreground))",
43+
},
44+
popover: {
45+
DEFAULT: "hsl(var(--popover))",
46+
foreground: "hsl(var(--popover-foreground))",
47+
},
48+
card: {
49+
DEFAULT: "hsl(var(--card))",
50+
foreground: "hsl(var(--card-foreground))",
51+
},
52+
},
53+
borderRadius: {
54+
lg: "`var(--radius)`",
55+
md: "`calc(var(--radius) - 2px)`",
56+
sm: "calc(var(--radius) - 4px)",
57+
},
58+
keyframes: {
59+
"accordion-down": {
60+
from: {
61+
height: "0",
62+
},
63+
to: {
64+
height: "var(--radix-accordion-content-height)",
65+
},
66+
},
67+
"accordion-up": {
68+
from: {
69+
height: "var(--radix-accordion-content-height)",
70+
},
71+
to: {
72+
height: "0",
73+
},
74+
},
75+
},
76+
animation: {
77+
"accordion-down": "accordion-down 0.2s ease-out",
78+
"accordion-up": "accordion-up 0.2s ease-out",
79+
},
80+
},
8581
},
8682
plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
8783
};

0 commit comments

Comments
 (0)