-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
396 lines (342 loc) · 16 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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
<!DOCTYPE html>
<html lang="en" >
<head>
<link rel="icon" href="./images/jisun.svg" type="image/icon type">
<!-- Primary Meta Tags -->
<title>John Jayson De Leon - Software Developer</title>
<meta name="title" content="John Jayson De Leon - Software Developer">
<meta name="description" content="Software developer that will develope your website or system to the next level.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://savjaylade84.github.io/Jisun.github.io/">
<meta property="og:title" content="John Jayson De Leon - Aspiring Software Developer">
<meta property="og:description" content="Software developer that will develope your website or system to the next level.">
<meta property="og:image" content="https://github.com/savjaylade84/Jisun.github.io/blob/main/images/Selfie_Me.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://savjaylade84.github.io/Jisun.github.io/">
<meta property="twitter:title" content="John Jayson De Leon - Aspiring Software Developer">
<meta property="twitter:description" content="Software developer that will develope your website or system to the next level.">
<meta property="twitter:image" content="https://github.com/savjaylade84/Jisun.github.io/blob/main/images/Selfie_Me.jpg">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="author" content="John Jayson B. De Leon">
<meta name="robots" content="index,follow">
<meta charset="utf-8" lang="en">
</head>
<body>
<script src="./Javascript/main.js?=1" defer></script>
<script src="./Javascript/link.js?v=1" defer></script>
<link rel="stylesheet" href="./CSS/index.css?v=1">
<!-- nav content -->
<nav class="nav">
<!-- mobile view nav -->
<div class="nav-mobile">
<div class="nav-wrapper">
<span class="mobile-logo"><img draggable="false" src="./images/jisun.svg" alt="author logo" class="disable author-logo"></span>
<div class="menu-wrapper">
<ul class="nav-button-menu">
<li class="nav-button"><a class="link-text" href="#Home"> HOME </a></li>
<li class="nav-button"><a class="link-text" href="#About"> ABOUT </a></li>
<li class="nav-button"><a class="link-text" href="#Project"> PROJECT </a></li>
<li class="nav-button"><a class="link-text" href="#Contact"> CONTACT </a></li>
</ul>
<span class="show-hide">
<p class="show-hide-text button-border-less" >
<span class="button-open-close">Home</span>
</p>
</span>
</div>
</div>
</div>
<!-- desktop & tablet view -->
<div class="nav-desktop">
<span class="desktop-logo"><img draggable="false" src="./images/jisun.svg" alt="author logo" width="45" height="45" class="disable author-logo center center-me"></span>
<ul class="nav-button-menu">
<li class="nav-button nav-active">
<a class="text-icon center-me-text link-text" href="#Home">
<img draggable="false" class="nav-icon" id="home" src="./images/HOME.svg" width="100" height="100" alt="home icon">
<p>Home</p>
</a>
</li>
<li class="nav-button nav-active">
<a class="text-icon link-text" href="#About">
<img draggable="false" class="nav-icon" id="about" src="./images/Person.svg" width="100" height="100" alt="about icon">
<p>About</p>
</a>
</li>
<li class="nav-button nav-active">
<a class="text-icon link-text" href="#Project">
<img draggable="false" class="nav-icon" id="projects" src="./images/Gear.svg" width="100" height="100" alt="project icon">
<p>Projects</p>
</a>
</li>
<li class="nav-button nav-active">
<a class="text-icon link-text" href="#Contact">
<img draggable="false" class="nav-icon" id="contact" src="./images/Phone.svg" width="100" height="100" alt="contact icon">
<p>Contact</p>
</a>
</li>
<li class="nav-button">
<a class="link-text">
<img draggable="false" class="nav-icon" id="github" src="./images/github.png" width="50" height="50">
</a>
</li>
<li class="nav-button">
<a class="link-text" >
<img draggable="false" class="nav-icon" id="linkedin" src="./images/LinkedIn.png" width="50" height="50">
</a>
</li>
<li class="nav-button">
<a class="link-text">
<img draggable="false" class="nav-icon" id="facebook" src="./images/facebook.png" width="50" height="50">
</a>
</li>
<li class="nav-button">
<a class="link-text">
<img draggable="false" class="nav-icon" id="instagram" src="./images/Instagram.png" width="50" height="50">
</a>
</li>
</ul>
</div>
</nav>
<!-- nav script & style -->
<link rel="stylesheet" href="./CSS/nav.css?v=1" defer>
<script src="./Javascript/nav.js?v=1" defer></script>
<!-- content -->
<div class="content">
<!-- introduction div -->
<section class="Home clip-background " id="Home">
<div class="Intro two-rows">
<span class="width-three-fourth table one-row center center-me padding margin">
<span class="tables two-rows center center-me" id="cosmoboy-rocket-boots">
<span class="table two-rows center center-me" style="padding:10%;">
<p class="text-bigger text-title cosmoTxt1 center-me center-me-txt" ></p>
</span>
<img draggable="false" class=" disable image-big center center-me" src="./images/cosmoboy_rocket_boots1.png" alt="cosmoboy white suit" >
</span>
</span>
</div>
</section>
<!-- home css -->
<link rel="stylesheet" href="./CSS/home.css?v=1" defer>
<!-- about div -->
<section class="About" id="About">
<div class="tech_contain">
<div class="center center-me table">
<div class="overview center center-me table padding margin-top">
<span class="center center-me">
<img draggable="false" id="profile-image" class="disable image-medium" style="border-radius:100%;" alt="author self photo">
</span>
<span class="center center-me center-me-txt table">
<p class="text-medium text-slogan center-me-txt">
Hello I'm Jayson, nice to meet you
</p>
</span>
</div>
<div class="overview center center-me padding margin-top">
<span class="center center-me">
<img draggable="false" src="./images/cosmoboy_1.png" class="disable image cosmoboy" alt="dark vader inspired with three robotic eye">
</span>
<span class="center center-me center-me-txt table">
<p class="text-medium center-me-txt">
I'm a aspiring self-taught software developer and graphic artist
</p>
</span>
</div>
<div class="overview center center-me padding margin-top">
<span class="center center-me">
<img draggable="false" src="./images/cosmoboy-rocket.png" class="disable image cosmoboy" alt="rocket flying in dark sky">
</span>
<span class="center center-me center-me-txt table">
<p class="text-medium center-me-txt">
When it comes to software and art you can count me in<br/>
every aspect of it.
</p>
</span>
</div>
<div class="overview center center-me padding margin-top">
<span class="center center-me">
<img draggable="false" src="./images/cosmoboy-black.png" class="disable image cosmoboy" alt="dark theme cosmoboy flying" >
</span>
<span class="center center-me center-me-txt table">
<p class="text-medium center-me-txt">
Creating things that make impactful to the society<br>
is what I'm striving for
</p>
</span>
</div>
<div class="overview center center-me padding margin-top">
<span class="center center-me">
<img draggable="false" src="./images/laptop-boy.png" class="disable image cosmoboy" alt="programmer avatar">
</span>
<span class="center center-me center-me-txt table">
<p class="text-medium center-me-txt">
So then why choice me to become part of your<br/>
vison and goals
</p>
</span>
</div>
</div>
<!--cosmoboy css-->
<link rel="stylesheet" href="./CSS/cosmoboy.css?v=1" defer>
<div class="overview-list center center-me">
<div class="cosmoboy-icon table center center-me">
<img draggable="false" class="disable center" src="./images/creative-pink.png" alt="icon" width="150" height="150" alt="painting icon">
<p class="text text-caps center center-me-txt" >Unique Creative Ideas</p>
</div>
<div class="cosmoboy-icon table center center-me">
<img draggable="false" class="disable center" src="./images/curiosity.png" alt="icon" width="150" height="150" alt="magnifying icon">
<p class="text text-caps center center-me-txt" >Vigorously Problem Solver</p>
</div>
<div class="cosmoboy-icon table center center-me">
<img draggable="false" class="disable center" src="./images/team-player.png" alt="icon" width="150" height="150" alt="trophy icon">
<p class="text text-caps center center-me-txt" >Competitive Team Player</p>
</div>
<div class="cosmoboy-icon table center center-me">
<img draggable="false" class="disable center" src="./images/tech-savy-colored.png" alt="icon" width="150" height="150" alt="robot icon">
<p class="text text-caps center center-me-txt" >Technology Entheuiast</p>
</div>
<div class="cosmoboy-icon table center center-me">
<img draggable="false" class="disable center" src="./images/critical-thinker-yellow.png" alt="icon" width="150" height="150" alt="light bulb">
<p class="text text-caps center center-me-txt" >Critical Thinker</p>
</div>
<div class="cosmoboy-icon table center center-me">
<img draggable="false" class="disable center" src="./images/self-growth.png" alt="icon" width="150" height="150" alt="stack card icon">
<p class="text text-caps center center-me-txt" >Continous Improvement</p>
</div>
</div>
</div>
</section>
<!--about css -->
<link rel="stylesheet" href="./CSS/about.css?v=1" defer>
<section class="Project center center-me table" id="Project">
<span class="text-medium text-slogan">Projects</span>
<div class="center center-me table width-three-fourth">
<div class="card card-purple center center-me">
<div class="inner-card table">
<span class="img center center-me">
<img draggable="false" class="disable" src="./images/screenshot-greenday.png" alt="icon" style="width:100%; height:100%;" alt="screenshot of green day website">
</span>
<span class="text-small text-catchy text-color-white center-me-txt margin">Greenday Fanpage Website</span>
<span class="text-xsmall text-justify padding project-detail">
A Green Day fan base static web page that created for my school project in college.
This project was one of my website that i was experimenting on understanding of responsive
and dynamic website design.
</span>
<span class="center center-me">
<a class=" button button-gold" href="https://savjaylade84.github.io/GreenDayFan.github.io/" draggable="false" >
visit page
</a>
</span>
</div>
</div>
<div class="card card-purple center center-me">
<div class="inner-card table">
<span class="img center center-me">
<img draggable="false" class="disable" src="./images/screenshot-homepage.png" alt="icon" style="width:100%; height:100%;" alt="screenshot of portfolio website">
</span>
<span class="text-small text-catchy text-color-white center-me-txt margin">Website Portfolio </span>
<span class="text-xsmall text-justify padding project-detail">
Professional portfolio website that showcase my skill and profession for the potential employer or client.
Creating a website that apply all of my knowledge in developing website that is reponsive and one-page.
This website was created during the covid pandemic.
</span>
<span class="center center-me">
<a class=" button button-gold" href="#About" draggable="false" >
view
</a>
</span>
</div>
</div>
<div class="card card-purple project-bottom">
<span class="center">
<p class="text-small"> See More Projects On</p><br>
<a class=" button button-gold" id="github" draggable="false" >
<span>
<img draggable="false" class="icon" src="./images/github.png" alt="icon" width="16" height="16">
</span>
Github
</a>
</span>
</div>
<div class="card card-purple project-bottom">
<span class="center">
<p class="text-small"> See My NFT Arts On</p><br>
<a class=" button button-gold" id="opensea" draggable="false" >
<span>
<img draggable="false" class="icon" src="./images/opensea.png" alt="icon" width="16" height="16">
</span>
Opensea
</a>
</span>
</div>
</div>
</section>
<!--project css-->
<link rel="stylesheet" href="./CSS/project.css?v=1" defer>
<section class="Contact bg-purple" id="Contact">
<div class="center center-me table">
<span class="center">
<span class="center center-me-txt">
<span class="center center-me contact-margin">
<span style="text-align: left;" class="text-color-white">
<span class="card contact-margin">
<span class="center">
<p class="text-small contact-margin-small" >Follow Me On</p>
<a class=" button button-gold" id="instagram" draggable="false" >
<span class="contact-button-icon">
<img draggable="false" class="icon" src="./images/Instagram.png" alt="icon" width="16" height="16" alt="instagram icon">
</span>
Instagram
</a>
</span>
</span>
<span class="contact-margin">
<span class="center">
<p class="text-small contact-margin-small" >Get Resume On</p>
<a class=" button button-gold" href="./Resume-CV/John_Jayson_De_Leon_Resume_October_2022.pdf" download="./Resume-CV/John_Jayson_De_Leon_Resume_April_2022.pdf" draggable="false" >download</a>
</span>
</span>
<span class="contact-margin">
<span class="center">
<p class="text-small contact-margin-small">Like My Facebook Page On</p>
<a class=" button button-gold" id="facebook_page" draggable="false" >Visit Jisun</a>
</span>
</span>
<span class="contact-tables">
<span class="mobile-margin">
<p class="text-small margin">
Contact Me On
</p>
<p class="text-xsmall">
+63-995-718-9101<br/>+63-907-021-8654
</p>
</span>
<span class="mobile-margin">
<p class="text-small margin">
Email Me On
</p>
<p class="text-xsmall">
[email protected]<br/>
</p>
</span>
</span>
</span>
</span>
</span>
</span>
</div>
</section>
<footer>
<p class="text-color-white" > created by <a id="github">savjaylade84</a></p>
</footer>
<!--contact css-->
<link rel="stylesheet" href="./CSS/contact.css?v=1" defer>
</div>
<!-- content script & style -->
<link rel="stylesheet" href="./CSS/content.css?v=1" defer>
<link rel="stylesheet" href="./CSS/footer.css?v=1" defer>
<script src="./Javascript/content.js?v=1" defer></script>
</body>
</html>