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 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 }) =>
+
+ {children}
+ {/*{text} */}
+
+
+
+const Navbar = () =>
-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')
+ ],
};