diff --git a/content/profile/Vince.mdx b/content/profile/Vince.mdx new file mode 100644 index 0000000..6ec476a --- /dev/null +++ b/content/profile/Vince.mdx @@ -0,0 +1,9 @@ +--- +name: Vince +description: I'm Junior Front End web developer. +image: "https://avatars.githubusercontent.com/u/74085442?v=4" +tags: + - Frontend + - JavaScript + - React.js +--- diff --git a/src/app/globals.css b/src/app/globals.css index 8897987..98b71d2 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -10,6 +10,101 @@ ); } +.trn-4 { + transition: all .4s ease; +} + +.bg-blur { + background-color: #1111112d; + backdrop-filter: blur(8px); +} + +.loader-bg { + background-color: #1111112d; + backdrop-filter: blur(8px) grayscale(80%) saturate(0) ; +} + +.bg-top { + background-color: #1111112d; +} + +.pf-shadow { + box-shadow: inset 0 0 4px 1px #111; +} + +.pf-shadow img { + box-shadow: inset 0 0 8px 1px #111; +} + +.name h1 { + cursor: pointer; + font-size: 4rem; + font-weight: bold; + transition: all .4s ease; + margin-top: -10px; +} + +.name h1:hover { + color: aqua; + margin-top: -40px; +} + +.loaderText { + font-size: 5rem; + margin-bottom: -100px; + z-index: 99; + animation: bounce 1.2s infinite; + top: 0; + left: 48%; +} + +@keyframes bounce { + 0% { top: 0 } + 50% { top: -50% } + 100% { top: 0 } +} + +.loader { + position: relative; + margin: auto; + box-sizing: border-box; + width: 120px; + height: 120px; + border-radius: 50%; + border: 4px solid rgba(255, 255, 255, 0.1); + transform-origin: 50% 50%; + transform: perspective(200px) rotateX(66deg); + animation: spinner-wiggle 1.2s infinite; +} + +.loader:before, +.loader:after { + content: ""; + position: absolute; + inset: -4px; + border-radius: 50%; + box-sizing: border-box; + border: 4px solid #0000; + animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, + spinner-fade 1.2s linear infinite; +} +.loader:before { + border-top-color: #fff; +} +.loader:after { + border-top-color: #ff3d00; + animation-delay: 0.4s; +} + +@keyframes spinner-spin { + 100% { transform: rotate(360deg)} +} +@keyframes spinner-fade { + 25%, 75% { opacity: 0.1} + 50% { opacity: 1 } +} + + .ph-container { max-height: 700px; height: 80vh; diff --git a/src/app/profile/Vince/layout.tsx b/src/app/profile/Vince/layout.tsx new file mode 100644 index 0000000..f91b500 --- /dev/null +++ b/src/app/profile/Vince/layout.tsx @@ -0,0 +1,17 @@ + +import Container from "@/components/Common/Container/Container"; +import { titleFont } from "@/fonts/fonts"; +import styles from "@/styles/styles"; +import { cn } from "@/utils"; + +export default function VinceLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/src/app/profile/Vince/page.tsx b/src/app/profile/Vince/page.tsx new file mode 100644 index 0000000..9360142 --- /dev/null +++ b/src/app/profile/Vince/page.tsx @@ -0,0 +1,19 @@ +"use client"; +import Loading from "@/components/Profile/Vince/Loading"; +import Main from "@/components/Profile/Vince/Main"; +import React from "react"; +import { useState, useEffect } from "react"; + +const page = () => { + const [content, setCon] = useState(); + + useEffect(() => { + setTimeout(() => { + setCon(
); + }, 2000); + }, []); + + return content; +}; + +export default page; diff --git a/src/app/profile/[slug]/page.tsx b/src/app/profile/[slug]/page.tsx index 3906550..79f3803 100644 --- a/src/app/profile/[slug]/page.tsx +++ b/src/app/profile/[slug]/page.tsx @@ -2,6 +2,7 @@ import Container from "@/components/Common/Container/Container"; import { Mdx } from "@/components/Common/Mdx/Mdx"; import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider"; import TitleText from "@/components/Common/TitleText/TitleText"; +import Vince from "@/components/Profile/Vince/Vince"; import { allProfiles } from "contentlayer/generated"; import { notFound } from "next/navigation"; import { FC } from "react"; diff --git a/src/components/Profile/Vince/Contact.tsx b/src/components/Profile/Vince/Contact.tsx new file mode 100644 index 0000000..95af95d --- /dev/null +++ b/src/components/Profile/Vince/Contact.tsx @@ -0,0 +1,43 @@ +const Contact = () => { + return ( +
+
+

This developer is too lazy to descripe himself!

+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ ); +}; + +export default Contact; diff --git a/src/components/Profile/Vince/Loading.tsx b/src/components/Profile/Vince/Loading.tsx new file mode 100644 index 0000000..6d109ec --- /dev/null +++ b/src/components/Profile/Vince/Loading.tsx @@ -0,0 +1,12 @@ +const Loading = () => { + return ( +
+
+

V

+ +
+
+ ); +}; + +export default Loading; diff --git a/src/components/Profile/Vince/Main.tsx b/src/components/Profile/Vince/Main.tsx new file mode 100644 index 0000000..62cf7d5 --- /dev/null +++ b/src/components/Profile/Vince/Main.tsx @@ -0,0 +1,32 @@ +import Project from "./Project"; + +const Main = () => { + return ( +
+
+
+

V

+

i

+

n

+

c

+

e

+
+
+ +
+ +
+

Front End Developer

+
+
+ + +
+ ); +}; + +export default Main; diff --git a/src/components/Profile/Vince/Project.tsx b/src/components/Profile/Vince/Project.tsx new file mode 100644 index 0000000..781c203 --- /dev/null +++ b/src/components/Profile/Vince/Project.tsx @@ -0,0 +1,55 @@ +import React, { useState } from "react"; +import Contact from "./Contact"; + +const Project = () => { + const [project, setProject] = useState(false); + + return ( +
+
+ +

TMDB Clone

+ + +
+
setProject(true)} + className="flex h-full w-[100px] border-r justify-center items-center px-[1rem] cursor-pointer loader-bg " + > +

Project

+
+
setProject(false)} + className="flex h-full w-[100px] justify-center items-center px-[1rem] cursor-pointer loader-bg " + > +

Me

+
+
+ + +

Facebook Clone

+ +
+ + {project ? ( +