diff --git a/apps/about-me/package.json b/apps/about-me/package.json index a1eb594..8e254f8 100644 --- a/apps/about-me/package.json +++ b/apps/about-me/package.json @@ -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": { diff --git a/apps/about-me/public/assets/myself.jpg b/apps/about-me/public/assets/myself.jpg new file mode 100644 index 0000000..2668ef0 Binary files /dev/null and b/apps/about-me/public/assets/myself.jpg differ diff --git a/apps/about-me/src/pages/_document.tsx b/apps/about-me/src/pages/_document.tsx new file mode 100644 index 0000000..60526a6 --- /dev/null +++ b/apps/about-me/src/pages/_document.tsx @@ -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 = () => + + +
+ + + + +export default document; diff --git a/apps/about-me/src/pages/index.tsx b/apps/about-me/src/pages/index.tsx index 83baaf6..e2bfb30 100644 --- a/apps/about-me/src/pages/index.tsx +++ b/apps/about-me/src/pages/index.tsx @@ -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> = + ({ size, animate, color }) =>
+ +const Shapes = () =>
+ + + + + +
+ +const Brief = () =>
+ {/*Avatar*/} + +
+
+ Hung's avatar +
+
+

+ Hung Tran +

+

+ Software Engineer +

+
+ +const About = () =>
+ This is my about section +
+ +const Experience = () =>
+ Some stub content while this is not propagated yet +
+ +const Blog = () =>
+ lol +
+ +const Projects = () =>
+ + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + + + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + + + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + + + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + + + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + + + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + + + I was about to type Lorem Ipsum until I realize I couldn't even remember the content + of the first sentence. + +
+ + +const NavbarItem: React.FC<{ + text: string; + link: string; + children: React.ReactNode +}> = ({ text, link, children }) => + + + +const Navbar = () =>
+
+
+ + +
+ Hung Tran +
+
-import { trpc } from "../utils/trpc"; const Home: NextPage = () => { - const hello = trpc.example.hello.useQuery({ text: "from tRPC" }); - return ( - <> +
- Create T3 App - + Hung Tran + - -
-

- Create T3 App -

-

This stack uses:

-
- - - - - - -
-
- {hello.data ?

{hello.data.greeting}

:

Loading..

} -
-
- + + + + + + +
); }; export default Home; -type TechnologyCardProps = { - name: string; - description: string; - documentation: string; -}; - -const TechnologyCard: React.FC = ({ - name, - description, - documentation, -}) => { - return ( -
-

{name}

-

{description}

- - Documentation - -
- ); -}; diff --git a/apps/about-me/tailwind.config.cjs b/apps/about-me/tailwind.config.cjs index 54331dc..2b757e8 100644 --- a/apps/about-me/tailwind.config.cjs +++ b/apps/about-me/tailwind.config.cjs @@ -4,5 +4,7 @@ module.exports = { theme: { extend: {}, }, - plugins: [], + plugins: [ + require('tailwind-scrollbar') + ], };