-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (144 loc) · 6.05 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
<!DOCTYPE html>
<html>
<head>
<title>Dylan Seto</title>
<script src="scripts/jquery.min.js"></script>
</head>
<body>
<div id="intro">
<video id="splash" preload='auto' visibility="hidden" alt="Your browser does not support HTML5. Skipping intro.">
<source id = "video" src="res/intro.mp4" type="video/mp4">
Your browser does not support HTML5. Skipping intro.
</video>
</div>
<nav id="header" class="navbar navbar-default navbar-fixed-top">
<a id="nav-button-about" href="javascript:void()">ABOUT</a>
<a id="nav-button-CV" href="res/CV_ENG_DYLAN.pdf">RESUME</a>
<a href="https://github.com/dylanseto" target="_blank">PROJECTS</a>
</nav>
<div id="ask">
<form id="form" class="ask_form" onsubmit="getAnswer()">
<input id="askBox" class="form-control" autocomplete=off maxlength="25" placeholder="Ask Me Anything">
<p id="counter">25</p>
<a href="#help">HELP</a>
</form>
<p id = "answer"></p>
</div>
<div id="help" class="overlay">
<div class="popup">
<h2>Help</h2>
<a class="close" href="#">x</a>
<div class="content">
<p>The questions availble in the ask box are currently limited. Here are some possible commands:</p>
<p>-"Who Are you?"</p>
<p>-"Web Desgin"</p>
<p>-"Where can I find your resume?"</p>
<p>-"Programming Languages"</p>
<p>-"Projects"</p>
<p>-"What is this website for?"</p>
Others exist, but I'll let you find those on your own! In the future, I want this site to use Siri-like AI.
</div>
</div>
</div>
<nav id="nav_header" class="navbar navbar-default navbar-fixed-top">
<a id="nav-back-button" class="glyphicon glyphicon-remove"></a>
</nav>
<div id="About-Page">
<div id="Header">
<p class="Header">Dylan Seto - Who is he?</p>
<img id="image" src="res/Filler.gif"></img>
</div>
<div class="Contents">
<p>Dylan Seto is a programmer, designer and creator from Montreal, Canada. He is currently pursuing a bachelors in Computer Science at Concordia University.</p>
<p>He first got interested in programming at only 11 years old when he fell in love with the idea of creating the worlds that he had in his head. He would spend hours of his day drawing silly cartoon characters and learning C++.</p>
<p>He would later enroll in Vanier College in 2013 where he began learning Java at school and teaching himself HTML, JavaScript and python on his own.</p>
<p>In his spare time, he enjoys taking pictures, playing guitar and writing about himself in third person.</p>
<p>Contact: Dylan.Seto@outlook.com</p>
</div>
</div>
<div id="CV-Page">
<div id="cv-education">
</div>
<div>
</div>
</div>
<div id="Projects-Page">
<div id="blueimp-gallery" class="blueimp-gallery">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<a href="res/gallery/0.jpg" title="1" data-gallery>
<img src="res/gallery/0.jpg" alt="0" height=200px width=auto>
</a>
<a href="res/gallery/1.jpg" title="2" data-gallery>
<img src="res/gallery/1.jpg"" alt="1" height=200px width=auto>
</a>
<a href="res/gallery/2.jpg" title="3" data-gallery>
<img src="res/gallery/2.jpg"" alt="2" height=200px width=auto>
</a>
<a href="res/gallery/3.jpg" title="4" data-gallery>
<img src="res/gallery/3.jpg"" alt="2" height=200px width=auto>
</a>
<a href="res/gallery/4.jpg" title="5" data-gallery>
<img src="res/gallery/4.jpg"" alt="2" height=200px width=auto>
</a>
<a href="res/gallery/5.jpg" title="6" data-gallery>
<img src="res/gallery/5.jpg"" alt="2" height=200px width=auto>
</a>
<a href="res/gallery/6.jpg" title="7" data-gallery>
<img src="res/gallery/6.jpg"" alt="2" height=200px width=auto>
</a>
</div>
</div>
<div id="Contacts-Page">
<p>For specific business-related inqueries please contact me by E-mail at Dylan.Seto@outlook.com</p>
<p><a href="http:\\]twitter.com/DylanSetoArtist">Twitter</a></p>
<a href="DylanSeto.DeviantArt.com">DeviantArt</a>
<a href="https://www.linkedin.com/in/dylan-seto-4a4b50113">Linkedin</a>
<p>Phone Number: Availble By Request</p>
<a href=""></a>
</div>
<link rel="stylesheet" href="style/blueimp-gallery.min.css">
<link rel="stylesheet" href="style/bootstrap-image-gallery.min.css">
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="style/index_style.css">
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="style/nav_style.css">
<script src="scripts/jquery.blueimp-gallery.min.js"></script>
<script src="scripts/bootstrap-image-gallery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/splash.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/nav.js"></script>
</body>
</html>