simple scaffold
parent
8ea385a63a
commit
bb8155aac1
|
|
@ -19,26 +19,29 @@
|
|||
"next": "13.0.2",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-icons": "^4.6.0",
|
||||
"superjson": "1.9.1",
|
||||
"zod": "^3.18.0",
|
||||
"ui": "workspace:*"
|
||||
"ui": "workspace:*",
|
||||
"zod": "^3.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"tsconfig": "workspace:*",
|
||||
"@types/node": "^18.0.0",
|
||||
"@types/react": "^18.0.14",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.33.0",
|
||||
"@typescript-eslint/parser": "^5.33.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"class-variance-authority": "^0.3.0",
|
||||
"eslint": "^8.26.0",
|
||||
"eslint-config-custom": "workspace:*",
|
||||
"postcss": "^8.4.14",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-tailwindcss": "^0.1.13",
|
||||
"prisma": "^4.5.0",
|
||||
"tailwind-scrollbar": "^2.0.1",
|
||||
"tailwindcss": "^3.2.0",
|
||||
"tsconfig": "workspace:*",
|
||||
"typescript": "^4.8.4"
|
||||
},
|
||||
"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 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 {
|
||||
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 hello = trpc.example.hello.useQuery({ text: "from tRPC" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<main className="z-0 flex flex-col justify-center items-center bg-pink-50/0 min-h-screen antialiased">
|
||||
<Head>
|
||||
<title>Create T3 App</title>
|
||||
<meta name="description" content="Generated by create-t3-app" />
|
||||
<title>Hung Tran</title>
|
||||
<meta name="description" content="Personal website about Hung Tran and my homelab Felia" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<main className="container mx-auto flex min-h-screen flex-col items-center justify-center p-4">
|
||||
<h1 className="text-5xl font-extrabold leading-normal text-gray-700 md:text-[5rem]">
|
||||
Create <span className="text-purple-300">T3</span> App
|
||||
</h1>
|
||||
<p className="text-2xl text-gray-700">This stack uses:</p>
|
||||
<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>
|
||||
<Navbar />
|
||||
<Brief />
|
||||
<About />
|
||||
<Experience />
|
||||
<Blog />
|
||||
<Projects />
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require('tailwind-scrollbar')
|
||||
],
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue