-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathnewIndex.html
155 lines (144 loc) · 6.35 KB
/
newIndex.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
<!DOCTYPE html>
<html>
<head>
<!--<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> -->
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1">
<meta name="description" content="The landing page for Jasper Hawks' Portfolio.">
<meta name="robots" content="index, follow">
<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=Poppins&display=swap" rel="stylesheet">
<title>Welcome | Jasper Hawks</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<nav>
<button class="hamburgerCont">
<div class="hamburgerLine"></div>
<div class="hamburgerLine"></div>
<div class="hamburgerLine"></div>
</button>
<img id="logoImg" src="images/JHLogoMini.jpg">
</nav>
<div class="linkListCont slide-out">
<ul class="linkList">
<li class="linkLi"><a class="link" href="index.html">Home</a></li>
<li class="linkLi"><a class="link" href="blog.html">Blog</a></li>
<li class="linkLi"><a class="link" href="software.html">Software</a></li>
<li class="linkLi"><a class="link" href="experience.html">Experience</a></li>
<li class="linkLi"><a class="link" href="social.html">Socials</a></li>
<li class="linkLi"><a class="link" href="about.html">About</a></li>
</ul>
</div>
<div class="splashOverlayCont">
<video style="background-color: white;" src="images/output.mp4" autoplay muted loop>
Your browser does not support HTML5 video.
</video>
<div class="splashContainer">
<div class="splashScreen">
<div class="headerContainer">
<h1 class="headerText">Jasper Hawks</h1><hr><br>
<ul class="titlesUL">
<li class="titles"><h2 class="subheaderText">Software Developer</h2></li>
<li class="titles"><h2 class="subheaderText">Rock Climber</h2></li>
<li class="titles"><h2 class="subheaderText">Full Stack Developer</h2></li>
<li class="titles"><h2 class="subheaderText">Tea Drinker</h2></li>
<li class="titles"><h2 class="subheaderText">Book Reader</h2></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mainContent">
<div class="twoToneContainer">
<div class="leftTone">
<img id="rockClimbingPhoto" src="https://drive.google.com/thumbnail?id=1--U9lRIvkY1gELjqb4x93XLE--tn6XzJ&sz=w1000">
<!-- https://drive.google.com/thumbnail?id=0B6wwyazyzml-OGQ3VUo0Z2thdmc&sz=w1000 -->
</div>
<div class="rightTone">
<div class="rightToneTextCont" >
<h2 style="color: black;">About Me</h2>
<p>
(REWRITE & SPELLCHECK THIS)
<strong>Since the age of 11</strong>
programmed
It is in my experience over years
as a Software Developer that codebases tend toward the
bloated and unruly. This is usually the
consequence of workplace deadlines, and quick
turnarounds. While we are all prone to the desires
of upper management or our own timelines, bugs can
start to baloon and it's only a matter of time before
it goes pop.
<br><br>
The tenets I've listed below are those that I follow
in order to avoid the baloon bug.
<h3>Simple Solutions</h3>
Simple code is readable, maintainable, and easy to explain.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br><br>
<h3>Extensible Design</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
<br><br>
<h3>Efficent Code</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<!-- <h1 class = "welcome">🚧 This site is under construction 🚧<br>Please come back later</h1>
<hr class = "line"> -->
</div>
<footer>
<div class="footerTextContent">
<h3 class="footerHeader">Jasper Hawks</h3>
<ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="software.html">Software</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="social.html">Socials</a></li>
<li><a href="about.html">About</a></li>
</ul>
This website was written by Jasper Hawks and is licensed under the GPL 3. Logo: <a href="https://www.vecteezy.com/free-vector/j">J Vectors by Vecteezy</a>
</div>
</footer>
<script>
// function calcAge(){
// const MS_PER_DAY = 1000 * 60 * 60 * 24;
// const bDay = new Date('2003-01-01');
// const scratchDate = new Date('2014-07-09');
// console.log(((Math.floor((scratchDate - bDay) / MS_PER_DAY))/365).toFixed(0));
// }
// calcAge()
document.querySelector('.hamburgerCont').addEventListener('click', function() {
// let arr = document.querySelector('.linkListCont').classList);
if(document.querySelector('.linkListCont').classList.contains("slide-out")){
document.querySelector('.linkListCont').classList.add('slide-in');
document.querySelector('.linkListCont').classList.remove('slide-out');
}else{
document.querySelector('.linkListCont').classList.remove('slide-in');
document.querySelector('.linkListCont').classList.add('slide-out');
}
});
</script>
</body>
</html>