braden/index.html at main · bradenpate/braden · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
  <link rel="stylesheet" href="https://use.typekit.net/fvi1zio.css">
</head>
<body>
    <header class="font-ivy">
      <nav class="flex flex-row p-8 mx-auto">
        <a
          class="flex items-center mb-4 font-medium title-font md:mb-0"
          href="./index.html"
        >
          <div
            class="size-24 bg-[url('./images/bradenpate.svg')] hover:bg-[url('./images/bradenpate.svg')] bg-cover"
            alt="Braden Pate Avatar"
          ></div>
        </a>
        <ul class="flex flex-col flex-wrap items-end flex-grow text-3xl font-bold sm:flex-row sm:items-start sm:justify-end">
          <li>
            <a href="./index.html" class="mr-5 transition-all  text-blue-950">
              Work
            </a>
          </li>
          <li>
            <a href="./about.html" class="mr-5 transition-all nav-link hover:text-blue-950">
              About
            </a>
          </li>
          <li>
            <a href="#" id="sayHello" class="mr-5 transition-all text-slate-400 hover:text-blue-950">
              Say hello
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <div class="p-8 mx-auto">
      <p class="pb-24 text-5xl font-black font-ivy sm:text-7xl text-slate-400 animate-fadeIn">
        I’m Braden Pate, a creative director and designer based in Boston. I’m currently leading brand creative
        at Coveo.
      </p>
      <div class="flex items-end">
        <img class="w-10 pr-4" src="./images/arrow-down.svg" alt="Arrow Down">
        <div class="text-2xl leading-none font-ivy text-slate-900">
          <strong>Explore my work</strong>
        </div>
      </div>
    </div>

    <div class="p-8 mx-auto font-ivy sm:grid sm:grid-cols-2 sm:gap-8 auto-rows-min">
      <div class="col-span-2 auto-rows-max">
        <a href="./work/mendix-ai.html">
          <video autoplay muted loop class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll">
            <source src="./images/work/mendix-ai/mendix-ai-promo.mp4" type="video/mp4" />
          </video>
        </a>
        <p class="max-w-3xl pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">Highlighting the transformative power of AI at Mendix through brand and digital design.</span>
          Leading the creative direction to showcase innovation at a top low-code app development company.
        </p>
      </div>
      <div class="row-start-2">
        <a href="./work/mendix-refresh.html">
          <video autoplay muted loop class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll">
            <source src="./images/work/mendix-refresh/mendix-logo-reveal-clip.mp4" type="video/mp4" />
          </video>
        </a>
        <p class="pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">Navigated a brand refresh for Mendix that included a refreshed mark and new messaging.</span>
          Maturing our stance from a startup to a reliable platform owned by Siemens.
        </p>
      </div>
      <div class="row-start-2">
        <a href="./work/mendix-cko25.html">
          <img class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll" src="./images/work/mendix-cko25/thumbnail.png" alt="Mendix CKO 25">
        </a>
        <p class="pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">Directed the creative vision for our annual company kickoff at Mendix,</span> engaging employees with a compelling theme focused on leveling up and driving growth.
        </p>
      </div>
      <div class="row-start-3">
        <a href="./work/ef.html">
          <img class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll" src="./images/work/ef/thumbnail.png" alt="EF">
        </a>
        <p class="pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">Led the web and marketing design efforts for EF Ultimate Break,</span> creating a modernized brand and booking experience that captured the spirit of young travelers while supporting the company’s growth.
        </p>
      </div>
      <div class="row-start-3">
        <a href="./work/wedding.html">
          <img class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll" src="./images/work/wedding/thumbnail.png" alt="Wedding">
        </a>
        <p class="pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">Designed my wedding invitation suite,</span> combining the elegance of sumi ink typography with thoughtful design details to reflect the joy and spirit of the celebration.
        </p>
      </div>
      <div class="row-start-4">
        <a href="./work/makeshift.html">
          <img class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll" src="./images/work/makeshift/thumbnail.png" alt="Makeshift">
        </a>
        <p class="pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">A branded podcast for Mendix, spotlighting the makers driving innovation with low-code technology</span> and the transformative impact they create within their companies.
        </p>
      </div>
      <div class="row-start-4">
        <a href="./work/agile.html">
          <img class="pb-8 transition-all duration-700 ease-out transform scale-90 opacity-0 animate-on-scroll" src="./images/work/agile/thumbnail.png" alt="Agile">
        </a>
        <p class="pb-24 text-xl font-bold text-slate-500">
          <span class="text-slate-950">A campaign and eBook showcasing how Mendix accelerates Agile Development,</span> driving progress from ‘Do’ to ‘Done’ with unparalleled efficiency and innovation.
        </p>
      </div>
    </div>
    <div id="footer"></div>
    <script>
      fetch("./footer.html")
        .then((response) => response.text())
        .then((html) => {
          document.getElementById("footer").innerHTML = html;
        });
    </script>
    <script src="./script.js?v=1.0"></script>
</body>
</html>