Skip to content

Commit c493e5a

Browse files
markgohomarkgoho
committed
update profile page
1 parent aec1533 commit c493e5a

6 files changed

Lines changed: 178 additions & 76 deletions

File tree

‎hugo/assets/scss/components/profile-card.scss‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
:root {
2+
--headshot-size: 18.75rem;
3+
}
4+
15
.profile-card {
26
display: grid;
3-
grid-template-columns: 18.75rem 1fr;
7+
grid-template-columns: var(--headshot-size) 1fr;
48
grid-template-rows: max-content 1fr max-content;
59
grid-template-areas:
610
"headshot name"
@@ -17,6 +21,10 @@
1721
grid-area: headshot;
1822
border: 5px solid var(--teal-500);
1923
border-radius: var(--border-radius-md);
24+
aspect-ratio: 1 / 1;
25+
object-fit: cover;
26+
height: 100%;
27+
width: var(--headshot-size);
2028
}
2129

2230
.name {

‎hugo/assets/scss/components/tag.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.tag-group {
2+
display: flex;
3+
flex-wrap: wrap;
4+
gap: var(--space-m);
5+
list-style: none;
6+
padding: 0;
7+
margin: 0 auto;
8+
width: 80%;
9+
justify-content: center;
10+
}
11+
12+
.tag {
13+
padding: 3px 12px;
14+
border-radius: 20px;
15+
width: max-content;
16+
background-color: var(--brown-300);
17+
color: var(--brown-500);
18+
font-weight: 900;
19+
font-size: var(--step--1);
20+
}

‎hugo/assets/scss/doula-profile.scss‎

Lines changed: 71 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,90 @@
1-
.profile-body {
2-
display: grid;
3-
gap: var(--space-size-7);
4-
grid-template-columns: 1fr;
1+
@use "components/tag";
52

6-
@container (width > 45rem) {
7-
grid-template-columns: 1fr 2fr;
8-
}
3+
:root {
4+
--container-max-width: 87.5rem;
5+
}
6+
7+
.profile-container {
8+
display: grid;
9+
column-gap: var(--space-m);
10+
row-gap: var(--space-s);
11+
grid-template-columns: 600px 1fr;
12+
grid-template-rows: min-content min-content 1fr;
13+
grid-template-areas:
14+
"headshot title"
15+
"headshot bio"
16+
"headshot contact-info";
17+
align-content: start;
18+
margin-block-start: var(--space-xl);
19+
padding-block-end: var(--space-xl);
920
}
1021

11-
.profile-header {
12-
margin-block-end: var(--space-size-5);
22+
.title {
23+
grid-area: title;
1324

14-
.credentials {
15-
font-size: var(--ts-m);
16-
color: var(--primary-700);
17-
font-weight: 300;
25+
h1 {
26+
text-align: left;
27+
font-size: var(--step-4);
28+
margin: 0;
1829
}
1930
}
2031

32+
.credentials {
33+
font-size: var(--ts-m);
34+
color: var(--primary-700);
35+
font-weight: 300;
36+
}
37+
2138
.headshot {
22-
width: 100%;
39+
grid-area: headshot;
40+
}
41+
42+
.headshot__image {
43+
margin-bottom: var(--space-l);
44+
min-width: max-content;
2345
height: auto;
2446
object-fit: cover;
47+
aspect-ratio: 1 / 1;
2548
border-radius: 7px;
2649
border: 8px solid var(--teal-500);
27-
padding: var(--space-size-2);
2850
}
2951

30-
.sidebar {
31-
.contact-info,
32-
.tags {
33-
margin-block-end: var(--space-size-5);
52+
.contact-info {
53+
grid-area: contact-info;
54+
55+
h3 {
56+
margin: 0;
3457
}
58+
}
59+
60+
.contact-info svg {
61+
height: 33px;
62+
width: 33px;
63+
}
3564

36-
.tags ul {
37-
list-style: none;
38-
padding: 0;
65+
.contact-info ul {
66+
list-style: none;
67+
margin-block-start: var(--space-s);
68+
margin-block-end: 0;
69+
padding: 0;
70+
display: flex;
71+
flex-direction: column;
72+
gap: var(--space-s);
73+
74+
li {
3975
display: flex;
40-
flex-wrap: wrap;
41-
gap: var(--space-size-2);
42-
43-
li {
44-
background-color: var(--secondary-200);
45-
padding: var(--space-size-1) var(--space-size-3);
46-
border-radius: 50px;
47-
font-size: var(--ts-s);
48-
font-weight: 900;
49-
}
76+
gap: var(--space-2xs);
77+
}
78+
79+
span {
80+
align-self: baseline;
81+
}
82+
}
83+
84+
.bio {
85+
grid-area: bio;
86+
max-width: 60ch;
87+
> p {
88+
margin: 0;
5089
}
5190
}

‎hugo/hugo_stats.json‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"htmlElements": {
33
"tags": [
44
"a",
5-
"aside",
65
"body",
76
"button",
87
"details",
@@ -31,7 +30,6 @@
3130
"script",
3231
"section",
3332
"span",
34-
"strong",
3533
"style",
3634
"summary",
3735
"svg",
@@ -55,7 +53,6 @@
5553
"callout",
5654
"callout__icon",
5755
"callout__text",
58-
"card-body",
5956
"checkbox-group",
6057
"contact-form",
6158
"contact-info",
@@ -75,7 +72,6 @@
7572
"currency-symbol",
7673
"date-fields",
7774
"doula-grid",
78-
"doula-name",
7975
"faq",
8076
"find-a-doula-nav",
8177
"footer",
@@ -99,13 +95,13 @@
9995
"form-group-half",
10096
"header",
10197
"headshot",
98+
"headshot__image",
10299
"hero",
103100
"highlight",
104101
"info-content",
105102
"intro",
106103
"list-container",
107104
"main",
108-
"main-content",
109105
"membership-cta",
110106
"membership-join",
111107
"name",
@@ -120,20 +116,19 @@
120116
"navbar__logo",
121117
"navbar__nav",
122118
"no-credentials",
123-
"no-image",
124-
"placeholder-image",
125119
"post-submission-section",
126120
"price",
127-
"profile-body",
128121
"profile-card",
129122
"profile-card-container",
130-
"profile-header",
123+
"profile-container",
131124
"search-form",
132125
"search-section",
133-
"sidebar",
134126
"small",
127+
"tag",
128+
"tag-group",
135129
"tags",
136-
"text-content"
130+
"text-content",
131+
"title"
137132
],
138133
"ids": [
139134
"birth-doula",

‎hugo/layouts/doulas/single.html‎

Lines changed: 69 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,58 +6,95 @@
66
{{ end }}
77

88
{{ define "main" }}
9-
<section class="profile-header">
10-
<h1>{{ .Title }}</h1>
11-
{{ with .Params.credentials }}
12-
<p class="credentials">{{ . }}</p>
13-
{{ end }}
14-
</section>
15-
16-
<section class="profile-body">
17-
<div class="main-content">
9+
<div class="profile-container">
10+
<section class="title">
11+
<h1>{{ .Title }}</h1>
12+
13+
{{ with .Params.credentials }}
14+
<p class="credentials">{{ . }}</p>
15+
{{ end }}
16+
</section>
17+
18+
<section class="headshot">
1819
{{ $slug := path.Base .File.Dir }}
1920
{{ $profileImage := printf "%s-profile-600.avif" $slug }}
2021
{{ with .Resources.GetMatch $profileImage }}
2122
<img
23+
loading="lazy"
24+
height="600"
25+
width="600"
2226
src="{{ .RelPermalink }}"
2327
alt="Headshot of {{ $.Title }}"
24-
class="headshot" />
28+
class="headshot__image" />
2529
{{ end }}
26-
{{ with .Params.tags }}
27-
<div class="tags">
28-
<h3>Services</h3>
29-
<ul>
30+
31+
32+
<div class="tags">
33+
{{ with .Params.tags }}
34+
<ul class="tag-group">
3035
{{ range . }}
31-
<li>{{ . }}</li>
36+
<li class="tag">{{ . }}</li>
3237
{{ end }}
3338
</ul>
34-
</div>
35-
{{ end }}
36-
</div>
37-
38-
<aside class="sidebar">
39-
<div class="bio">
40-
{{ .Content }}
39+
{{ end }}
4140
</div>
41+
</section>
42+
43+
<section class="bio">
44+
{{ .Content }}
45+
</section>
46+
47+
<section class="contact-info">
4248
{{ with .Params.contact }}
43-
<div class="contact-info">
44-
<h3>Contact Information</h3>
45-
{{ with .business_name }}<p><strong>{{ . }}</strong></p>{{ end }}
49+
<h3>
50+
{{ with .business_name }}{{ . }}{{ else }}Contact Information{{ end }}
51+
</h3>
52+
<ul>
4653
{{ with .website }}
47-
<p>
54+
<li>
55+
<svg
56+
viewBox="0 0 33 33"
57+
fill="none"
58+
xmlns="http://www.w3.org/2000/svg">
59+
<path
60+
d="M16.2578 3.40137C13.6867 3.40137 11.1732 4.1638 9.03541 5.59226C6.89757 7.02072 5.23132 9.05104 4.24738 11.4265C3.26345 13.8019 3.006 16.4158 3.50761 18.9375C4.00922 21.4593 5.24735 23.7757 7.06543 25.5938C8.88351 27.4118 11.1999 28.65 13.7216 29.1516C16.2434 29.6532 18.8573 29.3957 21.2327 28.4118C23.6081 27.4279 25.6385 25.7616 27.0669 23.6238C28.4954 21.4859 29.2578 18.9725 29.2578 16.4014C29.2538 12.9548 27.8829 9.65048 25.4458 7.21336C23.0087 4.77625 19.7044 3.40534 16.2578 3.40137ZM26.0528 11.4014H21.5966C21.0354 9.3425 20.0896 7.40846 18.8091 5.70137C20.3562 6.07303 21.8047 6.77484 23.0552 7.75869C24.3057 8.74254 25.3287 9.98516 26.0541 11.4014H26.0528ZM27.2578 16.4014C27.2587 17.4158 27.1186 18.4255 26.8416 19.4014H22.0278C22.3345 17.4131 22.3345 15.3896 22.0278 13.4014H26.8416C27.1186 14.3773 27.2587 15.3869 27.2578 16.4014ZM16.2578 5.77637C17.7552 7.37952 18.8668 9.30341 19.5078 11.4014H13.0078C13.6482 9.30313 14.7598 7.3791 16.2578 5.77637ZM13.0078 21.4014H19.5078C18.8675 23.4996 17.7558 25.4236 16.2578 27.0264C14.7604 25.4232 13.6488 23.4993 13.0078 21.4014ZM12.5203 19.4014C12.177 17.4161 12.177 15.3866 12.5203 13.4014H20.0053C20.3486 15.3866 20.3486 17.4161 20.0053 19.4014H12.5203ZM18.8141 27.1014C20.0946 25.3943 21.0404 23.4602 21.6016 21.4014H26.0591C25.3332 22.8181 24.3094 24.0611 23.058 25.045C21.8066 26.0288 20.3571 26.7304 18.8091 27.1014H18.8141Z"
61+
fill="#1B5665" />
62+
</svg>
4863
<a href="{{ . }}" target="_blank" rel="noopener noreferrer"
4964
>{{ . }}</a
5065
>
51-
</p>
66+
</li>
67+
{{ end }}
68+
{{ with .phone }}
69+
<li>
70+
<svg
71+
viewBox="0 0 33 33"
72+
fill="none"
73+
xmlns="http://www.w3.org/2000/svg">
74+
<path
75+
d="M29.2428 22.3928C29.0199 24.0866 28.1881 25.6413 26.9027 26.7666C25.6173 27.8919 23.9662 28.5109 22.2578 28.5078C12.3328 28.5078 4.25782 20.4328 4.25782 10.5078C4.25476 8.79942 4.87368 7.14833 5.99899 5.86292C7.1243 4.57751 8.67904 3.74569 10.3728 3.5228C10.8011 3.4705 11.2349 3.55813 11.6093 3.7726C11.9837 3.98707 12.2787 4.31688 12.4503 4.7128L15.0903 10.6066V10.6216C15.2217 10.9246 15.2759 11.2555 15.2482 11.5846C15.2205 11.9138 15.1117 12.231 14.9316 12.5078C14.9091 12.5416 14.8853 12.5728 14.8603 12.6041L12.2578 15.6891C13.1941 17.5916 15.1841 19.5641 17.1116 20.5028L20.1541 17.9141C20.184 17.8889 20.2153 17.8656 20.2478 17.8441C20.5244 17.6596 20.8427 17.5469 21.1738 17.5164C21.5049 17.4858 21.8384 17.5383 22.1441 17.6691L22.1603 17.6766L28.0491 20.3153C28.4457 20.4863 28.7763 20.781 28.9915 21.1555C29.2067 21.53 29.2948 21.9641 29.2428 22.3928Z"
76+
fill="var(--teal-500)" />
77+
</svg>
78+
<a href="tel:{{ . }}">{{ . }}</a>
79+
</li>
5280
{{ end }}
53-
{{ with .phone }}<p>Phone: {{ . }}</p>{{ end }}
5481
{{ with .email }}
55-
<p>Email: <a href="mailto:{{ . }}">{{ . }}</a></p>
82+
<li>
83+
<svg
84+
viewBox="0 0 33 33"
85+
fill="none"
86+
xmlns="http://www.w3.org/2000/svg">
87+
<path
88+
d="M28.2578 6.61377H4.25781C3.9926 6.61377 3.73824 6.71913 3.55071 6.90666C3.36317 7.0942 3.25781 7.34855 3.25781 7.61377V24.6138C3.25781 25.1442 3.46853 25.6529 3.8436 26.028C4.21867 26.4031 4.72738 26.6138 5.25781 26.6138H27.2578C27.7882 26.6138 28.297 26.4031 28.672 26.028C29.0471 25.6529 29.2578 25.1442 29.2578 24.6138V7.61377C29.2578 7.34855 29.1525 7.0942 28.9649 6.90666C28.7774 6.71913 28.523 6.61377 28.2578 6.61377ZM12.5966 16.6138L5.25781 23.34V9.88752L12.5966 16.6138ZM14.0766 17.97L15.5766 19.3513C15.7611 19.5206 16.0024 19.6146 16.2528 19.6146C16.5033 19.6146 16.7446 19.5206 16.9291 19.3513L18.4291 17.97L25.6791 24.6138H6.82906L14.0766 17.97ZM19.9191 16.6138L27.2578 9.88627V23.3413L19.9191 16.6138Z"
89+
fill="var(--teal-500)" />
90+
</svg>
91+
<a href="mailto:{{ . }}">{{ . }}</a>
92+
</li>
5693
{{ end }}
57-
</div>
94+
</ul>
5895
{{ end }}
59-
</aside>
60-
</section>
96+
</section>
97+
</div>
6198

6299
{{ partial "json-ld.html" . }}
63100
{{ end }}

‎hugo/layouts/partials/profile-card.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
{{ $profileImage := printf "%s-profile-300.avif" $slug }}
55
{{ with .Resources.GetMatch $profileImage }}
66
<img
7+
loading="lazy"
8+
height="600"
9+
width="600"
710
src="{{ .RelPermalink }}"
811
alt="Headshot of {{ $.Title }}"
912
class="headshot" />

0 commit comments

Comments
 (0)