Merge pull request #10 from k27dong/mainpage_remake

Mainpage remake
k27dong · Apr 14, 2024 · a8f811e · a8f811e
2 parents 502f8f2 + f95cd04
commit a8f811e
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 70 deletions.
diff --git a/docs/salt/百年孤独.md b/docs/salt/百年孤独.md
@@ -1,6 +1,6 @@
 ---
 title: 百年孤独
-author: 加西亚•马尔克斯
+author: 加西亚·马尔克斯
 format: weread2
 id: 84
 num: 163

diff --git a/web/app/App.jsx b/web/app/App.jsx
@@ -12,6 +12,7 @@ import Resume from "./files/resume"
 import AboutMain from "./about/about-main"
 import ScrollTop from "./scroll-top"
 import ProjectMain from "./project/project-main"
+import CV from "./cv"
 
 const App = () => {
   console.log(
@@ -72,6 +73,9 @@ const App = () => {
             <Route path="/project" exact>
               <ProjectMain />
             </Route>
+            {/* <Route path="/cv" exact>
+              <CV />
+            </Route> */}
             <Route path="/404">
               <NotFound />
             </Route>

diff --git a/web/app/about/about-main.jsx b/web/app/about/about-main.jsx
@@ -9,6 +9,7 @@ import { CONST } from "../util"
 
 const LangSwitch = styled(Switch)`
   position: absolute;
+  right: 15%;
 `
 
 const ABOUTINFO = {

diff --git a/web/app/about/cn-intro.jsx b/web/app/about/cn-intro.jsx
@@ -1,17 +1,22 @@
 import { AboutTitle, AboutContent, SocialMedia, Signature } from "./font-book"
-import { MyAge } from "../util"
+import { MyAge, CONST } from "../util"
 import Link from "../component/link"
 
 const CnIntro = () => {
   return (
     <>
+      <AboutContent>
+        SWE @ <Link href={CONST.AUTODESK}>Autodesk</Link>。
+      </AboutContent>
+
       <AboutContent>
         我是滑铁卢大学
         <Link href="https://uwaterloo.ca/future-students/programs/computer-engineering">
           计算机工程
         </Link>
         的毕业生。
       </AboutContent>
+
       <AboutContent>我今年{MyAge()}岁，住在多伦多。</AboutContent>
       <AboutTitle>联系方式</AboutTitle>
       <SocialMedia />

diff --git a/web/app/about/en-intro.jsx b/web/app/about/en-intro.jsx
@@ -1,17 +1,20 @@
 import { AboutTitle, AboutContent, SocialMedia } from "./font-book"
-import { MyAge } from "../util"
+import { MyAge, CONST } from "../util"
 import Link from "../component/link"
 
 const EnIntro = () => {
   return (
     <>
       <AboutContent>
-        I'm a graduate of the University of Waterloo in{" "}
-        <Link href="https://uwaterloo.ca/future-students/programs/computer-engineering">
-          Computer Engineering
-        </Link>
-        .
+        Software Engineer at <Link href={CONST.AUTODESK}>Autodesk</Link>.
       </AboutContent>
+
+      <AboutContent>
+        University of Waterloo{" "}
+        <Link href={CONST.UWCE}>Computer Engineering</Link> alumnus, Class of
+        2023.
+      </AboutContent>
+
       <AboutContent>
         I'm {MyAge()} years old, currently living in Toronto, Canada.
       </AboutContent>

diff --git a/web/app/cv.jsx b/web/app/cv.jsx
@@ -0,0 +1,15 @@
+import BlogPage from "./blog/blog-page"
+
+const CV = () => {
+  return (
+    <BlogPage>
+        Projects <br />
+        Skills <br />
+        Work Experience <br />
+        Education<br />
+        TODO
+    </BlogPage>
+  )
+}
+
+export default CV
diff --git a/web/app/main.jsx b/web/app/main.jsx
@@ -1,75 +1,89 @@
 import styled from "styled-components"
-import { Button } from "antd"
-import { CONST } from "./util"
 import { withRouter } from "react-router-dom"
-import { isBrowser } from "react-device-detect"
-import GithubCorner from "react-github-corner"
-import Intro from "./intro"
+import {
+  GithubOutlined,
+  FilePdfFilled,
+  LinkedinFilled,
+} from "@ant-design/icons"
+import { CONST } from "./util"
 
-const Name = styled.p`
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
-  font-weight: bold;
-  font-size: 3rem;
-  line-height: 1.25;
-  letter-spacing: -0.1rem;
-  color: ${CONST.COLORS.TITLE};
-  margin-bottom: 15px;
-`
+const Main = (props) => {
+  const MainContainer = styled.div`
+    margin: auto;
+    height: 95vh;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-family: "Georgia", "Cambria", "Times New Roman", "Times", serif;
+  `
 
-const Container = styled.div`
-  position: absolute;
-  top: 30%;
-  margin-left: 5%;
-`
+  const Name = styled.div`
+    margin: 1rem 0;
+    font-weight: 700;
+    font-size: 1.85rem;
 
-const LinkButton = styled(Button)`
-  margin-right: 12px;
-`
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+    }
+  `
 
-const Main = (props) => {
-  const toPage = (page) => {
-    switch (page) {
-      case "about":
-        props.history.push("/about")
-        break
-      case "blog":
-        props.history.push("/blog")
-        break
-      case "project":
-        props.history.push("/project")
-        break
-      case "github":
-        window.open(CONST.GITHUB, "_blank")
-        break
-      case "linkedin":
-        window.open(CONST.LINKEDIN, "_blank")
-        break
-      case "resume":
-        window.open(CONST.RESUME, "_blank")
-        break
-      default:
-        console.log("error")
+  const MainNavGroup = styled.div``
+
+  const MainLink = styled.div`
+    text-align: center;
+    display: block;
+    background-color: transparent;
+    line-height: 1.625;
+    font-size: 1.1rem;
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
     }
-  }
+  `
+
+  const MainLinkGroup = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+    flex-direction: row;
+    font-size: 1.1rem;
+    gap: 1rem;
+  `
 
   return (
     <>
-      <GithubCorner
-        target="_blank"
-        href="https://github.com/k27dong/mywebsite"
-      />
-      <Container>
-        <Name>Kefan Dong</Name>
-        <Intro />
-        <LinkButton onClick={() => toPage("about")}>About</LinkButton>
-        <LinkButton onClick={() => toPage("project")}>Projects</LinkButton>
-        <LinkButton onClick={() => toPage("github")}>Github</LinkButton>
-        <LinkButton onClick={() => toPage("linkedin")}>LinkedIn</LinkButton>
-        {isBrowser && (
-          <LinkButton onClick={() => toPage("resume")}>Resume</LinkButton>
-        )}
-      </Container>
+      <MainContainer>
+        <Name onClick={() => props.history.push("/about")}>Kefan Dong</Name>
+        <MainNavGroup>
+          <MainLink onClick={() => props.history.push("/project")}>
+            PROJECT
+          </MainLink>
+          <MainLink onClick={() => props.history.push("/blog")}>BLOG</MainLink>
+          <MainLink onClick={() => props.history.push("/salt")}>NOTE</MainLink>
+          {/* <MainLink onClick={() => props.history.push("/cv")}>CV</MainLink> */}
+          <MainLink
+            onClick={() => window.open(`Kevin_Dong_Resume.pdf`, "_blank")}
+          >
+            CV
+          </MainLink>
+        </MainNavGroup>
+
+        <MainLinkGroup>
+          <GithubOutlined onClick={() => window.open(CONST.GITHUB, "_blank")} />
+          <LinkedinFilled
+            onClick={() => window.open(CONST.LINKEDIN, "_blank")}
+          />
+          {/* <MailFilled /> */}
+          <FilePdfFilled
+            onClick={() => window.open(`Kevin_Dong_Resume.pdf`, "_blank")}
+          />
+        </MainLinkGroup>
+      </MainContainer>
     </>
   )
 }