diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md new file mode 100644 index 0000000..713a36d --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# web-portfolio + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2eb156c --- /dev/null +++ b/index.html @@ -0,0 +1,174 @@ + + + + + + + + + + + + + + + + + + + + + Euge Kyle: Creativity and Technology + + + + +
+ + + +
+ +
+
+

Who am I?

+

+ Hi! I’m Euge Kyle Fabella, a passionate IT student currently pursuing a Bachelor of Science in Information Technology at + STI Colleges of Santa Rosa City. I have a growing interest in IT support, system administration, and development, and + I am eager to expand my knowledge and skills in these areas. With a strong dedication to learning and problem-solving, + I’m excited to explore the world of technology and contribute to meaningful solutions in the future. +

+
+
+ + +
+ picture-of-me +
+ + +
+

Certificates

+
+ + +
+
+ internet-picture +

Euge Kyle Fabella

+ +
+
+ + +
+

+ "The only way to do great work is to love what you do." +
+ — Steve Jobs +

+
+ + +
+

+ Tech Stack +

+
+ java-icon + c-sharp-icon + python-icon + html-icon + css-icon + js-icon + +
+
+ + +
+

+ Skills +

+
+ technical-skills-icon +
+
+ + +
+

+ More +

+
+ + +
+

+ Education +

+
+ + +
+

+ Professional References +

+
+
+
+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/misc/noted-from-claude.rtf b/misc/noted-from-claude.rtf new file mode 100644 index 0000000..c816a38 --- /dev/null +++ b/misc/noted-from-claude.rtf @@ -0,0 +1,150 @@ +{\rtf1\ansi\deff3\adeflang1025 +{\fonttbl{\f0\froman\fprq2\fcharset0 Times New Roman;}{\f1\froman\fprq2\fcharset2 Symbol;}{\f2\fswiss\fprq2\fcharset0 Arial;}{\f3\froman\fprq2\fcharset0 Liberation Serif{\*\falt Times New Roman};}{\f4\fnil\fprq0\fcharset2 OpenSymbol{\*\falt Arial Unicode MS};}{\f5\fswiss\fprq2\fcharset0 Liberation Sans{\*\falt Arial};}{\f6\fnil\fprq2\fcharset0 Noto Sans CJK SC;}{\f7\fswiss\fprq0\fcharset128 Noto Sans Devanagari;}{\f8\fnil\fprq2\fcharset0 Noto Sans Devanagari;}} +{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;\red192\green192\blue192;} +{\stylesheet{\s0\snext0\rtlch\af8\afs24\alang1081 \ltrch\lang1033\langfe2052\hich\af3\loch\widctlpar\hyphpar0\ltrpar\cf0\f3\fs24\lang1033\kerning1\dbch\af9\langfe2052 Normal;} +{\*\cs15\snext15\rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 Bullets;} +{\*\cs16\snext16 Numbering Symbols;} +{\s17\sbasedon0\snext18\rtlch\af8\afs28 \ltrch\hich\af5\loch\sb240\sa120\keepn\f5\fs28\dbch\af6 Heading;} +{\s18\sbasedon0\snext18\loch\sl276\slmult1\sb0\sa140 Body Text;} +{\s19\sbasedon18\snext19\rtlch\af7 \ltrch\loch\sl276\slmult1\sb0\sa140 List;} +{\s20\sbasedon0\snext20\rtlch\af7\afs24\ai \ltrch\loch\sb120\sa120\noline\fs24\i Caption;} +{\s21\sbasedon0\snext21\rtlch\af7 \ltrch\loch\noline Index;} +}{\*\listtable{\list\listtemplateid1 +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li720} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li1080} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li1440} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li1800} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li2160} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li2520} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li2880} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li3240} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li3600}\listid1} +{\list\listtemplateid2 +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'00.;}{\levelnumbers\'01;}\fi-283\li709} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'01.;}{\levelnumbers\'01;}\fi-283\li1418} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'02.;}{\levelnumbers\'01;}\fi-283\li2127} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'03.;}{\levelnumbers\'01;}\fi-283\li2836} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'04.;}{\levelnumbers\'01;}\fi-283\li3545} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'05.;}{\levelnumbers\'01;}\fi-283\li4254} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'06.;}{\levelnumbers\'01;}\fi-283\li4963} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'07.;}{\levelnumbers\'01;}\fi-283\li5672} +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'08.;}{\levelnumbers\'01;}\fi-283\li6381}\listid2} +{\list\listtemplateid3 +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li720} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li1080} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li1440} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li1800} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li2160} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li2520} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li2880} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9702 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li3240} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u9642 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-360\li3600}\listid3} +{\list\listtemplateid4 +{\listlevel\levelnfc0\leveljc0\levelstartat1\levelfollow0{\leveltext \'02\'00.;}{\levelnumbers\'01;}\fi-283\li709} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li1418} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li2127} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li2836} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li3545} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li4254} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li4963} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li5672} +{\listlevel\levelnfc23\leveljc0\levelstartat1\levelfollow0{\leveltext \'01\u8226 ?;}{\levelnumbers;}\f4\rtlch\af4 \ltrch\loch\fi-283\li6381}\listid4} +{\list\listtemplateid5 +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0} +{\listlevel\levelnfc255\leveljc0\levelstartat1\levelfollow2{\leveltext \'00;}{\levelnumbers;}\fi0\li0}\listid5} +}{\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}{\listoverride\listid2\listoverridecount0\ls2}{\listoverride\listid3\listoverridecount0\ls3}{\listoverride\listid4\listoverridecount0\ls4}{\listoverride\listid5\listoverridecount0\ls5}}{\*\generator LibreOffice/24.2.5.2$Linux_X86_64 LibreOffice_project/420$Build-2}{\info{\creatim\yr2024\mo8\dy11\hr17\min43}{\revtim\yr2024\mo8\dy11\hr17\min44}{\printim\yr0\mo0\dy0\hr0\min0}}{\*\userprops}\deftab709 +\hyphauto1\viewscale100\formshade\nobrkwrptbl\paperh15840\paperw12240\margl1134\margr1134\margt1134\margb1134\sectd\sbknone\sftnnar\saftnnrlc\sectunlocked1\pgwsxn12240\pghsxn15840\marglsxn1134\margrsxn1134\margtsxn1134\margbsxn1134\ftnbj\ftnstart1\ftnrstcont\ftnnar\aenddoc\aftnrstcont\aftnstart1\aftnnrlc +{\*\ftnsep\chftnsep}\pgndec\pard\plain \s0\rtlch\af8\afs24\alang1081 \ltrch\lang1033\langfe2052\hich\af3\loch\widctlpar\hyphpar0\ltrpar\cf0\f3\fs24\lang1033\kerning1\dbch\af9\langfe2052{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl0\ls1 \fi-360\li720\lin720\ql\ltrpar{\rtlch\ab \ltrch\loch\b\loch +in resume IT, what is tech stack} +\par \pard\plain \s0\rtlch\af8\afs24\alang1081 \ltrch\lang1033\langfe2052\hich\af3\loch\widctlpar\hyphpar0\ltrpar\cf0\f3\fs24\lang1033\kerning1\dbch\af9\langfe2052\ql\ltrpar{\loch +In the context of a resume for an IT (Information Technology) role, the "tech stack" refers to the specific technologies, programming languages, frameworks, tools, and platforms that the individual has experience with or is proficient in.} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140\ql\ltrpar{\loch +The tech stack section of an IT resume is an important part, as it showcases the candidate's technical skills and expertise, which are crucial for many IT-related positions.} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140\ql\ltrpar{\loch +Some common examples of what might be included in the tech stack section of an IT resume include:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 1.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Programming languages: Java, Python, C++, JavaScript, PHP, Ruby, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 2.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Frameworks and libraries: React, Angular, Vue.js, .NET, Spring, Django, Flask, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 3.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Databases: SQL, MySQL, PostgreSQL, MongoDB, Oracle, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 4.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Operating systems: Windows, Linux, macOS, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 5.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Cloud platforms: AWS, Microsoft Azure, Google Cloud, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 6.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +DevOps tools: Git, Docker, Kubernetes, Jenkins, Ansible, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 7.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Networking: TCP/IP, Cisco, Juniper, firewalls, VPNs, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 8.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Cybersecurity: Firewalls, intrusion detection/prevention, encryption, penetration testing, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 9.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\sb0\sa0\ltrpar{\loch +Project management tools: Jira, Trello, Asana, Confluence, etc. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 10.\tab}\ilvl0\ls2 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\ltrpar{\loch +Other relevant software, tools, or technologies specific to the IT domain. } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140\ql\ltrpar{\loch +The tech stack section should be tailored to the specific job requirements and highlight the candidate's most relevant and in-demand technical skills. It's important to strike a balance between providing a comprehensive list and focusing on the most important and applicable technologies.} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl0\ls3 \fi-360\li720\lin720\ql\ltrpar{\loch +then what do we put in skills tab} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140\ql\ltrpar{\loch +In the skills section of an IT resume, you would typically include a broader range of skills beyond just the technical "tech stack" items. The skills section is an opportunity to showcase a wider range of competencies that are relevant to the IT role you are applying for.} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140\ql\ltrpar{\loch +Some common examples of what might be included in the skills section of an IT resume include:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 1.\tab}\ilvl0\ls4 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\ltrpar{\loch +Technical skills:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Programming languages, frameworks, and tools } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Database management } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Networking and system administration } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Cybersecurity and information assurance } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Software development methodologies (e.g., Agile, Waterfall) } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Project management and collaboration tools } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 2.\tab}\ilvl0\ls4 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\ltrpar{\loch +Problem-solving and analytical skills:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Critical thinking and troubleshooting } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Attention to detail } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Ability to analyze complex problems and develop solutions } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 3.\tab}\ilvl0\ls4 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\ltrpar{\loch +Communication and interpersonal skills:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Effective written and verbal communication } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Collaboration and teamwork } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Customer service and client interaction } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Presentation and training skills } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 4.\tab}\ilvl0\ls4 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\ltrpar{\loch +Project management and organizational skills:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Time management and multitasking } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Task prioritization and deadline management } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Documentation and record-keeping } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain 5.\tab}\ilvl0\ls4 \fi-283\li0\lin0\ql\tx709\fi-283\li709\lin709\ltrpar{\loch +Continuous learning and adaptability:} +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Willingness to learn new technologies and skills } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\sb0\sa0\ltrpar{\loch +Staying up-to-date with industry trends and best practices } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140{\listtext\pard\plain \rtlch\af4 \ltrch\hich\af4\loch\f4\dbch\af4 \u8226\'95\tab}\ilvl1\ls4 \fi-283\li0\lin0\ql\tx1418\fi-283\li1418\lin1418\ltrpar{\loch +Adaptability to changing environments and requirements } +\par \pard\plain \s18\loch\sl276\slmult1\sb0\sa140\ql\sb0\sa140\ltrpar{\loch +The skills section should be tailored to the specific job requirements and highlight the candidate's most relevant and transferable skills, both technical and non-technical. It's important to strike a balance between providing a comprehensive list and focusing on the most important and applicable skills.} +\par } \ No newline at end of file diff --git a/misc/reference.png b/misc/reference.png new file mode 100644 index 0000000..66e2b07 Binary files /dev/null and b/misc/reference.png differ diff --git a/resources/IDEs and Code Editors/visual studio code.png b/resources/IDEs and Code Editors/visual studio code.png new file mode 100644 index 0000000..e8b8721 Binary files /dev/null and b/resources/IDEs and Code Editors/visual studio code.png differ diff --git a/resources/IDEs and Code Editors/visual studio.png b/resources/IDEs and Code Editors/visual studio.png new file mode 100644 index 0000000..cb5205e Binary files /dev/null and b/resources/IDEs and Code Editors/visual studio.png differ diff --git a/resources/Multimedia Applications/csp.png b/resources/Multimedia Applications/csp.png new file mode 100644 index 0000000..f37ccf3 Binary files /dev/null and b/resources/Multimedia Applications/csp.png differ diff --git a/resources/Multimedia Applications/davinci.png b/resources/Multimedia Applications/davinci.png new file mode 100644 index 0000000..565cb5f Binary files /dev/null and b/resources/Multimedia Applications/davinci.png differ diff --git a/resources/Multimedia Applications/figma.png b/resources/Multimedia Applications/figma.png new file mode 100644 index 0000000..42b30ba Binary files /dev/null and b/resources/Multimedia Applications/figma.png differ diff --git a/resources/Multimedia Applications/illustrator.png b/resources/Multimedia Applications/illustrator.png new file mode 100644 index 0000000..6d4a986 Binary files /dev/null and b/resources/Multimedia Applications/illustrator.png differ diff --git a/resources/Multimedia Applications/lightroom.png b/resources/Multimedia Applications/lightroom.png new file mode 100644 index 0000000..9ab536f Binary files /dev/null and b/resources/Multimedia Applications/lightroom.png differ diff --git a/resources/Multimedia Applications/photoshop.png b/resources/Multimedia Applications/photoshop.png new file mode 100644 index 0000000..2e81a5a Binary files /dev/null and b/resources/Multimedia Applications/photoshop.png differ diff --git a/resources/Multimedia Applications/premiere.png b/resources/Multimedia Applications/premiere.png new file mode 100644 index 0000000..2d1db99 Binary files /dev/null and b/resources/Multimedia Applications/premiere.png differ diff --git a/resources/Network Simulators and Technologies/cisco packet tracer.png b/resources/Network Simulators and Technologies/cisco packet tracer.png new file mode 100644 index 0000000..a28c464 Binary files /dev/null and b/resources/Network Simulators and Technologies/cisco packet tracer.png differ diff --git a/resources/Network Simulators and Technologies/eNSP.png b/resources/Network Simulators and Technologies/eNSP.png new file mode 100644 index 0000000..65b574f Binary files /dev/null and b/resources/Network Simulators and Technologies/eNSP.png differ diff --git a/resources/Network Simulators and Technologies/huawei cloud.png b/resources/Network Simulators and Technologies/huawei cloud.png new file mode 100644 index 0000000..177472a Binary files /dev/null and b/resources/Network Simulators and Technologies/huawei cloud.png differ diff --git a/resources/Operating Systems/fedora.png b/resources/Operating Systems/fedora.png new file mode 100644 index 0000000..c8fd75b Binary files /dev/null and b/resources/Operating Systems/fedora.png differ diff --git a/resources/Operating Systems/macOS.png b/resources/Operating Systems/macOS.png new file mode 100644 index 0000000..9cd10ad Binary files /dev/null and b/resources/Operating Systems/macOS.png differ diff --git a/resources/Operating Systems/ubuntu.png b/resources/Operating Systems/ubuntu.png new file mode 100644 index 0000000..5ef25b7 Binary files /dev/null and b/resources/Operating Systems/ubuntu.png differ diff --git a/resources/Operating Systems/windows.png b/resources/Operating Systems/windows.png new file mode 100644 index 0000000..a518250 Binary files /dev/null and b/resources/Operating Systems/windows.png differ diff --git a/resources/Poppins-Font/Poppins-Black.ttf b/resources/Poppins-Font/Poppins-Black.ttf new file mode 100644 index 0000000..71c0f99 Binary files /dev/null and b/resources/Poppins-Font/Poppins-Black.ttf differ diff --git a/resources/Poppins-Font/Poppins-BlackItalic.ttf b/resources/Poppins-Font/Poppins-BlackItalic.ttf new file mode 100644 index 0000000..7aeb58b Binary files /dev/null and b/resources/Poppins-Font/Poppins-BlackItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-Bold.ttf b/resources/Poppins-Font/Poppins-Bold.ttf new file mode 100644 index 0000000..00559ee Binary files /dev/null and b/resources/Poppins-Font/Poppins-Bold.ttf differ diff --git a/resources/Poppins-Font/Poppins-BoldItalic.ttf b/resources/Poppins-Font/Poppins-BoldItalic.ttf new file mode 100644 index 0000000..e61e8e8 Binary files /dev/null and b/resources/Poppins-Font/Poppins-BoldItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-ExtraBold.ttf b/resources/Poppins-Font/Poppins-ExtraBold.ttf new file mode 100644 index 0000000..df70936 Binary files /dev/null and b/resources/Poppins-Font/Poppins-ExtraBold.ttf differ diff --git a/resources/Poppins-Font/Poppins-ExtraBoldItalic.ttf b/resources/Poppins-Font/Poppins-ExtraBoldItalic.ttf new file mode 100644 index 0000000..14d2b37 Binary files /dev/null and b/resources/Poppins-Font/Poppins-ExtraBoldItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-ExtraLight.ttf b/resources/Poppins-Font/Poppins-ExtraLight.ttf new file mode 100644 index 0000000..e76ec69 Binary files /dev/null and b/resources/Poppins-Font/Poppins-ExtraLight.ttf differ diff --git a/resources/Poppins-Font/Poppins-ExtraLightItalic.ttf b/resources/Poppins-Font/Poppins-ExtraLightItalic.ttf new file mode 100644 index 0000000..89513d9 Binary files /dev/null and b/resources/Poppins-Font/Poppins-ExtraLightItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-Italic.ttf b/resources/Poppins-Font/Poppins-Italic.ttf new file mode 100644 index 0000000..12b7b3c Binary files /dev/null and b/resources/Poppins-Font/Poppins-Italic.ttf differ diff --git a/resources/Poppins-Font/Poppins-Light.ttf b/resources/Poppins-Font/Poppins-Light.ttf new file mode 100644 index 0000000..bc36bcc Binary files /dev/null and b/resources/Poppins-Font/Poppins-Light.ttf differ diff --git a/resources/Poppins-Font/Poppins-LightItalic.ttf b/resources/Poppins-Font/Poppins-LightItalic.ttf new file mode 100644 index 0000000..9e70be6 Binary files /dev/null and b/resources/Poppins-Font/Poppins-LightItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-Medium.ttf b/resources/Poppins-Font/Poppins-Medium.ttf new file mode 100644 index 0000000..6bcdcc2 Binary files /dev/null and b/resources/Poppins-Font/Poppins-Medium.ttf differ diff --git a/resources/Poppins-Font/Poppins-MediumItalic.ttf b/resources/Poppins-Font/Poppins-MediumItalic.ttf new file mode 100644 index 0000000..be67410 Binary files /dev/null and b/resources/Poppins-Font/Poppins-MediumItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-Regular.ttf b/resources/Poppins-Font/Poppins-Regular.ttf new file mode 100644 index 0000000..9f0c71b Binary files /dev/null and b/resources/Poppins-Font/Poppins-Regular.ttf differ diff --git a/resources/Poppins-Font/Poppins-SemiBold.ttf b/resources/Poppins-Font/Poppins-SemiBold.ttf new file mode 100644 index 0000000..74c726e Binary files /dev/null and b/resources/Poppins-Font/Poppins-SemiBold.ttf differ diff --git a/resources/Poppins-Font/Poppins-SemiBoldItalic.ttf b/resources/Poppins-Font/Poppins-SemiBoldItalic.ttf new file mode 100644 index 0000000..3e6c942 Binary files /dev/null and b/resources/Poppins-Font/Poppins-SemiBoldItalic.ttf differ diff --git a/resources/Poppins-Font/Poppins-Thin.ttf b/resources/Poppins-Font/Poppins-Thin.ttf new file mode 100644 index 0000000..03e7366 Binary files /dev/null and b/resources/Poppins-Font/Poppins-Thin.ttf differ diff --git a/resources/Poppins-Font/Poppins-ThinItalic.ttf b/resources/Poppins-Font/Poppins-ThinItalic.ttf new file mode 100644 index 0000000..e26db5d Binary files /dev/null and b/resources/Poppins-Font/Poppins-ThinItalic.ttf differ diff --git a/resources/Productivity Suite and Project Managing/archimate.png b/resources/Productivity Suite and Project Managing/archimate.png new file mode 100644 index 0000000..276d269 Binary files /dev/null and b/resources/Productivity Suite and Project Managing/archimate.png differ diff --git a/resources/Productivity Suite and Project Managing/excel.png b/resources/Productivity Suite and Project Managing/excel.png new file mode 100644 index 0000000..b436730 Binary files /dev/null and b/resources/Productivity Suite and Project Managing/excel.png differ diff --git a/resources/Productivity Suite and Project Managing/onedrive.png b/resources/Productivity Suite and Project Managing/onedrive.png new file mode 100644 index 0000000..729f0fa Binary files /dev/null and b/resources/Productivity Suite and Project Managing/onedrive.png differ diff --git a/resources/Productivity Suite and Project Managing/outlook.png b/resources/Productivity Suite and Project Managing/outlook.png new file mode 100644 index 0000000..4c32b68 Binary files /dev/null and b/resources/Productivity Suite and Project Managing/outlook.png differ diff --git a/resources/Productivity Suite and Project Managing/powerpoint.png b/resources/Productivity Suite and Project Managing/powerpoint.png new file mode 100644 index 0000000..4afe883 Binary files /dev/null and b/resources/Productivity Suite and Project Managing/powerpoint.png differ diff --git a/resources/Productivity Suite and Project Managing/teams.png b/resources/Productivity Suite and Project Managing/teams.png new file mode 100644 index 0000000..2e7ecb0 Binary files /dev/null and b/resources/Productivity Suite and Project Managing/teams.png differ diff --git a/resources/Productivity Suite and Project Managing/word.png b/resources/Productivity Suite and Project Managing/word.png new file mode 100644 index 0000000..9fdcb26 Binary files /dev/null and b/resources/Productivity Suite and Project Managing/word.png differ diff --git a/resources/Programming Languages and Database/c-sharp-icon.png b/resources/Programming Languages and Database/c-sharp-icon.png new file mode 100644 index 0000000..62b08ca Binary files /dev/null and b/resources/Programming Languages and Database/c-sharp-icon.png differ diff --git a/resources/Programming Languages and Database/java-icon.png b/resources/Programming Languages and Database/java-icon.png new file mode 100644 index 0000000..b9425ad Binary files /dev/null and b/resources/Programming Languages and Database/java-icon.png differ diff --git a/resources/Programming Languages and Database/mssql.png b/resources/Programming Languages and Database/mssql.png new file mode 100644 index 0000000..a62cf5c Binary files /dev/null and b/resources/Programming Languages and Database/mssql.png differ diff --git a/resources/Programming Languages and Database/python-icon.png b/resources/Programming Languages and Database/python-icon.png new file mode 100644 index 0000000..4846565 Binary files /dev/null and b/resources/Programming Languages and Database/python-icon.png differ diff --git a/resources/Skills/critical thinking.png b/resources/Skills/critical thinking.png new file mode 100644 index 0000000..5f8352c Binary files /dev/null and b/resources/Skills/critical thinking.png differ diff --git a/resources/Web Systems and Technologies/css-icon.icon b/resources/Web Systems and Technologies/css-icon.icon new file mode 100644 index 0000000..782fefd Binary files /dev/null and b/resources/Web Systems and Technologies/css-icon.icon differ diff --git a/resources/Web Systems and Technologies/html.png b/resources/Web Systems and Technologies/html.png new file mode 100644 index 0000000..6c848e1 Binary files /dev/null and b/resources/Web Systems and Technologies/html.png differ diff --git a/resources/Web Systems and Technologies/js-icon.png b/resources/Web Systems and Technologies/js-icon.png new file mode 100644 index 0000000..1a9d492 Binary files /dev/null and b/resources/Web Systems and Technologies/js-icon.png differ diff --git a/resources/arrow.png b/resources/arrow.png new file mode 100644 index 0000000..985879b Binary files /dev/null and b/resources/arrow.png differ diff --git a/resources/certificates/java-foundations-img.png b/resources/certificates/java-foundations-img.png new file mode 100644 index 0000000..669b1fe Binary files /dev/null and b/resources/certificates/java-foundations-img.png differ diff --git a/resources/certificates/system-administration-img.png b/resources/certificates/system-administration-img.png new file mode 100644 index 0000000..29f10d5 Binary files /dev/null and b/resources/certificates/system-administration-img.png differ diff --git a/resources/github-logo.png b/resources/github-logo.png new file mode 100644 index 0000000..64b0b89 Binary files /dev/null and b/resources/github-logo.png differ diff --git a/resources/img-placeholder.png b/resources/img-placeholder.png new file mode 100644 index 0000000..14ec6dd Binary files /dev/null and b/resources/img-placeholder.png differ diff --git a/resources/linkedin-icon.png b/resources/linkedin-icon.png new file mode 100644 index 0000000..44cf353 Binary files /dev/null and b/resources/linkedin-icon.png differ diff --git a/resources/mcl.png b/resources/mcl.png new file mode 100644 index 0000000..23e8e51 Binary files /dev/null and b/resources/mcl.png differ diff --git a/resources/picture-of-me.jpg b/resources/picture-of-me.jpg new file mode 100644 index 0000000..70946d0 Binary files /dev/null and b/resources/picture-of-me.jpg differ diff --git a/resources/pictures/1.jpeg b/resources/pictures/1.jpeg new file mode 100644 index 0000000..3d9c603 Binary files /dev/null and b/resources/pictures/1.jpeg differ diff --git a/resources/pictures/2.jpeg b/resources/pictures/2.jpeg new file mode 100644 index 0000000..df121ba Binary files /dev/null and b/resources/pictures/2.jpeg differ diff --git a/resources/pictures/3.png b/resources/pictures/3.png new file mode 100644 index 0000000..6d90f49 Binary files /dev/null and b/resources/pictures/3.png differ diff --git a/resources/pictures/4.jpeg b/resources/pictures/4.jpeg new file mode 100644 index 0000000..d52b1ad Binary files /dev/null and b/resources/pictures/4.jpeg differ diff --git a/resources/pictures/5.jpeg b/resources/pictures/5.jpeg new file mode 100644 index 0000000..e899f72 Binary files /dev/null and b/resources/pictures/5.jpeg differ diff --git a/resources/pictures/6.jpeg b/resources/pictures/6.jpeg new file mode 100644 index 0000000..f9b5a8b Binary files /dev/null and b/resources/pictures/6.jpeg differ diff --git a/resources/pictures/7.jpeg b/resources/pictures/7.jpeg new file mode 100644 index 0000000..bb07242 Binary files /dev/null and b/resources/pictures/7.jpeg differ diff --git a/resources/pictures/8.jpeg b/resources/pictures/8.jpeg new file mode 100644 index 0000000..695f47e Binary files /dev/null and b/resources/pictures/8.jpeg differ diff --git a/resources/star.png b/resources/star.png new file mode 100644 index 0000000..53b800f Binary files /dev/null and b/resources/star.png differ diff --git a/resources/sti.jpg b/resources/sti.jpg new file mode 100644 index 0000000..10d6693 Binary files /dev/null and b/resources/sti.jpg differ diff --git a/scripts/ExpandedTilesContents.js b/scripts/ExpandedTilesContents.js new file mode 100644 index 0000000..3159bfb --- /dev/null +++ b/scripts/ExpandedTilesContents.js @@ -0,0 +1,683 @@ +// init variables +const aboutMeDivContent = +` +

+ Who am I? +

+

+ Hi! I’m Euge Kyle Fabella, a passionate IT student currently pursuing a Bachelor of Science in Information Technology at + STI Colleges of Santa Rosa City. I have a growing interest in IT support, system administration, and development, and + I am eager to expand my knowledge and skills in these areas. With a strong dedication to learning and problem-solving, + I’m excited to explore the world of technology and contribute to meaningful solutions in the future. +

+

+ More about Me: +

+

+

+

+`; + +const pictureDivContent = +` +

+ Hello! +

+
+
+ 1 + 2 + 3 + 4 + +
+
+ +
+
+ +
+
+ + +`; + +// Recheck this one. +const certificatesDivContent = +` +

+ Certifcates +

+ +
+
+

+ System Administration +

+ system-administration-img +
+ +
+

+ Java Foundations +

+ java-foundations-img +
+ +
+

+ Obtaining more certificates... +

+
+
+ + +`; + +// Recheck this one. +const educationDivContent = +` +

+ My Education +

+ +
+
+

College

+
+
+ 2 +
+
+

STI College of Santa Rosa City

+ Graduated in the batch 2024-2025 with Bachelors of Science in Information Technology +
+
+ + +`; + +const techStackDivContent = +` +

+ Tech Stack +

+ +
+ +
+

+ IDEs, Code Editors, and Developer Platform +

+

+ In developing, the compiler I use is Microsoft Visual Studio, known for its great features and + compatibility with the Windows operating system. With the integration of the C# programming + language and MSSQL as its database, developing applications becomes much more productive. As + for code editing, I use Microsoft Visual Studio Code, a powerful code editing software that + suits all my needs; from Java to Python, coding and scripting becomes really efficient. For my + developer platform, I use GitHub for version control, uploading my repositories, and collaborating + with other developers. +

+
+ visual-studio-code-icon + visual-studio-icon + github-logo +
+
+ + +
+

+ Programming Languages and Database +

+

+ In this list, I am most familiar with the C# programming langauge. Its objective-oriented + programming is an incredible feature that I find myself mostly utilizing at all times. Same case + with Java, although much more verbose, its Java Runtime Environment makes it possible for it to + run my applications on any operating systems. Scripting with Python has been a godsend to most + developers because of its powerful yet clean script writing, which makes developing data structures + and algorithms much more readable and robust. My database is MSSQL because of its robust performance, + comprehensive security features, and seamless integration with other Microsoft tools, making it ideal + for managing and analyzing complex datasets efficiently. +

+
+ c-sharp-icon + java-icon + python-icon + mssql-icon +
+
+ + +
+

+ Multimedia Applications +

+

+ For video and illustrations, I use Adobe Premiere, Photoshop, Illustrator, Lightroom, DaVinci, and Clip Studio Paint Resolve to create engaging visual content, such + as gameplay videos and vlogs; charts, logos, illustrations, and user guides, both for my hobbies and in professional settings. + Additionally, I use Figma for designing user-friendly interfaces and wireframes, streamlining the development + process and enhancing collaborations among developers and their teams (our capstone project). +

+
+ premiere + photoshop-icon + illustrator-icon + lightroom-icon + davinci-icon + csp-icon + figma-icon +
+
+ + +
+

+ Operating Systems +

+

+ I am highly familiar with Windows (my main operating system), then macOS and Ubuntu, leveraging these + operating systems for configuring and troubleshooting. My experience includes managing user accounts locally, + software installations, and system updates to support daily operations. Additionally, I have foundational + knowledge of Fedora, enabling me to adapt to and troubleshoot diverse technical challenges in + cross-platform settings. +

+
+ windows-icon + macOS-icon + ubuntu-icon + fedora-icon +
+
+ + +
+

+ Network Simulators and Technologies +

+

+ I use Huawei Cisco Packet Tracer and Huawei eNSP to simulate, test, and validate network configurations in a + controlled environment, ensuring reliability and efficiency before deployment. These tools allow me to explore + complex networking scenarios, troubleshoot issues effectively, and gain hands-on experience with real-world + technologies. By using these simulators, I can build and refine skills in routing, switching, and cloud-based + networking solutions, making them invaluable for mastering modern IT infrastructure. As for cloud computing + services, I use Huawei Cloud for all three services: infrastructure as a service, platform as a service, and + software as a service; ranging from cloud storages to website hostings. +

+
+ cisco-icon + eNSP-icon + huawei-cloud-icon +
+
+ + +
+

+ Web Systems and Technologies +

+

+ The classic trio in web development, HTML for the webpage's body elements and structures, CSS for its style, and + JavaScript for its backend, frontend, and general scripting. + With JavaScript's web enhancements, developing websites, + webpages, and/or webapps has been a breeze. Being able to dynamically modify your webpages during runtime + is such an amazing feature. +

+
+ html-icon + css-icon + js-icon +
+
+ + +
+

+ Producitivty Suite and Project Managing +

+

+ For productivity applications, I mostly use Office 365, known for its solid and packed in features applications. + Ranging from Microsoft Word to Outlook. But I am flexible, I'll learn any given productivity suites (i.e. Google Workspace) + so I can utilize the applications effectively. For project managing, I use GitHub's + built-in project management feature. Being able to track bugs, deadlines, progress, and more for me and the whole + team. +

+
+ word-icon + powerpoint-icon + excel-icon + onedrive-icon + teams-icon + outlook-icon + archimate-icon + github-icon +
+
+ + +
+

+ Frameworks +

+

+ Obtaining more frameworks... +

+
+ +
+
+
+ + +`; + +const skillsDivContent = +` +

+ Skills +

+ +
+ +
+

Technical Skills

+ + +
+
+ +

+ Development +

+
+
    +
  • Proficient in OOP programming languages (C#, Java, Python, JS).
  • +
  • Proficient in compilers and foundational knowledge in interpreters languages.
  • +
+
+ + +
+
+ +

+ Database Management +

+
+
    +
  • Managing tables, columns and rows, and data.
  • +
  • Using Transact-SQL for database queries.
  • +
+
+ + +
+
+ +

+ System Administration +

+
+
    +
  • Managing user accounts, permissions, and group policies.
  • +
  • Familiarity with Active Directory.
  • +
+
+ + +
+
+ +

+ Operating Systems +

+
+
    +
  • Proficiency in Windows, macOS, Linux (Ubuntu, Fedora).
  • +
+
+ + +
+
+ +

+ Networking +

+
+
    +
  • Understanding of LAN/WAN, DNS, DHCP, TCP/IP.
  • +
  • Basic router/switch configuration and Wi-Fi setup.
  • +
+
+ + +
+
+ +

+ Hardware Support +

+
+
    +
  • Installation and maintenance of computers, printers, and peripherals.
  • +
  • Component upgrades and hardware diagnostics.
  • +
+
+ + +
+
+ +

+ Software Support +

+
+
    +
  • Familiarity with common applications like Microsoft Office, Google Workspace.
  • +
  • Installing, configuring, and updating software.
  • +
+
+ + +
+
+ +

+ Troubleshooting and Problem Solving +

+
+
    +
  • Diagnosing and resolving hardware and software issues.
  • +
  • Network connectivity troubleshooting.
  • +
+
+ + +
+
+ +

+ Cybersecurity Basics +

+
+
    +
  • Knowledge of antivirus software, firewalls, and data protection.
  • +
  • Understanding of secure practices, including password management.
  • +
+
+ + +
+
+ +

+ GitHub Proficiency +

+
+
    +
  • Used a project management app (GitHub Project Management) for the capstone project.
  • +
+
+ + +
+
+ +

+ Backup and Recovery +

+
+
    +
  • Implementing and managing backup solutions.
  • +
  • Restoring systems after data loss.
  • +
+
+ + +
+
+ +

+ Coming soon... +

+
+
    +
  • Obtaining more technical skills...
  • +
+
+
+ +
+ +

Soft Skills

+ + +
+
+ +

+ Communication Skills +

+
+
    +
  • Explaining technical concepts in simple terms for non-technical users.
  • +
  • Active listening to understand user issues thoroughly.
  • +
+
+ + +
+
+ +

+ Leadership Skills +

+
+
    +
  • Managed and lead the capstone project of IT Capstone 1 & 2 course.
  • +
+
+ + +
+
+ +

+ Teamwork and Collaboration +

+
+
    +
  • Working with colleagues to solve complex problems.
  • +
  • Sharing knowledge and best practices within the team.
  • +
  • Illustrated a roadmap for the capstone team.
  • +
+
+ + +
+
+ +

+ Coming soon... +

+
+
    +
  • Obtaining more soft skills...
  • +
+
+
+ + +
+` \ No newline at end of file diff --git a/scripts/KiyuiLibrary.js b/scripts/KiyuiLibrary.js new file mode 100644 index 0000000..b5eed4a --- /dev/null +++ b/scripts/KiyuiLibrary.js @@ -0,0 +1,19 @@ +// Sleep function +function Sleep(ms) { + return new Promise(resolve => setTimeout(resolve, ms)); +} +// example + // Sleep([enter number in ms]).then(() => + // { + // // Place your first block of code here (first execution). + // return Sleep(1000); + // }).then(() => { + // // For chaining, place your second block of code here (second execution). + // }); // Add [.then(( => {}));] if you need more chain executions. + + +// Debug function call +function DebugCall() +{ + alert("Successfully called!"); +} \ No newline at end of file diff --git a/scripts/script backup.js b/scripts/script backup.js new file mode 100644 index 0000000..49d14e9 --- /dev/null +++ b/scripts/script backup.js @@ -0,0 +1,177 @@ +// Script for the webpage's tile expand and contents. + +//init +let tilesAndNavStyle = document.createElement("style"); +let selectedTile = document.createElement("style"); +let expandTile = document.createElement("style"); +let undoTilesAndNavStyle = document.createElement("style"); + +// divs instantiation +const about_me_div = "about-me-div"; + +// Function for clicking the [about-me-div]. +function SelectAboutMeDiv() +{ + TilesAndNavScale(); + selectedTile.innerHTML = + ` + .${about_me_div} { + transition: 0.75s ease-in-out; + transform: scale(0.95); + } + `; + document.head.appendChild(selectedTile); + + ExpandTile(); + + document.getElementById("expand-tile").innerHTML = + ` +

+ Who am I? +

+

+ Hi! I’m Euge Kyle Fabella, a passionate IT student currently pursuing a Bachelor of Science in Information Technology at + STI Colleges of Santa Rosa City. I have a growing interest in IT support, system administration, and development, and + I am eager to expand my knowledge and skills in these areas. With a strong dedication to learning and problem-solving, + I’m excited to explore the world of technology and contribute to meaningful solutions in the future. +

+

+ Want to Learn More about Me? +

+

+ [tell more about yourself, add later] +

+ `; +} + +// +// cold functions +// These functions are blocks of codes that are used so often. +// This reduces scroll time, promotes separation of concerns, and OOP. +// +// When a user clicks a tile, this is an animation where the tiles other than it scales down, +// blurs, and navigation bar will scale up. +function TilesAndNavScale() +{ + tilesAndNavStyle.innerHTML = + ` + nav { + transition: 0.75s ease-in-out; + transform: scale(1.10) + } + .tiles { + transition: 0.5s ease-in-out; + filter: blur(4px); + pointer-events: none; + transform: scale(0.95); + } + `; + document.head.appendChild(tilesAndNavStyle); + + NavBarToBack(); +} +// On the selected tile, it has special properties for better user feedback. +function ExpandTile() +{ + expandTile.innerHTML = + ` + .expand-tile { + transition: 0.75s ease-in-out; + opacity: 0.90; + transform: scale(1); + pointer-events: all; + } + `; + document.head.appendChild(expandTile); +} +// After the user dismisses a tile, this fucntion will undo all the appended codes. +function UndoTilesAndNav() +{ + undoTilesAndNavStyle.innerHTML = + ` + #nav-bar { + transition: 0.75s ease-in-out; + transform: scale(1) + } + .tiles { + transition: 0.5s ease-in-out; + filter: blur(0px); + pointer-events: all; + transform: scale(1); + } + .${about_me_div} { + transition: 0.75s ease-in-out; + transform: scale(1); + } + .expand-tile { + transition: 0.75s ease-in-out; + opacity: 0; + transform: scale(0.9); + pointer-events: none; + } + `; + + document.head.appendChild(undoTilesAndNavStyle); + + UndoNavBar(); + + Sleep(500).then(() => { + document.head.removeChild(tilesAndNavStyle); + document.head.removeChild(selectedTile); + document.head.removeChild(expandTile); + }); +} + +function NavBarToBack() +{ + document.getElementById("nav-bar").innerHTML = + ` + +
+ Back +
+ + + `; +} +function UndoNavBar() +{ + document.getElementById("nav-bar").innerHTML = + ` + Home + Projects + Contact + + + + + `; +} + + + + +// main method + + + + + +// NOTE: diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..7608221 --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,298 @@ +// Script for the webpage's tile expand and contents. + +// Load upon start of web portfolio. +alert("Web Portfolio is still under development, expect some unoptimized screen sizes, thank you for your patience! Click [OK] to continue.\n— Euge Kyle"); + + +// init variables +let tilesAndNavStyle = document.createElement("style"); +// selectedTile is for the selected tile itself, the UI. While selectedTileName +// is for the webpage to dynamically pass the selected tile's name for the +// special effects to undo and redo. +let selectedTile = document.createElement("style"); +let selectedTileName; + +let expandTile = document.createElement("style"); +let undoTilesAndNavStyle = document.createElement("style"); + +// Function for clicking the [about-me-div]. +function SelectAboutMeDiv() +{ + selectedTileName = "about-me-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + // In here, since expand-tile is dynamic, using "html (+css)" is better; + // we put NEW content in here and NEW style, therefore "html (+css)" solves it. + // In addition, this is the tile where it will present the contents of + // whatever the tile is selected. + document.getElementById("expand-tile").innerHTML = aboutMeDivContent; +} +// Function for clicking the [picture-div]. +function SelectPictureDiv() +{ + selectedTileName = "picture-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + document.getElementById("expand-tile").innerHTML = "" // Place pictureDivContent here.; +} +// Function for clicking the [certificates-div]. +function SelectCertificatesDiv() +{ + selectedTileName = "certificates-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + document.getElementById("expand-tile").innerHTML = certificatesDivContent; +} +function SelectUserNameAndPictureDiv() +{ + selectedTileName = "username-and-picture-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + +} +function SelectTechStackDiv() +{ + selectedTileName = "tech-stack-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + document.getElementById("expand-tile").innerHTML = techStackDivContent; +} +function SelectSkillsDiv() +{ + selectedTileName = "skills-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + document.getElementById("expand-tile").innerHTML = skillsDivContent; +} +function SelectEducationDiv() +{ + selectedTileName = "education-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + document.getElementById("expand-tile").innerHTML = "" // Place educationDivContent here.; +} +function SelectProfessionalReferencesDiv() +{ + selectedTileName = "professional-references-div"; + + TilesAndNavScale(); + SelectedTileColdFunction(); + + document.getElementById("expand-tile").innerHTML = ""; +} + + + + +// +// cold functions +// These functions are blocks of codes that are used so often. +// This reduces scroll time, promotes separation of concerns, and OOP. +// +// When a user clicks a tile, this is an animation where the tiles other than it scales down, +// blurs, and navigation bar will scale up. +function TilesAndNavScale() +{ + // "css" is better as it supports multiple calls of classes and IDs dynamically. + tilesAndNavStyle.innerHTML = + ` + nav { + transition: 0.75s ease-in-out; + transform: scale(1.10) + } + .tiles { + transition: 0.5s ease-in-out; + filter: blur(4px); + pointer-events: none; + transform: scale(0.95); + } + `; + document.head.appendChild(tilesAndNavStyle); + + NavBarToBack(); +} +// On the selected tile, it has special properties for better user feedback. +function ExpandTile() +{ + // If we use "html (+css)" in here, we also erase the the whole tiles. + // Therefore we want to preserve it, hence the use of "css" only. + expandTile.innerHTML = + ` + .expand-tile { + transition: 0.75s ease-in-out; + opacity: 0.90; + transform: scale(1.025); + pointer-events: all; + } + `; + document.head.appendChild(expandTile); +} +// After the user dismisses a tile, this fucntion will undo all the appended codes. +function UndoTilesAndNav() +{ + undoTilesAndNavStyle.innerHTML = + ` + #nav-bar { + transition: 0.75s ease-in-out; + transform: scale(1) + } + .tiles { + transition: 0.5s ease-in-out; + filter: blur(0px); + pointer-events: none; + transform: scale(1); + } + .${selectedTileName} { + transition: 0.75s ease-in-out; + opacity: 1; + transform: scale(1); + } + .expand-tile { + transition: 0.75s ease-in-out; + opacity: 0; + transform: scale(0.9025); + pointer-events: none; + } + `; + + document.head.appendChild(undoTilesAndNavStyle); + + UndoNavBar(); + + Sleep(750).then(() => { + // Although I'm not sure, I just removed the appended modifications. + // Good practice and good measures I suppose. Still not sure how JS does its + // memory allocation. + document.head.removeChild(tilesAndNavStyle); + + document.head.removeChild(selectedTile); + + document.head.removeChild(expandTile); + document.head.removeChild(undoTilesAndNavStyle); + + // Clearing the contents of the expanded tile + document.getElementById("expand-tile").innerHTML = ""; + }); +} +function NavBarToBack() +{ + // I used "html (+css)" here as I want new content inside the navigation bar and + // new style. Creating an entire new event. + const navBar_A_s = + ` + +
+ Back +
+ `; + + Sleep([0]).then(() => + { + document.getElementById("nav-bar").innerHTML = + ` + + `; + return Sleep(0); + }).then(() => { + document.getElementById("nav-bar").innerHTML += navBar_A_s; + return Sleep(375); + }).then(() => { + document.getElementById("nav-bar").innerHTML += + ` + + `; + return Sleep(375); + }); +} +function UndoNavBar() +{ + const navBar_A_s_1 = `Home`; + const navBar_A_s_2 = ` Projects`; + const navBar_A_s_3 = ` Contact`; + + // Added sleep so it doesn't make the navigation bar big from the start as + // the elements inside are three texts. Appending the elements one by one instead. + Sleep(0).then(() => + { + document.getElementById("nav-bar").innerHTML = + ` + + `; + return Sleep(0); + }).then(() => { + document.getElementById("nav-bar").innerHTML += navBar_A_s_1; + return Sleep(300); + }).then (() => { + document.getElementById("nav-bar").innerHTML += navBar_A_s_2; + return Sleep(300); + }).then (() => { + document.getElementById("nav-bar").innerHTML += navBar_A_s_3; + return Sleep(300); + }).then (() => { + document.getElementById("nav-bar").innerHTML += + ` + + `; + }); +} +function SelectedTileColdFunction() +{ + // Using "css" to preserve the content and only editing the style. + // Using "html (+css)" does not preserve it, therfore "css" is much better. + selectedTile.innerHTML = + ` + .${selectedTileName} { + transition: 0.75s ease-in-out; + transform: scale(0.95); + opacity: 0.25; + } + `; + document.head.appendChild(selectedTile); + + ExpandTile(); +} + +// main method + + + + + +// NOTE: diff --git a/styles/animations.css b/styles/animations.css new file mode 100644 index 0000000..c895473 --- /dev/null +++ b/styles/animations.css @@ -0,0 +1,44 @@ +/* + This stylesheet is for the block of codes of animations. + From keyframes to hovers. +*/ + +/* Animation keyframe for loading the webpage for the first time. */ +@keyframes page-load-fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + +} + +/* Animation keyframe for the navigation bar's text highlight when hovered. */ +nav a { + transition: 0.25s; +} +nav a:hover { + color: gray; +} + +/* On certain tile sizes, the animation zoom scales differently, so I added small +touches for better UI and UX. */ +.picture-div:hover, .certificates-div:hover, +.username-and-picture-div:hover, .quote-div:hover, .tech-stack-div:hover, +.skills-div:hover, .education-div:hover { + transform: scale(1.025); +} +.about-me-div:hover { + transform: scale(1.015); +} +.more-div:hover, .professional-references-div:hover { + transform: scale(1.035); +} + +/* This is the animation of the tiles when hovered over by the cursor. */ +.about-me-div, .picture-div, .certificates-div, +.username-and-picture-div, .quote-div, .tech-stack-div, .skills-div, +.more-div, .professional-references-div, .education-div { + transition: 0.25s; +} diff --git a/styles/custom-styles.css b/styles/custom-styles.css new file mode 100644 index 0000000..8e6d988 --- /dev/null +++ b/styles/custom-styles.css @@ -0,0 +1,28 @@ +/* + These are custom styles I use for repeating blocks of codes and + to lessen the amount of scrolling up and down. +*/ + +/* Used to center the div itself in a container. */ +.center-this-div { + margin: 0px auto; +} + +/* Used to center the elements inside a div or container. */ +.center-elements-inside { + display: grid; + place-items: center; +} + +/* Used to add border radius and its default color. */ +.add-border-radius-with-bg { + border-radius: 40px; + background-color: rgb(22, 22, 22); +} + +/* Used for absolutely placing a div in the center. */ +.center-this-div-absolutely { + position: absolute; + inset: 0; + margin: auto; +} \ No newline at end of file diff --git a/styles/init-expanded-tile.css b/styles/init-expanded-tile.css new file mode 100644 index 0000000..bf3967c --- /dev/null +++ b/styles/init-expanded-tile.css @@ -0,0 +1,17 @@ +/* + This is the initialization stylesheet for [expand-tile] +*/ +.expand-tile { + /* Added [!important] to prioritize the bg color. + Since this is the initialization of the [expand-tile], it is in its + idle state. Therefore configurations are already set. */ + background-color: rgb(42, 42, 42) !important; + opacity: 0; + scale: 0.9025; + pointer-events: none; + overflow-y: auto; + + padding: 25px; + height: 65%; + width: 70%; +} \ No newline at end of file diff --git a/styles/init-styles.css b/styles/init-styles.css new file mode 100644 index 0000000..5030a24 --- /dev/null +++ b/styles/init-styles.css @@ -0,0 +1,24 @@ +/* + This stylesheet is for initiating the webpage's styles. + Reducing scrolling and separating the "cold" block of codes. +*/ + +/* Configuring the default font of the webpage. */ +@font-face { + font-family: Poppins-Regular; + src: url(../resources/Poppins-Font/Poppins-Regular.ttf); +} + +/* Initializing the webpage's body. */ +body { + /* bg color, initiating the font and its color, and + animation for visiting the webpage for the first time. */ + background-color: rgb(0, 0, 0); + font-family: Poppins-Regular, Arial, Helvetica, sans-serif; + color: white; + animation: page-load-fadein 0.5s ease-in-out; + + /* Disabled scroll and added 200 height for the whole webpage. */ + overflow: auto; + height: 100vh; +} diff --git a/styles/init-tiles-styles.css b/styles/init-tiles-styles.css new file mode 100644 index 0000000..9afa902 --- /dev/null +++ b/styles/init-tiles-styles.css @@ -0,0 +1,114 @@ +/* + This stylesheet is the initialization of the tiles. +*/ + +/* + tiles [section class="tiles"]. The container for the tiles itself. +*/ +.tiles { + /* Placement of the tiles inside the tiles container (div). */ + display: grid; + grid-template-columns: 16.66% 16.66% 16.66% 16.66% 16.66% 16.66%;; + grid-template-rows: 25% 25% 25% 25%; + grid-template-areas: + "about-me-box about-me-box about-me-box about-me-box picture-box picture-box" + "certificates-box certificates-box username-and-picture-box username-and-picture-box picture-box picture-box" + "tech-stack-box skills-box username-and-picture-box username-and-picture-box quote-box quote-box" + "tech-stack-box skills-box more-box education-box education-box professional-references-box" + ; + + /* I don't know why I used [em] unit but since it's a legacy code and + I forgot, I just left it there. */ + gap: 1em; + + /* To prevent the elements inside the container to shift to the right side as it + is aligned to the upper left */ + justify-content: center; + + /* height and width of this div */ + height: 75%; + width: 60%; +} + +/* + about-me-div +*/ +.about-me-div{ + grid-area: about-me-box; +} + +/* + picture-div +*/ +.picture-div { + grid-area: picture-box; + + padding: 40px 0px; +} + +/* + certificates-div +*/ +.certificates-div { + grid-area: certificates-box; + + padding: 40px 0px; +} + +/* + username-and-picture-div +*/ +.username-and-picture-div { + grid-area: username-and-picture-box; + + padding: 40px 0px; +} + +/* + quote-div +*/ +.quote-div { + grid-area: quote-box; +} + +/* + tech-stack-div +*/ +.tech-stack-div { + grid-area: tech-stack-box; +} + + +/* + skills-div +*/ +.skills-div { + grid-area: skills-box; +} + +/* + more-div +*/ +.more-div { + grid-area: more-box; + + padding: 40px 0px; +} + +/* + education-div +*/ +.education-div { + grid-area: education-box; + + padding: 40px 0px; +} + +/* + professional-references-div +*/ +.professional-references-div { + grid-area: professional-references-box; + + padding: 40px 0px; +} \ No newline at end of file diff --git a/styles/navigation-bar-styles.css b/styles/navigation-bar-styles.css new file mode 100644 index 0000000..d064423 --- /dev/null +++ b/styles/navigation-bar-styles.css @@ -0,0 +1,21 @@ + +/* + navigation bar +*/ +nav { + /* centering the alignment of the nav bar's links */ + text-align: center; + + /* centering the nav bar */ + margin: 1% auto; + /* putting spaces in the nav bar so it won't be thin */ + padding: 0.5%; + /* the nav bar's width so it won't be edge to edge in the screen */ + width: 15%; +} +nav a { + /* since is different from other text attributes, it is configured already */ + color: rgb(255, 255, 255); + text-decoration: none; + padding: 0% 5%; /* added spaces between each link */ +} diff --git a/styles/tiles-styles.css b/styles/tiles-styles.css new file mode 100644 index 0000000..ac9aa8f --- /dev/null +++ b/styles/tiles-styles.css @@ -0,0 +1,140 @@ +/* + This stylesheet is if for the configuration of the elements inside the div. + Seperating the init-tiles-styles.css and tiles-styles.css. + Reducing scroll times and promoting seperation of concerns. +*/ + +/* + about-me-div +*/ +.about-me-div { + /* Added padding so the text inside aren't cramped. */ + padding: 0px 20px; + + cursor: pointer; +} + +/* +picture-div +*/ +.picture-div { + cursor: pointer; +} +.picture-div img { + /* Configuring the placement and cropping the picture. */ + height: 35vh; + width: 35vh; + border-radius: 10px; + object-fit: cover; + object-position: center; +} + +/* + certificates-div +*/ +.certificates-div { + text-align: center; + + cursor: pointer; + + /* Added [!important] as I want it to prioritize this color from the + default configuration of [.add-border-radius-with-bg] from custom-styles.css. */ + background-color: rgb(27, 70, 95) !important; +} + +/* + username-and-picture-div +*/ +.username-and-picture-div { + text-align: center; + + cursor: pointer; +} +#online-picture { + /* Cropped my online picture's size and cropped it to circle. */ + height: 125px; + width: 125px; + border-radius: 50%; +} +.social-links img { + /* Cropped the social media platforms' icons and configured its cursor to hand pointer. */ + height: 50px; + width: 50px; + cursor: pointer; +} +.social-links a { + /* Removed the 's default appearance and turned it invisible. */ + text-decoration: none; + color: rgba(0, 0, 0, 0); +} + +/* + quote-div +*/ +.quote-div { + padding: 25px; + + /* Added [!important] as I want it to prioritize this color from the + default configuration of [.add-border-radius-with-bg] from custom-styles.css. */ + background-color: rgb(27, 70, 95) !important; +} + +/* + tech-stack-div +*/ +.tech-stack-div { + padding: 0px 20px; + + cursor: pointer; +} +.tech-stack-div img { + height: 60px; + width: 60px; + +} +.tech-stack-imgs-div { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1em; +} + +/* + skills-div +*/ +.skills-div { + cursor: pointer; + + padding: 0px 20px; +} +.skills-imgs-div img{ + height: 60px; + width: 60px; +} + +/* + more-div +*/ +.more-div { + text-align: center; + + background-color: rgb(27, 70, 95) !important; +} + +/* + educaton-div +*/ +.education-div { + text-align: center; + + cursor: pointer; +} + +/* + professional-references-div +*/ +.professional-references-div { + text-align: center; + + cursor: pointer; +} \ No newline at end of file