Skip to content

Commit

Permalink
float changed, screen fitted
Browse files Browse the repository at this point in the history
  • Loading branch information
Isaac Jin committed Dec 19, 2022
1 parent 1a64485 commit c637d6a
Show file tree
Hide file tree
Showing 12 changed files with 262 additions and 93 deletions.
124 changes: 103 additions & 21 deletions components/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@ const isDev = process.env.NODE_ENV === 'development'
export default function Layout({children, section}: {
children: ReactNode, section?: string
}) {

const profileButton = (section === "profile") ?
<div className={"navi-selected"}>Profile</div> :
<Link href={"/profile"}>
<div className={"navi-unselected hover:navi-selected"}>Profile</div>
</Link>

const articleButton = (section === "articles") ?
<div className={"navi-selected"}>Articles</div> :
<Link href={"/articles"}>
Expand Down Expand Up @@ -52,34 +59,109 @@ export default function Layout({children, section}: {

{/* navigator bar */}
<div
className="px-[12%] items-center select-none fixed h-10 inset-x-0 flex justify-end z-10 gap-10 backdrop-blur-lg border-b border-gray-700/20">
<div className={"flex-grow justify-items-start flex items-center"}>
<Link href={"/"}>
<div className={"cursor-pointer flex gap-2 text-black hover:text-[#996E5C]"}>
<Image src={"/favicon.svg"} width={"28"} height={"28"} alt={"icon"}></Image>
<div className={"font-extrabold text-2xl"}>{siteTitle}</div>
</div>
</Link>
</div>
<div className={"flex flex-none"}>
{articleButton}
{talkButton}
{friendButton}
</div>
<div className={"flex-none flex gap-4"}>
<Image src={"/icons/night.svg"} className={"cursor-pointer"} width={"20"} height={"20"}
alt={"night"}></Image>
<Image src={"/icons/night.svg"} className={"cursor-pointer"} width={"20"} height={"20"}
alt={"night"}></Image>
className={"backdrop-blur-lg border-b border-gray-700/20 select-none fixed h-10 inset-x-0 z-10 gap-x-10 flex justify-center"}>
<div className={"flex justify-end grow max-w-[1080px]"}>
<div className={"flex items-center grow align-self-start"}>
<Link href={"/"}>
<div className={"cursor-pointer flex gap-2 text-black hover:text-[#996E5C]"}>
<Image src={"/favicon.svg"} width={"28"} height={"28"} alt={"icon"}></Image>
<div className={"font-extrabold text-2xl"}>{siteTitle}</div>
</div>
</Link>
</div>
<div className={"flex flex-none"}>
{profileButton}
{articleButton}
{talkButton}
{friendButton}
</div>
{/* TODO: Night Mode */}
{/*<div className={"flex-none flex gap-4"}>*/}
{/* <Image src={"/icons/night.svg"} className={"cursor-pointer"} width={"20"} height={"20"}*/}
{/* alt={"night"}></Image>*/}
{/* <Image src={"/icons/night.svg"} className={"cursor-pointer"} width={"20"} height={"20"}*/}
{/* alt={"night"}></Image>*/}
{/*</div>*/}

</div>

</div>

{/* background */}
<div className={"blur-sm bg-cover bg-repeat-y bg-center bg-fixed absolute inset-0 opacity-[.02] -z-10"}
style={{backgroundImage: "url(/favicon.svg)"}}></div>

<div className={"mt-20 px-[12%]"}>
<main>{children}</main>
<div className={"mt-20 flex justify-center"}>
<div className={"grid-cols-5 grid gap-3 max-w-[1080px] grow"}>
{/* Personal Profile on Left */}
<div>
<div className={"grid border-r fixed max-w-[230px] w-[16%] pr-4 top-20 bottom-10 content-between"}>
<div className={"grid gap-y-2 justify-items-start"}>
<div>
<Image
priority
src={"/images/profile.jpg"}
className={"rounded-3xl"}
height={"180"}
width={"180"}
alt={name}
/>
</div>
<div className={"text-3xl font-extrabold"}>{name}</div>
<div className={"text-gray-400"}>{`Control freak.`}</div>
<div>UG Student @ <Link href={"https://www.sustech.edu.cn/"}><span
className={"link-ina"}>SUSTech</span></Link></div>
<div>Visiting Student<br/>@ <Link href={"https://www.wisc.edu"}><span
className={"link-ina"}>UW - Madison</span></Link></div>
</div>

<div className={"grid gap-y-2 justify-items-start"}>
<div className={"flex gap-x-4"}>
<div>
<Link href={"https://twitter.com/Whale__Eye"}>
<Image src={"/icons/twitter-icon.svg"} className={"cursor-pointer"}
width={"30"}
height={"30"} alt={"GitHub"}></Image>
</Link>
</div>
<div>
<Link href={"https://www.github.com/WHALEEYE"}>
<Image src={"/icons/github-icon.svg"} className={"cursor-pointer"}
width={"30"}
height={"30"} alt={"Twitter"}>
</Image>
</Link>
</div>
<div>
<Link href={"https://steamcommunity.com/id/whaleeye/"}>
<Image src={"/icons/steam-icon.svg"} className={"cursor-pointer"}
width={"30"}
height={"30"} alt={"Steam"}>
</Image>
</Link>
</div>
<div>
<Link href={"https://www.facebook.com/whale.swaggy"}>
<Image src={"/icons/facebook-icon.svg"} className={"cursor-pointer"}
width={"30"} height={"30"} alt={"Steam"}>
</Image>
</Link>
</div>
</div>
<div>
<Link href={"mailto:[email protected]"}>
<div className={"link-ina"}>Contact me</div>
</Link>
</div>
</div>
</div>
</div>

{/* Brief information on the right */}
<div className={"col-span-4 ml-20"}>
<main>{children}</main>
</div>
</div>
</div>


Expand Down
6 changes: 2 additions & 4 deletions pages/articles/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,9 @@ export default function Home({sortedPostsData}: {
{/* Brief information on the right */}
<div className={"grid gap-y-4"}>

<div className={"leading-normal"}>
<p>This is the homepage of articles.</p>
</div>
<div>This is the homepage of articles.</div>

<div className={"grid gap-y-12"}>
<div className={"grid gap-y-4"}>
{/*Featured*/}
{(featured.length != 0) && (
<div>
Expand Down
96 changes: 32 additions & 64 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import Head from 'next/head'
import Layout, {name, siteTitle} from '../components/layout'
import Layout, {siteTitle} from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import {getLatestPostsData} from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import {GetStaticProps} from 'next'
import Image from "next/image";
import React from "react";

export default function Home({allLatestPostsData}: {
Expand All @@ -19,79 +18,48 @@ export default function Home({allLatestPostsData}: {
}[]
}) {
return (
<Layout>
<Layout section={"home"}>
<Head>
<title>{siteTitle}</title>
</Head>
<div className={"grid-cols-4 grid gap-3 justify-items-start"}>
{/* Personal Profile on Left */}
<div className={"grid col-span-1 gap-y-8 mt-[18px]"}>
<div>
<Image
priority
src={"/images/profile.jpg"}
className={"rounded-2xl"}
height={144}
width={144}
alt={name}
/>
<h1 className={"text-3xl font-extrabold justify-self-center"}>{name}</h1>
<div className={"grid gap-y-8"}>
{/* bios */}
<div className={"grid gap-y-3"}>
<div>Hello there! Welcome to CHAOS, my personal blog.</div>
<div>The articles about academic and technical topics will be collected in <Link
href={"/articles"}><span
className={"link-ina"}>articles</span></Link>, and those about casual, miscellaneous topics
can be seen in <Link href={"/talks"}><span className={"link-ina"}>talks</span></Link>. Feel
free to take a look at them.
</div>

<div>Researching on <b>System Security</b> and <b>Network Security</b></div>

<div className={"grid gap-3"}>
<div className={"grid"}>
<div><b>Undergraduate</b> student of <br/><b>Southern University of Science and
Technology</b></div>
<div className={"text-gray-400 text-sm"}><b>2019.9</b> to <b>Present</b></div>
</div>
<div>
<div><b>Visiting</b> student of <br/><b>University of Wisconsin - Madison</b></div>
<div className={"text-gray-400 text-sm"}><b>2022.9</b> to <b>Present</b></div>
</div>
<div>You can see my CV <Link href={"/CV.pdf"}><span className={"link-ina"}>here</span></Link> if
interested.
</div>

<div>Have a good time! =)</div>
</div>

{/* Brief information on the right */}
<div className={"grid col-span-3 ml-20 gap-y-4"}>
{/* bios */}
<div className={"leading-normal"}>
<p>Hello there! Welcome to CHAOS, my personal blog.</p>
<p>The articles about academic and technical topics will be collected in <Link
href={"/articles"}><span
className={"link-ina"}>articles</span></Link>, and those about casual, miscellaneous topics
can be seen in <Link href={"/talks"}><span className={"link-ina"}>talks</span></Link>. Feel
free to take a look at them.</p>
<p>You can see my CV <Link href={"/CV.pdf"}><span className={"link-ina"}>here</span></Link> if
interested.</p>
<p>Have a good time! =)</p>
</div>
{/* Latest */}
<div className={"grid gap-y-12"}>
{allLatestPostsData.map(({section, posts}) => (
<div key={section}>
<div className={"text-2xl font-black mb-3"}>
Latest {section.charAt(0).toUpperCase() + section.slice(1)}
</div>
<div className={"grid gap-3"}>
{posts.map(({id, date, title}) => (
<div className={"list-none leading-relaxed"} key={id}>
<Link href={`/${section}/${id}`}>
<span className={"link-ina"}>{title}</span>
</Link>
<br/>
<small className={utilStyles.lightText}>
<Date dateString={date}/>
</small>
</div>
{/* Latest */}
<div className={"grid gap-y-12"}>
{allLatestPostsData.map(({section, posts}) => (
<div key={section}>
<div className={"text-2xl font-black mb-3"}>
Latest {section.charAt(0).toUpperCase() + section.slice(1)}
</div>
<div className={"grid gap-3"}>
{posts.map(({id, date, title}) => (
<div className={"list-none leading-relaxed"} key={id}>
<Link href={`/${section}/${id}`}>
<span className={"link-ina"}>{title}</span>
</Link>
<br/>
<small className={utilStyles.lightText}>
<Date dateString={date}/>
</small>
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
</Layout>
)
Expand Down
37 changes: 37 additions & 0 deletions pages/profile.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Head from 'next/head'
import Layout, {siteTitle} from '../components/layout'
import React from "react";

export const sectionName = "profile";

export default function Home() {
return (
<Layout section={sectionName}>
<Head>
<title>{siteTitle}</title>
</Head>

{/* Education */}
<div>
<div className={"heading-2xl"}>Education</div>
<div className={"leading-loose"}>
<div className={"grid gap-y-1"}>
<div><b>Undergraduate</b> student of <br/><b>Southern University of Science and
Technology</b></div>
<div className={"text-gray-400 text-sm"}><b>2019.9</b> to <b>Present</b></div>
</div>
<div className={"grid gap-y-1"}>
<div><b>Visiting</b> student of <br/><b>University of Wisconsin - Madison</b>
</div>
<div className={"text-gray-400 text-sm"}><b>2022.9</b> to <b>Present</b></div>
</div>
</div>
</div>

<div className={"grid gap-y-12"}>
</div>
</Layout>
)
}


6 changes: 2 additions & 4 deletions pages/talks/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,9 @@ export default function Home({sortedPostsData}: {
{/* Brief information on the right */}
<div className={"grid gap-y-4"}>

<div className={"leading-normal"}>
<p>This is the homepage of talks.</p>
</div>
<div>This is the homepage of talks.</div>

<div className={"grid gap-y-12"}>
<div className={"grid gap-y-4"}>
{/*Featured*/}
{(featured.length != 0) && (
<div>
Expand Down
34 changes: 34 additions & 0 deletions posts/articles/pre-rendering-123.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: 'Two Forms of Pre-rendering'
date: '2020-01-01'
---

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js let's you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js let's you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js let's you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.

- **Static Generation** is the pre-rendering method that generates the HTML at **build time**. The pre-rendered HTML is then _reused_ on each request.
- **Server-side Rendering** is the pre-rendering method that generates the HTML on **each request**.

Importantly, Next.js let's you **choose** which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

中文测试
Loading

1 comment on commit c637d6a

@vercel
Copy link

@vercel vercel bot commented on c637d6a Dec 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chaos – ./

chaos-whaleeye.vercel.app
chaos-git-main-whaleeye.vercel.app
chaos-xi.vercel.app
www.whale3ye.com
whale3ye.com

Please sign in to comment.