Merge pull request #22 from khoaxuantu/dev

Update /about page style
khoaxuantu · Jan 11, 2024 · 8286e72 · 8286e72
2 parents 51f487c + 4f22fa5
commit 8286e72
Show file tree

Hide file tree

Showing 19 changed files with 89 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,9 @@
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
- "postbuild": "react-snap"
+ "postbuild": "react-snap",
+ "style:main": "sass --watch src/css/scss/style.scss src/css/style.css",
+ "style:md": "sass --watch src/css/scss/markdown.scss src/css/markdown.css"
  },
  "eslintConfig": {
  "extends": [

diff --git a/public/404.html b/public/404.html
@@ -2,7 +2,7 @@
 <html>
  <head>
  <meta charset="utf-8">
- <title>Single Page Apps for GitHub Pages</title>
+ <title>404</title>
  <script type="text/javascript">
  // Single Page Apps for GitHub Pages
  // MIT License
@@ -37,4 +37,4 @@
  </head>
  <body>
  </body>
-</html>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -6,9 +6,9 @@
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <!-- Syntax Higlighting -->
- <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css"> -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
  <!-- Katex -->
- <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous"> -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
  <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/logo/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/logo/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/logo/favicon-16x16.png">

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { Suspense, lazy } from "react";
-import { Route, Routes, useLocation, Navigate } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
 import MainLayout from "./components/layouts/main";
 import BlogLayout from "./components/layouts/blog";
 import NavbarContainLayout from "./components/layouts/navbarContain";
@@ -62,10 +62,9 @@ function App() {
  </Suspense>
  }
  />
- <Route path="404" element={<NotFound />} />
  </Route>
  </Route>
- <Route path="*" element={<Navigate to="/404" replace={true} />} />
+ <Route path="*" element={<NotFound />} />
  </Routes>
  </>
  );

diff --git a/src/components/404.tsx b/src/components/404.tsx
@@ -1,8 +1,25 @@
 import { Link } from "react-router-dom";
+import { Metadata } from "./seo/Metadata";
+import CustomHead from "./seo";
+
+const notFoundDescription = "Oi ~ This URL does not exist, get to my homepage at https://xuankhoatu.com/"
+const metadata: Metadata = {
+ title: "404",
+ description: notFoundDescription,
+ og: {
+ title: "404 | Page not found",
+ description: notFoundDescription,
+ },
+ twitter: {
+ title: "404 | Page not found",
+ description: notFoundDescription,
+ }
+}
 
 export default function NotFound() {
  return (
  <>
+ <CustomHead metadata={metadata} />
  <div className="background-overlay"></div>
  <div className={`container menu-wrapper center transition-menu`}>
  <div className="header-grp center">

diff --git a/src/components/blogs/blogs.tsx b/src/components/blogs/blogs.tsx
@@ -48,7 +48,7 @@ export function BlogsList(props: {blogInfoList: { dictKey: string; date: string;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
 
- if (scrollTop + clientHeight >= scrollHeight && hasMore) {
+ if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore) {
  setStartId(startId => startId + blogsNum);
  }
  }

diff --git a/src/components/copyright.tsx b/src/components/copyright.tsx
@@ -1,7 +1,12 @@
+import { useEffect, useState } from "react";
 import { BsGithub } from "react-icons/bs";
 
 function Copyright(props: { copyright_class?: string }) {
- const year = new Date().getFullYear();
+ const [year, setYear] = useState<number>();
+ useEffect(() => {
+ setYear(new Date().getFullYear());
+ }, []);
+
  return (
  <div className={`${props.copyright_class}`}>
  <div>

diff --git a/src/components/guestbook/list.tsx b/src/components/guestbook/list.tsx
@@ -42,7 +42,7 @@ function GuestbookList({maxGuests} : {maxGuests: number}) {
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
 
- if (scrollTop + clientHeight >= scrollHeight && hasMore) {
+ if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore) {
  setStartId(startId => startId + messageNums);
  }
  }

diff --git a/src/components/menu/contact.tsx b/src/components/menu/contact.tsx
@@ -1,8 +1,11 @@
+import { useEffect } from "react";
 import { SocialMediaBtnGroup } from "../button";
 import addOrientationHandler from "../orientation";
 
 function Contact() {
- addOrientationHandler();
+ useEffect(() => {
+ addOrientationHandler();
+ }, []);
 
  return (
  <>

diff --git a/src/components/menu/page.tsx b/src/components/menu/page.tsx
@@ -2,9 +2,13 @@ import MenuHeaderGrp from "./header";
 import Copyright from "../copyright";
 import { NavBtnGroup } from "../button";
 import addOrientationHandler from "../orientation";
+import { useEffect, useState } from "react";
 
 export default function MenuBuilder() {
- let orientation = addOrientationHandler();
+ const [orientation, setOrientation] = useState("center");
+ useEffect(() => {
+ setOrientation(addOrientationHandler());
+ }, []);
 
  return (
  <>

diff --git a/src/components/projects/projects.tsx b/src/components/projects/projects.tsx
@@ -9,23 +9,27 @@ export function AboutProject() {
 
  return (
  <section className="mb-5">
- <h3 className="header-txt">
- What I have built
- </h3>
- <div className="menu-proj-wrapper">{
- featuredProj.map(proj => {
- return (
- <Card key={proj.id} isFeatured={true} {...proj} />
- );
- })
- }</div>
- <div className="body-txt pt-3 pe-2 pb-2">
- Above are only my featured projects.
- Let's navigate to my full list here {" "}
- <span>
- ---{"> "}
- <Link to="/projects">All Projects</Link>
- </span>
+ <div className="row">
+ <div className="col-4 pe-5">
+ <h3 className="header-txt">
+ What I <span>have built</span>
+ </h3>
+ <div className="body-txt pt-3 pe-2 pb-2">
+ Here are only my featured projects.
+ Let's navigate to my full list here {" "}
+ <span>
+ ---{"> "}
+ <Link to="/projects"><span>All Projects</span></Link>
+ </span>
+ </div>
+ </div>
+ <div className="col-8 menu-proj-wrapper">{
+ featuredProj.map(proj => {
+ return (
+ <Card key={proj.id} isFeatured={true} {...proj} />
+ );
+ })
+ }</div>
  </div>
  </section>
  );

diff --git a/src/css/scss/components/_image.scss b/src/css/scss/components/_image.scss
@@ -44,6 +44,7 @@ img {
 .edu-image {
  width: 16.66%;
  min-width: 48px;
+ text-align: end;
  // border-right: 1px solid var.$light-gray;
 }
 

diff --git a/src/css/scss/general/_animation.scss b/src/css/scss/general/_animation.scss
@@ -14,7 +14,7 @@
 
 @keyframes fadeInUp {
  from {
- transform: translate3d(0, 5%, 0);
+ transform: translate3d(0, 24px, 0);
  opacity: 0;
  }
  to {
@@ -25,7 +25,7 @@
 
 @keyframes fadeInDown {
  from {
- transform: translate3d(0, -5%, 0);
+ transform: translate3d(0, -24px, 0);
  opacity: 0;
  }
  to {
@@ -36,7 +36,7 @@
 
 @keyframes fadeInLeft {
  from {
- transform: translate3d(-5%, 0, 0);
+ transform: translate3d(-24px, 0, 0);
  opacity: 0;
  }
  to {
@@ -59,7 +59,7 @@
 }
 
 .transition-page {
- @include animation(fadeInUp, .5s);
+ @include animation(fadeInUp, .3s);
 }
 
 .is-current {
@@ -68,10 +68,10 @@
 
 .transition-blog, .guestbook-txt {
  &>*{
- @include animation(fadeInLeft, 1s);
+ @include animation(fadeInLeft, .3s);
  }
 }
 
 .fade-in-left {
- @include animation(fadeInLeft, 1s);
+ @include animation(fadeInLeft, .3s);
 }
diff --git a/src/css/scss/general/_container.scss b/src/css/scss/general/_container.scss
@@ -28,7 +28,6 @@
 
 .menu-proj-wrapper {
  display: grid;
- grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 2rem;
 }
@@ -75,13 +74,6 @@
  }
 }
 
-@media (min-width: 976px) {
- .menu-proj-wrapper {
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(2, 1fr);
- }
-}
-
 @media (min-width: 1200px) {
  .project-wrapper {
  display: grid;

diff --git a/src/css/style.css b/src/css/style.css