Skip to content

Commit af7cc5f

Browse files
webstackdevwebstackdev
committed
Break out last Resume partials
1 parent 831be2e commit af7cc5f

10 files changed

Lines changed: 256 additions & 222 deletions

File tree

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

Lines changed: 43 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
11
---
22
import type { CollectionEntry } from 'astro:content'
3-
import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
3+
import type { RenderedClient } from '@components/Pages/Resume/server'
44
import HeadContent from '@components/Head/index.astro'
55
import Contact from '@components/Pages/Resume/partials/Contact.astro'
66
import Controls from '@components/Pages/Resume/partials/Controls.astro'
7-
import ExperienceCard from '@components/Pages/Resume/partials/ExperienceCard.astro'
7+
import Experience from '@components/Pages/Resume/partials/Experience.astro'
8+
import Languages from '@components/Pages/Resume/partials/Languages.astro'
89
import Persona from '@components/Pages/Resume/partials/Persona.astro'
910
import Skills from '@components/Pages/Resume/partials/Skills.astro'
11+
import Socials from '@components/Pages/Resume/partials/Socials.astro'
1012
import Summary from '@components/Pages/Resume/partials/Summary.astro'
1113
1214
import '@styles/index.css'
1315
import '@styles/icons.css'
14-
import './index.css'
15-
16-
type SocialEntry = {
17-
label: string
18-
url: string
19-
}
20-
type RenderedClient = {
21-
client: CollectionEntry<'clients'>
22-
Content: AstroComponentFactory
23-
}
2416
2517
export interface Props {
2618
contactData: CollectionEntry<'contactData'>['data']
@@ -39,14 +31,6 @@ const {
3931
renderedClients,
4032
resume,
4133
} = Astro.props as Props
42-
43-
const companyContact = contactData.company
44-
const socialEntries: SocialEntry[] = [...companyContact.social]
45-
.sort((left, right) => left.order - right.order)
46-
.map(entry => ({
47-
label: entry.displayName,
48-
url: entry.url,
49-
}))
5034
---
5135

5236
<!doctype html>
@@ -67,105 +51,55 @@ const socialEntries: SocialEntry[] = [...companyContact.social]
6751
<div class="md:absolute md:right-0 md:top-0">
6852
<Controls />
6953
</div>
70-
<Persona
71-
givenName={resume.firstName}
72-
familyName={resume.lastName}
73-
title={resume.title}
74-
/>
54+
55+
<div class="">
56+
<Persona
57+
givenName={resume.firstName}
58+
familyName={resume.lastName}
59+
title={resume.title}
60+
/>
61+
</div>
62+
7563
<div class="mt-1!">
7664
<Contact
7765
contactData={contactData}
78-
email={companyContact.email}
66+
email={contactData.company.email}
7967
/>
8068
</div>
8169
</header>
70+
8271
<main class="space-y-8">
83-
<div class=" mb-3 border-b-2 border-trim/10">
72+
<div class="border-b-2 border-trim/10">
8473
<Summary summary={resume.summary} />
8574
</div>
86-
<section id="experience">
87-
<h2
88-
class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10"
89-
>
90-
Experience
91-
</h2>
92-
<div class="space-y-8">
93-
{
94-
renderedClients.map(({ client, Content }: RenderedClient, index: number) => {
95-
return (
96-
<ExperienceCard
97-
index={index}
98-
client={client}
99-
Content={Content}
100-
/>
101-
)
102-
})
103-
}
104-
</div>
105-
</section>
106-
<section class="mt-8" itemscope itemref="resumeSubject" itemtype="http://schema.org/ItemList">
107-
<h2 class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2">Skills</h2>
108-
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
109-
<Skills skills={resume.skills} />
110-
</div>
111-
</section>
112-
<section
113-
id="languages"
114-
class="mt-8"
115-
itemscope
116-
itemref="resumeSubject"
117-
itemtype="http://schema.org/ItemList"
118-
>
119-
<h2 class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2">Languages</h2>
120-
<ul class="flex flex-wrap gap-4 text-sm font-medium text-content-offset">
121-
{
122-
resume.languages.map((language: (typeof resume.languages)[number]) => (
123-
<li
124-
class="bg-trim/5 px-3 py-1 rounded-full text-primary-offset print:bg-transparent print:p-0 print:border print:border-trim/20 print:px-2 print:py-0.5 print:rounded-md"
125-
itemref="resumeSubject"
126-
itemscope
127-
itemprop="knowsAbout"
128-
itemtype="http://schema.org/knowsAbout"
129-
>
130-
<span itemprop="name">{language}</span>
131-
</li>
132-
))
133-
}
134-
</ul>
135-
</section>
136-
<section
137-
id="socialSection"
138-
class="mt-8 print:mt-6 print:hidden"
139-
itemscope
140-
itemref="resumeSubject"
141-
itemtype="http://schema.org/ItemList"
142-
>
143-
<h2 class="text-xs font-bold tracking-widest text-primary uppercase mb-4 border-b-2 border-trim/10 pb-2 print:border-trim/30 print:mb-3 print:pb-1">SOCIAL</h2>
144-
{
145-
socialEntries.length > 0 ? (
146-
<ul id="socialList" class="flex flex-col md:flex-row md:flex-wrap gap-4 md:gap-8">
147-
{socialEntries.map((entry: SocialEntry) => (
148-
<li
149-
class="text-sm"
150-
itemref="resumeSubject"
151-
itemscope
152-
itemprop="sameAs"
153-
itemtype="http://schema.org/WebSite"
154-
>
155-
<a class="group inline-flex items-center gap-2 hover:text-primary transition-colors text-content-offset" itemprop="url" title={entry.label} rel="me" href={entry.url}>
156-
<span class="font-bold text-content-active group-hover:text-primary transition-colors">{entry.label}</span>
157-
<span class="text-trim/30 select-none">&bull;</span>
158-
<span class="truncate">{entry.url.replace(/^https?:\/\//, '')}</span>
159-
</a>
160-
</li>
161-
))}
162-
</ul>
163-
) : (
164-
<p class="text-sm text-content-offset italic">No social profiles available.</p>
165-
)
166-
}
167-
</section>
75+
76+
<div class="">
77+
<Experience renderedClients={renderedClients} />
78+
</div>
79+
80+
<div class="">
81+
<Skills skills={resume.skills} />
82+
</div>
83+
84+
<div class="">
85+
<Languages languages={resume.languages} />
86+
</div>
87+
88+
<div class="">
89+
<Socials socials={contactData.company.social} />
90+
</div>
16891
</main>
16992
</div>
17093
</body>
17194
</html>
95+
96+
<style>
97+
{/** DO NOT ADD STYLES HERE - Use Tailwind classes on HTML elements, this are resets */}
98+
*, *::before, *::after {
99+
box-sizing: border-box;
100+
}
101+
102+
* {
103+
margin: 0;
104+
}
105+
</style>

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

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

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ import Icon from '@components/Icon/index.astro'
33
import Tooltip from '@components/Tooltip/index.astro'
44
---
55

6-
<ul class="md:flex md:flex-row md:items-center md:gap-4 print:hidden text-content-offset">
6+
<ul class="print:hidden md:flex md:flex-row md:items-center md:gap-4">
77
<li>
88
<Tooltip text="Download PDF">
99
<a
1010
class="inline-flex h-7 w-7 items-center justify-center hover:text-primary transition-colors duration-200"
1111
href="pdf/resume.pdf"
1212
aria-label="Download PDF"
1313
>
14-
<Icon icon="download" color="content" size={7} />
14+
<Icon icon="download" color="primary-offset" size={7} />
1515
</a>
1616
</Tooltip>
1717
</li>
@@ -22,7 +22,7 @@ import Tooltip from '@components/Tooltip/index.astro'
2222
onclick="window.print()"
2323
aria-label="Print Resume"
2424
>
25-
<Icon icon="print" color="content" size={6} />
25+
<Icon icon="print" color="primary-offset" size={6} />
2626
</button>
2727
</Tooltip>
2828
</li>

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
import type { RenderedClient } from '@components/Pages/Resume/server'
3+
import { formatMonthYear, formatDateContent, splitLocation } from '@components/Pages/Resume/server'
4+
import Icon from '@components/Icon/index.astro'
5+
import List from '@components/List/index.astro'
6+
import ListItem from '@components/List/ListItem.astro'
7+
8+
export interface Props {
9+
renderedClients: RenderedClient[]
10+
}
11+
12+
const { renderedClients } = Astro.props as Props
13+
---
14+
15+
<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
20+
</h2>
21+
<div class="space-y-8">
22+
{
23+
renderedClients.map(({ client, Content }: RenderedClient, index: number) => {
24+
const location = splitLocation(client.data.location)
25+
return (
26+
<div
27+
id={`experienceItem-${index + 1}`}
28+
class="flex flex-col gap-1.5"
29+
itemprop="worksFor"
30+
itemscope
31+
itemref="resumeSubject"
32+
itemtype="http://schema.org/Organization"
33+
>
34+
<div class="flex flex-col md:flex-row md:items-baseline md:justify-between">
35+
<h3
36+
id={`role-${index + 1}`}
37+
class="text-xl font-bold text-content-active"
38+
itemprop="Role"
39+
itemref={`experienceItem-${index + 1}`}
40+
itemscope
41+
itemtype="https://schema.org/EmployeeRole"
42+
>
43+
<span itemprop="roleName">
44+
{client.data.role ?? client.data.businessType ?? client.data.displayName}
45+
</span>
46+
</h3>
47+
<div class="text-sm font-medium text-content-offset mt-0.5 md:mt-0 flex gap-1.5 items-center">
48+
<time
49+
itemprop="startDate"
50+
itemtype="http://schema.org/startDate"
51+
datetime={formatDateContent(client.data.startDate)}
52+
>
53+
{formatMonthYear(client.data.startDate)}
54+
</time>
55+
<span class="text-trim/50">&mdash;</span>
56+
<time
57+
itemprop="endDate"
58+
itemtype="http://schema.org/endDate"
59+
datetime={formatDateContent(client.data.endDate)}
60+
>
61+
{formatMonthYear(client.data.endDate)}
62+
</time>
63+
</div>
64+
</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>
67+
{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+
<>, <span itemprop="addressRegion">{location.region}</span></>
82+
)}
83+
</span>
84+
</a>
85+
</>
86+
)}
87+
</div>
88+
<div class="experienceDetailContent mt-3" itemprop="description">
89+
<Content components={{ List, ListItem }} />
90+
</div>
91+
</div>
92+
)
93+
})
94+
}
95+
</div>
96+
</section>

0 commit comments

Comments
 (0)