deploy: f6d9f81

helenclx · Jul 18, 2024 · 7890282 · 7890282
1 parent 55b6eec
commit 7890282
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 44 deletions.
diff --git a/assets/css/general.css b/assets/css/general.css
@@ -1,8 +1,6 @@
 /* General Styles */
-html {
-    @media (prefers-reduced-motion: no-preference) {
-        scroll-behavior: smooth;
-    }
+@media (prefers-reduced-motion: no-preference) {
+    html { scroll-behavior: smooth; }
 }
 
 body {

diff --git a/assets/css/utility.css b/assets/css/utility.css
@@ -9,6 +9,12 @@
 .text-center { text-align: center; }
 .text-bold { font-weight: 700; }
 
+.inline-icon {
+    vertical-align: -10%;
+    height: 1em;
+    fill: currentColor;
+}
+
 .grid-center {
     display: grid;
     place-content: center;

diff --git a/index.html b/index.html
@@ -260,6 +260,7 @@ <h3 class="visually-hidden" id="top-nav-title">Main Navigation</h3>
 <h1 class="visually-hidden">Home Page</h1>
 <div class="home--container">
     <section class="profile">
+    <h2 class="visually-hidden">Introduction</h2>
     <div class="profile__image-wrapper">
         <img fetchpriority="high" src="/assets/images/profile/avatar-helen-chong.avif" alt="Helen Chong, Front-End Developer">
     </div>
@@ -342,10 +343,9 @@ <h2 class="heading--home">Featured Projects</h2>
         </div>
         <h3 class="project-card__title">Frontend Mentor Challenge Solutions</h3>
         <p class="project-card__summary">My solutions to the Frontend Mentor challenges.</p>
-        <a class="project-card__link" href="/projects/frontend-mentor/">Read project case study of Frontend Mentor Challenge Solutions
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/frontend-mentor/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Frontend Mentor Challenge Solutions
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://helenchong.dev/Frontend-Mentor-Challenges/">Project Site</a>
@@ -373,10 +373,9 @@ <h3 class="project-card__title">Frontend Mentor Challenge Solutions</h3>
         </div>
         <h3 class="project-card__title">Quizzical</h3>
         <p class="project-card__summary">Test your knowledge with this quiz game. A solo project for Scrimba&#39;s React course.</p>
-        <a class="project-card__link" href="/projects/quizzical/">Read project case study of Quizzical
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/quizzical/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Quizzical
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://helenchong.dev/Scrimba-React-Solo-Projects/3-quizzical/">Project Site</a>
@@ -404,10 +403,9 @@ <h3 class="project-card__title">Quizzical</h3>
         </div>
         <h3 class="project-card__title">Recipe Hub</h3>
         <p class="project-card__summary">Allows users to search for recipes by entering an ingredient. Developed by Chingu Voyage 46 Tier 1 Team 1, in which I was part of.</p>
-        <a class="project-card__link" href="/projects/recipe-hub/">Read project case study of Recipe Hub
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/recipe-hub/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Recipe Hub
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://chingu-voyages.github.io/v46-tier1-team-01/Food-Recipe/">Project Site</a>
@@ -437,10 +435,9 @@ <h3 class="project-card__title">Recipe Hub</h3>
         </div>
         <h3 class="project-card__title">Scrimba Frontend Path Solo Projects</h3>
         <p class="project-card__summary">My solo projects for Scrimba&#39;s Frontend Developer Career Path.</p>
-        <a class="project-card__link" href="/projects/scrimba/">Read project case study of Scrimba Frontend Path Solo Projects
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/scrimba/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Scrimba Frontend Path Solo Projects
         </a>
         <div class="project-card__btns">
 
@@ -466,10 +463,9 @@ <h3 class="project-card__title">Scrimba Frontend Path Solo Projects</h3>
         </div>
         <h3 class="project-card__title">Tenzies Game</h3>
         <p class="project-card__summary">A dice roll game built with React. Roll until all dice are the same.</p>
-        <a class="project-card__link" href="/projects/tenzies/">Read project case study of Tenzies Game
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/tenzies/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Tenzies Game
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://helenchong.dev/Tenzies-Game/">Project Site</a>

diff --git a/projects/index.html b/projects/index.html
@@ -288,10 +288,9 @@ <h1 class="heading--main">Featured Projects</h1>
         </div>
         <h2 class="project-card__title">Frontend Mentor Challenge Solutions</h3>
         <p class="project-card__summary">My solutions to the Frontend Mentor challenges.</p>
-        <a class="project-card__link" href="/projects/frontend-mentor/">Read project case study of Frontend Mentor Challenge Solutions
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/frontend-mentor/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Frontend Mentor Challenge Solutions
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://helenchong.dev/Frontend-Mentor-Challenges/">Project Site</a>
@@ -319,10 +318,9 @@ <h2 class="project-card__title">Frontend Mentor Challenge Solutions</h3>
         </div>
         <h2 class="project-card__title">Quizzical</h3>
         <p class="project-card__summary">Test your knowledge with this quiz game. A solo project for Scrimba&#39;s React course.</p>
-        <a class="project-card__link" href="/projects/quizzical/">Read project case study of Quizzical
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/quizzical/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Quizzical
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://helenchong.dev/Scrimba-React-Solo-Projects/3-quizzical/">Project Site</a>
@@ -350,10 +348,9 @@ <h2 class="project-card__title">Quizzical</h3>
         </div>
         <h2 class="project-card__title">Recipe Hub</h3>
         <p class="project-card__summary">Allows users to search for recipes by entering an ingredient. Developed by Chingu Voyage 46 Tier 1 Team 1, in which I was part of.</p>
-        <a class="project-card__link" href="/projects/recipe-hub/">Read project case study of Recipe Hub
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/recipe-hub/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Recipe Hub
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://chingu-voyages.github.io/v46-tier1-team-01/Food-Recipe/">Project Site</a>
@@ -383,10 +380,9 @@ <h2 class="project-card__title">Recipe Hub</h3>
         </div>
         <h2 class="project-card__title">Scrimba Frontend Path Solo Projects</h3>
         <p class="project-card__summary">My solo projects for Scrimba&#39;s Frontend Developer Career Path.</p>
-        <a class="project-card__link" href="/projects/scrimba/">Read project case study of Scrimba Frontend Path Solo Projects
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/scrimba/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Scrimba Frontend Path Solo Projects
         </a>
         <div class="project-card__btns">
 
@@ -412,10 +408,9 @@ <h2 class="project-card__title">Scrimba Frontend Path Solo Projects</h3>
         </div>
         <h2 class="project-card__title">Tenzies Game</h3>
         <p class="project-card__summary">A dice roll game built with React. Roll until all dice are the same.</p>
-        <a class="project-card__link" href="/projects/tenzies/">Read project case study of Tenzies Game
-            <svg xmlns="http://www.w3.org/2000/svg" class="project-card__link-icon" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
-            </svg>
+        <a class="project-card__link" href="/projects/tenzies/">
+            <svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
+            Read project case study of Tenzies Game
         </a>
         <div class="project-card__btns">
         <a class="project-card__btn" href="https://helenchong.dev/Tenzies-Game/">Project Site</a>