-

Author: idimetrix

components/CardLeft.tsx

@@ -1,14 +1,20 @@
+import { FC, HTMLAttributes } from "react";
 import Link from "next/link";
 import { Logotype } from "@/components/Logotype";
-import {Socials} from "@/components/Socials";
-import {FC, HTMLAttributes} from "react";
-import {cn} from "@/utils";
+import { Socials } from "@/components/Socials";
+import { cn } from "@/utils";
 
 type Props = HTMLAttributes<HTMLDivElement>;
 
-export const Header:FC<Props> = ({className, ...rest}) => {
+export const Header: FC<Props> = ({ className, ...rest }) => {
   return (
-    <header className={cn("absolute z-30 w-full items-center px-16 xl-px-0 xl:h-[90px]", className)} {...rest}>
+    <header
+      className={cn(
+        "absolute z-30 w-full items-center px-16 xl-px-0 xl:h-[90px]",
+        className,
+      )}
+      {...rest}
+    >
       <div className="container mx-auto">
         <div className="flex flex-col lg:flex-row justify-between items-center gap-y-6 py-8">
           <Link href="/">

components/CardRight.tsx

@@ -1,10 +1,10 @@
 import { FC, HTMLAttributes } from "react";
 import { Sora } from "next/font/google";
 import Head from "next/head";
+import { Header } from "@/components/Header";
+import { Nav } from "@/components/Nav";
 import { WEBSITE } from "@/constants";
 import { cn } from "@/utils";
-import {Header} from "@/components/Header";
-import {Nav} from "@/components/Nav";
 import TopLeftImg from "../components/TopLeftImg";
 
 const sora = Sora({
@@ -15,7 +15,7 @@ const sora = Sora({
 
 type Props = HTMLAttributes<HTMLDivElement>;
 
-const Layout: FC<Props> = ({ className, children, ...rest }) => {
+export const Layout: FC<Props> = ({ className, children, ...rest }) => {
   return (
     <main
       className={cn(
@@ -30,7 +30,7 @@ const Layout: FC<Props> = ({ className, children, ...rest }) => {
         <meta name="description" content={WEBSITE.description} />
         <meta name="keywords" content={WEBSITE.keywords.join(", ")} />
         <meta name="author" content={WEBSITE.author} />
-        <meta name="theme-color" content="#f13024" />
+        <meta name="theme-color" content={WEBSITE.color} />
       </Head>
 
       <TopLeftImg />
@@ -41,5 +41,3 @@ const Layout: FC<Props> = ({ className, children, ...rest }) => {
     </main>
   );
 };
-
-export default Layout;

components/Header.tsx

@@ -1,3 +1,4 @@
+import { FC, HTMLAttributes } from "react";
 import {
   HiChatBubbleBottomCenterText,
   HiEnvelope,
@@ -8,8 +9,7 @@ import {
 } from "react-icons/hi2";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import {FC, HTMLAttributes} from "react";
-import {cn} from "@/utils";
+import { cn } from "@/utils";
 
 export const links = [
   { name: "home", path: "/", Icon: HiHome },
@@ -30,11 +30,17 @@ export const links = [
 
 type Props = HTMLAttributes<HTMLDivElement>;
 
-export const Nav: FC<Props> = ({className, ...rest}) => {
+export const Nav: FC<Props> = ({ className, ...rest }) => {
   const pathname = usePathname();
 
   return (
-    <nav className={cn("flex flex-col items-center xl:justify-center gap-y-4 fixed h-max bottom-0 mt-auto xl:right-[2%] z-50 top-0 w-full xl:w-16 xl:max-w-md xl:h-screen", className)} {...rest}>
+    <nav
+      className={cn(
+        "flex flex-col items-center xl:justify-center gap-y-4 fixed h-max bottom-0 mt-auto xl:right-[2%] z-50 top-0 w-full xl:w-16 xl:max-w-md xl:h-screen",
+        className,
+      )}
+      {...rest}
+    >
       <div className="flex w-full xl:flex-col items-center justify-between xl:justify-center gap-y-10 px-4 md:px-40 xl:px-0 h-[80px] xl:h-max py-8 bg-white/10 backdrop-blur-sm text-3xl xl:text-2xl xl:rounded-full">
         {links.map((link, i) => (
           <Link

components/Layout.tsx

@@ -1,14 +1,17 @@
+import { FC, HTMLAttributes } from "react";
 import Link from "next/link";
 import { SOCIALS } from "@/constants";
 import { Social } from "@/types";
 import { cn } from "@/utils";
-import {FC, HTMLAttributes} from "react";
 
 type Props = HTMLAttributes<HTMLDivElement>;
 
-export const Socials: FC<Props> = ({className, ...rest}) => {
+export const Socials: FC<Props> = ({ className, ...rest }) => {
   return (
-    <div className={cn("flex items-center gap-5 text-2xl", className)} {...rest}>
+    <div
+      className={cn("flex items-center gap-5 text-2xl", className)}
+      {...rest}
+    >
       {Object.values(SOCIALS)
         .filter((social) => social.link)
         .map((social) => (

components/Nav.tsx

@@ -1,27 +1,27 @@
-import { motion } from "framer-motion";
+import { Variants, motion } from "framer-motion";
 
-const Transition = () => {
-  const transitionVariants = {
-    initial: {
-      x: "100%",
-      width: "100%",
-    },
-    animate: {
-      x: "0%",
-      width: "0%",
-    },
-    exit: {
-      x: ["0%", "100%"],
-      width: ["0%", "100%"],
-    },
-  };
+const variants: Variants = {
+  initial: {
+    x: "100%",
+    width: "100%",
+  },
+  animate: {
+    x: "0%",
+    width: "0%",
+  },
+  exit: {
+    x: ["0%", "100%"],
+    width: ["0%", "100%"],
+  },
+};
 
+export const Transition = () => {
   return (
     <>
       <motion.div
         role="status"
         className="fixed top-0 bottom-0 right-full w-screen h-screen z-30 bg-[#2e2257]"
-        variants={transitionVariants}
+        variants={variants}
         initial="initial"
         animate="animate"
         exit="exit"
@@ -31,7 +31,7 @@ const Transition = () => {
       <motion.div
         role="status"
         className="fixed top-0 bottom-0 right-full w-screen h-screen z-20 bg-[#3b2d71]"
-        variants={transitionVariants}
+        variants={variants}
         initial="initial"
         animate="animate"
         exit="exit"
@@ -41,7 +41,7 @@ const Transition = () => {
       <motion.div
         role="status"
         className="fixed top-0 bottom-0 right-full w-screen h-screen z-10 bg-[#4b3792]"
-        variants={transitionVariants}
+        variants={variants}
         initial="initial"
         animate="animate"
         exit="exit"
@@ -51,5 +51,3 @@ const Transition = () => {
     </>
   );
 };
-
-export default Transition;

components/Socials.tsx

@@ -22,6 +22,7 @@ export const WEBSITE = {
     "CTO, Software Architect, Technical Lead, 3X Founder. Linking companies with top tech talents.",
   keywords: [""],
   about: "",
+  color: "#f13024",
 };
 
 export const SOCIALS: Record<

components/Transition.tsx

@@ -1,8 +1,8 @@
 import { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import { AnimatePresence, motion } from "framer-motion";
-import Layout from "../components/Layout";
-import Transition from "../components/Transition";
+import { Layout } from "@/components/Layout";
+import { Transition } from "@/components/Transition";
 import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }: AppProps) {