simple scaffold
parent
8ea385a63a
commit
bb8155aac1
|
|
@ -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": {
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
|
@ -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;
|
||||||
|
|
@ -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">
|
</main>
|
||||||
<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>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
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,5 +4,7 @@ module.exports = {
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [
|
||||||
|
require('tailwind-scrollbar')
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue