-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (105 loc) · 6.19 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
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Victor Sun's Website</title>
<meta property="og:image" content="resources/headerBackground.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="resources/profileIcon.jpg">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet/less" href="linesss.less">
<link rel="stylesheet" href="indexss.css">
<link rel="preload" as="image" href="resources/headerBackground.jpg">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload = function(){
$(".menu").load("menu.txt");
window.scrollTo(0,0);
};
window.onbeforeunload = () => window.scrollTo(0,0);
</script>
</head>
<body>
<div class="menu fixedSize"></div>
<div class="bodyText">
<div class="headingSection fixedSize" id="scrollHeader">
<div class="bgImage fixedSize" id="headerBackground"></div>
<div class="headingSection2" id="scrollHeaderMessage">
Welcome
</div>
</div>
<div class="headingFooter fixedSize" id="clickMessage">
<div class="headingMessage fixedSize">
Click or scroll to learn more.
</div>
</div>
<div class="intro">
<div class="autoMargin">
<div class="profile">
<img src="resources/profile.jpg" class="profilePicture">
</div>
<div class="introPadding"></div>
<div class="welcome">
<h3>Welcome to my site</h3>
<p>I'm a fourth year Computer Science student at the University of Waterloo.</p>
<p>Currently looking for a co-op placement from September to December 2022</p>
<p>Note: This website was created from scratch, simple enough to not require a web framework</p>
<p>If you have any questions, please contact me <a href="mailto:[email protected]"><u>here</u></a></p>
</div>
</div>
</div>
<div class="sectionDivider"></div>
<div class="currentProjects">
<div class="projectsHeader">
Current Projects
</div>
<div class="project">
<a href="portfolio.html#cyberbrain" class="noUnderline">
<div class="projectHeading">
<div class="projectHeadingText">
Cyberbrain
</div>
</div>
<img class="projectPicture projectInfo" src="resources/cyberbrain.png" alt="Cyberbrain Picture" title="Cyberbrain">
</a>
</div>
<div class="project">
<a href="portfolio.html#autosubpl" class="noUnderline">
<div class="projectHeading">
<div class="projectHeadingText">
Auto Subscription Playlist
</div>
</div>
<img class="projectPicture projectInfo" src="resources/autoSubPlaylist.png" alt="Playlist Picture" title="Auto Subscription Playlist">
</a>
</div>
</div>
</div>
<div class="contact fixedSize"></div>
<script>
window.onscroll = () => scrollHeader(false);
window.onclick = (e) => scrollHeader(e);
function scrollHeader(click) {
var clickedIn = click && (($(click.target).offset().left == 0 && $(click.target).offset().top == 0) ||
($(click.target).offset().left == $('#scrollHeaderMessage').offset().left &&
$(click.target).offset().top == $('#scrollHeaderMessage').offset().top));
if (clickedIn || document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
if(document.getElementById("scrollHeader").style.display == "none") {
return;
} else {
document.getElementById("scrollHeader").style.opacity = 0;
var int1 = window.setInterval(() => {document.getElementById("scrollHeader").style.display = "none";window.clearInterval(int1);}, 1000);
document.getElementById("clickMessage").style.display = "none";
}
}
}
/*
function goToProject(button) {
window.location.assign(button.parentElement.parentElement.firstElementChild.href);
}*/
</script>
<div class="lines fixedSize"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div>
<div class="lines2 fixedSize"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div>
</body>
</html>