add basic components

api-as-package
pegasust 2022-11-17 02:55:56 +00:00
parent 2869e66a02
commit df126da2a6
4 changed files with 31 additions and 37 deletions

View File

@ -0,0 +1,12 @@
import { ReactNode } from "react"
export const Section: React.FC<{children?: ReactNode}> = ({children}) => <section className="text-gray-700">{children}</section>
export const UL: React.FC<{ children?: ReactNode }> = ({ children }) => <ul className="list-disc list-inside">{children}</ul>
export const SectionHeader: React.FC<{ text?: string, children?: ReactNode }> = ({ text, children }) => <div>
<h1 className="text-xl text-gray-600 tracking-widest">
{text}
{children}
</h1>
<div className="mt-8" />
</div>

View File

@ -18,6 +18,7 @@ import Lizzie from "@public/assets/lizzie.jpg";
import SantaMonicaStairs from "@public/assets/santa-monica-stairs.jpg";
import SantaMonicaHigh from "@public/assets/santa-monica-high.jpg";
import assert from "assert";
import { Section, SectionHeader, UL } from "@components/index";
const circle = cva("absolute rounded-full border -z-10", {
variants: {
@ -64,14 +65,14 @@ const Article: React.FC<{ children?: ReactNode }> = ({ children }) => <article
</article>
const InpageSection: React.FC<{href: string, children?: ReactNode}>= ({
const InpageSection: React.FC<{ href: string, children?: ReactNode }> = ({
href,
children
}) => <Link href={href} className="p-2 text-lg text-gray-500/50 rounded-3xl
border border-amber-400/50 hover:text-gray-500 hover:border-amber-400 transition-colors
hover:animate-pulse">
{children}
</Link>
{children}
</Link>
const Brief = () => <Article>
{/*Avatar*/}
@ -101,13 +102,6 @@ const Brief = () => <Article>
</div>
</Article>
const SectionHeader: React.FC<{ text?: string, children?: ReactNode }> = ({ text, children }) => <div>
<h1 className="text-xl text-gray-600 tracking-widest">
{text}
{children}
</h1>
<div className="mt-8" />
</div>
const images = [
{
@ -232,11 +226,11 @@ const ImageDisplay: React.FC<{ imageDisplayHook: ImageDisplayHook }> = ({ imageD
key={`img-index-${i}`} />)}
</div>
</div>
{image && <Image src={image.src} alt={image.alt} className="w-96 h-96 object-contain rounded-md overflow-hidden transition-all" />}
{image && <Image placeholder="blur" src={image.src} alt={image.alt} className="w-96 h-96 object-contain rounded-md overflow-hidden transition-all" />}
</div>
const MyLink: React.FC<{ href: string, children?: ReactNode }> = ({ href, children }) => <Link
className="text-amber-400/70 visited:text-purple-300/70 hover:text-amber-400 visited:hover:text-purple-300" href={href}>
className="text-amber-400/70 visited:text-purple-400/70 hover:text-amber-400 visited:hover:text-purple-400" href={href}>
{children}
</Link>
@ -248,33 +242,33 @@ const About = () => {
<div className="flex flex-row gap-4">
<ImageDisplay imageDisplayHook={imgDisplay} />
<div className="text-left">
<section>
<Section>
<span>
Aspiring software engineer with intense drive and curiosity in software development.
</span>
</section>
<section className="max-w-4xl">
</Section>
<Section className="max-w-4xl">
My computer infrastructure consists of:
<ul className="list-disc list-inside">
<UL>
<li>24 home CPU cores</li>
<li>60 GB of RAM (4 GB SDDR3 and 56 GB DDR4)</li>
<li>2.5 TB of SSD + HDD</li>
<li>A mix of NixOS, Ubuntu, and Windows</li>
</ul>
</section>
<section>
</UL>
</Section>
<Section>
<span>
In free time, you would find me:
</span>
<ul className="list-disc list-inside">
<UL>
<li>Learning about new technology in a week</li>
<li>Performing microbenchmarks on competing implementations and technologies</li>
<li>Optimizing my workspace through <MyLink href="https://git.pegasust.com/pegasust/dotfiles.git">dotfiles</MyLink></li>
<li>Contributing to open-source projects</li>
<li>Watching edutainment videos and podcasts about software</li> {/*TODO: add link to edutainment note-taking platform here*/}
<li><MyLink href="https://soundcloud.com/h-ng-tr-n-186908751">Producing music</MyLink></li>
</ul>
</section>
</UL>
</Section>
</div>
</div>
</Article>

View File

@ -12,8 +12,9 @@
"@server/*": ["src/server/*"],
"@db/*": ["src/server/db/*"],
"@trpc/*": ["src/server/trpc/*"],
"@router/*": ["src/server/trpc/router"],
"@public/*": ["public/*"]
"@router/*": ["src/server/trpc/router/*"],
"@public/*": ["public/*"],
"@components/*": ["src/components/*"]
}
}
}

View File

@ -4,19 +4,6 @@
"extends": "./nextjs.json",
"compilerOptions": {
"declaration": false,
"baseUrl": ".",
"paths": {
"@env/*": ["src/env/*"],
"@pages/*": ["src/pages/*"],
"@styles/*": ["src/styles/*"],
"@utils/*": ["src/utils/*"],
"@server/*": ["src/server/*"],
"@db/*": ["src/server/db/*"],
"@trpc/*": ["src/server/trpc/*"],
"@router/*": ["src/server/trpc/router"],
"@public/*": ["public/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"],
"exclude": ["node_modules"],