feat: added animations

2024-01-09 22:55:25 +05:30 · 2024-01-09 22:55:25 +05:30 · 8ddf0e9b62
parent 46f61a7504
commit 8ddf0e9b62
8 changed files with 91 additions and 23 deletions
--- a/next.config.js
+++ b/next.config.js
@ -5,6 +5,7 @@ const nextConfig = {
  // Configure `pageExtensions` to include MDX files
  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
  // Optionally, add any other Next.js config below
+
  images: {
    remotePatterns: [
      {
--- a/package-lock.json
+++ b/package-lock.json
@ -17,7 +17,7 @@
        "@types/mdx": "^2.0.10",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.0.0",
-        "framer-motion": "^10.16.4",
+        "framer-motion": "^10.17.12",
        "lucide-react": "^0.306.0",
        "nanoid": "^5.0.4",
        "next": "latest",
@ -31,7 +31,8 @@
        "sass": "^1.69.7",
        "sharp": "^0.33.1",
        "tailwind-merge": "^1.14.0",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "tailwindcss-animation-delay": "^1.2.0"
      },
      "devDependencies": {
        "@tailwindcss/typography": "^0.5.10",
@ -3335,8 +3336,9 @@
      }
    },
    "node_modules/framer-motion": {
-      "version": "10.16.4",
-      "license": "MIT",
+      "version": "10.17.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.17.12.tgz",
+      "integrity": "sha512-6aaBLN2EgH/GilXwOzEalTfw5Rx9DTQJJjTrxq5bfDbGtPCzXz2GCN6ePGRpTi1ZGugLHxdU273h38ENbcdFKQ==",
      "dependencies": {
        "tslib": "^2.4.0"
      },
@ -7176,6 +7178,14 @@
        "tailwindcss": ">=3.0.0 || insiders"
      }
    },
+    "node_modules/tailwindcss-animation-delay": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animation-delay/-/tailwindcss-animation-delay-1.2.0.tgz",
+      "integrity": "sha512-fyDXWrBKZoTb6phV+bgtGFpxwWlvtlM+387gdpVc/mNgKJinayD1859vQ1aPmzDZ1DWbDZ/lpexukXRmc95Z6g==",
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0"
+      }
+    },
    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
      "version": "6.0.13",
      "license": "MIT",
@ -9891,7 +9901,9 @@
      "dev": true
    },
    "framer-motion": {
-      "version": "10.16.4",
+      "version": "10.17.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.17.12.tgz",
+      "integrity": "sha512-6aaBLN2EgH/GilXwOzEalTfw5Rx9DTQJJjTrxq5bfDbGtPCzXz2GCN6ePGRpTi1ZGugLHxdU273h38ENbcdFKQ==",
      "requires": {
        "@emotion/is-prop-valid": "^0.8.2",
        "tslib": "^2.4.0"
@ -12203,6 +12215,12 @@
      "version": "1.0.7",
      "requires": {}
    },
+    "tailwindcss-animation-delay": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animation-delay/-/tailwindcss-animation-delay-1.2.0.tgz",
+      "integrity": "sha512-fyDXWrBKZoTb6phV+bgtGFpxwWlvtlM+387gdpVc/mNgKJinayD1859vQ1aPmzDZ1DWbDZ/lpexukXRmc95Z6g==",
+      "requires": {}
+    },
    "tapable": {
      "version": "2.2.1"
    },
--- a/package.json
+++ b/package.json
@ -18,7 +18,7 @@
    "@types/mdx": "^2.0.10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.17.12",
    "lucide-react": "^0.306.0",
    "nanoid": "^5.0.4",
    "next": "latest",
@ -32,7 +32,8 @@
    "sass": "^1.69.7",
    "sharp": "^0.33.1",
    "tailwind-merge": "^1.14.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animation-delay": "^1.2.0"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.10",
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@ -8,10 +8,11 @@ import { StyledNotion } from "@/components/notion/styled";
 import { ExternalLink } from "lucide-react";
 import { Footer } from "./Footer";
 import { Connect } from "./Connect";
+import { cn } from "@/lib/utils";

 export default function Page() {
  return (
-    <main>
+    <main className="animate-fade-in">
      <div className="container py-12 max-w-xl">
        <GrainProvider
          grain_options={{
@ -24,11 +25,13 @@ export default function Page() {
          }}
        />
        <header className="my-2">
-          <GradientProvider>
-            <h1 className="text-xl font-display font-medium">./raj</h1>
-          </GradientProvider>
+          {/* <GradientProvider> */}
+          <h1 className="text-xl animate-fade-in-from-bottom font-display font-medium">
+            ./raj
+          </h1>
+          {/* </GradientProvider> */}
        </header>
-        <div className="">
+        <div className="animate-fade-in-from-bottom animation-delay-600">
          <p className="text-xs italic">I like to build things</p>
          <p className="text-xs">
            Software Engineer{" "}
@ -121,6 +124,7 @@ function Projects() {

      <div className="sm:grid-cols-2 grid-cols-1 grid gap-2">
        <Project
+          className="animate-fade-in-from-bottom animation-delay-[1200]"
          title="PPEC"
          description={
            "PhonePe’s internal cloud provisioning service with fine grain control over provisioning and network, I made the entire ux ui flow for this, very cool service"
@ -128,6 +132,7 @@ function Projects() {
          href="https://tech.phonepe.com/heres-everything-you-need-to-know-about-phonepes-internal-cloud-provisioning-service/"
        />
        <Project
+          className="animate-fade-in-from-bottom animation-delay-[2400]"
          title="Chakshu"
          description={
            "Server inventory management service that manages procurement to server onboarding."
@ -135,6 +140,7 @@ function Projects() {
          href="https://tech.phonepe.com/phonepes-server-state-management-via-senzu-and-pious-an-overview/"
        />
        <Project
+          className="animate-fade-in-from-bottom animation-delay-[4800]"
          title="Makima"
          href="https://github.com/xrehpicx/makima"
          description={`Manage servers using natural language.
@ -142,6 +148,7 @@ Keep track of stats of various things by memory.
        Schedule absolutely anything across all kind of tasks by making the ai talk to itself in the future.`}
        />
        <Project
+          className="animate-fade-in-from-bottom animation-delay-[9600]"
          title="PEE (Project Environment Executor)"
          description={
            "A tmux session manager with a tui and config control to setup tmux sessions."
@ -157,13 +164,15 @@ function Project({
  title,
  description,
  href,
+  className,
 }: {
  title: string;
  description: JSX.Element | string;
  href?: string;
+  className?: string;
 }) {
  return (
-    <div className="mt-4">
+    <div className={cn("mt-4", className)}>
      <div className="flex items-center gap-1">
        <h4 className="font-display font-medium text-sm">{title}</h4>
        {href ? (
--- a/src/components/framer.tsx
+++ b/src/components/framer.tsx
@ -0,0 +1,6 @@
+"use client";
+import { motion } from "framer-motion";
+
+export const Mdiv = motion.div;
+export const Mh1 = motion.h1;
+export const Mp = motion.p;
--- a/src/components/gradient-provider.tsx
+++ b/src/components/gradient-provider.tsx
@ -1,17 +1,23 @@
+"use client";
 import gradient from "@/app/(assets)/gradient.svg";
 import symetric_gradient from "@/app/(assets)/symetric-grad.svg";
 import background_gradient from "@/app/(assets)/background-gradient.png";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
+import { motion } from "framer-motion";

 export function GradientProvider({ children }: { children: React.ReactNode }) {
  return (
-    <div className="relative w-fit">
-      <div className="absolute rotate-180 w-[600px] -z-10 h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2">
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className="relative w-fit"
+    >
+      <div className="absolute rotate-180 -z-[5] w-[600px] h-[800px] opacity-60 top-1/2 -translate-x-1/2 -translate-y-1/2 left-1/2">
        <Image src={gradient} alt="gradient" />
      </div>
      {children}
-    </div>
+    </motion.div>
  );
 }

@ -25,7 +31,11 @@ export function SymetricGradProvider({
  gradient_class?: string;
 }) {
  return (
-    <div className={cn("relative w-fit", className)}>
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className={cn("relative w-fit", className)}
+    >
      <div
        className={cn(
          "absolute w-full -z-10 h-[800px] opacity-70 top-1/4 rotate-180 -translate-x-1/2 -translate-y-1/2 left-1/2",
@ -35,7 +45,7 @@ export function SymetricGradProvider({
        <Image src={symetric_gradient} alt="gradient" />
      </div>
      {children}
-    </div>
+    </motion.div>
  );
 }

@ -45,7 +55,9 @@ export function BackgroundGradentProvider({
  className?: string;
 }) {
  return (
-    <div
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
      className={cn(
        "fixed overflow-hidden w-full h-full opacity-50 top-0 left-0",
        className,
@ -56,6 +68,6 @@ export function BackgroundGradentProvider({
        src={background_gradient}
        alt="gradient"
      />
-    </div>
+    </motion.div>
  );
 }
--- a/src/components/grain.tsx
+++ b/src/components/grain.tsx
@ -1,5 +1,6 @@
 "use client";

+import { motion } from "framer-motion";
 // Grain.tsx
 import React, { useEffect, useRef } from "react";

@ -67,11 +68,17 @@ export const GrainProvider = ({
  }, [grain_options]);

  return (
-    <div
+    <motion.div
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+      }}
      ref={providerRef}
      id="grained-bg"
      className="fixed left-0 top-0 inset-0 z-50 pointer-events-none w-full h-full"
-    ></div>
+    ></motion.div>
  );
 };

--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -64,12 +64,26 @@ module.exports = {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
+        "fade-in": {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+        "fade-in-from-bottom": {
+          from: { opacity: 0, transform: "translateY(0.5rem)" },
+          to: { opacity: 1, transform: "translateY(0)" },
+        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.8s ease-out",
+        "fade-in-from-bottom": "fade-in-from-bottom 0.6s ease-out",
      },
    },
  },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/typography"),
+    require("tailwindcss-animation-delay"),
+  ],
 };