-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (207 loc) · 16.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio of Patrick Ancajas, a Computer Science student specializing in Web Development.">
<meta name="keywords" content="Patrick Ancajas, Computer Science, Web Development, Portfolio">
<meta name="author" content="Patrick Ancajas">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#007bff">
<title>Portfolio</title>
<link rel="icon" type="image/png" href="assets/Icon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script defer src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="app" v-cloak>
<!-- This is the Navigation section -->
<nav class="nav">
<ul>
<li><a href="#About" @click="scrollToAbout">About</a></li>
<li><a href="#Experience" @click="scrollToExperience">Experience</a></li>
<li><a href="#Education" @click="scrollToEducation">Education</a></li>
</ul>
</nav>
<!-- This is the Main section -->
<header class="header">
<img id="profile" src="assets/Profile.webp" alt="Picture of Patrick Ancajas"/>
<div>
<h1 class="display-1">Patrick Ancajas</h1>
<p class="display-6">Computer Science Student</p>
</div>
</header>
<!-- This is the About section -->
<main id="about">
<hr>
<h2 class="display-6"><strong>About me!</strong></h2>
<p class="sectionText"><span class="indent"></span>As a freshman computer science student striving to become a full-stack web developer, I'm actively engaged in mastering HTML, CSS, JavaScript, and utilizing tools like Bootstrap and Vue to create responsive webpages to improve my skills!<br><br><span class="indent"></span>I'm also dedicated to gaining proficiency in C and Python to enhance my academic pursuits. My strengths lie in problem solving and critical thinking, and I have an enduring enthusiasm for learning and coding. Recognizing the irreplaceable value of time, I am committed to making the most of every moment.</p>
</main>
<!-- This is the Experience section -->
<section id="experience">
<hr>
<h2 class="display-6"><strong>My Experience!</strong></h2>
<ul>
<li id="project1" data-bs-toggle="collapse" href="#project1Details">
<h3><strong>Portfolio</strong> (2023 - 2024)</h3>
<p>A project made using the front-end development stack with Bootstrap and Vue.</p>
<div id="project1Details" class="collapse">
<p><br><em>HTML</em> forms the structural foundation, providing the layout and content structure. <em>CSS</em> adds styling and aesthetics, ensuring a visually pleasing presentation. <em>JavaScript</em> brings interactivity to the portfolio, making it engaging and dynamic.</p>
<p><br>The <em>Bootstrap</em> library plays a crucial role by offering responsive design components and pre-built styles. This ensures that the portfolio looks and functions seamlessly across different devices and screen sizes.<br><br></p>
<p><em>Vue.js</em> takes interactivity to the next level. It enables real-time updates and dynamic features, enhancing the user experience. With Vue.js, I can create interactive elements like modals, accordions, and dynamic content loading, making the portfolio both intuitive and efficient.</p>
</div>
</li>
<li id="project2" data-bs-toggle="collapse" href="#project2Details">
<h3><strong>Addventure</strong> (2023 - 2024)</h3>
<p>A capstone project designed to be an educational game made using HTML, CSS and JS.</p>
<div id="project2Details" class="collapse">
<p><br>I created a capstone project which is an educational game called <em>Addventure</em> that teaches grade 1 math skills. The game is made using HTML, CSS, and JavaScript, and it covers a wide range of grade 1 math topics but mostly focuses in addition. The game is designed to be challenging but achievable, and players are rewarded for their correct answers with positive feedback and fun animations.</p>
</div>
</li>
<li id="project3" data-bs-toggle="collapse" href="#project3Details">
<h3><strong>FARO</strong> (2023 - 2024)</h3>
<p>A fantasy adventure game created using HTML, CSS and JavaScript.</p>
<div id="project3Details" class="collapse">
<p><br>In this simple yet engaging fantasy adventure game created with HTML, CSS, and JavaScript, players find themselves in a world teeming with fictional monsters. Assuming the role of a valiant knight, they engage in turn-based battles. As players progress through the story, they must strategically manage their limited resources, including healing potions and escape ropes to overcome challenges and add depth to this simple yet immersive adventure.</p>
</div>
</li>
</ul>
<p class="sectionText"><span class="indent"></span>Through my life experiences, I've acquired a wealth of skills and honed my abilities, which have significantly shaped me as an individual. The challenges I've faced and the triumphs I've celebrated have not only equipped me with knowledge but also fostered resilience and adaptability. This journey of learning and growth has been instrumental in defining who I am today.</p>
</section>
<!-- This is the Education section -->
<section id="education">
<hr>
<h2 class="display-6"><strong>My Education!</strong></h2>
<ul class="list-inline" id="education-list">
<!-- This is the first school modal -->
<li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school1Modal" id="school1">
<div class="schoolMain">
<h3 id="school1Title"><strong>Senior Highschool</strong></h3>
<p>San Diego Parochial School</p>
</div>
<div class="modal fade" id="school1Modal" tabindex="-1" aria-labelledby="school1ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content" id="school3ModalContent">
<div class="modal-header">
<h1 class="modal-title" id="school1ModalLabel">Senior Highschool</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h1 class="display-6"><strong>San Diego Parochial School</strong><br><br></h1>
<ul class="modalList">
<p class="fs-4"><strong>With High Honors</strong></p>
<p>Achieved an average grade of 95 with no grade below 85 in any subject during grade 11.<br><br></p>
<p class="fs-4"><strong>With Honors</strong></p>
<p>Achieved an average grade of 92 with no grade below 85 in any subject during grade 12.<br><br></p>
<p class="fs-4"><strong>Best in Mathematics</strong></p>
<p>Achieved an average grade of 97 in Mathematics and was awarded the best in math award during grade 12.<br><br></p>
<p class="fs-4"><strong>Math Society President</strong></p>
<p>Elected as the President of the Math Club called Math Society during grade 12.<br><br></p>
</ul>
</div>
<div class="modal-footer">
<blockquote class="blockquote text-center">
<p class="mb-0">"The youth is the hope of our future."</p>
<footer class="blockquote-footer"><cite title="Source Title">Jose Rizal</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</li>
<!-- This is the second school modal -->
<li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school2Modal" id="school2">
<div class="schoolMain">
<h3 id="school2Title"><strong>Highschool</strong></h3>
<p>Obando National Highschool</p>
</div>
<div class="modal fade" id="school2Modal" tabindex="-1" aria-labelledby="school2ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content" id="school3ModalContent">
<div class="modal-header">
<h1 class="modal-title" id="school2ModalLabel">Highschool</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h1 class="display-6"><strong>Obando National Highschool</strong><br><br></h1>
<ul class="modalList">
<p class="fs-4"><strong>With Honors</strong></p>
<p>Achieved an average grade of 90 with no grade below 85 in any subject during grade 10.<br><br></p>
<p>Achieved an average grade of 92 with no grade below 85 in any subject during grade 9.<br><br></p>
<p>Achieved an average grade of 93 with no grade below 85 in any subject during grade 8.<br><br></p>
<p>Achieved an average grade of 92 with no grade below 85 in any subject during grade 7.<br><br></p>
<p class="fs-4"><strong>Best in Mathematics</strong></p>
<p>Achieved an average grade of 96 in Mathematics and was awarded the best in math award during grade 10.<br><br></p>
<p class="fs-4"><strong>Math Club President</strong></p>
<p>Elected as the President of the Math Club during grade 10.<br><br></p>
<p class="fs-4"><strong>Math Club Auditor</strong></p>
<p>Elected as the Auditor of the Math Club during grade 9.<br><br></p>
<p class="fs-4"><strong>Contest Participant</strong></p>
<p>Participated at multiple math related contest at division level.<br><br></p>
<p class="fs-4"><strong>Student Government Officer</strong></p>
<p>Elected as an officer of the Student Government during grade 7 and 8.<br><br></p>
</ul>
</div>
<div class="modal-footer">
<blockquote class="blockquote text-center">
<p class="mb-0">"In the chaos of adolescence, life finds its rhythm."</p>
<footer class="blockquote-footer"><cite title="Source Title">Terri Apter</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</li>
<!-- This is the third school modal -->
<li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school3Modal" id="school3">
<div class="schoolMain">
<h3 id="school3Title"><strong>Elementary</strong></h3>
<p>Obando Central School</p>
</div>
<div class="modal fade" id="school3Modal" tabindex="-1" aria-labelledby="school3ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content" id="school3ModalContent">
<div class="modal-header">
<h1 class="modal-title" id="school3ModalLabel">Elementary</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h1 class="display-6"><strong>Obando Central School</strong><br><br></h1>
<ul class="modalList">
<p class="fs-4"><strong>Academic Achiever</strong></p>
<p>Achieved an average grade of more than 90 during grade 1 to 6 and became part of the top students.<br><br></p>
<p class="fs-4"><strong>Contest Participant</strong></p>
<p>Participated at multiple math related contest at division level.<br><br></p>
<p class="fs-4"><strong>Math Club President</strong></p>
<p>Elected as the President of the Math Club during grade 6.<br><br></p>
</ul>
</div>
<div class="modal-footer">
<blockquote class="blockquote text-center">
<p class="mb-0">"Childhood is where the seeds of dreams are planted."</p>
<footer class="blockquote-footer"><cite title="Source Title">Unknown</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</li>
</ul>
<p class="sectionText"><span class="indent"></span>Education has been instrumental in cultivating my skills and abilities and has played a crucial role in shaping my character. The knowledge and insights gained through formal learning have not only equipped me with a diverse set of tools but have also nurtured critical thinking and problem-solving skills. The educational journey has contributed significantly to my personal development, providing me with a strong foundation for growth and success.</p>
</section>
<!-- This is the footer section -->
<footer>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://www.facebook.com/profile.php?id=100082552025420&mibextid=2JQ9oc">Facebook</a></li>
<li class="list-inline-item"><p>|</p></li>
<li class="list-inline-item"><a id="Github" href="https://github.com/JohnPatrickAncajas">Github</a></li>
<li class="list-inline-item"><p>|</p></li>
<li class="list-inline-item"><a id="LinkedIn" href="https://www.linkedin.com/in/john-patrick-ancajas-2b808828a">LinkedIn</a></li>
</ul>
</footer>
</div>
</body>
</html>