pegasust
/
felia
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

simple scaffold

api-as-package
pegasust 2022-11-15 22:27:42 +00:00
parent 8ea385a63a
commit bb8155aac1
5 changed files with 167 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/about-me/package.json
View File

@ -19,26 +19,29 @@
"next": "13.0.2", "next": "13.0.2",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-icons": "^4.6.0",
"superjson": "1.9.1", "superjson": "1.9.1",
"zod": "^3.18.0", "ui": "workspace:*",
"ui": "workspace:*" "zod": "^3.18.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0", "@babel/core": "^7.0.0",
"eslint-config-custom": "workspace:*",
"tsconfig": "workspace:*",
"@types/node": "^18.0.0", "@types/node": "^18.0.0",
"@types/react": "^18.0.14", "@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5", "@types/react-dom": "^18.0.5",
"@typescript-eslint/eslint-plugin": "^5.33.0", "@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0", "@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.7",
"class-variance-authority": "^0.3.0",
"eslint": "^8.26.0", "eslint": "^8.26.0",
"eslint-config-custom": "workspace:*",
"postcss": "^8.4.14", "postcss": "^8.4.14",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13", "prettier-plugin-tailwindcss": "^0.1.13",
"prisma": "^4.5.0", "prisma": "^4.5.0",
"tailwind-scrollbar": "^2.0.1",
"tailwindcss": "^3.2.0", "tailwindcss": "^3.2.0",
"tsconfig": "workspace:*",
"typescript": "^4.8.4" "typescript": "^4.8.4"
}, },
"ct3aMetadata": { "ct3aMetadata": {

BIN
apps/about-me/public/assets/myself.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

15
apps/about-me/src/pages/_document.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Head } from "next/document";
import { Main } from "next/document";
import { NextScript } from "next/document";
import { Html } from "next/document";
import React from "react";
const document = () => <Html>
<Head />
<body className="scrollbar-track-gray-50 scrollbar-thumb-amber-400">
<Main />
<NextScript />
</body>
</Html>
export default document;

215
apps/about-me/src/pages/index.tsx
View File

@ -1,90 +1,157 @@
import { type NextPage } from "next"; import { type NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import Image from "next/image";
import React from "react";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import Link from "next/link"; import Link from "next/link";
import {
FaGithub,
FaLinkedin
} from 'react-icons/fa';
const circle = cva("absolute rounded-full border -z-10", {
variants: {
size: {
0: "h-[200px] w-[200px]",
1: "h-[300px] w-[300px]",
2: "h-[400px] w-[400px]",
3: "h-[500px] w-[500px]",
4: "h-[600px] w-[600px]",
},
animate: {
none: "",
pulse: "animate-pulse",
ping: "animate-ping",
},
color: {
back: "border-pink-50",
fore: "border-rose-300",
}
},
defaultVariants: {
size: 0,
animate: "none",
color: "back"
}
});
const Circle: React.FC<VariantProps<typeof circle>> =
({ size, animate, color }) => <div className={circle({
size, animate, color
})} />
const Shapes = () => <div className="absolute flex items-center justify-center">
<Circle size={0} animate="ping" />
<Circle size={1} />
<Circle size={2} />
<Circle size={3} animate="pulse" color="fore" />
<Circle size={4} />
</div>
const Brief = () => <article className="w-screen flex flex-col justify-center items-center overflow-hidden text-center min-h-screen gap-2">
{/*Avatar*/}
<Shapes />
<div className="rounded-full w-[200px] h-[200px] overflow-hidden flex justify-center">
<div className="flex justify-center items-center">
<Image
src="/assets/myself.jpg"
width={512}
height={512}
alt="Hung's avatar" />
</div>
</div>
<h1 className="text-3xl semi-bold z-10">
Hung Tran
</h1>
<h1 className="text-3xl tracking-wider z-10">
Software Engineer
</h1>
</article>
const About = () => <article className="flex gap-4">
This is my about section
</article>
const Experience = () => <article>
Some stub content while this is not propagated yet
</article>
const Blog = () => <article>
lol
</article>
const Projects = () => <article className="flex flex-col">
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
<span>
I was about to type Lorem Ipsum until I realize I couldn't even remember the content
of the first sentence.
</span>
</article>
const NavbarItem: React.FC<{
text: string;
link: string;
children: React.ReactNode
}> = ({ text, link, children }) => <Link className="group" href={link}>
<button className="flex flex-col items-center justify-center flex-flex-col p-2 group-hover:cursor-pointer">
{children}
{/*<span className="group-hover:visible invisible">{text}</span>*/}
</button>
</Link>
const Navbar = () => <div className="flex justify-center items-center w-full z-50 sticky top-0 left-0 backdrop-blur-md h-8">
<div className="w-11/12 max-w-screen-lg flex items-center gap-4">
<div className="flex flex-row justify-center items-center gap-1">
<NavbarItem text="GitHub" link="https://github.com/pegasust"><FaGithub /></NavbarItem>
<NavbarItem text="LinkedIn" link="https://linkedin.com/in/hung-tran-1963bb205/"><FaLinkedin /></NavbarItem>
</div>
<span className="text-gray-400 animate-pulse">Hung Tran</span>
</div>
</div>
import { trpc } from "../utils/trpc";
const Home: NextPage = () => { const Home: NextPage = () => {
const hello = trpc.example.hello.useQuery({ text: "from tRPC" });
return ( return (
<> <main className="z-0 flex flex-col justify-center items-center bg-pink-50/0 min-h-screen antialiased">
<Head> <Head>
<title>Create T3 App</title> <title>Hung Tran</title>
<meta name="description" content="Generated by create-t3-app" /> <meta name="description" content="Personal website about Hung Tran and my homelab Felia" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Navbar />
<main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4"> <Brief />
<h1 className="text-5xl font-extrabold leading-normal text-gray-700 md:text-[5rem]"> <About />
Create <span className="text-purple-300">T3</span> App <Experience />
</h1> <Blog />
<p className="text-2xl text-gray-700">This stack uses:</p> <Projects />
<div className="mt-3 grid gap-3 pt-3 text-center md:grid-cols-2 lg:w-2/3">
<TechnologyCard
name="NextJS"
description="The React framework for production"
documentation="https://nextjs.org/"
/>
<TechnologyCard
name="TypeScript"
description="Strongly typed programming language that builds on JavaScript, giving you better tooling at any scale"
documentation="https://www.typescriptlang.org/"
/>
<TechnologyCard
name="TailwindCSS"
description="Rapidly build modern websites without ever leaving your HTML"
documentation="https://tailwindcss.com/"
/>
<TechnologyCard
name="tRPC"
description="End-to-end typesafe APIs made easy"
documentation="https://trpc.io/"
/>
<TechnologyCard
name="Next-Auth"
description="Authentication for Next.js"
documentation="https://next-auth.js.org/"
/>
<TechnologyCard
name="Prisma"
description="Build data-driven JavaScript & TypeScript apps in less time"
documentation="https://www.prisma.io/docs/"
/>
</div>
<div className="flex w-full items-center justify-center pt-6 text-2xl text-blue-500">
{hello.data ? <p>{hello.data.greeting}</p> : <p>Loading..</p>}
</div>
</main> </main>
</>
); );
}; };
export default Home; export default Home;
type TechnologyCardProps = {
name: string;
description: string;
documentation: string;
};
const TechnologyCard: React.FC<TechnologyCardProps> = ({
name,
description,
documentation,
}) => {
return (
<section className="flex flex-col justify-center rounded border-2 border-gray-500 p-6 shadow-xl duration-500 motion-safe:hover:scale-105">
<h2 className="text-lg text-gray-700">{name}</h2>
<p className="text-sm text-gray-600">{description}</p>
<Link
className="m-auto mt-3 w-fit text-sm text-violet-500 underline decoration-dotted underline-offset-2"
href={documentation}
target="_blank"
rel="noreferrer"
>
Documentation
</Link>
</section>
);
};

4
apps/about-me/tailwind.config.cjs
View File

@ -4,5 +4,7 @@ module.exports = {
theme: { theme: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [
require('tailwind-scrollbar')
],
}; };