helenclx · helenclx · Apr 9, 2024 · Apr 6, 2024 · Apr 6, 2024 · Apr 6, 2024
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -0,0 +1,51 @@
+# Mini-tutorial for deploying Eleventyproject to GitHub Pages:
+# https://www.11ty.dev/docs/deployment/#deploy-an-eleventy-project-to-github-pages
+
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: current
+
+      # Set up bun
+      - name: Use Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+      - name: Install deps and build
+        run: |
+          bun i
+          bun run build
+
+      - name: Persist Eleventy .cache
+        uses: actions/cache@v4
+        with:
+          path: ./.cache
+          key: ${{ runner.os }}-eleventy-fetch-cache
+
+      - run: bun install
+      - run: bun run build-ghpages
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./_site
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 **/blog/posts/2020-11-10-Post-Template.html
-__Old
+__Old
+node_modules
diff --git a/Helen-Chong-portfolio-thumbnail.png b/Helen-Chong-portfolio-thumbnail.png
diff --git a/README.md b/README.md
@@ -1,11 +1,10 @@
 # Helen Chong's Portfolio
 
-My developer portfolio website.
+Source code of my developer portfolio website. Built with Eleventy.
 
 ## Credits
 
-- Kolade Chris for the tutorial: [How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript](https://www.freecodecamp.org/news/how-to-build-a-developer-portfolio-website/)
+- Gerard Hynes for providing inspiration with the tutorial: [Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website](https://www.freecodecamp.org/news/learn-eleventy/)
+- Raymond Camden for providing inspiration with the tutorial: [A Complete Guide to Building a Blog with Eleventy](https://cfjedimaster.github.io/eleventy-blog-guide/guide.html)
+- Eleventy's official [blog starter project](https://github.com/11ty/eleventy-base-blog) for the inspiration
 - [icons8](https://icons8.com/)
-- [Vector Logo Zone](https://www.vectorlogo.zone/)
-- [unDraw](https://undraw.co/)
-- [Zonelets](https://zonelets.net/)
diff --git a/_site/about/index.html b/_site/about/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="I'm a Frontend software developer who builds sites and apps that help people reach their personal and professional goals."/>
+
+
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/favicon/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon/favicon-16x16.png">
+        <link rel="manifest" href="/assets/icons/favicon/site.webmanifest">
+
+
+        <link rel="stylesheet" href="/assets/css/style.css">
+
+
+        <script src="/assets/js/scroll.js" defer></script>
+        <script src="/assets/js/header-links.js" defer></script>
+
+        <title> About |  Helen Chong | Front-End Web Developer</title>
+    </head>
+    <body>
+        <button class="top-btn hidden" aria-label="Scroll to top">
+            <img src="/assets/icons/top.svg" alt="">
+        </button>
+        <div class="content">
+            <header class="header">
+    <h1 class="header__title">
+        <a href="/">Helen Chong</a>
+    </h1>
+    <h2 class="visually-hidden">Navigation Links:</h2>
+    <ul class="header__links">
+        <li>
+            <a class="header__link" href="/about">About</a>
+        </li>
+        <li>
+            <a class="header__link" href="/projects">Projects</a>
+        </li>
+        <li>
+            <a class="header__link" href="/blog">Blog</a>
+        </li>
+        <li>
+            <a class="header__link" href="/contact">Contact</a>
+        </li>
+    </ul>
+    <button class="header__toggle" aria-label="Toggle navigation menu">
+        <i class="fa-solid fa-bars"></i>
+    </button>
+</header>
+
+            <main class="main container">
+
+<section class="bio prose">
+    <h2 class="heading--main">About Me</h2>
+
+    <div class="profile__image-wrapper">
+        <picture><source type="image/avif" srcset="/assets/images/OmYY2t_GWa-300.avif 300w, /assets/images/OmYY2t_GWa-800.avif 800w, /assets/images/OmYY2t_GWa-2000.avif 2000w" sizes="(min-width: 16em) 50vw, 100vw"><img alt="Helen Chong, Front-End Developer" loading="lazy" decoding="async" src="/assets/images/OmYY2t_GWa-300.jpeg" width="2000" height="2000" srcset="/assets/images/OmYY2t_GWa-300.jpeg 300w, /assets/images/OmYY2t_GWa-800.jpeg 800w, /assets/images/OmYY2t_GWa-2000.jpeg 2000w" sizes="(min-width: 16em) 50vw, 100vw"></picture>
+    </div>
+
+    <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.</p>
+
+    <p>Currently I specialise in front-end web development. I intend to transfer my graphic design experience into web design and web development expertise.</p>
+
+    <h3>My Certificates:</h3>
+
+    <ul>
+        <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/responsive-web-design" target="_blank">Responsive Web Design Certification</a></li>
+        <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/javascript-algorithms-and-data-structures-v8" target="_blank">JavaScript Algorithms and Data Structures (Beta) Certification</a></li>
+        <li>freeCodeCamp's <a href="https://www.freecodecamp.org/certification/helenclx/javascript-algorithms-and-data-structures" target="_blank">Legacy JavaScript Algorithms and Data Structures Certification</a></li>
+        <li>Chingu Voyage #46 <a href="/assets/documents/Chingu-Voyage46-Completion-Cert.pdf" target="blank">Certificate of Completion</a></li>
+    </ul>
+</section>
+            </main>
+        </div>
+        <footer class="footer container">
+    <nav class="socials">
+    <h2 class="visually-hidden">Social Links:</h2>
+    <ul class="socials__links">
+        <li>
+            <a href="https://github.com/helenclx" target="_blank">
+                <p class="visually-hidden">GitHub</p>
+                <i class="fa-brands fa-github socials__icon" aria-hidden="true"></i>
+            </a>
+        </li>
+        <li>
+            <a href="https://twitter.com/helen_clx" target="_blank">
+                <p class="visually-hidden">Twitter</p>
+                <i class="fa-brands fa-twitter socials__icon" aria-hidden="true"></i>
+            </a>
+        </li>
+        <li>
+            <a href="https://tech.lgbt/@helenclx" target="_blank">
+                <p class="visually-hidden">Mastodon</p>
+                <i class="fa-brands fa-mastodon socials__icon" aria-hidden="true"></i>
+            </a>
+        </li>
+        <li>
+            <a href="https://bsky.app/profile/helenclx.bsky.social" target="_blank">
+                <p class="visually-hidden">Bluesky</p>
+                <i class="fa-brands fa-bluesky socials__icon"  aria-hidden="true"></i>
+            </a>
+        </li>
+        <li>
+            <a href="https://www.linkedin.com/in/helenclx/" target="_blank">
+                <p class="visually-hidden">LinkedIn</p>
+                <i class="fa-brands fa-linkedin socials__icon" aria-hidden="true"></i>
+            </a>
+        </li>
+    </ul>
+</nav>
+
+
+    <p>Built with &#x2661; by Helen Chong.</p>
+    <p>2022–2024. <a href="https://github.com/helenclx/helenclx.github.io" target="_blank">Source Code</a>.</p>
+</footer>
+    </body>
+</html>