-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (82 loc) · 4.89 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello, I'm Alex Smeall!</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300;600&display=swap" rel="stylesheet">
</head>
<body>
<script src="script.js"></script>
<nav>
<div class="nav">
<img src="images/ads_logo.png" />
<ul>
<li><a href="#first-row">My Picture</a></li>
<li><a href="#second-row">About Me</a></li>
<li><a href="#third-row">My Coding Journey</a></li>
<li><a href="#fourth-row">Get In Touch</a></li>
</ul>
</div>
</nav>
<main>
<div id="first-row">
<img src="images/Alex_Machu_Picchu_Canada_Flag.jpg" id="my-picture" />
<img src="images/Frank_on_Couch.jpg" id="frank-picture" />
<div class="header-text-block">
<div id="first-row-text-a">
<h1><span>Hi,</span> <span>I'm</span> <span>Alex</span></h1>
<p>This is a picture of me taken at the top of Machu Picchu in Peru. How many social media cliché's can you fit in one image, right? Anyways, once you're sick of looking at me, <a onclick="swapPics()" href="javascript:void(0);">click here</a> for a much cuter picture!</p>
</div>
<div id="first-row-text-b">
<h1><span>And</span> <span>This</span> <span>Is</span> <span>Frank</span></h1>
<p>He's my best bud! You can return to my picture by <a onclick="swapPicsBack()" href="javascript:void(0);">clicking here</a>, but I don't understand why you would...</p>
</div>
</div>
</div>
<div id="second-row">
<h2>What's My Story</h2>
<p>Born and raised just outside of Toronto • Graduated from Wilfrid Laurier University with a BBA, 2010 • During my time in Ontario, I lived in Ajax, Pickering, Waterloo, Toronto and then London • In July of this year (2022) I moved to St. John's with my fiancée, Janelle • I have worked in procurement (Canadian Tire), advertising technology (Chango / Rubicon Project), automotive eCommerce technology (Motoinsight), dental supplies (Clinical Research Dental) and now HR consulting (Castle HR) • Massive sports fan (Go Habs! Go Cowboys!) • I also enjoy photography, axe throwing, going for hikes and cooking!</p>
</div>
<div id="third-row">
<div id="third-row-text">
<h2>Why I Want To Join Get Coding</h2>
<ul>
<li>I first started coding in my early teens building some (I imagine pretty terrible) websites on Geocities (#RIP) with just HTML.</li>
<li>Since then, I've worked for two Canadian tech companies. I spent a lot of time with the developers at both places and came to really appreciate the art of building great software.</li>
<li>Off and on since 2016, I've tried to teach myself code using platforms Codecademy and Codewars, but I can never seem to stick with it long-term.</li>
<li>I've built my <a href="https://alexsmeall.ca/" target="_blank">own website</a> using WordPress and helped build <a href="https://www.clinicalresearchdental.com/" target="_blank">this one</a> on Shopify at my previous company. I got to flex some technical skills doing both, and now I want to go deeper!</li>
</ul>
</div>
<div>
<img src="images/programming-skills.png" />
</div>
</div>
<div id="fourth-row">
<h2>How To Reach Me</h2>
<div class="contact-me">
<a href="https://alexsmeall.ca/" target="_blank">
<div class="contact-method">
<img src="images/website-icon-white.png" />
<p><strong>My Website</strong></p>
</div>
</a>
<a href="mailto: [email protected]" target="_blank">
<div class="contact-method">
<img src="images/email-icon-white.png" />
<p><strong>Email Me</strong></p>
</div>
</a>
<a href="https://www.linkedin.com/in/alexsmeall/" target="_blank">
<div class="contact-method">
<img src="images/linkedin-icon-white.png" />
<p><strong>On LinkedIn</strong></p>
</div>
</a>
</div>
</div>
</main>
</body>
</html>