deploy: 0a5b451

helenclx · Jun 6, 2024 · 0962494 · 0962494
1 parent 3dc22cc
commit 0962494
Show file tree

Hide file tree

Showing 59 changed files with 3,244 additions and 3,815 deletions.
diff --git a/404.html b/404.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
 
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
 
         <link href="mailto:[email protected]" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-
+
 
 <header class="header">
     <h2 class="header__title">
@@ -229,13 +228,12 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <h2 class="heading--main text-center">Oops! Content not found.</h2>
+        <main id="content">
+            <h2 class="heading--main text-center">Oops! Content not found.</h2>
 
 <p class="text-center">Go back to <a href="/">home page</a>.</p>
 
-            </main>
-        </div>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -274,10 +272,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/[email protected]/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -332,7 +327,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -342,14 +337,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>

diff --git a/about/index.html b/about/index.html
@@ -31,7 +31,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
 
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
 
         <link href="mailto:[email protected]" rel="me">
@@ -43,8 +43,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-
+
 
 <header class="header">
     <h2 class="header__title">
@@ -229,9 +228,20 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-                <article class="bio prose"><h1 class="heading--main">About Me</h1>
-<p>Hi, I am Helen Chong (they/she). I am a front-end web developer with 8 years of working experience as a graphic designer. I specialise in front-end web development.</p>
+        <main id="content">
+
+<header class="main__header">
+
+
+    <h1 class="heading--main">About</h1>
+
+
+</header>
+
+<div class="container">
+
+		<div class="prose">
+			<p>Hi, I am Helen Chong (they/she). I am a front-end web developer with 8 years of working experience as a graphic designer. I specialise in front-end web development.</p>
 <p>I intend to transfer my graphic design experience into web design and web development expertise, as I love to code and build sites and apps to solve problems. I have a particular interest on responsive, accessible, inclusive and scalable design to create the best user experience.</p>
 <h2>My Certificates:</h2>
 <ul>
@@ -241,9 +251,30 @@ <h2>My Certificates:</h2>
 <li>Chingu Voyage #46 <a href="/assets/documents/Chingu-Voyage46-Completion-Cert.pdf">Certificate of Completion</a> (PDF file)</li>
 <li><a href="https://cs50.harvard.edu/certificates/8cb0f5a4-4107-4df6-8abc-cfab3a437367">CS50’s Introduction to Computer Science 2024</a> certificate (PDF file)</li>
 </ul>
-</article>
-            </main>
-        </div>
+
+		</div>
+
+
+
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -282,10 +313,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/[email protected]/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -340,7 +368,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -350,14 +378,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>

diff --git a/accessibility/index.html b/accessibility/index.html
@@ -34,7 +34,7 @@
         <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
 
 
-        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/prose.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
+        <link rel="stylesheet" href="/assets/css/global.css"><link rel="stylesheet" href="/assets/css/general.css"><link rel="stylesheet" href="/assets/css/components.css"><link rel="stylesheet" href="/assets/css/projects.css"><link rel="stylesheet" href="/assets/css/contact.css"><link rel="stylesheet" href="/assets/css/content.css"><link rel="stylesheet" href="/assets/css/blog.css"><link rel="stylesheet" href="/assets/css/socials.css"><link rel="stylesheet" href="/assets/css/utility.css">
 
 
         <link href="mailto:[email protected]" rel="me">
@@ -46,8 +46,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div class="content">
-
+
 
 <header class="header">
     <h2 class="header__title">
@@ -232,12 +231,21 @@ <h2 class="visually-hidden">Navigation Links:</h2>
         });
     });
 </script>
-            <main class="main container" id="content">
-
-<article class="prose">
-    <h2 class="heading--main">Accessibility</h2>
+        <main id="content">
+
+<header class="main__header">
+
+
+    <h1 class="heading--main">Accessibility</h1>
 
-    <p>I take accessibility seriously. I want every visitor to my website to have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people, by aiming to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2 Level AA standards</a>.</p>
+
+</header>
+
+<div class="container">
+
+		<div class="prose">
+
+<p>I take accessibility seriously. I want every visitor to my website to have the best possible experience of browsing my website. Therefore, I strive to design this website to be accessible, including to disabled and neurodivergent people, by aiming to meet <a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG) 2.2 Level AA standards</a>.</p>
 <p>I use the following tools to test my site for accessibility:</p>
 <ul>
 <li>WebAIM's <a href="https://wave.webaim.org/extension/">WAVE Browser Extension</a></li>
@@ -247,10 +255,30 @@ <h2 class="heading--main">Accessibility</h2>
 <p>Feedbacks and suggestions for improving the accessibility of this site are welcome. You can <a href="mailto:[email protected]">contact me via email</a>.</p>
 
 
-    <p>(This accessibility statement was last updated on 28 May 2024)</p>
-</article>
-            </main>
-        </div>
+<p>(This accessibility statement was last updated on 28 May 2024)</p>
+		</div>
+
+
+
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
         <footer class="footer container">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
@@ -289,10 +317,7 @@ <h2 class="visually-hidden">Social Links:</h2>
     <p><a href="/blog/feed.xml">RSS Feed</a> | <a href="/accessibility">Accessibility</a></p>
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
-    <div id="wcb" class="carbonbadge"></div>
-    <script src="https://unpkg.com/[email protected]/b.min.js" defer></script>
-
-    <p><a href="#page-top">Back to Top <i class="fa-solid fa-arrow-up"></i></a></p>
+    <p><a href="#page-top">Back to Top 🡱</a></p>
     <button class="top-btn hidden">
     <img src="/assets/icons/top.svg" alt="Scroll to top">
 </button>
@@ -347,7 +372,7 @@ <h2 class="visually-hidden">Social Links:</h2>
 <style>
     .footer {
         width: 100%;
-        padding: 1em 1em 3em 1em;
+        padding: 1.5em 1em 3em;
         text-align: center;
         display: flex;
         gap: 0.5em;
@@ -357,14 +382,14 @@ <h2 class="visually-hidden">Social Links:</h2>
     /* Screen sizes larger than mobile */
     @media only screen and (min-width: 30rem) {
         .footer {
-            padding: 1em 1em 2em 1em;
+            padding: 1.5em 1em 2em;
         }
     }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
         .footer {
-            padding: 1em;
+            padding: 1.5em 1em;
         }
     }
 </style>

diff --git a/assets/css/blog.css b/assets/css/blog.css
@@ -23,5 +23,7 @@
     padding-left: 0;
     padding-top: 0.8em;
     margin-top: 2.5em;
+    display: grid;
+    gap: 0.7em;
     border-top: 0.1em solid var(--clr-slate-600);
 }
diff --git a/assets/css/components.css b/assets/css/components.css
@@ -19,17 +19,14 @@
     outline: 0.2em solid var(--clr-accent-600);
 }
 
-/* Index headings */
-.heading--index {
-    margin-bottom: 2rem;
-    font-size: 2.5rem;
-    text-align: center;
-}
-
 /* Profile Styles */
 .profile {
     display: flex;
     flex-direction: column;
+    justify-self: center;
+    align-items: center;
+    font-size: var(--sz-home-txt);
+    max-width: 64rem;
 }
 
 .profile__image-wrapper {
@@ -86,6 +83,21 @@
     }
 }
 
+/* Home page sections */
+.section--home {
+    padding: 2em 0;
+    display: grid;
+    place-content: center;
+    font-size: var(--sz-home-txt);
+}
+
+/* Index headings */
+.heading--home {
+    margin-bottom: 2rem;
+    font-size: 2.5rem;
+    text-align: center;
+}
+
 /* Skills Styles */
 .skills__list {
     list-style: none;