-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
220 lines (204 loc) · 12.3 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="keywords" content="Quddus,George,Programming,Javascript,HTML,CSS,Nodejs,Portfolio">
<link rel="stylesheet" href="css/house.css">
<style>
</style>
<title>Quddús George|Javascript Dev</title>
</head>
<body>
<main>
<div class="house">
<div id="sky">
<div id="branch"></div>
<div id="partleaves"></div>
<div id="leaves"></div>
<div id="trunk"></div>
<div id="leaves2"></div>
<div id="trunk2"></div>
<div id="cloud"></div>
<div id="cloud2"></div>
<div id="cloud3"></div>
<div id="cloud4"></div>
<div>
<h1 id="titleInfo">Quddus George</h1>
<h2 id="email"><a href="Mailto:[email protected]"><button class="contact">Email</button></a> <a target="_blank" href="https://github.com/Lastofthefirst"><button class="contact">Github</button></a> and
<a href="https://www.dropbox.com/s/qsfet3gel1ekilq/Resume.pdf?dl=0" target="_blank"><button class="contact">Resume</button></a> or <a target="_blank" href="https://github.com/Lastofthefirst/Lastofthefirst.github.io"><button class="contact">Source Code</button></a></h2>
</div>
</div>
<div id="grass"></div>
<div class="panel" id="practical" onclick="openHouse('practical', '100px', '250px', 'roof', '356px','600px')">
<div class="card-container">
<div class="cardInner">
<a href="https://lastofthefirst.github.io/algorithmachine/" target="_blank"><img alt="Screenshot and link to AlgorithMachine App" src="AlgorithMachine.jpeg"></a>
<div class="applist">
<div class="appheader">
<div class="listheading">AlgorithMachine</div>
<a href="https://github.com/Lastofthefirst/BookBox" target="_blank"><button class="codelink">Source Code</button></a>
</div>
<div class="appinfo"> It was while scripting this application that functional coding really clicked for me. In writing the algorithms I enjoyed finding new ways to utilize the syntax introduced with ES6 anywhere I could.
</div>
</div>
</div>
<div class="cardInner">
<a href="https://lastofthefirst.github.io/BookBox/" target="_blank"><img alt="Screenshot and link to BookBox App" src="bookbox.jpeg"></a>
<div class="applist">
<div class="appheader">
<div class="listheading">BookBox</div>
<a href="https://github.com/Lastofthefirst/BookBox" target="_blank"><button class="codelink">Source Code</button></a>
</div>
<div class="appinfo"> Making Bookbox I learned more about the design process, and what it looks like to develop a solution to an identified need. It was built in Framework7, and I gained some experience with the swiper API.
</div>
</div>
</div>
<div class="cardInner">
<a href="https://lastofthefirst.github.io/someday/" target="_blank"><img style="background-color: rgb(215, 237, 255);" alt="Someday Icon" src="Sunicon1.png"></a>
<div class="applist">
<div class="appheader">
<div class="listheading">Someday</div>
<a href="https://github.com/Lastofthefirst/Someday" target="_blank"><button class="codelink">Source Code</button></a>
</div>
<div class="appinfo"> Someday is an app for prioritizing one-off purchases, a C.R.U.D application. Most important items listed at the top. I learned to create and access UIDs and create an intuitive interface.
</div>
</div>
</div>
<div class="cardInner">
<a href="https://www.cvent.com/c/calendar/e2fc38d4-c3b3-421d-b32b-a7fc48760463" target="_blank"><img alt="An image of a printer representing the process of automated certificates" src="printer.jpg"></a>
<div class="applist">
<div class="appheader">
<div class="listheading">Certificate Generator</div>
<a target="_blank"><button class="codelink">Unavailable</button></a>
</div>
<div class="appinfo">I created a system of Node.js applications to send out certificates for Wilmette Institute Students. This includes a web scraper to find and identify canidates in the course websites, a pdf generator to create a certificate for each student found, a web scraper to compile student emails, and finally an email generator, sending the certificates to each student.
</div>
</div>
</div>
<div class="cardInner">
<a href="https://lastofthefirst.github.io/BookBox/" target="_blank"><img alt="Electrificate Logo" src="electrificatelogo.png"></a>
<div class="applist">
<div class="appheader">
<div class="listheading">Electrificate</div>
<a target="_blank"><button class="codelink">Unavailable</button></a>
</div>
<div class="appinfo">Desktop application for generating bulk certificates.
</div>
</div>
</div>
</div>
</div>
<button id="roof" class="accordion roof" onclick="openHouse('practical', '100px', '250px', 'roof', '356px','600px')">
<h2 class="bot">Projects</h2>
</button>
<div class="panel" id="skills" onclick="openHouse('skills', '100px', '246px', 'walls', '156px','400px')">
<div class="parag-container">
<div class="textcard">
<div class="listheading">Mastery</div>
I am fluent in Javascript, HTML, and CSS scripting, and have proven ability to quickly analyze and apply documentation to real-world projects.
</div>
<div class="textcard">
<div class="listheading">Character</div>
My experience has refined my ability to communicate effectively with team members. Throughout my life I have embraced new areas of learning and have guided my own studies. Some personal strengths that I bring to my work are my ability to work independently, collaborate with a team, and contribute toward common objectives.
</div>
<div class="textcard">
<div class="listheading">Going Forward</div>
I am curently interested in strengthening my skills around data structures, and data manipulation, functional programming, and Microsoft Azure. I really enjoyed working with Node.js recently and look forward to delving deeper into it.
</div>
</div>
</div>
<button id="walls" class="accordion walls" onclick="openHouse('skills', '100px', '246px', 'walls', '156px','400px')">
<div id="frame"></div>
<div id="door"></div>
<div id="doorknob"></div>
<div id="frame2"></div>
<div id="door2"></div>
<div id="doorknob2"></div>
<div id="frame3"></div>
<div id="door3"></div>
<div id="doorknob3"></div>
<div id="window1"></div>
<div id="head"></div>
<div id="wave1"></div>
<div id="wave2"></div>
<div id="body"></div>
<div id="shoulder"></div>
<div id="windowVert"></div>
<div id="windowHor"></div>
<div id="window2"></div>
<div id="windowVert2"></div>
<div id="windowHor2"></div>
<div id="window3"></div>
<div id="windowVert3"></div>
<div id="windowHor3"></div>
<div id="window4"></div>
<div id="windowVert4"></div>
<div id="windowHor4"></div>
<div id="thirtyfive"></div>
<div id="thirtyfiveNum">35</div>
<h2 class="bot">
Skills</h2>
</button>
<div class="panel" id="values" onclick="openHouse('values', '80px', '240px', 'foundation', '80px','320px')">
<div class="parag-container2">
<div class="textcard2">
<div class="listheading">Purpose</div>
My aim is to create applications that apply technology to solve real-world problems. I envision working remotely for 24 hours a week. To achieve this goal I will prioritize high quality work, thoughtful reflection on user experience, continual learning, and resourcefulness.
</div>
</div>
</div>
<button id="foundation" class="accordion foundation" onclick="openHouse('values', '80px', '240px', 'foundation', '80px','320px')">
<div id="porch"></div>
<div id="porch2"></div>
<div id="porch3"></div>
<h2 class="bot">Purpose</h2>
</button>
</div>
<div id="signpost" onclick="expand('signpost','200px','10px')">
<div id="signtext">Apartment for Rent 973 Lines of Pure CSS 100% Handwritten</div>
</div>
</main>
</body>
<script>
function openHouse(infoId, heightIn, heightOut, houseId, bottomIn, bottomOut) {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
let hC = Number(heightOut.replace('px', '')) + 300,
bC = Number(bottomOut.replace('px', '')) + 300;
heightOut = hC + 'px';
bottomOut = bC + 'px';
}
else if (1000 > document.documentElement.clientWidth) {
let hC = Number(heightOut.replace('px', '')) + 100,
bC = Number(bottomOut.replace('px', '')) + 100;
heightOut = hC + 'px';
bottomOut = bC + 'px';
}
expand(infoId, heightIn, heightOut);
open(houseId, bottomIn, bottomOut);
}
function expand(thisId, thisHeight, thisNewHeight) {
let change = document.getElementById(thisId).style;
change.height = change.height === thisNewHeight ? thisHeight : thisNewHeight;
}
function expandS(thisId, thisHeight, thisNewHeight) {
let change = document.getElementById(thisId).style;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
// Take the user to a different screen here.
let hC = Number(thisNewHeight.replace('px', '')) + 350,
heightOut = hC + 'px';
change.height = change.height === heightOut ? thisHeight : heightOut;
} else {
change.height = change.height === thisNewHeight ? thisHeight : thisNewHeight;
}
}
function open(thisId, thisBottom, thisNewBottom) {
let change = document.getElementById(thisId).style;
change.bottom = change.bottom === thisNewBottom ? thisBottom : thisNewBottom;
}
function up(thisId, thisTop, thisNewTop) {
let change = document.getElementById(thisId).style;
change.top = change.top === thisNewTop ? thisTop : thisNewTop;
}
</script>
</html>