-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
150 lines (126 loc) · 6.74 KB
/
about.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
<!DOCTYPE html>
<html>
<title>Henry's personal site</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="henry.css">
<style>
body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif}
.w3-row-padding img {margin-bottom: 12px}
/* Set the width of the sidenav to 120px */
.w3-sidenav {width: 120px;background: #222;}
/* Add a left margin to the "page content" that matches the width of the sidenav (120px) */
#main {margin-left: 120px}
/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px) {#main {margin-left: 0}}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#fade1").fadeIn(1000);
//-------MAIN TEXT ANIMATION------
var startPosY_text = 100;
var endPosY_text = 0;
document.getElementById("about_text").style.WebkitTransform = "translate(0px,"+startPosY_text.toString()+"px)";
document.getElementById("about_text").style.opacity = 0.0;
document.getElementById("about_text").style.visibility = "visible"; // unhide now that it is setup
$({someValue: startPosY_text}).animate({someValue: endPosY_text}, {
duration: 1000,
step: function() {
document.getElementById("about_text").style.WebkitTransform = "translate(0px,"+this.someValue.toString()+"px)";
}
});
$({someValue: 0.0}).delay(200).animate({someValue: 1.0}, {
duration: 1000,
step: function() {
document.getElementById("about_text").style.opacity = this.someValue.toString();
}
});
//--------------------------------
//-------PICTURE ANIMATION------
var startPosX_pic = 100;
var endPosX_pic = 0;
document.getElementById("about_picture").style.WebkitTransform = "translate("+startPosX_pic.toString()+"px,0px)";
document.getElementById("about_picture").style.opacity = 0.0;
document.getElementById("about_picture").style.visibility = "visible"; // unhide now that it is setup
$({someValue: startPosX_pic}).delay(500).animate({someValue: endPosX_pic}, {
duration: 1000,
step: function() {
document.getElementById("about_picture").style.WebkitTransform = "translate("+this.someValue.toString()+"px,0px)";
}
});
$({someValue: 0.0}).delay(500+200).animate({someValue: 1.0}, {
duration: 1000,
step: function() {
document.getElementById("about_picture").style.opacity = this.someValue.toString();
}
});
//--------------------------------
});
</script>
<body class="w3-black">
<!-- Icon Bar (Sidenav - hidden on small screens) -->
<nav class="w3-sidenav w3-center w3-small w3-hide-small">
<a class="w3-padding-large w3-hover-black" href="index.html">
<i class="fa fa-home w3-xxlarge" href="index.html"></i>
<p>HOME</p>
</a>
<a class="w3-padding-large w3-black" href="about.html">
<i class="fa fa-user w3-xxlarge"></i>
<p>ABOUT</p>
</a>
<a class="w3-padding-large w3-hover-black" href="projects.html">
<img src="elements/sidebar/code-optimization-xxl.png" style="width:55% !important" alt="hi" class="inline"/>
<p>PROJECTS</p>
</a>
<!--
<a class="w3-padding-large w3-hover-black" href="index.html">
<i class="fa fa-envelope w3-xxlarge"></i>
<p>CONTACT</p>
</a>
-->
</nav>
<!-- Navbar on small screens (Hidden on medium and large screens) -->
<div class="w3-top w3-hide-large w3-hide-medium" id="myNavbar">
<ul class="w3-navbar w3-black w3-opacity w3-hover-opacity-off w3-center w3-small">
<li class="w3-left" style="width:33.333% !important"><a href="index.html">HOME</a></li>
<li class="w3-left" style="width:33.333% !important"><a href="about.html">ABOUT</a></li>
<li class="w3-left" style="width:33.333% !important"><a href="projects.html">PROJECTS</a></li>
</ul>
</div>
<!-- Page Content -->
<div class="w3-padding-large" id="main">
<!-- Header/Home -->
<header class="w3-container w3-padding-32 w3-center w3-black" id="projects">
<h1 id="fade1" style="display:none" class="w3-jumbo">About Henry</h1>
</header>
<div class="w3-padding-large" id="about">
<div id="about_picture" style="visibility:hidden">
<img class="w3-hide-small w3-right w3-padding-small w3-image" src="profilePicture.jpg" width="200" alt="Henry"/>
<img class="w3-hide-large w3-hide-medium w3-centered w3-image" src="profilePicture.jpg" width="200" alt="Henry"/>
</div>
<div id="about_text" style="visibility:hidden" class="w3-padding-small">
<p>
Hello. My name is Henry Bergin, and this is my personal site. Building things has been a passion of mine since I was a little kid. I started with snap-circuits and now I'm working on projects with cutting edge technology, such as Bluetooth Low Energy. This is my passion. I enjoy learning how things work, and my hope is to show you some of the cool stuff I work on here. Head on over to the projects page and check it out.
</p>
</div>
</div>
<!-- Footer -->
<footer class="w3-content w3-padding-64 w3-text-grey w3-xlarge">
<!--
<i class="fa fa-facebook-official w3-hover-text-indigo"></i>
<i class="fa fa-instagram w3-hover-text-purple"></i>
<i class="fa fa-snapchat w3-hover-text-yellow"></i>
<i class="fa fa-pinterest-p w3-hover-text-red"></i>
<i class="fa fa-twitter w3-hover-text-light-blue"></i>
<i class="fa fa-linkedin w3-hover-text-indigo"></i>
-->
<!-- End footer -->
</footer>
<!-- END PAGE CONTENT -->
</div>
</body>
</html>