Add Loading Animation

.github/workflows/deploy.yml

@@ -0,0 +1,29 @@
+name: Deploy to github.io
+
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Deploy
+        run: |
+          npm run deploy

src/Projects/ProjectPageContainer.tsx

@@ -31,9 +31,9 @@ export default function ArticleContainer() {
     const { id } = useParams();
     const projects = React.useContext(ProjectContext)
 
-    const project = React.useMemo(() => projects.find(a => a.id === id), [ projects, id ])
+    const project = React.useMemo(() => projects.find(a => a.id === id), [projects, id])
     const pageId = project?.id || "placeholder"
-    const [projectContent, setProjectContent] = React.useState<ProjectContent>(DEFAULT_CONTENT)
+    const [projectContent, setProjectContent] = React.useState<ProjectContent>()
     React.useEffect(() => {
         import(`../content/projects/${pageId}.json`)
             .then((result) => {
@@ -43,6 +43,10 @@ export default function ArticleContainer() {
             })
     }, [pageId])
 
+    if (!projectContent) {
+        return null
+    }
+
     return (
         <ProjectPage projectContent={projectContent} />
     )

src/Projects/Projects.css

@@ -16,7 +16,8 @@
     padding-top: 5em;
     flex-grow: 1;
     background-color: transparent;
-    gap: 4em
+    gap: 4em;
+    animation: fade-in 0.4s;
 }
 
 .projects-list-cell {
@@ -100,6 +101,19 @@
     line-height: 1.5;
     width: 100%;
     color: rgba(0, 2, 111, 1);
+    animation: fade-in 0.4s;
+}
+
+
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 100;
+    }
 }
 
 @media (min-width: 800px) {