-
Notifications
You must be signed in to change notification settings - Fork 0
/
who.html
147 lines (143 loc) · 6.53 KB
/
who.html
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
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html 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 property="og:title" content="Tyler Lehren - Who" />
<meta property="og:type" content="website" />
<meta property="og:image" content="images//ogImage.png" />
<meta property="og:url" content="https://www.tylerlehren.com/who.html" />
<title>Tyler Lehren - Who</title>
<link rel="shortcut icon" type="image/jpg" href="images/tlFav.svg"/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/utilities.css" />
<link rel="stylesheet" href="css/who.css" />
<link rel="stylesheet" href="css/menu.css" />
<script type="module" src="scripts/projects.js"></script>
<script type="module" src="scripts/data.js"></script>
<script type="module" src="scripts/script.js"></script>
</head>
<body>
<!-- header -->
<header class="header py-2">
<div class="container">
<a href="/" class="logo"><img src="images/tlWordMark.svg" alt="logo"></a>
<div class="headerRight">
<button class="navToggle"><span class="hamburger"></span></button>
<nav class="nav">
<ul class="navMenu">
<li class="navItem"><a href="index.html" class="navLink">Intro</a></li>
<li class="navItem"><a href="index.html#work" class="navLink">Work</a></li>
<li class="navItem"><a href="who.html" class="navLink">Who</a></li>
<li class="navItem"></i><a href="connect.html" class="navLink">Connect</a></li>
</ul>
<div class="menuContact">
<a href="mailto:[email protected]" class="link">[email protected]</a>
<a href="tel:2035566329" class="link">(203)556-6329</a>
<p><i class="fas fa-map-marker-alt fa-lg"></i>Burlington, VT</p>
<div class="socialLinks">
<a href="https://github.com/tlehren" target="_blank"><i class="fab fa-github fa-lg"></i></a>
<a href="https://www.behance.net/tylerlehren" target="_blank"><i class="fab fa-behance fa-lg"></i></a>
<a href="https://dribbble.com/tlehren" target="_blank"><i class="fab fa-dribbble fa-lg"></i></a>
<a href="https://www.linkedin.com/in/tylerlehren/" target="_blank"><i class="fab fa-linkedin fa-lg"></i></a>
</div>
</div>
</div>
</nav>
</div>
</div>
</header>
<main class="main">
<section class="intro py-4">
<div class="container grid">
<div class="whoIntro">
<h1 style="color: var(--primary-color)">Who, me?</h1>
<p>
Hello! I'm Tyler and I'm a Burlington, VT based web designer & developer. I aim to create meaningful & captivating digital experiences that are authentic, aesthetically pleasing, and accessible.
When I'm not busy educating people on the difference between fonts & typefaces, I can be found hiking or testing the pH level of Lake Champlain.
</p>
<div class="socialLinks">
<a href="https://github.com/tlehren" target="_blank"><i class="fab fa-github fa-lg"></i></a>
<a href="https://www.behance.net/tylerlehren" target="_blank"><i class="fab fa-behance fa-lg"></i></a>
<a href="https://dribbble.com/tlehren" target="_blank"><i class="fab fa-dribbble fa-lg"></i></a>
<a href="https://www.linkedin.com/in/tylerlehren/" target="_blank"><i class="fab fa-linkedin fa-lg"></i></a>
</div>
</div>
<img class="whoIMG" src="images/me.jpeg" alt="" />
</div>
</section>
<!-- skills -->
<section class="skills py-5 mx-5">
<div class=" container text-center">
<h2>Stuff I'm Good At</h2>
<div class="skillsGrid">
<article class="skillItem card one">
<i class="fab fa-html5 fa-3x"></i>
<h4>HTML</h4>
</article>
<article class="skillItem card two">
<i class="fab fa-css3-alt fa-3x"></i>
<h4>CSS</h4>
</article>
<article class="skillItem card three">
<i class="fab fa-js-square fa-3x"></i>
<h4>JavaScript</h4>
</article>
<article class="skillItem card four">
<i class="fab fa-wordpress fa-3x"></i>
<h4>WordPress</h4>
</article>
<article class="skillItem card five">
<i class="fab fa-elementor fa-3x"></i>
<h4>Elementor</h4>
</article>
<article class="skillItem card six">
<i class="fas fa-pencil-ruler fa-3x"></i>
<h4>UI/UX</h4>
</article>
</div>
</div>
</section>
<!-- tunes -->
<section class="tunes">
<div class="container py-5">
<h2>Stuff I'm Listening to</h2>
<iframe
src="https://open.spotify.com/embed/playlist/3vtoWUcJR9SjIh22ENXZiK?theme=0"
width="100%"
height="380"
frameborder="0"
allowtransparency="true"
allow="encrypted-media"
></iframe>
</div>
</section>
</main>
<!-- footer -->
<footer class="footer">
<section class="cta">
<div class="container text-center py-5">
<h2>Dig my work?<br> Let's start a project.</h2>
<a href="connect.html" class="btn">Contact Me</a>
</div>
</section>
<section class="footerBottom">
<div class="container flex py-4">
<div class="socialLinks">
<a href="https://github.com/tlehren" target="_blank"><i class="fab fa-github fa-lg"></i></a>
<a href="https://www.behance.net/tylerlehren" target="_blank"><i class="fab fa-behance fa-lg"></i></a>
<a href="https://dribbble.com/tlehren" target="_blank"><i class="fab fa-dribbble fa-lg"></i></a>
<a href="https://www.linkedin.com/in/tylerlehren/" target="_blank"><i class="fab fa-linkedin fa-lg"></i></a>
</div>
<p>Copyright © Tyler Lehren 2021</p>
</div>
</section>
</footer>
</body>
</html>