From 2f1ef76cf52f4a7195aa65bc7789d4da3aa7e18a Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 3 Aug 2023 23:03:36 -0700 Subject: [PATCH 1/2] Remove blogs section --- src/App.test.tsx | 4 +- src/Blog/Article.tsx | 19 ------ src/Blog/ArticleContainer.tsx | 29 --------- src/Blog/Blog.css | 62 ------------------- src/Blog/Blog.tsx | 44 ------------- src/Blog/BlogContainer.tsx | 32 ---------- src/Blog/BlogContext.ts | 4 -- src/Home.tsx | 5 -- src/Projects/ProjectsContainer.tsx | 2 +- src/TopBarContainer.tsx | 5 -- src/content/articles.json | 12 ---- src/content/articles/placeholder.md | 2 - src/content/projectblurbs.json | 10 +++ src/content/projects.json | 8 +++ src/content/projects/dream-machines.json | 8 +++ .../{articles => projects}/dream-machines.md | 0 .../projects/the-brain-as-computer.json | 8 +++ .../the-brain-as-computer.md | 0 src/index.tsx | 16 ----- 19 files changed, 37 insertions(+), 233 deletions(-) delete mode 100644 src/Blog/Article.tsx delete mode 100644 src/Blog/ArticleContainer.tsx delete mode 100644 src/Blog/Blog.css delete mode 100644 src/Blog/Blog.tsx delete mode 100644 src/Blog/BlogContainer.tsx delete mode 100644 src/Blog/BlogContext.ts delete mode 100644 src/content/articles.json delete mode 100644 src/content/articles/placeholder.md create mode 100644 src/content/projects/dream-machines.json rename src/content/{articles => projects}/dream-machines.md (100%) create mode 100644 src/content/projects/the-brain-as-computer.json rename src/content/{articles => projects}/the-brain-as-computer.md (100%) diff --git a/src/App.test.tsx b/src/App.test.tsx index c2cd26f..109346f 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import Home from './Home'; -test('renders learn react link', () => { +test('renders Projects tab', () => { render(); - const linkElement = screen.getByText(/Blog/i); + const linkElement = screen.getByText(/Projects/i); expect(linkElement).toBeInTheDocument(); }); diff --git a/src/Blog/Article.tsx b/src/Blog/Article.tsx deleted file mode 100644 index c88b680..0000000 --- a/src/Blog/Article.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from "react" -import './Blog.css' -import ReactMarkdown from "react-markdown" - -type Props = { - text: string -} - -export default function Article(props: Props) { - return ( -
-
- - {props.text} - -
-
- ) -} \ No newline at end of file diff --git a/src/Blog/ArticleContainer.tsx b/src/Blog/ArticleContainer.tsx deleted file mode 100644 index 197576b..0000000 --- a/src/Blog/ArticleContainer.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from "react" -import { useParams } from "react-router-dom"; -import { ArticleContext } from "./BlogContext"; -import Article from "./Article"; - -export default function ArticleContainer() { - const { id } = useParams(); - const articles = React.useContext(ArticleContext) - - let articleId = id || articles[0]?.id - const article = React.useMemo(() => articles.find(a => a.id === articleId), [ articles, articleId ]) - const pageId = article?.id || "placeholder" - - const [articleText, setArticleText] = React.useState("") - React.useEffect(() => { - import(`../content/articles/${pageId}.md`) - .then((res) => fetch(res.default)) - .then((response) => response.text()) - .then((result) => { - setArticleText(result) - }).catch(() => { - setArticleText("### Error: 404") - }) - }, [pageId]) - - return ( -
- ) -} \ No newline at end of file diff --git a/src/Blog/Blog.css b/src/Blog/Blog.css deleted file mode 100644 index 71b1003..0000000 --- a/src/Blog/Blog.css +++ /dev/null @@ -1,62 +0,0 @@ -.blog-container { - display: flex; - flex-direction: row; - width: calc(100% - 30px); - padding: 10px; - gap: 10px; - max-height: 85vh; - justify-content: center; - overflow-x: hidden; -} - -.blog-content { - display: flex; - flex-direction: column; - padding: 10px; - gap: 10px; - border-radius: 12px; - background-color: white; - box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224); - overflow-y: scroll; - flex-grow: 1; -} - -.blog-header { - display: flex; - flex-direction: column; -} - -.blog-title { - max-width: 160px; - color: rgba(0, 0, 0, 1); - font-size: 32px; - letter-spacing: 0%; - text-align: left; - font-family: "Roboto", sans-serif; -} - -.blog-subtitle { - max-width: 121px; - color: rgba(0, 0, 0, 1); - font-size: 20px; - letter-spacing: 0%; - text-align: left; - font-family: "Roboto", sans-serif; -} - -.blog-text { - color: rgba(0, 0, 0, 1); - font-size: 15px; - letter-spacing: 0%; - line-height: 1.5; - text-align: left; - font-family: "Roboto", sans-serif; -} - -.more-posts { - text-align: left; - font-family: "Roboto", sans-serif; - font-size: 20px; - padding-bottom: 10px; - color: rgba(111, 111, 111, 1); -} \ No newline at end of file diff --git a/src/Blog/Blog.tsx b/src/Blog/Blog.tsx deleted file mode 100644 index 2910f79..0000000 --- a/src/Blog/Blog.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from "react"; -import { Outlet, useParams } from "react-router-dom"; -import FilterNavigator, { ListItem } from "../FilterNavigator/FilterNavigator"; -import './Blog.css' -import PlatformContext, { FormFactor } from "../Platform/PlatformContext"; - - -type Props = { - articles: ListItem[] -} - -export default function Blog(props: Props) { - const platformInfo = React.useContext(PlatformContext) - let { id } = useParams() - - if (platformInfo.formFactor === FormFactor.Wide) { - return ( - <> -
- - -
- - ); - } - - if (id === undefined) { - return ( - <> -
- -
- - ); - } - - return ( - <> -
- -
- - ); -} \ No newline at end of file diff --git a/src/Blog/BlogContainer.tsx b/src/Blog/BlogContainer.tsx deleted file mode 100644 index 55c6024..0000000 --- a/src/Blog/BlogContainer.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from "react"; -import './Blog.css' -import { ArticleContext } from "./BlogContext"; -import LoadingPage from "../Loading/LoadingPage"; -import Blog from "./Blog"; -import { ListItem } from "../FilterNavigator/FilterNavigator"; - -export default function BlogContainer() { - const [articles, setArticles] = React.useState([]) - const [isPending, startTransition] = React.useTransition() - - React.useEffect(() => { - import("../content/articles.json") - .then((json) => { - startTransition(() => { - setArticles(json.default.articles) - }) - }) - }, []) - - if (isPending || articles.length === 0) { - return ( - - ) - } - - return ( - - - - ); -} \ No newline at end of file diff --git a/src/Blog/BlogContext.ts b/src/Blog/BlogContext.ts deleted file mode 100644 index b976f48..0000000 --- a/src/Blog/BlogContext.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createContext } from "react"; -import { ListItem } from "../FilterNavigator/FilterNavigator"; - -export const ArticleContext = createContext([]) diff --git a/src/Home.tsx b/src/Home.tsx index ecc6363..ecb6594 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -13,11 +13,6 @@ export default function Home() {
henry.allen
-
- -
Blog
- -
Projects
diff --git a/src/Projects/ProjectsContainer.tsx b/src/Projects/ProjectsContainer.tsx index bacc2ae..2c1fd28 100644 --- a/src/Projects/ProjectsContainer.tsx +++ b/src/Projects/ProjectsContainer.tsx @@ -4,7 +4,7 @@ import { ListItem } from "../FilterNavigator/FilterNavigator"; import Projects from "./Projects"; import LoadingPage from "../Loading/LoadingPage"; -export default function BlogContainer() { +export default function ProjectsContainer() { const [projects, setProjects] = React.useState([]) const [isPending, startTransition] = React.useTransition() diff --git a/src/TopBarContainer.tsx b/src/TopBarContainer.tsx index f32e50e..0ab0517 100644 --- a/src/TopBarContainer.tsx +++ b/src/TopBarContainer.tsx @@ -23,11 +23,6 @@ export default function TopBarContainer() { : null } - -
- Blog -
-
Projects diff --git a/src/content/articles.json b/src/content/articles.json deleted file mode 100644 index 5edd384..0000000 --- a/src/content/articles.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "articles": [ - { - "id": "the-brain-as-computer", - "title": "The Brain as Computer" - }, - { - "id": "dream-machines", - "title": "Dream Machines" - } - ] -} \ No newline at end of file diff --git a/src/content/articles/placeholder.md b/src/content/articles/placeholder.md deleted file mode 100644 index c6fd71f..0000000 --- a/src/content/articles/placeholder.md +++ /dev/null @@ -1,2 +0,0 @@ -## There's nothing here ... -### It's seems like you've stumbled upon a broken link! \ No newline at end of file diff --git a/src/content/projectblurbs.json b/src/content/projectblurbs.json index 9f8ed02..f1cdb14 100644 --- a/src/content/projectblurbs.json +++ b/src/content/projectblurbs.json @@ -8,5 +8,15 @@ "id": "fire", "text": "## Fluid Fire\nNavier Stokes Fire Simulation", "thumbnailUrl": "images/fire.png" + }, + "the-brain-as-computer": { + "id": "the-brain-as-computer", + "text": "## The Brain as Computer\nHow useful is the computation understanding of mind?", + "thumbnailUrl": "images/thesis.png" + }, + "dream-machines": { + "id": "dream-machines", + "text": "## Dream Machines\nCan we model dreams with algorithms?", + "thumbnailUrl": "images/thesis.png" } } \ No newline at end of file diff --git a/src/content/projects.json b/src/content/projects.json index a0eef0c..6146f0d 100644 --- a/src/content/projects.json +++ b/src/content/projects.json @@ -7,6 +7,14 @@ { "id": "fire", "title": "Fluid Fire Simulation" + }, + { + "id": "the-brain-as-computer", + "title": "The Brain as Computer" + }, + { + "id": "dream-machines", + "title": "Dream Machines" } ] } \ No newline at end of file diff --git a/src/content/projects/dream-machines.json b/src/content/projects/dream-machines.json new file mode 100644 index 0000000..1a1a7c6 --- /dev/null +++ b/src/content/projects/dream-machines.json @@ -0,0 +1,8 @@ +{ + "content": [ + { + "type": "text", + "src": "projects/dream-machines.md" + } + ] +} \ No newline at end of file diff --git a/src/content/articles/dream-machines.md b/src/content/projects/dream-machines.md similarity index 100% rename from src/content/articles/dream-machines.md rename to src/content/projects/dream-machines.md diff --git a/src/content/projects/the-brain-as-computer.json b/src/content/projects/the-brain-as-computer.json new file mode 100644 index 0000000..cc3784a --- /dev/null +++ b/src/content/projects/the-brain-as-computer.json @@ -0,0 +1,8 @@ +{ + "content": [ + { + "type": "text", + "src": "projects/the-brain-as-computer.md" + } + ] +} \ No newline at end of file diff --git a/src/content/articles/the-brain-as-computer.md b/src/content/projects/the-brain-as-computer.md similarity index 100% rename from src/content/articles/the-brain-as-computer.md rename to src/content/projects/the-brain-as-computer.md diff --git a/src/index.tsx b/src/index.tsx index 2e17ea8..2be0ecf 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,9 +7,7 @@ import { RouterProvider, } from "react-router-dom"; import Home from './Home'; -import BlogContainer from './Blog/BlogContainer'; import TopBarContainer from './TopBarContainer'; -import ArticleContainer from './Blog/ArticleContainer'; import ProjectsContainer from './Projects/ProjectsContainer' import ProjectListContainer from './Projects/ProjectListContainer'; import ProjectPageContainer from './Projects/ProjectPageContainer'; @@ -25,20 +23,6 @@ const router = createHashRouter([ path: "/pages", element: , children: [ - { - path: "/pages/blog", - element: , - children: [ - { - index: true, - element: - }, - { - path: "/pages/blog/:id", - element: - } - ] - }, { path: "/pages/projects", element: , From a3e233be9c5dd48eee6e7f66dd00ea5e0628c065 Mon Sep 17 00:00:00 2001 From: Henry Date: Thu, 3 Aug 2023 23:31:26 -0700 Subject: [PATCH 2/2] Update css --- src/Home.tsx | 16 ++++++---------- src/index.css | 49 ++++++++++++++----------------------------------- 2 files changed, 20 insertions(+), 45 deletions(-) diff --git a/src/Home.tsx b/src/Home.tsx index ecb6594..95e5745 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -13,16 +13,12 @@ export default function Home() {
henry.allen
-
- -
Projects
- -
-
- -
Resume
- -
+ +
Projects
+ + +
Resume
+
diff --git a/src/index.css b/src/index.css index 3a7428c..dac3d07 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,5 @@ html, body { - margin: 0px; height: 100%; background-color: rgba(239, 239, 239, 1); } @@ -8,11 +7,9 @@ body { .container { display: flex; flex-direction: column; - max-width: 1930px; justify-content: flex-start; align-items: center; height: 100%; - margin: 0px; padding-top: 5%; padding-right: 5%; padding-bottom: 5%; @@ -23,8 +20,8 @@ body { .title { display: flex; flex-direction: column; - max-width: 574px; - color: rgba(111, 111, 111, 1); + max-width: 10em; + color: rgb(94, 161, 255); font-size: 5em; letter-spacing: 0%; text-align: left; @@ -34,16 +31,15 @@ body { .navigator { display: flex; flex-direction: column; - max-width: 1310px; margin-top: 5%; - /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.20000000298023224); */ } .columns { display: flex; + gap: 1em; } -@media (max-width: 999px) { +@media (max-width: 50em) { .columns { flex-direction: column; align-items: stretch; @@ -53,21 +49,20 @@ body { .button { display: flex; flex-direction: row; - max-width: 80px; justify-content: center; align-items: center; border-radius: 25px; box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224); - padding-top: 139px; - padding-right: 121px; - padding-bottom: 139px; - padding-left: 121px; + padding-top: 4em; + padding-right: 3em; + padding-bottom: 4em; + padding-left: 3em; border-color: rgba(255, 255, 255, 1); border-width: 1px; border-style: solid; background-color: rgba(255, 255, 255, 1); color: rgba(111, 111, 111, 1); - font-size: 40px; + font-size: 2.5em; letter-spacing: 0%; text-align: left; font-family: "Roboto", sans-serif; @@ -76,21 +71,20 @@ body { .button-compact { display: flex; flex-direction: row; - max-width: 80px; justify-content: center; align-items: center; border-radius: 25px; box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.20000000298023224); - padding-top: 20px; - padding-right: 121px; - padding-bottom: 20px; - padding-left: 121px; + padding-top: 1em; + padding-right: 5em; + padding-bottom: 1em; + padding-left: 5em; border-color: rgba(255, 255, 255, 1); border-width: 1px; border-style: solid; background-color: rgba(255, 255, 255, 1); color: rgba(111, 111, 111, 1); - font-size: 40px; + font-size: 1.5em; letter-spacing: 0%; text-align: left; font-family: "Roboto", sans-serif; @@ -109,19 +103,4 @@ input[type="text"] { .button:hover { background-color: rgb(183, 213, 255); border-color: rgb(183, 213, 255); -} - -.button-column { - display: flex; - flex-direction: column; - line-height: normal; - width: calc(35.43% - 13.333333333333334px); - margin-left: 20px; - margin-bottom: 20px; -} - -@media (max-width: 999px) { - .button-column { - width: 100%; - } } \ No newline at end of file