Update og.png

.github/workflows/deploy.yml

@@ -0,0 +1,24 @@
+name: Gatsby Deploy
+
+on:
+  push:
+    branches: main
+
+env:
+  GH_TOKEN: ${{ secrets.GH_TOKEN }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: GitHub Config
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "asl3"
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Install dependencies
+        run: |
+          npm install --force
+      - name: Deploy
+        run: npm run deploy:ci

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# . "$(dirname "$0")/_/husky.sh"
 
-npm run lint-staged
+# npm run lint-staged

README.md

@@ -1,5 +1,7 @@
-# asl3.github.io
+# Amanda Liu's Personal Website
 
-Personal website
+Check out my personal website (work-in-progress!): <https://asl3.github.io/>
 
-Theme credit: Brittany Chiang <https://github.com/bchiang7>
+![site preview](https://github.com/asl3/asl3.github.io/blob/main/static/og.png)
+
+Theme credit to [Brittany Chiang](https://github.com/bchiang7)

content/featured/nonono/index.md

@@ -0,0 +1,11 @@
+---
+date: '1'
+title: 'NONONO? More like YESYESYES'
+cover: './nonono_cover.jpg'
+github: ''
+external: 'https://mandymade.digitalpress.blog/nonono/'
+keywords:
+  - food
+---
+
+Tamago bacon yakitori and saucy ramen broth were the stars.

content/featured/shanghai_destinations/index.md

@@ -0,0 +1,11 @@
+---
+date: '2'
+title: 'Shanghai Travel Destinations'
+cover: './shanghai_cover.png'
+github: ''
+external: 'https://mandymade.digitalpress.blog/shanghai-destinations/'
+keywords:
+  - travel
+---
+
+A collection of Shanghai must-see destinations!

content/projects/databaseslearning.md

@@ -0,0 +1,14 @@
+---
+date: '2024-03-01'
+title: 'Databases Learning and Knowledge Sharing'
+github: ''
+external: 'https://github.com/asl3/databases-learning'
+tech:
+  - SQL
+  - Scala
+  - Spark
+company: 'Independent'
+showInProjects: true
+---
+
+A public knowledge-sharing repo for Databases notes (papers, CS186 course notes, Scala docs notes, etc.)

gatsby-config.js

@@ -1,12 +1,12 @@
 const config = require('./src/config');
 
 module.exports = {
+  pathPrefix: '',
   siteMetadata: {
     title: 'Amanda Liu',
-    description:
-      'Amanda Liu is a software engineer who specializes in open source development.',
+    description: 'Amanda Liu is a software engineer who specializes in open source development.',
     siteUrl: 'https://asl3.github.io', // No trailing slash allowed!
-    image: '/og.png', // Path to your image you placed in the 'static' folder
+    image: 'og.png', // Path to your image you placed in the 'static' folder
     twitterUsername: '',
   },
   plugins: [
@@ -77,7 +77,7 @@ module.exports = {
               maxWidth: 700,
               linkImagesToOriginal: true,
               quality: 90,
-              tracedSVG: { color: config.colors.green },
+              // tracedSVG: { color: config.colors.green },
             },
           },
           {

package.json

@@ -20,7 +20,9 @@
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "prepare": "husky install",
-    "lint-staged": "lint-staged"
+    "lint-staged": "lint-staged",
+    "deploy": "gatsby build --prefix-paths && gh-pages -d public",
+    "deploy:ci": "gatsby build --prefix-paths && gh-pages -d public -r https://[email protected]/asl3/asl3.github.io.git"
   },
   "lint-staged": {
     "*.{js,css,json,md}": [
@@ -50,6 +52,7 @@
     "gatsby-source-filesystem": "^3.4.0",
     "gatsby-transformer-remark": "^4.1.0",
     "gatsby-transformer-sharp": "^3.4.0",
+    "gh-pages": "^6.1.1",
     "lodash": "^4.17.19",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",

src/components/footer.js

@@ -108,28 +108,15 @@ const Footer = () => {
         <a href="https://github.com/asl3">
           <div>Built by Amanda Liu</div>
           <br></br>
-          <div>Theme by Brittany Chiang</div>
-
-          {githubInfo.stars && githubInfo.forks && (
-            <div className="github-stats">
-              <span>
-                <Icon name="Star" />
-                <span>{githubInfo.stars.toLocaleString()}</span>
-              </span>
-              <span>
-                <Icon name="Fork" />
-                <span>{githubInfo.forks.toLocaleString()}</span>
-              </span>
-            </div>
-          )}
+          <div>Theme Inspo from Brittany Chiang</div>
         </a>
       </StyledCredit>
     </StyledFooter>
   );
 };
 
-Footer.propTypes = {
-  githubInfo: PropTypes.object,
-};
+// Footer.propTypes = {
+//   githubInfo: PropTypes.object,
+// };
 
 export default Footer;

src/components/loader.js

@@ -3,7 +3,6 @@ import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 import anime from 'animejs';
 import styled from 'styled-components';
-import { IconLoader } from '@components/icons';
 
 const StyledLoader = styled.div`
   ${({ theme }) => theme.mixins.flexCenter};
@@ -40,7 +39,13 @@ const StyledLoader = styled.div`
 const Loader = ({ finishLoading }) => {
   const [isMounted, setIsMounted] = useState(false);
 
-  const animate = () => {
+  useEffect(() => {
+    const timeout = setTimeout(() => setIsMounted(true), 10);
+    animate();
+    return () => clearTimeout(timeout);
+  }, []);
+
+  function animate() {
     const loader = anime.timeline({
       complete: () => finishLoading(),
     });
@@ -74,20 +79,29 @@ const Loader = ({ finishLoading }) => {
         opacity: 0,
         zIndex: -1,
       });
-  };
+  }
+
+  // Typewriter effect
+  function typeWriter(text, i) {
+    if (i < text.length) {
+      setText(prevText => prevText + text.charAt(i));
+      i++;
+      setTimeout(() => typeWriter(text, i), 100);
+    }
+  }
+
+  const [text, setText] = useState('');
 
   useEffect(() => {
-    const timeout = setTimeout(() => setIsMounted(true), 10);
-    animate();
-    return () => clearTimeout(timeout);
+    typeWriter('welcome to my site', 0);
   }, []);
 
   return (
     <StyledLoader className="loader" isMounted={isMounted}>
       <Helmet bodyAttributes={{ class: `hidden` }} />
 
       <div className="logo-wrapper">
-        welcome to my site
+        {text}
       </div>
     </StyledLoader>
   );

src/components/sections/featured.js

@@ -56,7 +56,7 @@ const StyledProject = styled.li`
         padding: 25px 25px 20px;
       }
     }
-    .project-tech-list {
+    .project-keywords-list {
       justify-content: flex-end;
 
       @media (max-width: 768px) {
@@ -181,7 +181,7 @@ const StyledProject = styled.li`
     }
   }
 
-  .project-tech-list {
+  .project-keywords-list {
     display: flex;
     flex-wrap: wrap;
     position: relative;
@@ -319,7 +319,7 @@ const Featured = () => {
                   gatsbyImageData(width: 700, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
                 }
               }
-              tech
+              keywords
               github
               external
               cta
@@ -348,21 +348,21 @@ const Featured = () => {
   return (
     <section id="projects">
       <h2 className="numbered-heading" ref={revealTitle}>
-        Blog Posts
+        Featured Blog Posts
       </h2>
 
       <StyledProjectsGrid>
         {featuredProjects &&
           featuredProjects.map(({ node }, i) => {
             const { frontmatter, html } = node;
-            const { external, title, tech, github, cover, cta } = frontmatter;
+            const { external, title, keywords, github, cover, cta } = frontmatter;
             const image = getImage(cover);
 
             return (
               <StyledProject key={i} ref={el => (revealProjects.current[i] = el)}>
                 <div className="project-content">
                   <div>
-                    <p className="project-overline">Featured Blog</p>
+                    <p className="project-overline">Blog</p>
 
                     <h3 className="project-title">
                       <a href={external}>{title}</a>
@@ -373,10 +373,10 @@ const Featured = () => {
                       dangerouslySetInnerHTML={{ __html: html }}
                     />
 
-                    {tech.length && (
-                      <ul className="project-tech-list">
-                        {tech.map((tech, i) => (
-                          <li key={i}>{tech}</li>
+                    {keywords.length && (
+                      <ul className="project-keywords-list">
+                        {keywords.map((keywords, i) => (
+                          <li key={i}>{keywords}</li>
                         ))}
                       </ul>
                     )}

src/components/sections/hero.js

@@ -82,7 +82,7 @@ const Hero = () => {
   const five = (
     <a
       className="email-link"
-      href="https://github.com/asl3"
+      href="https://mandymade.digitalpress.blog/"
       target="_blank"
       rel="noreferrer">
       Check out my blog!

src/config.js

@@ -17,14 +17,14 @@ module.exports = {
       name: 'About',
       url: '/#about',
     },
-    {
-      name: 'Experience',
-      url: '/#jobs',
-    },
     {
       name: 'Blog',
       url: '/#projects',
     },
+    {
+      name: 'Experience',
+      url: '/#jobs',
+    },
     {
       name: 'Contact',
       url: '/#contact',

src/pages/index.js

@@ -12,8 +12,8 @@ const IndexPage = ({ location }) => (
     <StyledMainContainer className="fillHeight">
       <Hero />
       <About />
-      <Jobs />
       <Featured />
+      <Jobs />
       <Projects />
       <Contact />
     </StyledMainContainer>