wip: homepage update

ttttonyhe · Oct 6, 2024 · 500beb1 · 500beb1
1 parent 8814faf
commit 500beb1
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 71 deletions.
diff --git a/apps/main/package.json b/apps/main/package.json
@@ -28,6 +28,7 @@
 		"react-hotkeys-hook": "^3.4.7",
 		"react-redux": "^9.1.2",
 		"react-snowfall": "^2.1.1",
+		"react-wrap-balancer": "^1.1.1",
 		"redux-saga": "^1.3.0",
 		"rss": "^1.2.2",
 		"rss-parser": "^3.13.0",

diff --git a/apps/main/src/components/Footer/index.tsx b/apps/main/src/components/Footer/index.tsx
@@ -84,13 +84,6 @@ export default function Footer() {
 				</OffsetTransition>
 			</div>
 			<p className="text-4 tracking-wide text-gray-500 dark:text-gray-400">
-				<a
-					href="https://twitter.com/ttttonyhe"
-					target="_blank"
-					rel="noreferrer">
-					@ttttonyhe
-				</a>{" "}
-				<span>·</span>{" "}
 				<a
 					href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
 					target="_blank"
@@ -102,7 +95,7 @@ export default function Footer() {
 					href="https://github.com/ttttonyhe/ouorz-mono"
 					target="_blank"
 					rel="noreferrer">
-					OSS
+					Open Source Software (OSS)
 				</a>
 			</p>
 		</footer>

diff --git a/apps/main/src/components/SubscriptionBox/index.tsx b/apps/main/src/components/SubscriptionBox/index.tsx
@@ -44,7 +44,7 @@ const SubscriptionBox = ({
 		return (
 			<div className="my-2 flex w-full flex-col gap-y-3 rounded-md border bg-white px-4.5 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:flex-row lg:items-center lg:gap-x-10 lg:gap-y-0 lg:space-x-4 lg:py-3">
 				<div>
-					<p className="flex items-center whitespace-nowrap text-xl tracking-wide text-gray-600 dark:text-gray-400">
+					<p className="flex items-center whitespace-nowrap text-xl tracking-wide text-gray-600 dark:text-gray-300">
 						<span className="mr-2 h-7 w-7">
 							<Icon name="subscribe" />
 						</span>

diff --git a/apps/main/src/components/Top/index.tsx b/apps/main/src/components/Top/index.tsx
@@ -5,12 +5,12 @@ export default function Top() {
 	return (
 		<div className="mt-4 grid lg:grid-cols-5 lg:gap-3">
 			<div className="col-span-3 col-start-1 hidden grid-cols-3 gap-3 lg:grid">
-				<a target="_blank" href="https://github.com/ttttonyhe" rel="noreferrer">
+				<a target="_blank" href="https://x.com/lipeng_he" rel="noreferrer">
 					<Button
 						type="default"
-						icon="github"
-						className="!w-full text-3 leading-14 text-gray-700">
-						<span className="tracking-normal">Github</span>
+						icon="twitterX"
+						className="!w-full text-3 leading-14 text-gray-500">
+						Twitter
 					</Button>
 				</a>
 				<a
@@ -20,11 +20,11 @@ export default function Top() {
 					<Button
 						type="default"
 						icon="linkedIn"
-						className="!w-full text-3 leading-14 text-blue-600">
+						className="!w-full text-3 leading-14 text-gray-500">
 						<span className="tracking-normal">LinkedIn</span>
 					</Button>
 				</a>
-				<a target="_blank" href="mailto:tony.hlp@hotmail.com" rel="noreferrer">
+				<a target="_blank" href="mailto:he@lipeng.ac" rel="noreferrer">
 					<Button
 						type="default"
 						icon="email"
@@ -33,11 +33,20 @@ export default function Top() {
 					</Button>
 				</a>
 			</div>
-			<div className="lg:col-start-4 lg:col-end-6">
-				<Link href="/post/126">
-					<Button type="primary" icon="right" className="!w-full">
-						<span className="text-4 leading-14 tracking-normal lg:text-3">
-							More about me
+			<div className="lg:col-start-4 lg:col-end-6 lg:block flex whitespace-nowrap gap-x-2">
+				<Button
+					type="default"
+					icon="email"
+					className="!w-full lg:hidden text-3 leading-14 text-gray-500">
+					<span className="tracking-normal">Email</span>
+				</Button>
+				<Link href="https://cal.com/tonyhe/15min" target="_blank">
+					<Button
+						type="default"
+						icon="calendarSchedule"
+						className="!w-full text-green-600">
+						<span className="pl-0.5 text-4 leading-14 tracking-normal lg:text-3">
+							Schedule a Meeting
 						</span>
 					</Button>
 				</Link>

diff --git a/apps/main/src/pages/_document.tsx b/apps/main/src/pages/_document.tsx
@@ -27,7 +27,7 @@ class AppDocument extends Document {
 					/>
 					<meta
 						name="description"
-						content="living an absolutely not meaningless life with totally not unachievable goals."
+						content="Lipeng He, Student Researcher and Full Stack Software Engineer."
 					/>
 					<meta
 						name="keywords"
@@ -40,7 +40,7 @@ class AppDocument extends Document {
 					<meta property="og:title" content="Tony He" />
 					<meta
 						property="og:description"
-						content="Living an absolutely not meaningless life with totally not unachievable goals."
+						content="Lipeng He, Student Researcher and Full Stack Software Engineer."
 					/>
 					<meta
 						property="og:image"
@@ -59,7 +59,7 @@ class AppDocument extends Document {
 					/>
 					<meta
 						property="twitter:description"
-						content="Living an absolutely not meaningless life with totally not unachievable goals."
+						content="Lipeng He, Student Researcher and Full Stack Software Engineer."
 					/>
 					<meta name="theme-color" content="#f7f8f9" />
 					<link rel="canonical" href="https://lipeng.ac" />

diff --git a/apps/main/src/pages/index.tsx b/apps/main/src/pages/index.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@twilight-toolkit/ui"
 import { GetStaticProps } from "next"
 import Head from "next/head"
+import Link from "next/link"
 import React, { useEffect, useState } from "react"
 import ResearchPapers from "~/components/Banners/Research"
 // import NextJS13Preview from "~/components/Banners/NextJS13Preview"
@@ -14,13 +15,40 @@ import getAPI from "~/utilities/api"
 
 const GREETINGS = [" there, it's Tony", ", Tony here", ", I'm Tony"]
 
+const Emphasis = ({
+	name,
+	className,
+	children,
+}: {
+	name: string
+	className?: string
+	children?: React.ReactNode
+}) => (
+	<span
+		className={`${className || ""} inline-flex items-center gap-x-2 rounded-md border border-gray-300 bg-white px-[8px] py-1 text-sm font-normal tracking-normal dark:border-gray-600 dark:bg-gray-700`}>
+		{children ? (
+			<>
+				<span className="border-r border-gray-300 pr-2 dark:border-gray-600">
+					{name}
+				</span>
+				<span>{children}</span>
+			</>
+		) : (
+			<span>{name}</span>
+		)}
+	</span>
+)
+
 interface Props {
 	stickyNotFound: boolean
 	stickyPosts: any
 }
 
-const Home: NextPageWithLayout = ({ stickyNotFound, stickyPosts }: Props) => {
-	const [greeting, setGreeting] = useState(GREETINGS[0])
+const Home: NextPageWithLayout = ({
+	stickyNotFound: _1,
+	stickyPosts: _2,
+}: Props) => {
+	const [_greeting, setGreeting] = useState(GREETINGS[0])
 	const [showPosts, setShowPosts] = useState(false)
 
 	useEffect(() => {
@@ -35,34 +63,50 @@ const Home: NextPageWithLayout = ({ stickyNotFound, stickyPosts }: Props) => {
 			</Head>
 			<section className="mt-0 pt-24 lg:mt-20 lg:pt-0">
 				<div>
-					<h1 className="mb-0.5 flex items-center whitespace-nowrap text-3xl font-medium leading-14 tracking-wide text-black dark:text-white lg:text-1">
+					<h1 className="mb-3 flex items-center whitespace-nowrap text-3xl font-medium leading-14 tracking-wide text-black dark:text-white lg:text-1">
 						<span className="mr-2.5 inline-block animate-waveHand cursor-pointer hover:animate-waveHandAgain">
 							👋
-						</span>{" "}
-						Hi{greeting}
-						<a
-							href="https://cal.com/tonyhe/15min"
-							className="effect-pressing ml-2 mt-0.5 hidden lg:block"
-							target="_blank"
-							rel="noreferrer">
-							<span className="ml-2 flex items-center rounded-md border border-gray-400 px-2.5 py-1 text-sm tracking-normal text-gray-500 hover:border-gray-500 hover:text-gray-600 hover:shadow-sm dark:!border-white dark:text-white dark:hover:text-gray-100 dark:hover:opacity-80">
-								Let&apos;s chat →
-							</span>
-						</a>
+						</span>
+						Hello, and welcome!
 					</h1>
-					<p className="pb-1.5 pl-1.5 pt-1 text-3 font-light leading-14 tracking-wider text-gray-500 dark:text-gray-200 lg:text-2">
-						I&apos;m currently living a<del>n absolutely not</del> meaningless
-						life with <del>totally not</del> unachievable goals.
-					</p>
+					<div className="flex flex-col gap-y-1.5 pb-1.5 pl-1.5 pt-1 text-3 font-light leading-14 tracking-wide text-gray-500 dark:text-gray-300 lg:text-2">
+						<p>
+							My name is Lipeng He{" "}
+							<Emphasis name="Preferred First Name">
+								<b>Tony</b>
+							</Emphasis>
+							, and I am currently an undergraduate student and researcher with
+							the{" "}
+							<Emphasis
+								name="University of Waterloo"
+								className="border-l-4 !border-l-yellow-300">
+								<Link href="https://uwaterloo.ca" target="_blank">
+									<span className="flex h-4.5 w-4.5">
+										<Icon name="externalLink" />
+									</span>
+								</Link>
+							</Emphasis>{" "}
+							.
+						</p>
+						<p>
+							I was previously a{" "}
+							<Emphasis
+								name="Full Stack Software Engineer"
+								className="hidden border-l-4 !border-l-blue-400 lg:inline-flex">
+								Intern
+							</Emphasis>
+							<span className="lg:hidden">Full Stack Software Engineer</span> at
+							various technology startups based in Toronto, Canada 🇨🇦.
+						</p>
+					</div>
 				</div>
-				<Top />
 			</section>
 			<section className="mt-11">
 				<label className="inline-flex items-center rounded-full border border-gray-300 bg-white px-4 pb-1 pt-[4px] font-medium tracking-wider shadow-sm dark:border-gray-600 dark:bg-gray-700">
-					<span className="mr-1.5 flex h-5 w-5 text-yellow-500">
-						<Icon name="focus" />
+					<span className="mr-1.5 flex h-5 w-5 text-pink-500">
+						<Icon name="flag" />
 					</span>
-					<span className="uppercase">Featured</span>
+					<span className="uppercase">Featured Content</span>
 				</label>
 				<div className="mt-4.5">
 					{/* <div className="-mt-3 border-b pb-8 dark:border-gray-700"> */}
@@ -78,6 +122,66 @@ const Home: NextPageWithLayout = ({ stickyNotFound, stickyPosts }: Props) => {
 				*/}
 				</div>
 			</section>
+			<section className="mt-12">
+				<label className="inline-flex items-center rounded-full border border-gray-300 bg-white px-4 pb-1 pt-[4px] font-medium tracking-wider shadow-sm dark:border-gray-600 dark:bg-gray-700">
+					<span className="mr-1.5 flex h-5 w-5 text-purple-500">
+						<Icon name="microscope" />
+					</span>
+					<span className="uppercase">Research Interests</span>
+				</label>
+				<div className="mt-4.5 flex flex-col gap-y-2 pl-1 text-3 font-light leading-14 tracking-wide text-gray-500 underline-offset-[6px] dark:text-gray-300 lg:text-[17px]">
+					<p>
+						<span>
+							I am interested in both the theoretical and applied aspects of{" "}
+							<u className="decoration-gray-300">Cryptography</u>
+						</span>
+						<span>
+							{" "}
+							and its applications throughout and beyond computing & data
+							sciences.
+						</span>
+					</p>
+					<p>
+						In my previous research experience, I worked on developing and
+						analyzing{" "}
+						<u className="decoration-gray-300">
+							Cryptographic Systems and Protocols
+						</u>{" "}
+						that address issues related to:
+					</p>
+					<div className="-ml-1 flex flex-col items-center justify-between gap-y-2 pb-4.5 pr-1 pt-5 text-sm lg:flex-row">
+						<div className="text-normal flex w-full items-center gap-x-2 rounded-md border bg-white px-4 py-[7px] font-medium shadow-sm dark:border-gray-600 dark:bg-gray-700 lg:w-auto">
+							<div className="flex h-5 w-5 items-center justify-center rounded-full bg-purple-400 text-white dark:bg-purple-700">
+								1
+							</div>
+							<div className="font-bold">Privacy-preserving computing</div>
+						</div>
+						<div className="hidden text-3 lg:block">and</div>
+						<div className="text-normal flex w-full items-center gap-x-2 rounded-md border bg-white px-4 py-[7px] font-medium shadow-sm dark:border-gray-600 dark:bg-gray-700 lg:w-auto">
+							<div className="flex h-5 w-5 items-center justify-center rounded-full bg-purple-400 text-white dark:bg-purple-700">
+								2
+							</div>
+							<div>Software security and usability</div>
+						</div>
+					</div>
+					<p>
+						My most recent research work has put an emphasis on Fully
+						Homomorphic Encryption (FHE) and Privacy-preserving Machine Learning
+						(PPML).
+					</p>
+				</div>
+			</section>
+			<section className="mt-12">
+				<label className="inline-flex items-center rounded-full border border-gray-300 bg-white px-4 pb-1 pt-[4px] font-medium tracking-wider shadow-sm dark:border-gray-600 dark:bg-gray-700">
+					<span className="mr-1.5 flex h-5 w-5 text-green-500">
+						<Icon name="global" />
+					</span>
+					<span className="uppercase">How to Reach Me</span>
+				</label>
+				<div className="mt-4.5">
+					<Top />
+				</div>
+			</section>
 			{/* <section className="mt-11">
 				{!stickyNotFound && <List.Static posts={stickyPosts} sticky={true} />}
 			</section> */}

diff --git a/packages/twilight-ui/src/Button/button.tsx b/packages/twilight-ui/src/Button/button.tsx
@@ -1,6 +1,6 @@
-import React from "react"
 import Icon from "../Icon"
 import type { ButtonTypes, IconNames } from "../utils/propTypes"
+import React from "react"
 
 interface Props {
 	/**
@@ -45,10 +45,9 @@ const Template = ({
 			className={`${
 				className ? `${className} ` : ""
 			}${defaultClassName} effect-pressing`}
-			{...args}
-		>
+			{...args}>
 			{icon && (
-				<span className={`w-6 h-6 flex-shrink-0 ${children ? "mr-1" : ""}`}>
+				<span className={`h-6 w-6 flex-shrink-0 ${children ? "mr-1" : ""}`}>
 					<Icon name={icon} />
 				</span>
 			)}
@@ -61,7 +60,7 @@ const Button = ({
 	type = "default",
 	icon,
 	className,
-	children = "Button",
+	children = "",
 	...rest
 }: ButtonProps) => {
 	switch (type) {
@@ -72,8 +71,7 @@ const Button = ({
 					className={className}
 					defaultClassName="w-max py-2 px-5 hover:bg-menu dark:hover:bg-gray-800 rounded-md cursor-pointer focus:outline-none justify-center items-center text-xl tracking-wider flex text-gray-500 dark:text-gray-400"
 					icon={icon}
-					{...rest}
-				>
+					{...rest}>
 					{children}
 				</Template>
 			)
@@ -84,8 +82,7 @@ const Button = ({
 					className={className}
 					defaultClassName="w-max py-2 px-7 shadow-sm border border-blue-500 dark:border-blue-900 dark:bg-blue-900 dark:text-gray-300 bg-blue-500 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-800 dark:hover:border-blue-800 hover:shadow-inner text-white rounded-md cursor-pointer focus:outline-none justify-center items-center text-xl tracking-wider flex"
 					icon={icon}
-					{...rest}
-				>
+					{...rest}>
 					{children}
 				</Template>
 			)
@@ -96,8 +93,7 @@ const Button = ({
 					className={className}
 					defaultClassName="w-max py-2 px-5 hover:bg-pink-100 dark:hover:bg-pink-900 rounded-md cursor-pointer focus:outline-none justify-center items-center text-xl tracking-wider flex text-pink-500 dark:text-pink-400"
 					icon={icon}
-					{...rest}
-				>
+					{...rest}>
 					{children}
 				</Template>
 			)
@@ -106,10 +102,9 @@ const Button = ({
 				<Template
 					aria-label="default"
 					className={className}
-					defaultClassName="w-max py-2 px-7 shadow-sm border border-gray-300 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-700 hover:shadow-inner rounded-md cursor-pointer focus:outline-none justify-center items-center text-xl tracking-wider bg-white flex"
+					defaultClassName="w-max py-2 px-7 shadow-sm border border-gray-300 dark:border-gray-800 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:border-gray-500 hover:shadow-inner rounded-md cursor-pointer focus:outline-none justify-center items-center text-xl tracking-wider bg-white flex"
 					icon={icon}
-					{...rest}
-				>
+					{...rest}>
 					{children}
 				</Template>
 			)