-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
189 lines (179 loc) · 8.1 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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<title>Scott Hofman</title>
<meta name="keywords" content="Developer, Software Engineer, Personal">
<meta name="description" content="Personal homepage for Scott Hofman">
<meta charset="utf-8">
<meta name="author" content="Scott Hofman">
<link href="./css/variables.css" rel="stylesheet">
<link href="./css/header.css" rel="stylesheet">
<link href="./css/index.css" rel="stylesheet">
<link href="./css/travel.css" rel="stylesheet">
<link href="./css/darkmode.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="./images/favicon-128x128.webp" sizes="128x128">
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="preload" href="https://fonts.googleapis.com/css?family=Raleway&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway&display=swap">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap">
<link rel="stylesheet" type="text/css" href="./css/flag.css" />
<script src="./js/dark-mode.js" defer></script>
<script src="./js/math-helper.js" defer></script>
<script src="./js/visited.js" defer></script>
<script src="./js/cover-photo-scroll.js"></script>
<script src="https://d3js.org/d3.v4.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js" defer></script>
<script src="./js/fetch-world-json.js" defer></script>
<script src="./js/display-world-map.js" defer></script>
</head>
<body>
<header>
<ul>
<li>
<a href="http://www.scotthofman.com"><img src="./images/favicon-128x128.webp" alt="Scott Hofman's site icon"/></a>
</li>
<li><a href="http://www.scotthofman.com/resume">C.V.</a></li>
<li><a href="https://github.com/shofman">Coding</a></li>
<li><a href="http://www.scotthofman.com#contact">Contact</a></li>
</ul>
</header>
<div id="dark-mode-toggle">
<p id="dark-mode-text">Dark</p>
</div>
<section class="about-me">
<div class="about-text">
<h1>Welcome!</h1>
<h3>My name is <strong>Scott Hofman</strong></h3>
</div>
<div class="about-photo">
<img src="./images/me.png" alt="A picture of me" height="200px" width="160px"/>
</div>
</section>
<section>
<h3>I write code in:</h3>
<div class="code-spinner">
<div id="languages" class="scrollable-container">
<div class="stage">
<div class="shape">
<div data-item="Javascript" class="code item" style="transform: rotateX(0deg) translateZ(110px);">Javascript</div>
<div data-item="PHP" class="code item" style="transform: rotateX(51.4286deg) translateZ(110px);">PHP</div>
<div data-item="C#" class="code item" style="transform: rotateX(102.857deg) translateZ(110px);">C#</div>
<div data-item="Python" class="code item" style="transform: rotateX(154.286deg) translateZ(110px);">Python</div>
<div data-item="Java" class="code item" style="transform: rotateX(205.714deg) translateZ(110px);">Java</div>
<div data-item="SQL" class="code item" style="transform: rotateX(257.143deg) translateZ(110px);">SQL</div>
<div data-item="Ruby" class="code item" style="transform: rotateX(308.571deg) translateZ(110px);">Ruby</div>
</div>
</div>
</div>
<code>
<div class="display-code">
<div class="top-level">
const displayHelloWorld = function () {
<div>console.log("Hello World");</div>
};
<div class="empty-space"></div>
displayHelloWorld();
</div>
</div>
</code>
</div>
<p class="link-cta code-cta"><a href="https://github.com/shofman">See more of my coding here</a></p>
</section>
<section class="cover-photo">
<div class="cover-photo-background" id="antarctica-background"></div>
<div class="cover-photo-image" id="antarctica"></div>
<div class="attribution">
<small>Antarctica 2016 - © Scott Hofman</small>
</div>
</section>
<section>
<h3>I like to travel</h3>
<p>Check out this interactive map showing the places I've been: </p>
<section class="controls">
<p class="map-control">
<input type="checkbox" id="orthographic" checked/>
<label for="orthographic">Globe view</label>
</p>
<p class="map-control">
<input type="checkbox" id="visited" checked/>
<label for="visited">Scott's Countries</label>
</p>
<p class="map-control all-continents">
<input type="checkbox" id="show-all" />
<label for="show-all">Show All Continents</label>
</p>
</section>
<div id="globe-container"></div>
<div id="map-container"></div>
<div class="location-spinner">
<div id="locations" class="scrollable-container">
<div class="stage">
<div class="shape">
<div data-item="North America" class="continents item">North America</div>
<div data-item="Caribbean" class="continents item">Caribbean</div>
<div data-item="Antarctica" class="continents item">Antarctica</div>
<div data-item="South America" class="continents item">South America</div>
<div data-item="Asia" class="continents item">Asia</div>
<div data-item="Oceania" class="continents item">Oceania</div>
<div data-item="Africa" class="continents item">Africa</div>
<div data-item="Europe" class="continents item">Europe</div>
</div>
</div>
</div>
<div class="location-display-wrapper">
<div class="header">Countries Visited<span class="sub-header">Underlined countries are where I have lived</span></div>
<div class="display-locations">
<ul class="f32 country-list"></ul>
</div>
</div>
</div>
</section>
<section class="cover-photo">
<div class="cover-photo-background" id="calgary-background"></div>
<div class="cover-photo-image" id="calgary"></div>
<div class="attribution">
<small>Downtown Calgary 2017 - © Scott Hofman</small>
</div>
</section>
<section class="people-say">
</section>
<section class="contact-me" id="contact-section">
<h3>Contact Me</h3>
<p>Here's how you can reach me:</p>
<div class="contact-page">
<div id="contact" class="hoverable-container">
<div>
<div>
<div data-item="LinkedIn" class="contact-item selected">LinkedIn<sub class="trademark">™</sub></div>
<div data-item="Email" class="contact-item">Email</div>
<div data-item="GitHub" class="contact-item">GitHub</div>
</div>
</div>
</div>
<div class="display-contact-wrapper">
<div class="display-contact-details">
<a class="linkedin" href="https://www.linkedin.com/in/scott-hofman-92a36882/">
<img src="./images/In-2C-108px-TM.webp" width="120px" height="108px" alt="LinkedIn Icon"/><p>View My LinkedIn<sub>™</sub> Page</p>
</a>
</div>
</div>
</div>
</section>
<section class="final-note">
<p>This site was developed by me. If you like this, and want to see more,</p>
<p class="link-cta">please contact me or <a class="inner-link" href="./resume.html">see my resume here</a></p>
</section>
<footer>
<section>
<p class="link-cta">© 2024 <a class="inner-link" href="./scottofthemonth.html">Scott Hofman</a></p>
</section>
<ul>
<li>
<a href="http://www.scotthofman.com"><img src="./images/favicon-128x128.webp" alt="icon"/></a>
</li>
</ul>
</footer>
</body>
</html>