index.html

<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A personal site for Tatiana Mac, an American designer who builds inclusive, accessible, and ethical products with thoughtful practices.">
    <title>Designer &middot; Tatiana Mac</title>
    <link rel="preload" href="../fonts/05-brother1816-book-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="../fonts/freigdisproboo-webfont.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="../fonts/leaguegothic-condensed-regular-webfont.woff" as="font" type="font/woff" crossorigin>
    <link rel="stylesheet" href="css/main.css">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0e4bff">
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#ffffff">

    <script>
        LUX=(function(){var a=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMarks)?LUX.gaMarks:[]);var d=("undefined"!==typeof(LUX)&&"undefined"!==typeof(LUX.gaMeasures)?LUX.gaMeasures:[]);var j="LUX_start";var k=window.performance;var l=("undefined"!==typeof(LUX)&&LUX.ns?LUX.ns:(Date.now?Date.now():+(new Date())));if(k&&k.timing&&k.timing.navigationStart){l=k.timing.navigationStart}function f(){if(k&&k.now){return k.now()}var o=Date.now?Date.now():+(new Date());return o-l}function b(n){if(k){if(k.mark){return k.mark(n)}else{if(k.webkitMark){return k.webkitMark(n)}}}a.push({name:n,entryType:"mark",startTime:f(),duration:0});return}function m(p,t,n){if("undefined"===typeof(t)&&h(j)){t=j}if(k){if(k.measure){if(t){if(n){return k.measure(p,t,n)}else{return k.measure(p,t)}}else{return k.measure(p)}}else{if(k.webkitMeasure){return k.webkitMeasure(p,t,n)}}}var r=0,o=f();if(t){var s=h(t);if(s){r=s.startTime}else{if(k&&k.timing&&k.timing[t]){r=k.timing[t]-k.timing.navigationStart}else{return}}}if(n){var q=h(n);if(q){o=q.startTime}else{if(k&&k.timing&&k.timing[n]){o=k.timing[n]-k.timing.navigationStart}else{return}}}d.push({name:p,entryType:"measure",startTime:r,duration:(o-r)});return}function h(n){return c(n,g())}function c(p,o){for(i=o.length-1;i>=0;i--){var n=o[i];if(p===n.name){return n}}return undefined}function g(){if(k){if(k.getEntriesByType){return k.getEntriesByType("mark")}else{if(k.webkitGetEntriesByType){return k.webkitGetEntriesByType("mark")}}}return a}return{mark:b,measure:m,gaMarks:a,gaMeasures:d}})();LUX.ns=(Date.now?Date.now():+(new Date()));LUX.ac=[];LUX.cmd=function(a){LUX.ac.push(a)};LUX.init=function(){LUX.cmd(["init"])};LUX.send=function(){LUX.cmd(["send"])};LUX.addData=function(a,b){LUX.cmd(["addData",a,b])};LUX_ae=[];window.addEventListener("error",function(a){LUX_ae.push(a)});LUX_al=[];if("function"===typeof(PerformanceObserver)){var LongTaskObserver=new PerformanceObserver(function(c){var b=c.getEntries();for(var a=0;a<b.length;a++){var d=b[a];LUX_al.push(d)}});try{LongTaskObserver.observe({entryTypes:["longtask"],buffered:true})}catch(e){}};
        </script>
        <script src="https://cdn.speedcurve.com/js/lux.js?id=324891471" async defer crossorigin="anonymous"></script>
                
</head>

<body>
    <div id="skip">
        <a href="#content">Skip Content</a>
    </div>
    <div class="container bg-primary">
        <header class="site-header wrapper">
            <div class="logo grid-whole@xxs grid-whole@xs grid-half@s grid-third@m grid-third@l grid-third@xl">
                <a href="index.html"><img src="images/tatianamac_logo.svg" alt="Geometric logo with two parallel lines on top and bottom, then a backwards 11 in the middle." /></a>
            </div>
            <nav class="main-navigation grid-whole@xxs grid-whole@xs grid-half@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl">
                <ul class="navi linklist">
                    <li><a href="#work" class="t-white t-link-accent-white t-ltr-stretch t-height-medium">Work</a></li>
                    <li><a href="#writing" class="t-white t-link-accent-white t-ltr-stretch t-height-medium">Writing</a></li>
                    <li><a href="#speaking" class="t-white t-link-accent-white t-ltr-stretch">Speaking</a></li>
                    <li><a href="#sponsor" class="t-white t-link-accent-white t-ltr-stretch">Sponsor</a></li>
                    <li><a href="#about" class="t-white t-link-accent-white t-ltr-stretch">About</a></li>
                    <li><a href="#contact" class="t-white t-link-accent-white t-ltr-stretch">Contact</a></li>
                </ul>
            </nav>
        </header>
    </div>
    <main id="content">
        <section id="hero" class="wrapper container bg-primary padding-btm-none">
            <div class="grid-whole@xxs grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl t-white">
                <h1 class="t-serifweight t-thiccfont@xl t-thiccfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-height-tight">Tatiana Mac is an American designer who builds inclusive, accessible, and ethical products with thoughtful practices.</h1>
                <p class="t-white t-typeweight t-thinnfont@xl t-thinnfont@l t-thinnfont@m t-thinnfont@s t-thinnfont@xs t-thinnfont@xxs t-height-tight">A designer who codes.
                    <br/> A writer who reads.
                    <br/>A speaker who listens.</p>
            </div>
            <div class="grid-whole@xxs grid-whole@xs grid-half@s grid-half@m grid-half@l grid-halfd@xl padding-thinn@xs padding-thinn@s padding-thicc@m padding-thicc@l padding-thicc@xl">
                <img class="floating" src="images/hands.svg" alt="Two hands forming a circle with a triangle in between." />
            </div>
        </section>
        <!-- hero -->
        <div class="container clearspace">
            <div class="zigzag-blue-yellow">
            </div>
            <div class="zigzag-yellow-white">
            </div>
        </div>
        <section id="work" class="container wrapper">
            <!-- <div class="wrapper"> -->
            <!-- SKILLSHARE -->
            <div class="grid-whole@xs grid-whole@s grid-half@m grid-half@l grid-half@xl">
                <h2 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl">
            Abridged Works
          </h2>
                <p class="t-black t-thiccfont@xs t-thiccfont@s t-chonkfont@m t-chonkfont@l t-chonkfont@xl t-serifweight t-height-tight">Design, art direction, concepting.</p>
            </div>

            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <h3 class="t-eyebrow-line">Stream</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">The Diff</p>
                <p>In collaboration with <a class="t-link-accent-blue" href="https://henry.codes/">Henry Desroches</a>, a stream about finding, experimenting, and celebrating the many ways to make the web wonderful. Responsible for art direction, content creation, and live teaching.</p>
                <a href="https://thediff.website/" class="t-link-accent-blue t-ltr-stretch t-babyfont" rel="noopener noreferrer">Visit The Diff</a>
            </div>

            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl align-self-center">
                <img src="images/the-diff-logo.svg" alt="The Diff logo" />
            </div>

            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <h3 class="t-eyebrow-line">Design Systems</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">A11y Project</p>
                <p>A new, more vibrant design system for the accessibility community resource.</p>
                <p class="t-ltr-stretch t-babyfont">Work in progress</p>
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl align-self-center">
                <img src="images/a11y-project.svg" alt="Typographic components from the design system." />
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <h3 class="t-eyebrow-line">Teaching</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Hacking Styleguides for Accessibility</p>
                <p>I wrote the curriculum for, taught, and produced a 42-minute class on Skillshare focused around making the web more accessible.</p>
                <a class="t-link-accent-blue t-ltr-stretch t-babyfont" href="http://goo.gl/EbXVvq"  rel="noopener noreferrer">Take My Class</a>
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl align-self-center gradient-dusk ">
                <img src="images/uxskillshare-illo.svg" alt="Trio of disabled folks, situational, temporary, and permanent." />
            </div>
            <!-- SELF-DEFINED -->
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                <h3 class="t-eyebrow-line">Civic Design</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Self-Defined</p>
                <p>A dictionary for the people. Born out of tiredness of folks quoting the directionary definition of racism to me and other PoC, I decided to create a resource for the modern world, incorporating the diversity and nuance of people through their own words.</p>
                <a class="t-link-accent-blue t-ltr-stretch t-babyfont" href="http://tatianamac.github.io/selfdefined"  rel="noopener noreferrer">Read the dictionary</a>
            </div>
            <div class="align-self-center grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thicc@xs padding-thicc@s padding-thicc@m padding-thicc@l padding-thicc@xl">
                <img class="dropshadow-grey" alt="Dictionary mockup in phone screen" src="images/self-defined.svg">
            </div>
            <!-- TEOCALI -->
            <div class="grid-whole@xs grid-whole@s grid-twothirds@m grid-twothirds@l grid-twothirds@xl wrapper wrapper-photogrid">
                <div class="span-row-two@s span-row-two@m span-row-two@l span-row-two@xl grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl align-self-center">
                    <picture>
                        <source sizes="(max-width: 750px) 100vw, 750px"
                        srcset="
                        images/teocali-reflection,w_200.webp 200w,
                        images/teocali-reflection,w_588.webp 588w,
                        images/teocali-reflection,w_750.webp 750w" type="image/webp">
    
                        <source sizes="(max-width: 750px) 100vw, 750px"
                        srcset="
                        images/teocali-reflection,w_200.jpg 200w,
                        images/teocali-reflection,w_528.jpg 576w,
                        images/teocali-reflection,w_750.jpg 750w" type="image/jpeg"> 
                            
                        <img src="images/teocali-reflection.jpg" alt="Hand holding tin mirror with reflection of necklace" />

                    </picture>
                    
                </div>
                <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl align-self-center">
                    <picture>
                        <source sizes="(max-width: 905px) 100vw, 905px"
                        srcset="
                        images/teocali-laying,w_200.webp 200w,
                        images/teocali-laying,w_905.webp 905w" type="image/webp">
    
                        <source sizes="(max-width: 1200px) 100vw, 1200px"
                        srcset="
                        images/teocali-laying,w_200.jpg 200w,
                        images/teocali-laying,w_735.jpg 735w,
                        images/teocali-laying,w_1200.jpg 1200w" type="image/jpeg"> 
                            
                        <img src="images/teocali-laying.jpg" alt="Aerial view of woman napping with hat over face">

                    </picture>
                 
                </div>
                <div class="grid-whole@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn@m padding-thinn@l padding-thinn@xl ">
                    <picture>
                        <source sizes="(max-width: 1067px) 100vw, 864px"
                        srcset="
                        images/teocali-flatlay,w_200.webp 200w,
                        images/teocali-flatlay,w_419.webp 419w,
                        images/teocali-flatlay,w_586.webp 586w,
                        images/teocali-flatlay,w_737.webp 737w,
                        images/teocali-flatlay,w_864.webp 864w" type="image/webp">
    
                        <source sizes="(max-width: 1067px) 100vw, 888px"
                        srcset="
                        images/teocali-flatlay,w_200.jpg 200w,
                        images/teocali-flatlay,w_294.jpg 294w,
                        images/teocali-flatlay,w_369.jpg 369w,
                        images/teocali-flatlay,w_434.jpg 434w,
                        images/teocali-flatlay,w_548.jpg 548w,
                        images/teocali-flatlay,w_702.jpg 702w,
                        images/teocali-flatlay,w_795.jpg 795w,
                        images/teocali-flatlay,w_888.jpg 888w" type="image/jpeg"> 
                            
                        <img src="images/teocali-flatlay.jpg" alt="Flatlay of woven bag with lipstick, tarot card, etc, spilling out." />
    
                    </picture>
                    
                </div>
                <div class="span-row-two@m span-row-two@l span-row-two@xl grid-whole@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                    <picture>
                        <source sizes="(max-width: 800px) 100vw, 800px"
                        srcset="
                        images/teocali-teaser-hands,w_200.webp 200w,
                        images/teocali-teaser-hands,w_452.webp 452w,
                        images/teocali-teaser-hands,w_641.webp 641w,
                        images/teocali-teaser-hands,w_793.webp 793w,
                        images/teocali-teaser-hands,w_800.webp 800w" type="image/webp"> 
                        
                        <source sizes="(max-width: 800px) 100vw, 800px"
                        srcset="
                        images/teocali-teaser-hands,w_200.jpg 200w,
                        images/teocali-teaser-hands,w_303.jpg 303w,
                        images/teocali-teaser-hands,w_386.jpg 386w,
                        images/teocali-teaser-hands,w_457.jpg 457w,
                        images/teocali-teaser-hands,w_523.jpg 523w,
                        images/teocali-teaser-hands,w_583.jpg 583w,
                        images/teocali-teaser-hands,w_645.jpg 645w,
                        images/teocali-teaser-hands,w_696.jpg 696w,
                        images/teocali-teaser-hands,w_800.jpg 800w" type="image/jpeg">
                            
                        <img src="images/teocali-teaser-hands.jpg" alt="Two hands holding bags from opposite sides." />
        
                    </picture>
                    
                </div>
            </div>
            <div class="grid-whole@xs grid-whole@s grid-third@m grid-third@l grid-third@xl padding-thinn">
                <h3 class="t-eyebrow-line">Photo Art Direction</h3>
                <h4 class="t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl ">Teocali Brand</h4>
                <p>Concepted, photographed and art directed seasonal, on-location photoshoots for an accessory- and lifestyle-brand.</p>
            </div>
            <!-- CISCO -->
            <div class="span-row-two grid-whole@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl gradient-fire align-self-center ">          
                <picture>
                    <source sizes="(max-width: 720px) 100vw, 720px"
                    srcset="
                    images/ucx-comp,w_200.webp 200w,
                    images/ucx-comp,w_720.webp 720w" type="image/webp">

                    <source sizes="(max-width: 720px) 100vw, 720px"
                    srcset="
                    images/ucx-comp,w_200.jpg 200w,
                    images/ucx-comp,w_425.jpg 425w,
                    images/ucx-comp,w_617.jpg 617w,
                    images/ucx-comp,w_720.jpg 720w" type="image/jpeg"> 
                        
                    <img src="images/ucx-comp.jpg" alt="Verizon UCX website, with dynamic selector and gradient background" />
                    </picture>
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn ">
                <h3 class="t-eyebrow-line">Interactive</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Cisco Unified Comms</p>
                <p>Website to help articulate the breadth of Cisco products. Designed a conceptual journey to show how products ushered retailers through sales cycle.</p>
                <p class="comingsoon">Case Study In Development</p>
            </div>
            <!-- SALON DOUX-->
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl align-self-center padding-thicc@xs padding-thicc@s padding-thicc@m padding-thicc@l padding-thicc@xl">
            <picture>
                <source sizes="(max-width: 400px) 100vw, 400px"
                srcset="
                images/salondoux-comp,w_200.webp 200w,
                images/salondoux-comp,w_400.webp 400w" type="image/webp">
                    
                <source sizes="(max-width: 400px) 100vw, 400px"
                srcset="
                images/salondoux-comp,w_200.png 200w,
                images/salondoux-comp,w_227.png 227w,
                images/salondoux-comp,w_247.png 247w,
                images/salondoux-comp,w_400.png 400w" type="image/jpeg"> 
                    
                <img class="dropshadow-grey"
                src="images/salondoux-comp.png" alt="Salon Doux website in iPhone" />
            </picture>
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn ">
                <h3 class="t-eyebrow-line">Interactive</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Salon Doux</p>
                <p>Design and development of website for Seattle-based salon.</p>
                <p class="comingsoon">Case Study In Development</p>
                <a class="t-link-accent-blue t-ltr-stretch t-babyfont" href="http://www.salondoux.com/"  rel="noopener noreferrer">Visit the site</a>
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn ">
                <h3 class="t-eyebrow-line">Video</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Verizon DDoS Attacks</p>
                <p>Working under minimalistic and strict brand guidelines, we conceived a new visual approach to animation for Verizon for a highly conceptual story.</p>
                <a class="t-link-accent-blue t-ltr-stretch t-babyfont" href="https://www.youtube.com/watch?v=z7ltWcN3mqk/"  rel="noopener noreferrer">Watch the Video</a>
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl align-self-center">
                <img src="images/downtime.svg" alt="Video still with black background and white triangle in top signifying passing of time. Reads downtime." />
            </div>
            <!-- TACOBELL -->
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                <h3 class="t-eyebrow-line">Interactive</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Taco Bell Scrolling Email</p>
                <p>Invented z-index technique for email to create first experimental scrolling email.</p>
                <p class="comingsoon">Case Study In Development</p>
                <a class="t-link-accent-blue t-ltr-stretch t-babyfont" href="http://tacobell.mkt7706.com/breakfastjourneyA/"  rel="noopener noreferrer">View live email</a>
            </div>
            <div class="align-self-center grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl ">
                <img src="images/tacobell-email.svg" alt="Scrolling email in 8-bit style." />
            </div>
            <!-- LOVE LUST -->
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl gradient-fire padding-thinn@xs padding-normie@s padding-thicc@m padding-thicc@l padding-thicc@xl align-self-center">
            <picture>
                <source sizes="(max-width: 667px) 100vw, 667px"
                srcset="
                images/lovelust_tee,w_200.webp 200w,
                images/lovelust_tee,w_667.webp 667w" type="image/webp">

                <source sizes="(max-width: 648px) 100vw, 648px"
                srcset="
                images/lovelust_tee,w_200.jpg 200w,
                images/lovelust_tee,w_390.jpg 390w,
                images/lovelust_tee,w_534.jpg 534w,
                images/lovelust_tee,w_648.jpg 648w"> 
                <img src="images/lovelust_tee.jpg" alt="Person wearing black crop top with illustrated snake, making interlaced L's" />
            </picture>
                
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn ">
                <h3 class="t-eyebrow-line">Art &amp; Apparel</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Love Lust</p>
                <p>A typographic series that explores the fluid nature of physical and metaphysical desire.</p>
                <p class="t-ltr-stretch t-babyfont">Store Temporarily Closed</p>
            </div>
            <!-- MICROSOFT -->
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl gradient-softlight align-self-center">
                <img src="images/butterflies.svg" alt="Geometric butterfly in peach, pink, black" />
            </div>
            <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn ">
                <h3 class="t-eyebrow-line">Branding</h3>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">Microsoft Azure Developer Tour</p>
                <p>Branded collateral for a seven-city dev advocate tour. Each city had its own butterfly, cityscape and pattern.</p>
                <p class="comingsoon">Case Study In Development</p>
            </div>
        </section>

        <!--selected works-->
        <div class="container clearspace">
            <div class="zigzag-white-grey">
            </div>
            <div class="zigzag-grey-black">
            </div>
        </div>
        <!--WRITING AREA-->
        <section id="writing" class="container bg-black">
            <div class="wrapper">
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl span-row-two@m span-row-two@l span-row-two@xl padding-thinn">
                    <h2 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-white">Selected Writings</h2>
                    <h3 class="t-thiccfont@xs t-thiccfont@s t-chonkfont@m t-chonkfont@l t-chonkfont@xl t-height-tight t-serifweight t-white t-height-tight">Bah-hum-blog.</h3>
                    <p><a class="t-white t-link-accent-white t-ltr-stretch" href="https://medium.com/@tatianatmac/"  rel="noopener noreferrer">Medium</a></p>
                </div>
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                    <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                        The question to answer isn't, &ldquo;Have I made a place where people have the freedom to express themselves?&rdquo; Instead we have to ask, &ldquo;Have I made a place where everyone has the safety to exist?&rdquo;
                    </p>
                    <p><a class="t-link-accent-pink" href="https://alistapart.com/article/canary-in-a-coal-mine-how-tech-provides-platforms-for-hate"  rel="noopener noreferrer">Canary in a coal mine: How tech provides platforms for hate</a></p>
                </div>
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                    <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                        I think we can forget what we are capable of and what we deserve when we’re sad. We end up dodging failure instead of reaching for radical success.
                    </p>
                    <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/trust-the-process-how-to-present-your-best-when-youre-at-your-worst-166dad8cc4"  rel="noopener noreferrer">TRUST the Process: How to present your best, when you’re at your worst</a></p>
                </div>
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                    <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                        But what if we were more okay accepting imperfect, in-progress, new things? Perhaps imposter syndrome would be less pervasive and there’d be less shame.
                    </p>
                    <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/why-we-need-more-beginners-teaching-7b8982eb6a4e"  rel="noopener noreferrer">Why we need more beginners teaching</a></p>
                </div>
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                    <p class="t-serifweight t-height-cozy t-white t-height-medium t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                        True vulnerability is a powerful tool for developing trust. It represents strength and security in who you are and what you bring to your work.
                    </p>
                    <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/creative-leadership-you-lead-like-a-girl-defying-the-patriarchy-with-feminist-leadership-e5845e966967"  rel="noopener noreferrer">You lead like a girl: Defying the patriarchy with feminist leadership</a></p>
                </div>
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                    <p class="t-serifweight t-height-cozy t-white t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl">
                        Perpetual motion is good, but not if it's directionless. Methodical decision-making is also good, but not if it means stagnation. We are told to dream big, but rarely are we told to do small.
                    </p>
                    <p><a class="t-link-accent-pink" href="https://medium.com/@tatianatmac/progress-over-perfection-something-now-over-everything-never-8af7608ba6c4"  rel="noopener noreferrer">Progress over perfection: Something now over everything never</a></p>
                </div>
                <div class="grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl padding-thinn">
                    <img src="images/spilled-glasses.svg" alt="Spilled glasses in neon green puddle.">
                </div>
            </div>
        </section>
        <div class="container clearspace">
            <div class="zigzag-black-pink">
            </div>
            <div class="zigzag-pink-white">
            </div>
        </div>
        <section id="speaking" class="container">
            <div class="wrapper">
                <div class="grid-whole@xs grid-whole@s grid-half@m grid-half@l grid-half@xl padding-thinn@xs padding-normie@s padding-normie@m padding-thicc@l padding-thicc@xl">
                    <h2 class="t-eyebrow t-height-tight">Speaking</h2>
                    <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 she said.</p>
                    <p>I would love to speak at your conference, meetup, or organisation! I ask that your event be accessible, inclusive, and diverse with an enforced code of conduct. Please <a class="t-link-accent-blue t-height-tight" href="mailto:tatianatmac@gmail.com">email me for inquiries</a>.</p>
                    <p class="t-typeweight t-red">Currently booking for fall 2019 and 2020</p> 
                </div>

                <figure class="stamp--neg10@m stamp--neg10@l stamp--neg10@xl stub grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--topright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-portland" />
                            <text>
                                <textPath href="#stamp-portland" aria-label="Portland, Ore., USA">
                                    Portland, Ore., USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="stub-content">
                    <p><a 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" href="https://events.mozilla.org/howprivilegedefinesperformance" rel="noopener noreferrer">Mozilla</a></p>
                    <p class="t-black t-typeweight details">July 2019</p>
                </div>
             </figure>

                <figure class="stub grid-whole@xs stamp--10@m stamp--10@l stamp--10@xl grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--topright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-bcn" />
                            <text>
                                <textPath href="#stamp-bcn" aria-label="Barcelona, Catalonia, ES">
                                    Barcelona, Catalonia, ES
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    
                    <div class="stub-content">
                    <p><a 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" href="https://csscamp.tech/"  rel="noopener noreferrer">CSSCamp</a></p>
                    <p class="t-black t-typeweight details">July 2019</p>
                    </div>

                </figure>

                <figure class="stamp--5@m stamp--5@l stamp--5@xl stub grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--btmright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-chicago" />
                            <text>
                                <textPath href="#stamp-chicago" aria-label="Chicago, Illinois">
                                    Chicago, Illinois, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="stub-content">
                        <p><a 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" href="https://designplusdiversity.com/"  rel="noopener noreferrer">Design + Diversity</a></p>
                        <p class="t-black t-typeweight details">August 2019</p>
                     </div>
                </figure>


                <figure class="stamp--neg5@m stamp--neg5@l stamp--neg5@xl stub grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--topright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-omaha" />
                            <text>
                                <textPath href="#stamp-omaha" aria-label="Omaha, Nebraska, USA">
                                    Omaha, Nebraska, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="stub-content">
                    <p><a 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" href="https://2019.nejsconf.com/"  rel="noopener noreferrer">NEJS Conf</a></p>
                    <p class="t-black t-typeweight details">August 2019</p>
                </div>
            </figure>

            <figure class="stamp--5@m stamp--5@l stamp--5@xl stub grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--btmright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-sf" />
                            <text>
                                <textPath href="#stamp-sf" aria-label="San Francisco, CA, USA">
                                    San Francisco, CA, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="stub-content">
                        <p><a 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" href="https://www.writespeakcode.com/2019/"  rel="noopener noreferrer">Write / Speak / Code</a></p>
                        <p class="t-black t-typeweight details">August 2019</p>
                     </div>
                </figure>


                <figure class="stub grid-whole@xs stamp--neg10@m stamp--neg10@l stamp--neg10@xl grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--topright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-sf2" />
                            <text>
                                <textPath href="#stamp-sf2" aria-label="San Francisco, CA, USA">
                                    San Francisco, CA, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="stub-content">
                    <p><a 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" href="https://www.clarityconf.com/"  rel="noopener noreferrer">Clarity</a></p>
                    <p class="t-black t-typeweight details">August 2019</p>
                    </div>
                </figure>
                <figure class="stamp--5@m stamp--5@l stamp--5@xl stub grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                    <div class="stamp-date stamp--aboveright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin2" />
                            <text>
                                <textPath href="#stamp-spin2" aria-label="Helsinki, Finland">
                                    Helsinki, Finland
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="stub-content">
                    <p><a 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" href="https://jointfuturesconf.com/"  rel="noopener noreferrer">Joint Futures</a></p>
                    <p class="t-black t-typeweight details">September 2019</p>
                </div>
            </figure>

            <figure class="stamp--neg10@m stamp--neg10@l stamp--neg10@xl stub grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                <div class="stamp-date stamp--topright">
                    <svg viewBox="0 0 100 100">
                        <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-toronto" />
                        <text>
                            <textPath href="#stamp-toronto" aria-label="Toronto, Ontario, Canada">
                                Toronto, Ontario, Canada
                            </textPath>
                        </text>
                    </svg>
                </div>
                <div class="stub-content">
                <p><a 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" href="https://conf.a11yto.com/"  rel="noopener noreferrer">#a11yTO</a></p>
                <p class="t-black t-typeweight details">October 2019</p>
            </div>
         </figure>

                <figure class="stub grid-whole@xs stamp--10@m stamp--10@l stamp--10@xl grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">

                        <div class="stamp-date stamp--topright">
                            <svg viewBox="0 0 100 100">
                                <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin-ams" />
                                <text>
                                    <textPath href="#stamp-spin-ams" aria-label="San Francisco, CA, USA">
                                        Amsterdam, Netherlands
                                    </textPath>
                                </text>
                            </svg>
                        </div>
                        
                        <div class="stub-content">
                        <p><a 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" href="https://perfnow.nl/" target="_blank" rel="noopener noreferrer">PerfNow()</a></p>
                        <p class="t-black t-typeweight details">November 2019</p>
                        </div>

                    </figure>
                <figure class="stamp grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                    <div class="stamp-date stamp--topright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="berlin" />
                            <text>
                                <textPath href="#berlin" aria-label="Berlin, Germany">
                                    Berlin, Germany
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="calendar-item">
                        <p class="t-black details t-typeweight t-babyfont">June 2019</p>
                        <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">Technical Debt of Us</p>
                        <p class="padding-btm-none"><a class="details t-link-accent-blue" href="http://slides.com/tatianamac/technical-debt-for-us/fullscreen/" rel="noopener noreferrer">Slides</a></p>
                        <p class="t-typeweight details">JSConfEU</p>
                    </div>
                </figure>
                <figure class="stamp grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                    <div class="stamp-date stamp--aboveleft">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin3" />
                            <text>
                                <textPath href="#stamp-spin3" aria-label="Redwood City, CA, USA">
                                    Redwood City, CA, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="calendar-item">
                        <p class="t-black details t-typeweight t-babyfont">April 2019</p>
                        <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">How Privilege Defines Performance</p>
                        <p class="padding-btm-none"><a class="details t-link-accent-blue" href="https://slides.com/tatianamac/how-privilege-defines-performance/fullscreen/"  rel="noopener noreferrer">Slides</a> &middot; <a class="details t-link-accent-blue" href="https://www.youtube.com/watch?v=nQq_gZiZ-jg/"  rel="noopener noreferrer">Video</a></p>
                        <p class="t-typeweight details">PerfMatters</p>
                    </div>
                </figure>
                <figure class="stamp grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                    <div class="stamp-date stamp--btmright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin4" />
                            <text>
                                <textPath href="#stamp-spin4" aria-label="Portland,  Oregon, USA">
                                    Portland, Oregon, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="calendar-item">
                        <p class="t-black details t-typeweight t-babyfont">November 2018</p>
                        <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">Setbacks to Comebacks</p>
                        <p class="t-typeweight details">PDX Women in Tech</p>
                    </div>

                </figure>

                <figure class="stamp stamp--10@m stamp--10@l stamp--10@xl grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                    <div class="stamp-date stamp--topright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin5" />
                            <text>
                                <textPath href="#stamp-spin5" aria-label="St. Louis, Missouri, USA">
                                    St. Louis, Missouri, USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="calendar-item  grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                        <p class="t-black details t-typeweight t-babyfont">October 2018</p>
                        <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">Building Socially-Inclusive Design Systems</p>
                        <p class="padding-btm-none"><a class="details t-link-accent-blue" href="https://slides.com/tatianamac/how-privilege-defines-performance/fullscreen/"  rel="noopener noreferrer">Slides</a></p>

                        <p class="t-typeweight details">STL Design Week</p>
                    </div>
                </figure>

                <figure class="stamp grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                    <div class="stamp-date stamp--btmright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin6" />
                            <text>
                                <textPath href="#stamp-spin6" aria-label="Portland,  Oregon, USA">
                                    Yosemite, Calif., USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
                    <div class="calendar-item grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                        <p class="t-black details t-typeweight t-babyfont">August 2018</p>
                        <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">Addressing Bias for Inclusive Design</p>
                        <p class="t-typeweight details">Epicurrence</p>
                    </div>
                </figure>
                <figure class="stamp stamp--neg5@m stamp--neg5@l stamp--neg5@xl grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                    <div class="stamp-date stamp--aboveright">
                        <svg viewBox="0 0 100 100">
                            <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin7" />
                            <text>
                                <textPath href="#stamp-spin7" aria-label="Portland,  Oregon, USA">
                                    Portland, Ore., USA
                                </textPath>
                            </text>
                        </svg>
                    </div>
            <div class="calendar-item  grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                <p class="t-black details t-typeweight t-babyfont">November 2015</p>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">Versus: Clash of contrarian creative ideas</p>
                <p class="t-black details t-typeweight">eROI Panel</p>
            </div>
        </figure>

                    <figure class="stamp grid-whole@xs grid-half@s grid-third@m grid-quarter@l grid-quarter@xl">
                        <div class="stamp-date stamp--midleft">
                            <svg viewBox="0 0 100 100">
                                <path d="M 0,50 a 32, 30 0 1, 1 0,1 z" id="stamp-spin8" />
                                <text>
                                    <textPath href="#stamp-spin8" aria-label="Portland,  Oregon, USA">
                                        Portland, Ore., USA
                                    </textPath>
                                </text>
                            </svg>
                        </div>
            <div class="calendar-item grid-whole@xs grid-half@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <p class="t-black details t-typeweight t-babyfont">July 2015</p>
                <p class="t-black t-serifweight t-slimmfont@xs t-slimmfont@s t-slimmfont@m t-slimmfont@l t-slimmfont@xl t-height-tight padding-btm-none">Catfish: Why your audience deceives you</p>
                <p class="t-black details t-typeweight">PDX Web Meetup</p>
            </div>
        </figure>
</div>
        </section>
        <div class="container clearspace">
            <div class="zigzag-white-grey">
            </div>
            <div class="zigzag-grey-yellow">
            </div>
        </div>
        <section id="about" class="container">
            <div class="wrapper">
                    <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl">
                            <img src="images/hat.svg" alt="Portrait of me in a space helmet with starry sky backdrop" />
                </div> 

                <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl padding-thinn">
                        <h2 class=" t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl">About</h2>
                        <p class="t-black t-serifweight t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-height-tight">Insatiably curious.</p>
    
                        <p class="t-black">Tatiana Mac is an independent American designer.</p>
                    <p class="t-black">Currently she works directly with organisations to build products and design systems with accessibility and inclusion in mind. She believes that design heavily influences our social landscape. When ethically-minded, she thinks designers can dismantle exclusionary systems in favor of community-focused, inclusive ones.</p>

                    <p class="t-black">She's embarassed herself in 33 countries.</p>

                    <p class="t-typeweight t-black">Open to remote/international full-time or contract positions.</p> 

                </div>

            </div>
        </section>
        <div class="container clearspace">
                <div class="zigzag-yellow-black">
                </div>
                <div class="zigzag-black-grey">
                </div>
            </div>
            <section id="sponsor" class="container">
                    <div class="wrapper">
                        <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl padding-thinn@xs padding-thinn@s padding-thicc@m padding-thicc@l padding-thicc@xl span-row-three@m span-row-three@l">
                            <h2 class=" t-eyebrow">Sponsor</h2>
                            <p class="t-black t-serifweight t-thiccfont@xs t-thiccfont@s t-chonkfont@m t-chonkfont@l t-chonkfont@xl t-height-tight">Help me,<br/>help you.</p>
                            <p class="t-black">If you appreciate my speaking, writing, and tutorials, please consider patronage. Financial support enables me to keep my materials open source to all and supports my independent lifestyle.</p>
                            Find out how on <a href="https://github.com/users/tatianamac/sponsorship"  class="t-link-accent-blue t-height-tight" rel="noopener noreferrer">my GitHub sponsors page</a> or on <a href="https://www.patreon.com/join/tatianamac?"  class="t-link-accent-blue t-height-tight" rel="noopener noreferrer">my Patreon page</a>.

                        
                        </div>
                        <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl align-self-center">
                            <p class="t-space-strip t-chonkfont@xs t-chonkfont@s t-giganticfont@m t-giganticfont@l t-giganticfont@xl t-light-green t-titlingfont t-height-none">Empresses</p>
                    <div class="pixel-box t-typeweight">
                        <a href="https://www.webflow.com/"  rel="noreferrer noopener"><img src="images/webflow-logo.svg" alt="Webflow"/></a>
                    </div>
                   </div>
                        
                        <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl align-self-center">
                                <p class="t-space-strip t-chonkfont@xs t-chonkfont@s t-giganticfont@m t-giganticfont@l t-giganticfont@xl t-light-green t-titlingfont t-height-none">Lovers</p>
                    

                        <div class="pixel-box t-typeweight">
                                <p><a class="t-black"  href="https://www.everyonedeservesgreatdesign.com/"  rel="noreferrer noopener">Ehsan Noursalehi</a></p>
                        </div>

                        <div class="pixel-box t-typeweight">
                            <p><a class="t-black"  href="#"  rel="noreferrer noopener">Erik Riedel</a></p>
                    </div>
                    </div>
                    <div class="grid-whole@xs grid-half@s grid-half@m grid-half@l grid-half@xl align-self-center">
                        <p class="t-space-strip t-chonkfont@xs t-chonkfont@s t-giganticfont@m t-giganticfont@l t-giganticfont@xl t-light-green t-titlingfont t-height-none">STARS</p>

                        <div class="t-typeweight">
                                <p class="t-black">Adam Kuhn  &middot; Amanda Johnson &middot; Amberley Romo &middot; Andy Bell &middot; Concatenate Conference &middot; Debs &middot; Eric Bailey  &middot; Haleigh Houde  &middot; Heidi Olsen &middot; Henry Desroches &middot; Kevin S Garcia  &middot; Leonard Souza  &middot; Lindsey Kopacz  &middot; Logan Sandrock Baird  &middot; Marcy Sutton  &middot; Nathan Bowser  &middot; Nick Colley  &middot; Oscar Braunert &middot; Vanessa Wang &middot; Will Beans  &middot; Yura &middot; Xande Macedo</p>
                        </div>
                        
                        </div>
                    </div>
            </section>
            
    </main>

    <div class="container clearspace">
        <div class="zigzag-lt-grey-green">
        </div>
        <div class="zigzag-green-fuschia">
        </div>
    </div>


    <footer id="contact" class="container">
        <div class="wrapper">
            <div class=" grid-whole@xs grid-whole@s grid-whole@m grid-whole@l grid-whole@xl">
                <h2 class="t-eyebrow t-thiccfont@xs t-thiccfont@s t-thiccfont@m t-thiccfont@l t-thiccfont@xl t-white">Contact</h2>
            </div>
            <div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="mailto:inquiry@tatianamac.com">Email</a>
            </div>
            <div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="https://www.twitter.com/tatianatmac/"  rel="noopener noreferrer">Twitter</a>
            </div>
    <div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="https://codepen.io/tatianamac/"  rel="noopener noreferrer">Codepen</a>
            </div>

            <div class="grid-half@xs grid-quarter@s grid-quarter@m grid-quarter@l grid-quarter@xl">
                <a class="t-link-accent-green t-white t-chonkfont@xl t-chonkfont@l t-thiccfont@m t-normiefont@s t-normiefont@xs t-thinnfont@xxs t-serifweight t-height-tight" href="https://www.dribbble.com/tatianatmac/"  rel="noopener noreferrer">Dribbble</a>
            </div>
            <div class="grid-whole@xs grid-whole@s grid-whole@m grid-whole@l grid-whole@xl">
                <p class="t-white t-mini">Copyright 2019 &copy; Tatiana Mac. Built with HTML &amp; CSS with SASS and sass. Read my <a class="t-link-accent-green t-white" href="release-notes.html">release notes</a>. Subscribe to my <a class="t-link-accent-green t-white" href="rss.xml">RSS feed</a></p>
            </div>
        </div>
    </footer>
</body>

</html>