v0.141

- Adjusted overall windows and tiles responsiveness to the browser's window (incomplete). - Major and minor tweaks. - Education section done, just a little more bug fixing. - Added content to Contact section (incomplete). - Renamed [KiyuiLibrary.js] to [CustomLibrary.js]
Kiyui2180 · Feb 4, 2025 · 3887d70 · 3887d70
1 parent dd3871c
commit 3887d70
Show file tree

Hide file tree

Showing 11 changed files with 307 additions and 154 deletions.
diff --git a/index.html b/index.html
@@ -10,13 +10,14 @@
         <link rel="stylesheet" href="styles/init-tiles-styles.css">
         <link rel="stylesheet" href="styles/tiles-styles.css">
         <link rel="stylesheet" href="styles/init-expanded-tile.css">
+        <link rel="stylesheet" href="styles/contact/contact-styles.css">
         <link rel="stylesheet" href="styles/custom-styles.css">
         <link rel="stylesheet" href="styles/animations.css">
         <link rel="stylesheet" href="styles/screen-sizes.css">
 
         <!-- scripts -->
         <script type="text/javascript" src="scripts/script.js"></script>
-        <script type="text/javascript" src="scripts/KiyuiLibrary.js"></script>
+        <script type="text/javascript" src="scripts/CustomLibrary.js"></script>
         <script type="text/javascript" src="scripts/ExpandedTilesContents.js"></script>
 
         <title>Euge Kyle: Creativity and Technology</title>
@@ -25,16 +26,13 @@
     </head>
     <body>
         <main>
-            <!-- 
-                navigation bar
-            -->
+            <!-- navigation bar -->
             <nav class="add-border-radius-with-bg nav-bar" id="nav-bar">
                 <a onclick="ViewHome()">Home</a>
                 <a onclick="ViewProjects()">Projects</a>
                 <a onclick="ViewContact()">Contact</a>
             </nav>
-
-
+
             <div class="main-container">
                 <!-- Tiles -->
                 <div class="tiles-container" id="tiles-container">
@@ -77,7 +75,7 @@ <h2>Euge Kyle Fabella</h2>
                                     <a href="https://github.com/Kiyui2180">
                                         <img src="resources/github-logo.png" alt="github-logo">
                                     </a>
-                                    <a href="#">
+                                    <a href="https://www.linkedin.com/in/euge-kyle-fabella-782b9834a/">
                                         <img src="resources/linkedin-icon.png" alt="linkedin-icon">
                                     </a>
                                 </div>
@@ -174,15 +172,40 @@ <h2>
 
                 <!-- Contact -->
                 <div class="contact-container" id="contact-container">
-                    <section class="contact center-this-div add-border-radius-with-bg center-elements-inside">
+                    <section class="contact center-this-div add-border-radius-with-bg">
                         <h1>
                             Contact
                         </h1>
-                        <h2>
-                            Please wait, the content will be added soon; I am working on it! :D
-                            <br>
-                            For my email and phone number, please refer to my resume for the meantime.
-                        </h2>
+
+                        <div class="contact-sub-container add-border-radius-with-bg center-elements-inside center-this-div">
+                            <div class="email-add contact-child-container add-border-radius-with-bg" onclick="ClipEmailAddress()">
+                                <h2>
+                                    E-Mail Address
+                                </h2>
+                                <p>Click here to copy.</p>
+                            </div>
+                            <div class="phone-num contact-child-container add-border-radius-with-bg">
+                                <h2>
+                                    Phone Number
+                                </h2>
+                                <p>Please refer to my resume.</p>
+                            </div>
+                            <div class="signal-username contact-child-container add-border-radius-with-bg">
+                                <h2>
+                                    Signal Account
+                                </h2>
+                                <p>Available upon request.</p>
+                            </div>
+                            <div class="linkedin-account contact-child-container add-border-radius-with-bg" onclick="LinkedInClickContactDiv()">
+                                <h2>
+                                    Linkedin
+                                </h2>
+                                <p>Click here.</p>
+                            </div>
+                            <div class="contact-picture-of-me contact-child-container add-border-radius-with-bg">
+                                <img src="resources/picture-of-me.jpg" alt="picture-of-me">
+                            </div>
+                        </div>
                     </section>
                 </div>
 
@@ -192,7 +215,7 @@ <h2>
 
         <!-- Below is the div for the tiles to use to present its content. -->
         <div class="expand-tile add-border-radius-with-bg center-this-div-absolutely" id="expand-tile">
-            
+
         </div>
 
         <!-- 
@@ -214,10 +237,14 @@ <h2>
             Dev note:
             - Fix the nav-bar scripts, why is there a nav-bar inline if I undid the changes. 
             Refer to inspecting element.
-            - Verify [certificates-div]'s script, make it more consistent. 
             - In [education-div], add description on each schools. [ctrl + f] then type "FIX".
-            - fix the nav bar shrinking then going to normal after getting filled up by words.
             - fix nav bar after clicking a tile, the elements after clicking back makes the elements near one another slightly
+            - fix [options-icons] on [education-div], the remaining icons should be smallen when you select an icon. It is semi-fixed but by default,
+            it should select sti.
+            - fix [education-div] on [script.js], it should remove styles so prevent piling up of appended styles.
+            - go to [contact-div] and redo the design.
+                - change the main picture to something else, it should be animated like a slideshow, get more pictures.
+            
         -->
     </body>
 </html>
diff --git a/resources/Contact/main-background.jpg b/resources/Contact/main-background.jpg
diff --git a/resources/references.md b/resources/references.md
@@ -14,7 +14,7 @@
 - <a href="https://www.flaticon.com/free-icons/communication" title="communication icons">Communication icons created by Eucalyp - Flaticon</a>
 - <a href="https://www.flaticon.com/free-icons/leadership" title="leadership icons">Leadership icons created by Becris - Flaticon</a>
 - <a href="https://www.flaticon.com/free-icons/collaboration" title="collaboration icons">Collaboration icons created by Freepik - Flaticon</a>
-- 
+- https://www.freepik.com/free-photo/top-view-arrangement-natural-material-stationery_13182476.htm#from_view=detail_alsolike
 - 
 - 
 - 

diff --git a/scripts/KiyuiLibrary.js → scripts/CustomLibrary.js b/scripts/KiyuiLibrary.js → scripts/CustomLibrary.js
@@ -3,7 +3,7 @@ function Sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 // example
-    // Sleep([enter number in ms]).then(() => 
+    // Sleep([0]).then(() => 
     // {
     //     // Place your first block of code here (first execution).
     //     return Sleep(1000);

diff --git a/scripts/ExpandedTilesContents.js b/scripts/ExpandedTilesContents.js
@@ -102,7 +102,7 @@ const certificatesDivContent =
 // Recheck this one.
 const educationDivContent =
 `
-    <h1 class="center-elements-inside">
+  <h1 class="center-elements-inside">
         Educations
     </h1>
 
@@ -112,10 +112,10 @@ const educationDivContent =
         Santa Rosa.        
     -->
     <div class="container center-elements-inside add-border-radius-with-bg">
-        <div class="img-viewer center-elements-inside">
-            <div class="education-description" id="education-description">
-                <!-- Left empty for dynamic input and output of information -->
-            </div>
+        <div class="sub-container center-elements-inside" id="sub-container">
+            <h2 id="education-description">
+                Batch of 2021-2025 (Graduating)<br>Program: Bachelor of Science in Information Technology
+            </h2>
             <img src="resources/educations/sti.jpg" 
             alt="sti-img"  id="img-viewer">
         </div>
@@ -124,19 +124,13 @@ const educationDivContent =
             College: STI College Santa Rosa
         </h2>
         
-        <div class="options-icons">
-            <div class="sti" onclick="ViewSTICollege()">
-                <img src="resources/educations/sti.jpg" 
-                alt="sti-img" >
-            </div>
-            <div class="mcl" onclick="ViewMCLCollege()">
-                <img src="resources/educations/mcl.png" 
-                alt="mcl-img">
-            </div>
-            <div class="practicum" onclick="ViewPracticum()">
-                <img src="resources/educations/practicum.jpg" 
-                alt="practicum-img">
-            </div>
+        <div class="options-icons" id="options-icons">
+            <img src="resources/educations/sti.jpg" 
+                alt="sti-img" id="sti-icon" onclick="ViewSTICollege()">
+            <img src="resources/educations/mcl.png" 
+                alt="mcl-img" id="mcl-icon" onclick="ViewMCLCollege()">
+            <img src="resources/educations/practicum.jpg" 
+                alt="practicum-img" id="ojt-icon" onclick="ViewPracticum()">
         </div>
     </div>
 
@@ -147,14 +141,15 @@ const educationDivContent =
             padding: 1.5em 0em;
             margin: auto;
         }
-        .img-viewer {
+        .sub-container {
             position: relative;
         }
-        .img-viewer img {
+        .sub-container img {
             height: 30vh;
             width: 45vw;
             object-fit: cover;
             border-radius: 40px;
+            transition: 0.25s;
         }
         .options-icons {
             display: flex;
@@ -169,18 +164,31 @@ const educationDivContent =
             padding: 0em 2em;
             cursor: pointer;
             transition: 0.25s;
+            opacity: 0.5;
         }
         .options-icons img:hover {
-            transform: scale(1.16);
+            transform: scale(1.15);
+        }
+        #education-description {
+            position: absolute;
+
+            text-align: center;
+            align-content: center;
+            color: rgba(0, 0, 0, 0);
+            z-index: 2;
+        }
+        #sti-icon {
+            opacity: 1;
+            transform: scale(1.25);
+        }
+        .sub-container:hover h2 {
+            color: rgb(255, 255, 255) !important;
+
+        }
+        .sub-container:hover img {
+            transform: scale(1.025);
+            opacity: 0.25;
         }
-        
-        /* 
-            Work on this soon. [FIX]
-            .education-description {
-                position: fixed;
-                text-align: left;
-            } 
-        */
     </style>
 `;