-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (100 loc) · 7.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=0">
<title>TG01.sh</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src='js/main.js' type='text/javascript' defer></script>
</head>
<body>
<div id="construction">
This website is currently under construction!
</div>
<div id="wrapper">
<header>
<div id="logo">
<img src='img/logo.svg' alt="TG01" />.sh
</div>
<nav>
<ul>
<li style="--i:4"><a href="#">Home</a></li>
<li style="--i:3"><a href="https://blog.flippedbits.io">Blog</a></li>
<li style="--i:2"><a href="https://github.com/TechGeek01">Github</a></li>
<li style="--i:1"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<div class='square' style="--s: 6vw; --l: 8%; --del: 0.5s; --dur: 12.75s"></div>
<div class='square' style="--s: 2vw; --l: 12%; --del: 1.5s; --dur: 20s"></div>
<div class='square' style="--s: 5.5vw; --l: 16%; --del: 4s; --dur: 13s"></div>
<div class='square' style="--s: 3.5vw; --l: 26%; --del: 6s; --dur: 17s"></div>
<div class='square' style="--s: 7vw; --l: 42%; --dur: 12s"></div>
<div class='square' style="--s: 2.5vw; --l: 57%; --del: 2.5s; --dur: 19s"></div>
<div class='square' style="--s: 3vw; --l: 65%; --del: 1s; --dur: 18s"></div>
<div class='square' style="--s: 5vw; --l: 70%; --del: 5.5s; --dur: 13.5s"></div>
<div class='square' style="--s: 4vw; --l: 83%; --dur: 15s"></div>
<div class='square' style="--s: 9vw; --l: 90%; --del: 7s; --dur: 10s"></div>
<div class="intro">
<h1><span class='em'>Hello,</span>
<span>my name is</span>
<span class='handwriting'> Andy Yasger </span></h1>
<p class='tagline'>IT professional by day, programmer & homelabber by night.</p>
</div>
<p>I've been building computers since early 2012, and have been programming for almost as long. I'm far from an expert on any of this, but <em>sometimes</em>, I play one on TV.</p>
<div class="wedge left">
<div class="content">
<h1>Hello there!</h1>
<p>This is some featured content. It's probably kind of important.</p>
</div>
</div>
<div class="green">
<div class="content">
<h1>Who are you?</h1>
<p>I've been interested in technology my whole life, and have been working with computers for more than a decade. I went to school for software development, but also dabbled in Cisco networking, Windows, and Linux servers.</p>
<p>My homelab started in 2018, and has evolved many times since then. It currently features several Supermicro servers, and runs Proxmox for virtualization, as well as TrueNAS for network storage. In the past, I've also worked with both Dell and HP servers, and I've worked in the past with Cisco switches, though it currently features Dell switches instead.</p>
</div>
</div>
<div class="wedge right">
<div class="content">
<h1>More text!</h1>
<p>If you haven't already gathered, I don't have a clue what I'm going to put here.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac enim sapien. Morbi in sem diam. Fusce pulvinar justo non viverra tincidunt. Pellentesque ut mauris in sem ullamcorper varius non eu elit. Cras vehicula sem sit amet vehicula sollicitudin. Sed id metus mattis, rhoncus leo quis, tristique elit. Pellentesque aliquam leo a purus porttitor sodales. Fusce non pharetra neque. Nulla lorem enim, consequat et volutpat non, lacinia non nisl. Aenean placerat in odio ut scelerisque. Proin non tellus id ante lobortis laoreet. Ut ut efficitur nisl, vitae dictum nibh. Etiam posuere mollis velit, sit amet pharetra mauris interdum quis. Donec tempus at nisl ut rhoncus.</p>
<p>Integer ullamcorper ultrices nunc, eu mollis purus. Nunc vel eros suscipit purus placerat volutpat in vitae massa. Suspendisse bibendum, augue id pharetra rutrum, sem libero auctor felis, non lacinia ex est at leo. Aliquam urna ex, sagittis in posuere id, elementum eget lacus. Nullam scelerisque pharetra finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin accumsan nunc ligula, nec mollis dolor fringilla non. Suspendisse potenti. Nunc vel rutrum nunc. Nunc bibendum pellentesque ornare. In elementum nibh eu mauris fermentum varius. Ut fermentum maximus ex at aliquet. Donec efficitur nunc mauris, eget condimentum leo gravida eu. Sed non suscipit ligula. Aliquam nec tristique elit.</p>
<p>Vivamus in bibendum eros. Cras pretium ex nec nunc vestibulum efficitur. Nullam eget eros nec arcu lobortis consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mollis nec lorem vitae rutrum. Maecenas sollicitudin tellus eu lacus vehicula, vitae eleifend elit congue. Etiam laoreet non leo eu elementum. Morbi mauris justo, imperdiet ut ipsum facilisis, tristique eleifend ipsum. Sed ac lobortis orci. Etiam id hendrerit leo. In at odio mattis, volutpat leo eu, pulvinar nisi. Maecenas quis nibh vitae odio sagittis congue. Nunc lobortis mi non venenatis aliquet. In at tristique diam, eu finibus neque.</p>
<p>Etiam sed magna eget nulla porta sodales. Vestibulum sed interdum risus. Proin pulvinar, augue a pretium efficitur, ipsum dolor rhoncus mi, non tristique risus augue vel purus. Curabitur risus metus, facilisis id magna id, tincidunt tristique metus. Sed ullamcorper lorem congue, cursus velit sit amet, hendrerit mi. Duis sodales efficitur felis, nec maximus nisi volutpat sit amet. Nunc eget placerat lectus, quis blandit dui. Nunc quam massa, condimentum sed libero et, tempus mollis risus. Suspendisse id accumsan odio. Pellentesque placerat nisl vel ornare eleifend. Cras ac nibh sit amet tellus egestas mollis vitae vel magna. Nullam eu purus tincidunt, hendrerit lorem nec, tincidunt ex.</p>
<p>Morbi enim nisi, posuere ac sapien ac, vestibulum pulvinar arcu. Mauris in tortor vel diam aliquam ornare et sed nibh. Nullam pretium laoreet rhoncus. Sed consequat est sed justo pulvinar placerat. Quisque feugiat tortor et auctor tempor. Aenean odio ipsum, porta nec pharetra id, sollicitudin luctus lacus. Sed ut urna mi. Vivamus finibus tincidunt eros nec ultricies. Vivamus posuere turpis eu nisl eleifend congue. Donec laoreet mattis purus non venenatis. Nunc eleifend odio a dui vulputate, non rutrum elit luctus.</p>
<div class="wedge left">
<div class="content">
<h1>Find Me Elsewhere!</h1>
<ul class='platforms'>
<li>
<a class="icon" href="https://github.com/TechGeek01" aria-label="GitHub profile">
<img src='img/github.svg' alt="GitHub logo" />
<span>TechGeek01</span>
</a>
</li>
</ul>
</div>
</div>
<h1 id="contact">Contact me</h1>
<p>If you'd like to get in touch with me, feel free to shoot me an email!</p>
<span id="email"><span class="loading-dots" style="display: inline-block;margin-left: 4em"></span><span class="link-placeholder"> </span></span>
<div class="footer">
<footer class='right'>
<div class="links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="https://blog.flippedbits.io">Blog</a>
<a href="https://github.com/TechGeek01">Github</a>
<a href="#">Contact</a>
</div>
<p class='copyright'>© 2022 — Handcrafted with love by Andy</p>
</footer>
</div>
</div>
</body>
</html>