Skip to content

Commit 6cb011b

Browse files
Jac21Jac21
committed
Let's see if Codex can help improve this thing (loading, styling)
1 parent 1d3fc67 commit 6cb011b

13 files changed

Lines changed: 741 additions & 320 deletions

‎src/app/components/contact/contact.component.css‎

Lines changed: 184 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,203 @@
1-
.back-button {
2-
margin-bottom: 1em;
1+
.contact-page {
2+
padding: 24px 10px 48px;
33
}
44

5-
.contact-card {
6-
width: 380px;
7-
margin: 0 auto;
5+
.contact-shell {
6+
width: min(1128px, 100%);
7+
margin: 0 auto 36px;
8+
display: grid;
9+
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 420px);
10+
gap: 40px;
11+
align-items: start;
812
}
913

10-
.header-image {
11-
background-image: url('../../../assets/images/content/favicon.png');
12-
background-size: cover;
14+
.contact-intro {
15+
padding-top: 18px;
1316
}
1417

15-
.card-content-wrapper {
16-
text-align: center;
18+
.contact-eyebrow {
19+
margin: 0 0 12px;
20+
font-size: 0.8rem;
21+
font-weight: 700;
22+
letter-spacing: 0.18em;
23+
text-transform: uppercase;
24+
color: #6d4c41;
1725
}
1826

19-
.email-link {
20-
color: #586B8F;
27+
.contact-title {
28+
margin: 0;
29+
max-width: 12ch;
30+
font-size: clamp(2.2rem, 5vw, 4.1rem);
31+
line-height: 0.95;
32+
letter-spacing: -0.05em;
33+
color: #1f1a17;
2134
}
2235

23-
.email-link:hover {
24-
color: #00A0C6;
25-
cursor: pointer;
36+
.contact-copy {
37+
margin: 20px 0 0;
38+
max-width: 560px;
39+
font-size: 1.05rem;
40+
line-height: 1.75;
41+
color: #4d4d4d;
2642
}
2743

28-
.button-primary {
29-
color: white;
30-
background-color: #26a69a;
44+
.contact-primary {
45+
margin-top: 28px;
46+
padding-top: 18px;
47+
border-top: 1px solid #ece4df;
3148
}
3249

33-
.bmc-button img {
34-
width: 27px !important;
35-
margin-bottom: 1px !important;
36-
box-shadow: none !important;
37-
border: none !important;
38-
vertical-align: middle !important;
50+
.contact-email {
51+
color: #3e2723;
52+
font-size: clamp(1.2rem, 2.2vw, 1.65rem);
53+
font-weight: 600;
54+
letter-spacing: -0.03em;
55+
text-decoration: none;
3956
}
4057

41-
.bmc-button {
42-
line-height: 36px !important;
43-
height: 37px !important;
44-
text-decoration: none !important;
45-
display: inline-flex !important;
46-
color: #ffffff !important;
47-
background-color: #FF813F !important;
48-
border-radius: 3px !important;
49-
border: 1px solid transparent !important;
50-
padding: 0px 15px !important;
51-
font-size: 17px !important;
52-
letter-spacing: -0.08px !important;
53-
;
54-
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
55-
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
56-
margin: 3px auto !important;
57-
font-family: 'Lato', sans-serif !important;
58-
-webkit-box-sizing: border-box !important;
59-
box-sizing: border-box !important;
60-
-o-transition: 0.3s all linear !important;
61-
-webkit-transition: 0.3s all linear !important;
62-
-moz-transition: 0.3s all linear !important;
63-
-ms-transition: 0.3s all linear !important;
64-
transition: 0.3s all linear !important;
58+
.contact-email:hover,
59+
.contact-email:focus-visible {
60+
color: #6d4c41;
6561
}
6662

67-
.bmc-button:hover,
68-
.bmc-button:active,
69-
.bmc-button:focus {
70-
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
71-
text-decoration: none !important;
72-
box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
73-
opacity: 0.85 !important;
74-
color: #ffffff !important;
63+
.contact-location {
64+
margin: 10px 0 0;
65+
color: #8b796f;
66+
font-size: 0.98rem;
67+
}
68+
69+
.contact-actions {
70+
display: flex;
71+
flex-wrap: wrap;
72+
gap: 12px;
73+
margin-top: 24px;
74+
}
75+
76+
.contact-link {
77+
display: inline-flex;
78+
align-items: center;
79+
justify-content: center;
80+
gap: 8px;
81+
padding: 0.85rem 1.15rem;
82+
border: 1px solid #ddd2cb;
83+
border-radius: 999px;
84+
background: #fffdfb;
85+
color: #4f3d36;
86+
font-size: 0.94rem;
87+
font-weight: 600;
88+
text-decoration: none;
89+
transition:
90+
border-color 160ms ease,
91+
background-color 160ms ease,
92+
color 160ms ease,
93+
transform 160ms ease;
94+
}
95+
96+
.contact-link:hover,
97+
.contact-link:focus-visible {
98+
border-color: #bca99f;
99+
background-color: #ffffff;
100+
color: #2f241f;
101+
transform: translateY(-1px);
102+
}
103+
104+
.contact-link-newgrain {
105+
border-color: rgba(86, 125, 214, 0.28);
106+
background:
107+
linear-gradient(135deg, rgba(232, 239, 255, 0.98), rgba(244, 247, 255, 0.94));
108+
color: #304a84;
109+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
110+
}
111+
112+
.contact-link-newgrain:hover,
113+
.contact-link-newgrain:focus-visible {
114+
border-color: rgba(86, 125, 214, 0.44);
115+
background:
116+
linear-gradient(135deg, rgba(225, 234, 255, 1), rgba(241, 245, 255, 0.98));
117+
color: #20345f;
118+
}
119+
120+
.contact-link-label {
121+
letter-spacing: -0.01em;
122+
}
123+
124+
.contact-link-divider {
125+
width: 1px;
126+
height: 0.9rem;
127+
background: currentColor;
128+
opacity: 0.28;
129+
}
130+
131+
.contact-profile {
132+
display: grid;
133+
gap: 18px;
134+
}
135+
136+
.contact-portrait {
137+
margin: 0;
138+
overflow: hidden;
139+
border-radius: 24px;
140+
background: #f5f1ee;
141+
}
142+
143+
.contact-portrait img {
144+
display: block;
145+
width: 100%;
146+
height: auto;
147+
}
148+
149+
.contact-details {
150+
padding-top: 4px;
151+
border-top: 1px solid #ece4df;
152+
}
153+
154+
.contact-name {
155+
margin: 0;
156+
color: #2f241f;
157+
font-size: 1.1rem;
158+
font-weight: 600;
159+
}
160+
161+
.contact-role,
162+
.contact-note {
163+
margin: 10px 0 0;
164+
color: #6f625a;
165+
line-height: 1.7;
166+
}
167+
168+
@media (max-width: 900px) {
169+
.contact-shell {
170+
grid-template-columns: 1fr;
171+
gap: 28px;
172+
}
173+
174+
.contact-title {
175+
max-width: 14ch;
176+
}
177+
178+
.contact-profile {
179+
max-width: 460px;
180+
}
181+
}
182+
183+
@media (max-width: 540px) {
184+
.contact-page {
185+
padding-bottom: 36px;
186+
}
187+
188+
.contact-copy {
189+
font-size: 1rem;
190+
}
191+
192+
.contact-actions {
193+
flex-direction: column;
194+
}
195+
196+
.contact-link {
197+
width: 100%;
198+
}
199+
200+
.contact-portrait {
201+
border-radius: 20px;
202+
}
75203
}

‎src/app/components/contact/contact.component.html‎

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,73 @@
1-
<div class="contact-card-wrapper">
2-
<mat-card class="contact-card md-elevation-z4">
3-
<mat-card-header>
4-
<div mat-card-avatar class="header-image"></div>
5-
<mat-card-title>Jeremy Cantu</mat-card-title>
6-
<mat-card-subtitle>Software Developer & Photographer</mat-card-subtitle>
7-
</mat-card-header>
8-
<img
9-
mat-card-image
10-
src="assets/images/content/headshot-photo.jpg"
11-
alt="Photo of Jeremy Cantu"
12-
/>
13-
<div class="card-content-wrapper">
14-
<mat-card-content>
15-
<p>Based in Austin, TX</p>
16-
<p>
17-
<a class="email-link" href="mailto:jcantu521@gmail.com" target="_top"
18-
>mail&#64;jeremycantu.com</a
19-
>
20-
</p>
21-
</mat-card-content>
22-
<mat-card-actions>
1+
<section class="contact-page">
2+
<div class="contact-shell">
3+
<div class="contact-intro">
4+
<p class="contact-eyebrow">Contact</p>
5+
<h2 class="contact-title">
6+
Let&apos;s talk about photographs, projects, or prints.
7+
</h2>
8+
<p class="contact-copy">
9+
I&apos;m Jeremy Cantu, a photographer and software developer based in
10+
Austin, Texas. If you&apos;d like to collaborate or inquire about a
11+
photo, I&apos;d love to hear from you.
12+
</p>
13+
14+
<div class="contact-primary">
15+
<a
16+
class="contact-email"
17+
href="mailto:jcantu521@gmail.com"
18+
target="_top"
19+
>
20+
mail&#64;jeremycantu.com
21+
</a>
22+
<p class="contact-location">Austin, Texas</p>
23+
</div>
24+
25+
<div class="contact-actions" aria-label="Contact links">
2326
<a
24-
mat-raised-button
2527
href="https://www.jeremycantu.com"
2628
rel="noopener noreferrer"
2729
target="_blank"
28-
class="button-primary"
30+
class="contact-link"
2931
>Portfolio</a
3032
>
3133
<a
32-
mat-raised-button
3334
href="https://github.com/jac21"
3435
rel="noopener noreferrer"
3536
target="_blank"
36-
class="button-primary"
37+
class="contact-link"
3738
>GitHub</a
3839
>
39-
<link
40-
href="https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext"
41-
rel="stylesheet"
42-
/>
4340
<a
44-
href="https://www.buymeacoffee.com/jac21"
41+
href="https://www.newgrain.app/jac21"
4542
target="_blank"
4643
rel="noopener noreferrer"
47-
class="bmc-button"
44+
class="contact-link contact-link-newgrain"
4845
>
49-
<img src="assets/icons/BMC-btn-logo.svg" alt="Buy me a coffee" />
50-
<span style="margin-left: 5px">Buy me a coffee</span>
46+
<span class="contact-link-divider" aria-hidden="true"></span>
47+
<span class="contact-link-label">Newgrain</span>
48+
<span class="contact-link-divider" aria-hidden="true"></span>
5149
</a>
52-
</mat-card-actions>
50+
</div>
5351
</div>
54-
</mat-card>
52+
53+
<aside class="contact-profile" aria-label="Profile">
54+
<figure class="contact-portrait">
55+
<img
56+
src="assets/images/content/headshot-photo.jpg"
57+
alt="Photo of Jeremy Cantu"
58+
/>
59+
</figure>
60+
61+
<div class="contact-details">
62+
<p class="contact-name">Jeremy Cantu</p>
63+
<p class="contact-role">Photography, code, amateur compositions.</p>
64+
<p class="contact-note">
65+
Working across (mainly) analog formats, with a soft spot for the road
66+
less traveled.
67+
</p>
68+
</div>
69+
</aside>
70+
</div>
71+
5572
<app-lightbox-footer></app-lightbox-footer>
56-
</div>
73+
</section>

0 commit comments

Comments
 (0)