Merge pull request #100 from lizzy-km/vince

🔥 build(Profile): add Kaung Myat Soe Profile

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
+---

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;

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 (
+    <Container className={cn(styles.paddingHelper, titleFont.className)}>
+      {children}
+    </Container>
+  );
+}

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<any>(<Loading />);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setCon(<Main/>);
+    }, 2000);
+  }, []);
+
+  return content;
+};
+
+export default page;

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";

src/components/Profile/Vince/Contact.tsx

@@ -0,0 +1,43 @@
+const Contact = () => {
+  return (
+    <div className=" w-full h-auto items-center flex-wrap flex-col flex gap-4 p-[1rem]  ">
+      <div className=" flex justify-center p-[1rem] bg-[#1a1b27] text-[#6899eb] border rounded w-full items-center ">
+        <p>This developer is too lazy to descripe himself!</p>
+      </div>
+
+      <div>
+        <img
+          src="https://github-readme-stats.vercel.app/api/top-langs/?username=lizzy-km&layout=compact&hide_progress=false&theme=tokyonight"
+          alt=""
+        />
+      </div>
+
+      <div>
+        <img
+          src="https://github-readme-stats.vercel.app/api?username=lizzy-km&show_icons=true&theme=tokyonight"
+          alt=""
+        />
+      </div>
+
+      <div className="felx p-[1rem] bg-[#1a1b27] text-[#6899eb] border rounded w-full ">
+        <ul>
+          <li>
+            <a href="https://github.com/lizzy-km">GitHub - lizzy-km</a>
+          </li>
+          <li>
+            <a href="https://www.linkedin.com/in/vincexoy/">
+              Linkedin - Kaung Myat Soe
+            </a>
+          </li>
+          <li>
+            <a href="https://www.facebook.com/dev.lizzy">
+              Facebook - Kaung Myat Soe
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default Contact;

src/components/Profile/Vince/Loading.tsx

@@ -0,0 +1,12 @@
+const Loading = () => {
+  return (
+    <div className=" absolute top-0 left-0 flex flex-col justify-center gap-0 items-center w-full h-screen loader-bg ">
+      <div className=" flex flex-col relative  justify-center items-center w-full  ">
+        <p className="loaderText absolute ">V</p>
+        <span className="loader"></span>
+      </div>
+    </div>
+  );
+};
+
+export default Loading;

src/components/Profile/Vince/Main.tsx

@@ -0,0 +1,32 @@
+import Project from "./Project";
+
+const Main = () => {
+  return (
+    <div className=" trn-4 flex w-full flex-col h-auto ">
+      <div className=" gap-[2rem] rounded-3xl flex  justify-between items-center w-full h-[250px] bg-blur ">
+        <div className=" flex w-[40%] name gap-1 p-[1rem] h-full  justify-center ">
+          <h1>V</h1>
+          <h1>i</h1>
+          <h1>n</h1>
+          <h1>c</h1>
+          <h1>e</h1>
+        </div>
+        <div className="trn-4 cursor-pointer w-[200px] h-[200px] flex justify-center items-center pf-shadow bg-transparent hover:bg-cyan-500 rounded-full  ">
+          <img
+            className=" trn-4 rounded-full hover:w-[80%] hover:mt-[-150px] hover:h-[80%] w-[100%] h-[100%] hover:rounded-full "
+            src="https://avatars.githubusercontent.com/u/74085442?v=4"
+            alt=""
+          />
+        </div>
+
+        <div className=" h-full flex justify-start mt-[2.4rem] w-[40%] p-[1rem] text-3xl  ">
+          <h1>Front End Developer</h1>
+        </div>
+      </div>
+
+      <Project />
+    </div>
+  );
+};
+
+export default Main;

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<any>(false);
+
+  return (
+    <div className=" relative  mt-[-125px] z-[99] bg-blur w-full flex flex-col items-center h-screen  ">
+      <div className="  w-full h-[60px] border-b-2 border-[#1212] flex justify-between items-center gap-3 ">
+        <a
+          target="_blank"
+          href="https://themoviedb-org.vercel.app/"
+          className=" text-xl aa rounded-tr-3xl bg-cyan-700 flex justify-center items-center  h-full w-[200px] cursor-pointer "
+        >
+          <h1>TMDB Clone</h1>
+        </a>
+
+        <div className="flex h-full justify-center items-center  rounded-t-3xl  ">
+          <div
+            onClick={() => setProject(true)}
+            className="flex h-full w-[100px]   border-r justify-center items-center px-[1rem] cursor-pointer loader-bg "
+          >
+            <p>Project</p>
+          </div>
+          <div
+            onClick={() => setProject(false)}
+            className="flex h-full  w-[100px]  justify-center items-center px-[1rem] cursor-pointer loader-bg "
+          >
+            <p>Me</p>
+          </div>
+        </div>
+
+        <a
+          target="_blank"
+          href="https://anynote-m.vercel.app/"
+          className=" text-xl rounded-tl-3xl bg-cyan-700 flex justify-center items-center  h-full w-[200px] cursor-pointer "
+        >
+          <h1>Facebook Clone</h1>
+        </a>
+      </div>
+
+      {project ? (
+        <iframe
+          className=" w-[100%] h-[600px] "
+          src="https://themoviedb-org.vercel.app/"
+          frameborder="0"
+        />
+      ) : (
+        <Contact />
+      )}
+    </div>
+  );
+};
+
+export default Project;

src/components/Profile/Vince/Vince.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Loading from "./Loading";
+import Main from "./Main";
+
+const Vince = () => {
+  const [content, setCon] = useState(<Loading />);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setCon(<Main />);
+    }, 2000);
+  }, []);
+  return { content };
+};
+
+export default Vince;