some basic ui changes

added metors from acernity ui replace manrope with inter changed thumbnail
aarabii · Jun 22, 2024 · 6e6131e · 6e6131e
1 parent 6ee418b
commit 6e6131e
Show file tree

Hide file tree

Showing 16 changed files with 204 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,11 +21,13 @@
   },
   "dependencies": {
     "@emailjs/browser": "^4.3.3",
+    "clsx": "^2.1.1",
     "framer-motion": "^11.1.9",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/public/thumbnail.png b/public/thumbnail.png
diff --git a/public/ui/fonts/manrope.ttf b/public/ui/fonts/manrope.ttf
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -28,11 +28,6 @@
     src: url(/ui/fonts/fezeline.otf) format("opentype");
   }
 
-  @font-face {
-    font-family: --font-manrope;
-    font-weight: 500;
-    src: url(/ui/fonts/manrope.ttf) format("truetype");
-  }
   @font-face {
     font-family: --font-nasalization;
     font-weight: 500;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,10 @@
 import type { Metadata } from "next";
 import "./globals.css";
 
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
 export const metadata: Metadata = {
   title: "Aarab Nishchal",
   description:
@@ -19,6 +23,7 @@ export const metadata: Metadata = {
     "Nishchal",
     "aarabii",
     "aarab",
+    "caya",
     "portfolio",
     "developer",
     "web developer",
@@ -61,7 +66,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning={true} className={`scroll-smooth`}>
-      <body className="font-manrope">{children}</body>
+      <body className={inter.className}>{children}</body>
     </html>
   );
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -6,6 +6,7 @@ import { toBase64, convertImage } from "@/util/BlurData";
 import data from "@/constants/details.json";
 
 import { Title } from "./common/Title";
+import { TextGenerateEffect } from "./ui/TextGenerateEffect";
 
 export const About = () => {
   return (
@@ -50,7 +51,7 @@ export const About = () => {
         >
           <div className="flex justify-center text-center lg:text-left lg:justify-start">
             <p className="my-2 max-w-xl py-6 text-lg tracking-wider">
-              {data.about}
+              <TextGenerateEffect words={data.about} />
             </p>
           </div>
         </motion.div>

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -5,6 +5,8 @@ import { Button } from "./common/Button";
 
 import data from "@/constants/details.json";
 import { useScreenSize } from "@/util/hook/useScreenSize";
+import { Meteors } from "./ui/Meteors";
+import { TextGenerateEffect } from "./ui/TextGenerateEffect";
 
 const container = (delay: number) => ({
   hidden: { x: -100, opacity: 0 },
@@ -43,7 +45,7 @@ export const Hero = () => {
           animate="visible"
           className="w-full lg:w-1/2 font-light text-sm lg:text-xl tracking-wider leading-relaxed"
         >
-          {data.bio}
+          <TextGenerateEffect words={data.bio} />
         </motion.p>
         <motion.div className="flex justify-center lg:justify-start">
           <Button
@@ -53,6 +55,7 @@ export const Hero = () => {
             Resume
           </Button>
         </motion.div>
+        <Meteors number={Math.floor(Math.random() * 50)} />
       </div>
     </header>
   );

diff --git a/src/components/common/ContactList.tsx b/src/components/common/ContactList.tsx
@@ -30,9 +30,9 @@ export const ContactList: FC<ContactListProps> = ({
         rel="noopener noreferrer"
         className="flex items-center"
       >
-        <div className="text-slate-100">{icon}</div>
+        <div className="text-slate-300">{icon}</div>
 
-        <strong className="text-slate-100 text-md ml-3">{text}</strong>
+        <span className="text-slate-300 font-medium text-md ml-3">{text}</span>
       </Link>
     </motion.li>
   );

diff --git a/src/components/common/ProjectCard.tsx b/src/components/common/ProjectCard.tsx
@@ -1,10 +1,9 @@
 import { FC } from "react";
 import Link from "next/link";
-
 import { motion } from "framer-motion";
-
 import { TechClip } from "./TechClip";
 import { FiExternalLink, FiGithub } from "react-icons/fi";
+import { Meteors } from "../ui/Meteors"; // Make sure this import is correct according to your project structure
 
 interface ProjectCardProps {
   title: string;
@@ -23,40 +22,39 @@ export const ProjectCard: FC<ProjectCardProps> = ({
 }) => {
   return (
     <motion.div
-      whileInView={{ opacity: 1 }}
-      initial={{ opacity: 0 }}
-      transition={{ duration: 0.5 }}
-      whileHover={{
-        scale: 1.1,
-      }}
-      className="rounded-lg border bg-card text-card-foreground w-full max-w-sm mx-auto bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-20 border-gray-100 shadow-[inset_0px_0px_5px_0px_#e2e8f0]"
+      whileHover={{ scale: 1.05 }}
+      transition={{ type: "spring", stiffness: 400, damping: 10 }}
+      className="relative rounded-lg border w-full max-w-sm mx-auto shadow-xl overflow-hidden"
     >
-      <div className="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
-        <h3 className="leading-none tracking-tight text-2xl font-medium capitalize">
-          {title}
-        </h3>
-        <div className="flex flex-row gap-3">
-          <Link
-            href={hostedAt}
-            rel="noopener noreferrer"
-            target="_blank"
-            passHref
-          >
-            <FiExternalLink className="h-4 w-4 text-muted-foreground" />
-          </Link>
-          <Link href={git} rel="noopener noreferrer" target="_blank" passHref>
-            <FiGithub className="h-4 w-4 text-muted-foreground" />
-          </Link>
+      <div className="relative p-6 bg-gray-900 bg-opacity-40 rounded-lg flex flex-col justify-between">
+        <div className="flex flex-row items-center justify-between pb-2">
+          <h3 className="leading-none tracking-tight text-2xl cursor-pointer font-medium capitalize text-slate-100">
+            <Link
+              href={hostedAt}
+              rel="noopener noreferrer"
+              target="_blank"
+              passHref
+            >
+              {title}
+            </Link>
+          </h3>
+          <div className="flex flex-row gap-3">
+            <Link href={git} rel="noopener noreferrer" target="_blank" passHref>
+              <FiGithub className="h-5 w-5 text-slate-200" />
+            </Link>
+          </div>
+        </div>
+        <div className="pt-2">
+          <div className="text-sm text-slate-400">{desc}</div>
+          <div className="flex flex-wrap gap-1 mt-2">
+            {tech.map((tech, index) => (
+              <TechClip key={index} name={tech} />
+            ))}
+          </div>
         </div>
       </div>
-      <div className="p-6 pt-0">
-        <div className="text-sm">{desc}</div>
-        <p className="text-muted-foreground">
-          {tech.map((tech, index) => (
-            <TechClip key={index} name={tech} />
-          ))}
-        </p>
-      </div>
+
+      <Meteors number={5} className="opacity-30 -z-30" />
     </motion.div>
   );
 };
diff --git a/src/components/common/TechClip.tsx b/src/components/common/TechClip.tsx
@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { motion } from "framer-motion";
 
 interface TechClipProps {
   name: string;
@@ -7,11 +8,13 @@ interface TechClipProps {
 
 export const TechClip: FC<TechClipProps> = ({ keyValue, name }) => {
   return (
-    <span
+    <motion.span
       key={keyValue}
-      className="bg-purple-800 text-slate-200 px-2 py-1 text-sm mr-2 mt-4 inline-flex items-center rounded font-semibold capitalize"
+      className="relative inline-flex items-center px-2 py-1 text-sm mr-2 mt-4 text-slate-200 bg-purple-800 rounded font-light capitalize"
+      whileHover={{ scale: 1.05 }}
+      transition={{ type: "spring", stiffness: 400, damping: 10 }}
     >
-      {name}
-    </span>
+      <span className="relative z-10">{name}</span>
+    </motion.span>
   );
 };
diff --git a/src/components/common/Title.tsx b/src/components/common/Title.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, Fragment } from "react";
 import { motion } from "framer-motion";
 
 interface TitleProps {
@@ -8,17 +8,19 @@ interface TitleProps {
 
 export const Title: FC<TitleProps> = ({ title, subTitle }) => {
   return (
-    <motion.h2
-      whileInView={{ opacity: 1, y: 0 }}
-      initial={{ opacity: 0, y: -100 }}
-      transition={{ duration: 0.5 }}
-      whileHover={{
-        scale: 1.05,
-      }}
-      className="mb-10 font-nasalization text-slate-200 text-center text-4xl"
-    >
-      {title}
-      {subTitle && <span className="text-purple-200"> Me</span>}
-    </motion.h2>
+    <Fragment>
+      <motion.h2
+        whileInView={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: -100 }}
+        transition={{ duration: 0.5 }}
+        whileHover={{
+          scale: 1.05,
+        }}
+        className="mb-10 font-nasalization text-slate-200 text-center text-4xl"
+      >
+        {title}
+        {subTitle && <span className="text-purple-200"> Me</span>}
+      </motion.h2>
+    </Fragment>
   );
 };
diff --git a/src/components/ui/Meteors.tsx b/src/components/ui/Meteors.tsx
@@ -0,0 +1,32 @@
+import { cn } from "@/util/cn";
+import React from "react";
+
+export const Meteors = ({
+  number,
+  className,
+}: {
+  number?: number;
+  className?: string;
+}) => {
+  const meteors = new Array(number || 20).fill(true);
+  return (
+    <>
+      {meteors.map((el, idx) => (
+        <span
+          key={"meteor" + idx}
+          className={cn(
+            "animate-meteor-effect absolute top-1/2 left-1/2 h-0.5 w-0.5 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]",
+            "before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent",
+            className
+          )}
+          style={{
+            top: 0,
+            left: Math.floor(Math.random() * (400 - -400) + -400) + "px",
+            animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + "s",
+            animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + "s",
+          }}
+        ></span>
+      ))}
+    </>
+  );
+};