-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
175 lines (163 loc) · 6.8 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
<!doctype html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-159647784-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-159647784-1');
</script>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
<link rel="alternate" type="application/rss+xml" title="Jason Du's Portfolio" href="https://dujason.com/" />
<link rel="stylesheet" href="css/general.css" />
<link rel="stylesheet" href="css/about.css" />
<link rel="stylesheet" href="fontawesome-pro-5.12.0-web/css/all.css">
<!-- favIcon -->
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="assets/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="assets/favicon/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="assets/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="assets/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16.png">
<link rel="apple-touch-icon" href="assets/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="assets/favicon/favicon-144.png">
<meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
<title>Jason Du — About</title>
</head>
<body class="body">
<header class="headerBar">
<div class="statusBar">
<div class="statusBarLeftContent">
<p>Browser</p>
<i class="fas fa-wifi"></i>
</div>
<p id="dateTime" class="centerAlign"></p>
<div class="statusBarRightContent">
<p>100%</p>
<i class="fas fa-battery-full"></i>
</div>
</div>
<div class="headerContent">
<div id="aboutContent" class="aboutContent">
<h3 id="name">JASON DU</h3>
<h1 id="about" class="about">About</h1>
</div>
<img id="portfolioIcon" class="portfolioIcon" src="assets/Icon.jpg" alt="Icon Image">
</div>
</header>
<nav class="bottomTabBar">
<ul class="navBar">
<li>
<div class="tabContainer">
<i class="fas fa-home current"></i>
<a class="current" href="/">About</a>
</div>
</li>
<li>
<div class="tabContainer">
<i class="fas fa-rocket"></i>
<a href="projects">Projects</a>
</div>
</li>
<li>
<div class="tabContainer">
<i class="fas fa-file-user"></i>
<a href="Resume/JasonDuResume.pdf">Resume</a>
</div>
</li>
<li>
<div class="tabContainer">
<i class="fab fa-github"></i>
<a href="https://github.com/jsdu">Github</a>
</div>
</li>
<li>
<div class="tabContainer">
<i class="fas fa-comments"></i>
<a href="mailto:[email protected]?Subject=Hello!">Contact</a>
</div>
</li>
</ul>
</nav>
<section id="about" class="aboutContainer">
<div class="row ">
<div class="container firstContainer fadeIn">
<h3>Hello! I'm</h3>
<h1>JASON DU</h1>
<div class="title">
<h2 class="leftTitle">Blockchain<br></br>Enthusiast</h2>
<h2 class="rightTitle">iOS<br></br> Developer</h2>
</div>
</div>
<div class="container secondContainer fadeIn">
<h1>iOS Developer By Day</h1>
<p>I strive to create breathtaking iOS Apps from conception to production.
I have 4 years of experience working with Objective-C and Swift
and I am constantly challenging myself to explore new technologies.</p>
</div>
</div>
<div class="row">
<div class="container thirdContainer fadeIn">
<h1 class="whiteFont">Blockchain Ethusiast By Night</h1>
<p class="whiteFont">My passion lies in creating unique and exciting decentralized solutions.
I have been working with Solidity and the Ethereum Blockchain for 2 years. I specialize in
the blockchain gaming space.</p>
</div>
<div class="container fourthContainer fadeIn">
<h1>My Projects</h1>
<img class="projectImage" src="assets/Projects.jpg">
</div>
</div>
</section>
<script>
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
function getClockTime() {
var dt = new Date();
document.getElementById("dateTime").innerHTML = dt.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});;
}
getClockTime()
// Update clock every minute
setInterval(getClockTime, 60000);
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("portfolioIcon").style.width = "30px";
document.getElementById("portfolioIcon").style.height = "30px";
document.getElementById("portfolioIcon").style.marginBottom = "auto";
document.getElementById("aboutContent").style.flexDirection = "row";
document.getElementById("about").style.margin = "auto";
document.getElementById("about").style.fontWeight = "600";
document.getElementById("about").style.fontSize = "15px";
document.getElementById("about").style.letterSpacing = "-0.41px";
document.getElementById("about").style.lineHeight = "22px";
document.getElementById("name").style.marginTop = "10px";
} else {
document.getElementById("portfolioIcon").style.width = "63px";
document.getElementById("portfolioIcon").style.height = "63px";
document.getElementById("portfolioIcon").style.marginBottom = "0";
document.getElementById("aboutContent").style.flexDirection = "column";
document.getElementById("about").style.margin = "0";
document.getElementById("about").style.fontWeight = "bold";
document.getElementById("about").style.fontSize = "34px";
document.getElementById("about").style.letterSpacing = "0.37px";
document.getElementById("about").style.lineHeight = "41px";
document.getElementById("name").style.marginTop = "30px";
}
}
</script>
</body>
</html>