Skip to content

Commit d477eb8

Browse files
tatianamactatianamac
committed
feat: enhance speaking page
1 parent df2f3f4 commit d477eb8

File tree

8 files changed

+177
-41
lines changed

8 files changed

+177
-41
lines changed

‎src/_includes/css/main.css

Lines changed: 56 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/_includes/css/main.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/img/tedx-tatiana.jpg

392 KB
Loading

‎src/scss/abstracts/_variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $cobalt: #0e4bff;
2020
$citron: #f3f315;
2121

2222
$black: #222222;
23+
$true-black: #000000;
2324
$white: #ffffff;
2425
$beige: #f5f4ee;
2526

‎src/scss/base/_base.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,7 @@ $bg-color: (
214214
"ochre": #{$ochre},
215215
"midnight": #{$midnight},
216216
"rust": #{$rust},
217+
"true-black": #{$true-black},
217218
);
218219

219220
@each $name, $colour in $bg-color {

‎src/scss/base/_typography.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,26 @@ $t-color: (
612612
}
613613
}
614614

615+
.t-link-accent-green {
616+
@include bdr(1px, $green);
617+
color: $green;
618+
line-height: 1.25em;
619+
padding: 2px 0;
620+
text-decoration: none;
621+
&:hover {
622+
@include t-link-hover;
623+
}
624+
625+
&:focus-visible{
626+
@include out--blue;
627+
}
628+
629+
&--block {
630+
@extend .t-link-accent-blue;
631+
display: inline-block;
632+
}
633+
}
634+
615635
.t-link-accent-azure {
616636
@include t-link-hover($gild);
617637

‎src/scss/pages/_speaking.scss

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,32 @@
1+
.vid-grid {
2+
width: 100%;
3+
grid-column: span 12;
4+
}
5+
6+
.rider {
7+
grid-column: span 8;
8+
width: 100%;
9+
}
10+
11+
.row {
12+
grid-template-columns: 1fr 1fr;
13+
display: grid;
14+
justify-content: space-between;
15+
gap: 6em;
16+
margin-bottom: $ultrachonk;
17+
}
18+
19+
.title {
20+
font-family: $sans-serif-accent;
21+
line-height: 1em;
22+
margin: 0;
23+
padding: 0;
24+
}
25+
126
.stamp {
2-
outline: 20px dotted $blush-pink;
27+
outline: 20px dotted $true-black;
328
outline-offset: -10px;
4-
background: $barbie-pink;
29+
background: $dark-grey;
530
margin: .75em;
631
position: relative;
732
}
@@ -61,11 +86,12 @@
6186
width: 7em;
6287
height: 7em;
6388
position: absolute;
89+
color: $light-grey;
6490
}
6591

6692
.stamp-date text {
6793
text-transform: uppercase;
68-
fill: $cobalt;
94+
fill: $green;
6995
font-size: .4em;
7096
font-family: Courier;
7197
}
@@ -189,7 +215,7 @@
189215
padding: .1em 1.5em;
190216
margin: 1.25em;
191217
vertical-align: baseline;
192-
background: $white;
218+
background: $black;
193219
}
194220

195221
// SPONSOR //

‎src/speaking/index.html

Lines changed: 68 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,81 @@
66
- nav
77
navtitle: Speaking
88
templateClass: content
9-
navClass: bg-blush-pink
10-
bgColor: blush-pink
11-
colorMode: dark
9+
navClass: bg-true-black
10+
bgColor: true-black
11+
colorMode: light
1212
data: events
1313
canonical: https://www.tatianamac.com/speaking
1414
---
15+
<div class="grid-whole@xs grid-whole@s grid-whole@m grid-whole@l grid-whole@xl">
16+
<!-- TODO: Serve this image in next-gen formats -->
17+
<img src="../assets/img/tedx-tatiana.jpg" alt="Tatiana Mac, smiling, cross-legged, standing in black suit on a TEDxPortland stage with giant words from Self-Defined app projected behind them"/>
18+
</div>
19+
1520
<section id="speaking" class="container">
1621
<div class="wrapper">
17-
18-
<div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl padding-thinn">
19-
<h1 class="t-eyebrow">Speaking</h1>
20-
<p class="t-black t-serifweight t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-height-tight">That's what they said.</p>
21-
<p>I'm an international keynote speaker who focuses on accessibility, design systems, performance, and inclusion with a strong call to action for ethical practices.</p>
22+
<div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl padding-thinn">
23+
<h1 class="t-eyebrow t-milquetoast">Speaking</h1>
24+
<p class="t-thiccfont@xs t-thiccfont@s t-ultrachonkfont@m t-ultrachonkfont@l t-ultrachonkfont@xl t-height-tight
25+
t-serifweight t-white t-height-tight t-space-strip mb-teeny">That's what they said.</p>
2226

23-
<p>As I believe speaking is an privilege, I wrote a
24-
<a class="t-link-accent-blue t-height-tight" href="https://gist.github.com/tatianamac/493ca668ee7f7c07a5b282f6d9132552" rel="noopener noreferrer">speaker rider</a>
25-
to encourage a more accessible environment for tech's most marginalised and undersupported communities.</p>
27+
<p class="callout t-normiefont@s t-normiefont@m t-normiefont@l t-normiefont@xl t-light-grey">International keynote speaker and TEDx alumnus using the stage to explore the intersection between tech and ethics and to bring narratives to the web with accessible, performant design systems</p>
2628

27-
<p>If you'd like me to speak at your event, please read the
28-
<a class="t-link-accent-blue t-height-tight" href="https://gist.github.com/tatianamac/493ca668ee7f7c07a5b282f6d9132552" rel="noopener noreferrer">rider</a>
29-
to see if it might be a good fit and then
30-
<a class="t-link-accent-blue t-height-tight" href="mailto:speaking@tatianamac.com">email me</a>
31-
with the details (see the bottom of the speaker rider for questions I ask).</p>
29+
<p class="t-mono t-pistachio-green">Currently booking conferences and private speaking events for 2023 and beyond: Review <a class="t-link-accent-green t-height-tight" href="https://gist.github.com/tatianamac/493ca668ee7f7c07a5b282f6d9132552" rel="noopener noreferrer">speaker rider</a> and <a class="t-link-accent-green t-height-tight" href="mailto:speaking@tatianamac.com">email me</a> with details</p>
30+
</div>
31+
</div>
32+
</section>
3233

33-
<p class="t-typeweight t-red">Currently booking conferences for 2022, limited private speaking engagements for 2021</p>
34+
<section class="container">
35+
<div class="wrapper">
36+
<h2 class="grid-whole@s grid-whole@m grid-whole@l t-eyebrow t-milquetoast">Featured Videos</h2>
37+
<div class="vid-grid t-white">
38+
<div class="row">
39+
<div>
40+
<h3 class="t-sansserif title t-chonkfont@s t-chonkfont@m t-chonkfont@l ">Systems of Systems</h3>
41+
<p class="t-white t-mono t-babyfont">Design systems create an umbrella to define the future of our design work, but they are not the biggest umbrella. Design systems exist under broader social, political, and infrastructural systems that affect the parameters, limitations, and variables of our systems. We'll examine the challenges inherit, lean into the good, resist the bad, and serve as many humans we can equitably, ethically, and safely.</p>
42+
<span class="t-light-grey"><time class="t-mono">2019</time> &middot; Clarity Conference, San Francisco, USA</span>
43+
</div>
44+
45+
<iframe width="700" height="450" src="https://www.youtube-nocookie.com/embed/TzGfBV67Tac" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
46+
</div>
47+
48+
<div class="row">
49+
<iframe width="700" height="450" src="https://www.youtube-nocookie.com/embed/s3C88R-WIro" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
3450

35-
<p>
36-
<a class="download primary" download="tatiana-mac-speaker-kit.zip" href="../assets/img/tatianamac-speakerkit.zip">Download Speaker Kit (ZIP, 196Kb)</a>
37-
</p>
51+
<div>
52+
<h3 class="t-sansserif title t-chonkfont@s t-chonkfont@m t-chonkfont@l ">Our Banal Binary</h3>
53+
<p class="t-white t-mono t-babyfont">Binary code is the axiomatic core of computing. From ones and zeros, we built magnificent inventions that visualised black holes and cup-winning football goals.
3854

55+
Our reliance on the binary has a cost. The binary that gifted us could also become the most monolithic harbinger to developing nuanced solutions for social change and innovation.
56+
57+
We will fracture the spokes of this axiomatic wheel, exploring a new model that encourages a more intersectional and inclusive way to build for all.</p>
58+
<span class="t-light-grey"><time class="t-mono">2020</time> &middot; New Adventures, Nottingham, UK</span>
59+
</div>
3960
</div>
40-
<div class="grid-whole@xs grid-whole@s grid-half@m grid-half@l grid-third@xl padding-thinn">
61+
62+
<div class="row">
63+
<div>
64+
<h3 class="t-sansserif title t-chonkfont@s t-chonkfont@m t-chonkfont@l t-height-tight">Words don't define&nbsp;us</h3>
65+
<p class="t-white t-mono t-babyfont">We define our words, but they don't define us. Simply put, words and phrases can be weaponized and be hurtful, for example: spirit animal; blacklist; redline; junkie; lame; OCD; circle the wagons. This talk explores Self-Defined, a modern dictionary about us. With the foundation of vocabulary, we can begin to understand lived experiences of people different from us, gain a sense of identity, and find kinship.</p>
66+
<span class="t-light-grey"><time class="t-mono">2022</time> &middot; TEDxPortland, Portland, USA</span>
67+
</div>
68+
69+
<iframe width="700" height="450" src="https://www.youtube-nocookie.com/embed/ASbaDBKz5pE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
70+
</div>
71+
72+
73+
<!-- <div class="grid-whole@xs grid-whole@s grid-half@m grid-half@l grid-third@xl padding-thinn">
4174
<picture>
4275
<img class="selfportrait-pink" src="../assets/img/tmac-headshot.jpg" alt="Me looking over my shoulder">
4376
</picture>
44-
</div>
45-
77+
</div> -->
78+
</div>
79+
</div>
80+
</section>
81+
82+
<section class="container">
83+
<div class="wrapper">
4684
{% for post in collections.event | reverse %}
4785
<figure class="stamp stamp{% if post.data.eventStampRot %}--{{ post.data.eventStampRot }}@m stamp--{{ post.data.eventStampRot }}@l stamp--{{ post.data.eventStampRot }}@xl {% endif %}stamp stamp@m stamp@l stamp@xl grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
4886
<div class="stamp-date {% if post.data.eventStampLoc %} stamp--{{ post.data.eventStampLoc }}{% endif %}">
@@ -56,17 +94,17 @@ <h1 class="t-eyebrow">Speaking</h1>
5694
</svg>
5795
</div>
5896
<div class="calendar-item grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
59-
<p class="t-black details t-typeweight t-babyfont">{{ post.data.eventMonthYear }}</p>
97+
<p class="t-white details t-typeweight t-babyfont">{{ post.data.eventMonthYear }}</p>
6098
<p>
61-
<a href="{{ post.data.eventURL }}" rel="noreferrer noopener" class="t-black t-link-accent-black t-titlingfont t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-height-tight">{{ post.data.eventName }}</a>
99+
<a href="{{ post.data.eventURL }}" rel="noreferrer noopener" class="t-light-grey t-link-accent-black t-titlingfont t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-height-tight">{{ post.data.eventName }}</a>
62100
</p>
63101
<p>
64102
{% if post.data.eventSlidesURL %}
65-
<a class="details t-link-accent-blue" href="{{ post.data.eventSlidesURL }}" rel="noopener noreferrer">Slides</a>
103+
<a class="details t-link-accent-pink" href="{{ post.data.eventSlidesURL }}" rel="noopener noreferrer">Slides</a>
66104
{% endif %}
67105
{% if post.data.eventVideoURL %}
68106
·
69-
<a class="details t-link-accent-blue" href="{{ post.data.eventVideoURL }}" rel="noopener noreferrer">Video</a>
107+
<a class="details t-link-accent-pink" href="{{ post.data.eventVideoURL }}" rel="noopener noreferrer">Video</a>
70108
{% endif %}
71109
{% if post.data.eventKeynote %}🗝🎵{% endif %}
72110
</p>
@@ -88,5 +126,6 @@ <h1 class="t-eyebrow">Speaking</h1>
88126
0.5 0 0 1 0"/>
89127
</filter>
90128
</svg>
91-
</div>
92-
</section>
129+
</div>
130+
</section>
131+

0 commit comments

Comments
 (0)