Skip to content

Commit 96f4983

Browse files
webstackdevwebstackdev
committed
Resume styling
1 parent dd1dd96 commit 96f4983

21 files changed

Lines changed: 390 additions & 211 deletions

‎src/components/List/layouts/ExperienceList.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,23 @@ export type Props = {
1818
1919
const { items, classes }: Props = Astro.props
2020
21-
const ulClass = ['ml-3 mr-1 space-y-2 text-sm text-content-offset', classes?.ul]
22-
const liClass = ['flex items-start gap-3', classes?.li]
23-
const emClass = ['not-italic font-semibold text-content', classes?.em]
24-
const iconClass = ['mt-0.5 shrink-0', classes?.icon]
21+
const ulClass = ['ml-3 mr-8 space-y-2 text-md text-content-offset', classes?.ul]
22+
const liClass = ['flex items-start gap-1', classes?.li]
23+
const emClass = ['not-italic font-medium text-primary-offset', classes?.em]
24+
const iconClass = ['mt-1.75 shrink-0', classes?.icon]
2525
---
2626

2727
<ul class:list={ulClass}>
2828
{
2929
items.map(item => (
3030
<li class:list={liClass}>
3131
<span class:list={iconClass} aria-hidden="true">
32-
<Icon icon="chevron" color={item.color ?? 'text-primary-offset'} size={3} />
32+
<Icon icon="chevron" color={item.color ?? 'text-primary-offset'} size={4} />
3333
</span>
34-
<div class="min-w-0">
34+
<div class="min-w-0 leading-relaxed">
3535
{item.lead && <em class:list={emClass} set:html={item.lead} />}
3636
<span
37-
class:list={['block leading-relaxed', item.lead ? 'mt-0.5' : '', classes?.text]}
37+
class:list={[classes?.text]}
3838
set:html={item.text}
3939
/>
4040
</div>

‎src/components/Pages/Resume/index.astro‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import Summary from '@components/Pages/Resume/partials/Summary.astro'
1313
1414
import '@styles/index.css'
1515
import '@styles/icons.css'
16-
import './index.css'
1716
1817
export interface Props {
1918
contactData: CollectionEntry<'contactData'>['data']
@@ -35,19 +34,24 @@ const {
3534
---
3635

3736
<!doctype html>
38-
<html lang="en" data-theme="light" class="h-auto min-h-full overflow-y-auto">
37+
<html
38+
lang="en"
39+
data-theme="light"
40+
class="h-auto min-h-full overflow-y-auto"
41+
>
3942
<head>
4043
<HeadContent pageTitle={pageTitle} pageDescription={pageDescription} path={path} />
4144
</head>
4245
<body
4346
itemtype="http://schema.org/Person"
44-
class="h-auto min-h-full overflow-y-auto text-content font-sans leading-6 [font-smoothing:antialiased] bg-page-offset md:flex md:justify-center print:bg-white print:block"
47+
class="h-auto min-h-full overflow-y-auto text-content font-sans leading-6 [font-smoothing:antialiased] md:flex md:justify-center print:bg-white"
4548
>
46-
<div class="relative bg-primary-inverse mx-auto w-full max-w-4xl p-6 md:my-10 md:p-12 md:shadow-xl lg:my-14 lg:p-16">
49+
{/** Use wrapper to keep resume centered on desktop */}
50+
<div class="relative bg-primary-inverse mx-auto w-full max-w-4xl p-6 md:p-12 my-14 lg:p-16 md:shadow-xl print:shadow-none">
4751
<header
4852
itemscope
4953
itemref="resumeSubject"
50-
class="relative border-b-2 border-trim/10 pb-6 mb-8"
54+
class="relative mb-4!"
5155
>
5256
<div class="md:absolute md:right-0 md:top-0">
5357
<Controls />
@@ -61,16 +65,16 @@ const {
6165
/>
6266
</div>
6367

64-
<div class="mt-1!">
68+
<div class="mt-2!">
6569
<Contact
6670
contactData={contactData}
6771
email={contactData.company.email}
6872
/>
6973
</div>
7074
</header>
7175

72-
<main class="space-y-8">
73-
<div class="border-b-2 border-trim/10">
76+
<main class="space-y-4!">
77+
<div class="">
7478
<Summary summary={resume.summary} />
7579
</div>
7680

‎src/components/Pages/Resume/index.css‎

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

‎src/components/Pages/Resume/partials/Contact.astro‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,39 +14,44 @@ const resumeLocation = `${contactData.company.city}, ${contactData.company.state
1414
const resumePhoneNumber = formatPhoneNumber(contactData.company.telephoneTollFree)
1515
---
1616

17-
<dl class="flex gap-2 text-sm text-content-offset font-medium">
17+
<dl class="flex ml-1 gap-6 text-sm font-medium">
18+
{/** Email */}
1819
<a
1920
itemprop="email"
2021
href={`mailto:${email}`}
21-
class="flex gap-2 hover:text-primary transition-colors duration-200"
22+
class="group flex gap-2 hover:text-note-offset hover:decoration-note-offset transition-colors duration-200 print:no-underline"
2223
>
23-
<dt aria-label="email" class="text-primary-offset">
24-
<Icon icon="email-solid" color="content" size={4} />
24+
<dt aria-label="email" class="text-content group-hover:text-note-offset mt-0.75">
25+
<Icon icon="email-solid" color="inherit" size={4} />
2526
</dt>
2627
<dd>{email}</dd>
2728
</a>
29+
30+
{/** Location */}
2831
<a
2932
id="locationWrapper"
3033
itemprop="homeLocation"
3134
itemscope
3235
href={contactData.company.mapLink}
33-
class="flex gap-2 hover:text-primary transition-colors duration-200"
36+
class="group flex hover:text-note-offset hover:decoration-note-offset transition-colors duration-200 print:no-underline"
3437
>
35-
<dt aria-label="location" class="text-primary-offset">
36-
<Icon icon="location" color="content" size={6} />
38+
<dt aria-label="location" class="text-content group-hover:text-note-offset">
39+
<Icon icon="location" color="inherit" size={6} />
3740
</dt>
3841
<dd id="locationLabel" class="inline">{resumeLocation}</dd>
3942
</a>
43+
44+
{/** Telephone */}
4045
<a
4146
id="telephoneWrapper"
4247
itemprop="telephone"
4348
itemscope
4449
href={`tel:${contactData.company.telephoneTollFree}`}
45-
class="flex gap-2 hover:text-primary transition-colors duration-200"
50+
class="group flex gap-2.5 hover:text-note-offset hover:decoration-note-offset transition-colors duration-200 print:no-underline"
4651
>
47-
<dt aria-label="telephone" class="text-primary-offset">
48-
<Icon icon="telephone" color="content" size={6} />
52+
<dt aria-label="telephone" class="text-content group-hover:text-note-offset">
53+
<Icon icon="telephone" color="inherit" size={6} />
4954
</dt>
50-
<dd id="telephoneLabel" class="inline">{resumePhoneNumber}</dd>
55+
<dd id="telephoneLabel" class="inline">1 {resumePhoneNumber}</dd>
5156
</a>
5257
</dl>

‎src/components/Pages/Resume/partials/Experience.astro‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,27 @@ const { renderedClients } = Astro.props as Props
1313
---
1414

1515
<section id="experience">
16-
<h2
17-
class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10"
18-
>
19-
Experience
16+
<h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
17+
Past Clients
2018
</h2>
21-
<div class="space-y-8">
19+
<div class="mt-4!">
2220
{
2321
renderedClients.map(({ client, Content }: RenderedClient, index: number) => {
2422
const location = splitLocation(client.data.location)
2523
return (
2624
<div
2725
id={`experienceItem-${index + 1}`}
28-
class="flex flex-col gap-1.5"
26+
class="flex flex-col gap-1.5 pb-4 mb-4 border-b-2 border-dashed border-gray-400 last:border-b-0 last:pb-0 last:mb-0"
2927
itemprop="worksFor"
3028
itemscope
3129
itemref="resumeSubject"
3230
itemtype="http://schema.org/Organization"
3331
>
3432
<div class="flex flex-col md:flex-row md:items-baseline md:justify-between">
33+
{/** Job Title */}
3534
<h3
3635
id={`role-${index + 1}`}
37-
class="text-xl font-bold text-content-active"
36+
class="text-xl font-bold text-primary-offset"
3837
itemprop="Role"
3938
itemref={`experienceItem-${index + 1}`}
4039
itemscope
@@ -44,7 +43,8 @@ const { renderedClients } = Astro.props as Props
4443
{client.data.role ?? client.data.businessType ?? client.data.displayName}
4544
</span>
4645
</h3>
47-
<div class="text-sm font-medium text-content-offset mt-0.5 md:mt-0 flex gap-1.5 items-center">
46+
{/** Start and End Dates */}
47+
<div class="text-md font-medium text-content-offset mt-0.5 flex gap-1.5 items-center">
4848
<time
4949
itemprop="startDate"
5050
itemtype="http://schema.org/startDate"
@@ -62,32 +62,30 @@ const { renderedClients } = Astro.props as Props
6262
</time>
6363
</div>
6464
</div>
65-
<div class="text-base font-semibold text-primary-offset flex flex-wrap items-center gap-x-2 gap-y-1 print:text-sm">
66-
<span itemprop="legalName">{client.data.displayName}</span>
65+
{/** Company Name and Location */}
66+
<div class="text-primary-offset flex flex-wrap items-center gap-x-3 gap-y-1">
67+
<a
68+
class="inline-flex items-center text-danger-offset decoration-danger-offset transition-colors hover:text-danger hover:decoration-danger font-medium mb-1 print:text-content print:decoration-none"
69+
href={client.data.website ?? ''}
70+
itemprop="location"
71+
itemscope
72+
itemtype="http://schema.org/PostalAddress"
73+
>
74+
<span itemprop="legalName" class="font-semibold text-lg text-danger-offset">
75+
{client.data.displayName}
76+
</span>
77+
</a>
6778
{client.data.location && (
68-
<>
69-
<span class="text-trim/30 select-none">&bull;</span>
70-
<a
71-
class="inline-flex items-center gap-1 hover:text-primary transition-colors text-content-offset font-medium"
72-
href={client.data.website ?? ''}
73-
itemprop="location"
74-
itemscope
75-
itemtype="http://schema.org/PostalAddress"
76-
>
77-
<Icon icon="location" color="content" size={6} />
78-
<span>
79-
<span itemprop="addressLocality">{location.locality}</span>
80-
{location.region && (
81-
<>
82-
, <span itemprop="addressRegion">{location.region}</span>
83-
</>
84-
)}
85-
</span>
86-
</a>
87-
</>
79+
<div class="flex">
80+
<Icon icon="location" color="inherit" size={5} />
81+
<span>
82+
<span itemprop="addressLocality">{location.locality}</span>,
83+
<span itemprop="addressRegion">{location.region}</span>
84+
</span>
85+
</div>
8886
)}
8987
</div>
90-
<div class="experienceDetailContent mt-3" itemprop="description">
88+
<div class="experienceDetailContent" itemprop="description">
9189
<Content components={{ List, ListItem }} />
9290
</div>
9391
</div>

‎src/components/Pages/Resume/partials/Languages.astro‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,15 @@ const { languages } = Astro.props as Props
1010

1111
<section
1212
id="languages"
13-
class="mt-8"
13+
class="mt-6"
1414
itemscope
1515
itemref="resumeSubject"
1616
itemtype="http://schema.org/ItemList"
1717
>
18-
<h2
19-
class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2"
20-
>
18+
<h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
2119
Languages
2220
</h2>
23-
<ul class="flex flex-wrap gap-4 text-sm font-medium text-content-offset">
21+
<ul class="flex flex-wrap justify-evenly text-sm font-medium text-content-offset mt-4">
2422
{
2523
languages.map((language: (typeof languages)[number]) => (
2624
<li

‎src/components/Pages/Resume/partials/Skills.astro‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,24 @@ export interface Props {
88
const { skills } = Astro.props as Props
99
---
1010

11-
<section class="mt-8" itemscope itemref="resumeSubject" itemtype="http://schema.org/ItemList">
12-
<h2
13-
class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2"
14-
>
11+
<section class="mt-6" itemscope itemref="resumeSubject" itemtype="http://schema.org/ItemList">
12+
<h2 class="text-sm font-mono font-bold tracking-widest text-content-offset print:text-content uppercase p-3 border-2 border-dashed border-gray-400 rounded-md">
1513
Skills
1614
</h2>
17-
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
15+
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 mx-2 mt-4">
1816
{
1917
skills.map(skill => (
20-
<div
18+
<li
2119
class="flex flex-col"
2220
itemref="resumeSubject"
2321
itemscope
2422
itemprop="knowsAbout"
2523
itemtype="http://schema.org/knowsAbout"
2624
>
27-
<h3 class="font-bold text-content-active text-sm mb-1">{skill.lead}</h3>
28-
<p class="text-sm text-content-offset leading-relaxed print:text-xs">{skill.text}</p>
29-
</div>
25+
<h3 class="text-primary-offset font-bold text-content-active text-base mb-1">{skill.lead}</h3>
26+
<p class="text-sm text-content-offset leading-relaxed">{skill.text}</p>
27+
</li>
3028
))
3129
}
32-
</div>
30+
</ul>
3331
</section>

0 commit comments

Comments
 (0)