-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (123 loc) · 8.47 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
<html>
<head>
<link rel="icon" type="image/png"
href="favicon.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="quotes-style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON("http://groupstack.net/techQuoteAPI/api/", function(json){
$("#quote").html("<i id='quote' class='fas fa-quote-left'></i> "+ json.quote + " <i class='fas fa-quote-right'></i><br>- " + json.author);
});
setInterval(function(){
$.getJSON("http://groupstack.net/techQuoteAPI/api/", function(json){
$("#quote").fadeOut("slow", function(){
$("#quote").html("<i class='fas fa-quote-left'></i> "+ json.quote + " <i class='fas fa-quote-right'></i><br>- " + json.author);
$("#quote").fadeIn("slow");
});
});
}, 10000);
});
</script>
</head>
<header>
<nav class="navbar navbar-fixed-top">
<div id="_nav" class="row">
<div class="col-md-3"><a class="make-white" href="#home"><button class="btn"><b>Home</b></button></a></div>
<div class="col-md-3"><a class="make-white" href="#about"><button class="btn"><b>About</b></button></a></div>
<div class="col-md-3"><a class="make-white" href="#portfolio"><button class="btn"><b>Portfolio</b></button></a></div>
<div class="col-md-3"><a class="make-white" href="#main-quote-window"><button class="btn"><b>Quotes</b></button></a></div>
</div>
</nav>
</header>
<body id="main">
<div id="home" class="container-fluid">
<h1 id="mainLogo">GroupStack.net</h1>
<h2 id="mainSubHead">Home of Peter Vlasveld's Software Engineering<br> and Written Portfolio</h2>
<div id=topLinksRow class="row">
<div class="col-md-4"><a class="topLinks" href="https://github.com/Fizzizist"><i class="fab fa-github"></i></a></div>
<div class="col-md-4"><a class="topLinks" href="https://www.linkedin.com/in/peter-vlasveld-19756459/"><i class="fab fa-linkedin"></i></a></div>
<div class="col-md-4"><a class="topLinks" href="https://www.freecodecamp.org/fizzizist"><i class="fab fa-free-code-camp"></i></a></div>
</div>
</div>
<!--end of home section-->
<div id="about" class="container-fluid">
<div class="row">
<div class="col-lg-6"><img class="img-responsive center" id="me" src="images/me.jpg"></div>
<div class="col-lg-6">
<h2 id="aboutTitle">About Me</h2>
<p id="aboutParagraph">I have had a passion for computers ever since I was very young. In my teenage years I was building PCs and making useless Java apps. After high school I went to college for computer science where I learned more Java and C. After college I decided that I was interested in Neuroscience, so I stopped programming for a while and studied Neuroscience and Philosophy at University. Old habits die hard though. Mid-way through University I started programming again and now that I have graduated I am back to doing the thing that I have always loved. Recently I have been getting more into C# and Web Development which I am very new to in comparison to Java, but I love to learn and my passion will always keep me going.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 make-white">
<h2>Contact Information</h2>
<div style="width: 50%;" class="row">
<div class="col-sm-6">
<p>Email:<br>Phone:</p>
</div>
<div class="col-sm-6">
<p>[email protected]<br>416-902-8061</p>
</div>
</div>
</div>
<div style="padding:2%" class="col-md-6">
<a href="CV.pdf"><button style="background-color:grey; font-size: 20; font-weight:bold; padding: 2%" class="btn btn-block make-white">Resume <i class="fa fa-download"></i></button></a>
</div>
</div>
</div>
<!-- end of about section -->
<div style="background-color: lightgrey;" id="portfolio" class="container-fluid">
<h1 style="text-align: center; padding-top: 3%;"><b>Portfolio</b></h1>
<div style="width: 90%; margin-left: 5%" class="row">
<div class="col-lg-6">
<h2>Logic 2018</h2>
<h3><em>Written in C#</em></h3>
<a href="http://groupstack.net/Logic2018"><img class="center" src="images/Logic2018Screen.jpg"></a>
<p class="center">Logic 2018 is an educational game in which students solve symbolic logical derivations. The game is currently a command line game with an alpha build available <a href="http://groupstack.net/Logic2018">here</a><br>You can also check out the games source code on <a href="https://github.com/Fizzizist/Logic2018">GitHub</a></p>
</div>
<div class="col-lg-6">
<h2>Bootstrap Portfolio Page</h2>
<h3><em>Written in HTML and CSS using Bootstrap</em></h3>
<a href="#home"><img class="img-responsive center" src="images/portfolioHome.jpg"></a>
<p class="center">The page that you are viewing right now was written and coded by me. It makes use of Bootstrap for responsive CSS, and the rest is HTML.</p>
</div>
</div>
<div style="width: 90%; margin-left: 5%" class="row">
<div class="col-lg-6">
<h2>Wikipedia Search App</h2>
<h3><em>Written in HTML, CSS, and JavaScript, using JQuery and Boostrap</em></h3>
<a href="http://www.groupstack.net/wikipedia-app/"><img class="img-responsive center" src="images/wikiAppFront.jpg"></a>
<p class="center">This is a web app that employs the Wikipedia JSON API to search for appropriate entries and display them in a list. The user can load as many entries as they want, and click on an entry to go to the corresponding Wikipedia page. The user can also click a button that will take them to a random Wikipedia page.</p>
</div>
<div class="col-lg-6">
<h2>Random Tech Quotes JSON API</h2>
<h3><em>Written in JavaScript using Node.js and MySQL</em></h3>
<a href="http://www.groupstack.net/techQuoteAPI"><img class="img-responsive center" src="images/techQuoteBackground.jpg"></a>
<p class="center">A simple Node.js JSON API written using MySQL for the database. It generates random tech quotes to be used for elements such as the one seen below.</p>
</div>
</div>
<div style="width: 90%; margin-left: 5%" class="row">
<div class="col-lg-6">
<h2>Novum Philosophia (Blog)</h2>
<h3><em>Written in English</em></h3>
<a href="http://www.groupstack.net/blog/"><img class="img-responsive center" src="images/blogScreen.jpg"></a>
<p class="center">Most of the writings in this blog were written during my time studying Philosophy at the University of Toronto. I wrote on topics such as Ethics, Sexuality and Philsophy of Science.</p>
</div>
</div>
</div>
<!-- end of portfolio section -->
<div id="main-quote-window" class="container-fluid">
<div id="quote-well" class="container-fluid">
<h1 id="quote">#quote</h1>
</div>
</div>
<!-- end of Quotes section -->
<div style="background-color: black; text-align: center;" class="container-fluid">
<p class="make-white">Written and coded by <a href="#about">Peter Vlasveld</a></p>
</div>
</body>
</html>