JordanTranchina.github.io/index.html at master · JordanTranchina/JordanTranchina.github.io · 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
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jordan Tranchina | Home</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" type="text/css">
  <link rel="icon" href="images/icon-logo-dark.svg">
  <meta name="description" content="Jordan Tranchina is a Product Manager and former UX Designer passionate about creating products that improve daily life. MBA from Kellogg. Dad, runner, gamer.">
  <meta property="og:title" content="Jordan Tranchina | Product Manager & UX Designer" />
  <meta property="og:description" content="Jordan Tranchina is a Product Manager and former UX Designer passionate about creating products that improve daily life. MBA from Kellogg. Dad, runner, gamer." />
  <meta property="og:image" content="images/icon-logo-dark.svg" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://jordantranchina.com/" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Jordan Tranchina | Product Manager & UX Designer" />
  <meta name="twitter:description" content="Jordan Tranchina is a Product Manager and former UX Designer passionate about creating products that improve daily life. MBA from Kellogg. Dad, runner, gamer." />
  <meta name="twitter:image" content="images/icon-logo-dark.svg" />
</head>
<style>
  html {
    scroll-behavior: smooth;
  }
</style>

<body class="overscroll-y-none bg-gray-100">
  <!-- Navigation -->
  <div
    class="containerNav fixed w-full z-50 grid grid-cols-3 sm:grid-cols-9 sm:bg-gradient-to-b sm:from-black sm:bg-opacity-50 h-16 sm:bg-transparent items-center justify-items-center transition-h">

    <img src="images/icon-logo-white.svg" alt="Jordan Tranchina Logo" class="justify-self-start ml-4">
    <a href="index.html" class="nav-index hidden sm:block sm:text-white sm:font-medium">Home</a>
    <a href="#AboutMe" class="nav-about hidden sm:block sm:text-white sm:font-medium">About</a>
    <a href="mailto:jordan1252@gmail.com" class="nav-contact hidden sm:block sm:text-white sm:font-medium">Contact</a>
    <div class="col-start-2 sm:col-start-8 col-span-2 justify-self-end mr-4 text-white font-medium self-start mt-5 block">Jordan Tranchina
    </div>
  </div>

  <!-- Cover -->
  <div class="containerCover - z-auto relative bg-black items-center sm:h-screen grid grid-cols-9 grid-rows-5">
    <!-- Image -->
    <img
      class="col-span-full row-span-full opacity-40 object-cover sm:h-full sm:w-full transition-opacity duration-700"
      src="images/sf-street.jpg"
      srcset="images/sf-street.jpg 1280w, images/sf-street-original.jpg 1920w"
      sizes="(max-width: 1280px) 100vw, 1920px"
      alt="Aerial view of San Francisco street"
      loading="lazy"
    />
    <!-- Title -->
    <div class="absolute col-start-2 row-start-2 sm:col-start-3 sm:row-start-3 sm:row-end-4 text-white">
      <div class="space-y-4">
        <div class="sm:hidden font-bold text-xl tracking-widest">JORDAN TRANCHINA</div>
        <div class="hidden sm:block font-bold sm:text-6xl sm:tracking-widest">JORDAN</div>
        <div class="hidden sm:block font-bold sm:text-6xl sm:tracking-widest">TRANCHINA</div>
      </div>
      <div class="pt-2 -pl-2 sm:pl-2 font-light tracking-widest">
        <span class="typed tracking-widest"></span>
      </div>
    </div>
  </div>

  <!-- About Me -->
  <div id="AboutMe" class="containerGlobalAboutMe sm:grid sm:grid-cols-6">
    <!-- about me -->
    <div class="contianerAboutMe my-16 mx-4 sm:col-start-2 sm:col-span-4 sm:mx-auto sm:justify-self-center">
      <div class="font-semibold text-xs mb-1">ABOUT ME</div>
      <div class="font-thin text-gray-800 text-base justify-self-center">My life’s mission is to create small improvements in people’s daily lives by working on products that give people time back in their day that they can use for whatever they're passionate about. I'm looking for a company that shares that mission!
        <br><br>
        I am a former UX Designer turned Product Manager, with a drive for moving fast, learning quickly, and having fun with the team as we all create together. I've got an MBA from Kellogg, a BS in Finance and Business Economics from Indiana University, and a love for creating from an early age.
        <br><br>
        Personally, I spend my time as a dad, a husband, a runner, and a lover of video games and video essays.
      </div>
    </div>
  </div>

  <!-- Footer -->
  <div class="flex flex-col items-center">
    <a href="mailto:jordan1252@gmail.com"
      class="w-3/4 h-16 mt-4 mb-8 bg-white rounded-lg text-blue-400 shadow-xl flex items-center justify-center font-semibold transition-colors duration-200 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none">Get in touch</a>
    <div class="footerContainer - h-16 -mb-3 flex space-x-6 bg-white w-full items-center justify-center shadow-2xl">
      <a href="https://www.linkedin.com/in/jordantranchina/" target="_blank" rel="noopener" aria-label="LinkedIn">
        <img src="images/icon-social-linkedin.svg" alt="LinkedIn icon" />
      </a>
      <a href="https://www.dribbble.com/JordanTranchina" target="_blank" rel="noopener" aria-label="Dribbble">
        <img src="images/icon-social-dribbble.svg" alt="Dribbble icon" />
      </a>
      <a href="https://www.instagram.com/jordan.tranchina/" target="_blank" rel="noopener" aria-label="Instagram">
        <img src="images/icon-social-instagram.svg" alt="Instagram icon" />
      </a>
      <a href="mailto:Jordan12522@gmail.com" target="_blank" rel="noopener" aria-label="Email">
        <img src="images/icon-social-mail.svg" alt="Email icon" />
      </a>
      <a href="https://cal.com/jordan-tranchina/30min" target="_blank" rel="noopener" aria-label="Calendar">
        <img src="images/icon-social-schedule.svg" alt="Calendar icon" />
      </a>
    </div>
    <div class="copyright w-full text-center bg-white text-xs pb-2">&copy; Jordan Tranchina |
      <script type="text/JavaScript">document.write(new Date().getFullYear());</script>
    </div>
  </div>

  <!-- Script -->
  <script src="typed.js"></script>
  <script>
    var typed = new Typed(".typed", {
      strings: [
        "PRODUCT MANAGER",
        "DAD",
        "RUNNER",
        "HUSBAND"
      ],
      smartBackspace: false, // Default value
      typeSpeed: 40,
      backSpeed: 30,
      loop: true,
      loopCount: Infinity
    });
  </script>
  <script title="Copyright Date">
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-168921596-1');
  </script>
  <script src="index.js"></script>
</body>

</html>

<!-- thank you / credit -->
<!-- Matt Boldt - typed.js -->