fixs and update on ui

anon-aadhaar · Apr 25, 2024 · 60b8e6a · 60b8e6a
1 parent dd774b8
commit 60b8e6a
Show file tree

Hide file tree

Showing 10 changed files with 474 additions and 74 deletions.
diff --git a/app/build/page.tsx b/app/build/page.tsx
@@ -8,7 +8,7 @@ const Illustration = () => {
   return (
     <>
       <div
-        className="hidden right-0 top-0 ml-auto md:absolute md:-right-20 md:top-0 w-[330px] h-[330px] lg:w-[854px] md:h-[292px] md:w-[762px] lg:h-[507px] md:translate-x-40 lg:translate-x-32 xl:translate-x-5 bg-no-repeat"
+        className="hidden right-0 top-0 ml-auto md:flex md:absolute md:-right-20 md:top-0 w-[330px] h-[330px] lg:w-[854px] md:h-[292px] md:w-[762px] lg:h-[507px] md:translate-x-40 lg:translate-x-32 xl:translate-x-5 bg-no-repeat"
         style={{
           backgroundImage: "url('illustrations/build-shape-big.svg')",
           backgroundPosition: "top right",

diff --git a/app/page.tsx b/app/page.tsx
@@ -16,6 +16,7 @@ import Link from "next/link";
 import { motion } from "framer-motion";
 import { AppContainer } from "@/components/AppContainer";
 import { Label } from "@/components/ui/Label";
+import { svgHoverAnimation } from "@/shared/utils";
 
 export default function Home() {
   return (
@@ -37,32 +38,7 @@ export default function Home() {
         }
       >
         <motion.div
-          onMouseMove={(e) => {
-            const clientX = e?.clientX;
-            const clientY = e?.clientY;
-
-            const pathElement = document
-              ?.elementFromPoint(clientX, clientY)
-              ?.closest("path");
-
-            if (!pathElement) return;
-
-            const color =
-              (pathElement.attributes as any)?.stroke.value ?? "transparent";
-
-            const startingColor = `#80${color.replace("#", "")}`;
-
-            pathElement.animate(
-              {
-                fill: [startingColor, color],
-              },
-              {
-                duration: 500,
-                iterations: 1,
-                easing: "ease-in-out",
-              }
-            );
-          }}
+          onMouseMove={svgHoverAnimation}
           aria-label="Homepage shapes"
         >
           <Shapes.Homepage

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -6,13 +6,15 @@ import { Banner } from "@/components/elements/Banner";
 import { Icons } from "@/components/Icons";
 import { PageHeader } from "@/components/PageHeader";
 import { Section } from "@/components/Section";
+import { Shapes } from "@/components/Shape";
 import { Button } from "@/components/ui/Button";
 import { Tag } from "@/components/ui/Tag";
 import useProjects from "@/hooks/useProjects";
 import { LINKS } from "@/hooks/useSettings";
 import { ProjectItem } from "@/shared/content/projects";
 import { LABELS } from "@/shared/labels";
 import { ProjectSource, ProjectsSources } from "@/shared/types";
+import { svgHoverAnimation } from "@/shared/utils";
 import { classed } from "@tw-classed/react";
 import Link from "next/link";
 import React from "react";
@@ -38,17 +40,6 @@ const SectionTitle = classed.div(
   "uppercase font-rajdhani text-baltic-sea-950 text-[22px] leading-[125%] font-semibold"
 );
 
-const Illustration = () => {
-  return (
-    <div
-      className="right-0 ml-auto absolute top-0 w-[330px] h-[330px] md:right-[100px] md:w-[427px] md:h-[236px] lg:w-[854px] lg:h-[507px] lg:-right-[260px] xl:right-[-110px] lg:top-14 bg-no-repeat"
-      style={{
-        backgroundImage: "url('illustrations/projects-shape-big.svg')",
-      }}
-    ></div>
-  );
-};
-
 export default function ProjectPage() {
   const {
     projects,
@@ -68,7 +59,10 @@ export default function ProjectPage() {
         title={LABELS.PROJECTS_PAGE.TITLE}
         description={LABELS.PROJECTS_PAGE.DESCRIPTION}
       >
-        <Illustration />
+        <Shapes.ProjectsPage
+          onMouseMove={svgHoverAnimation}
+          className="z-1 right-0 ml-auto absolute top-0 w-[330px] h-[330px] md:right-[100px] md:w-[427px] md:h-[236px] lg:w-[854px] lg:h-[507px] lg:-right-[260px] xl:right-[-110px] lg:top-14 bg-no-repeat"
+        />
       </PageHeader>
       <AppContainer>
         <Section.Wrapper className="!pt-14 grid grid-cols-1 gap-16 lg:grid-cols-[400px_1fr] ">

diff --git a/components/AppContainer.tsx b/components/AppContainer.tsx
@@ -6,8 +6,8 @@ import { cn } from "@/shared/utils";
 const AppContainerWrapper = classed.div("mx-auto max-w-screen-xl", {
   variants: {
     size: {
-      default: "px-8 xl:px-0",
-      small: "px-8 xl:px-0",
+      default: "px-8 2xl:px-0",
+      small: "px-8 2xl:px-0",
     },
   },
   defaultVariants: {

diff --git a/components/Shape.tsx b/components/Shape.tsx
diff --git a/components/cards/ProjecCard.tsx b/components/cards/ProjecCard.tsx
@@ -3,15 +3,19 @@ import Link from "next/link";
 import Image from "next/image";
 import { Tag } from "../ui/Tag";
 
-export const ProjectCard = ({ name, tags = [], links = {} }: ProjectItem) => {
+export const ProjectCard = ({
+  name,
+  categories = [],
+  links = {},
+}: ProjectItem) => {
   return (
     <div className="group shadow-project-card border border-scarpa-100 rounded-[10px] p-6">
       <div className="flex min-h-[220px] relative">
         <div className="flex flex-col gap-5">
           <div className="flex flex-col gap-8">
-            {tags?.length > 0 && (
+            {categories?.length > 0 && (
               <div className="flex gap-[10px] flex-wrap">
-                {tags.map((tag, index) => (
+                {categories.map((tag, index) => (
                   <Tag key={index}>{tag}</Tag>
                 ))}
               </div>

diff --git a/components/header/AppHeaderMobile.tsx b/components/header/AppHeaderMobile.tsx
@@ -45,7 +45,6 @@ export const AppHeaderMobile = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
-    console.log("isOpen", isOpen);
     const clientHeight = document.documentElement.clientHeight;
 
     document.body.style.height = isOpen ? `${clientHeight}px` : `auto`;

diff --git a/sections/buildPage/BuildDescriptionSection.tsx b/sections/buildPage/BuildDescriptionSection.tsx
@@ -3,19 +3,18 @@ import { Label } from "@/components/ui/Label";
 import { cn } from "@/shared/utils";
 import { classed } from "@tw-classed/react";
 import Link from "next/link";
-import Image from "next/image";
 import { Section } from "@/components/Section";
 import { AppContainer } from "@/components/AppContainer";
 
 const DescriptionSection = classed.section(
-  "grid grid-cols-1 gap-14 w-full md:items-center md:grid-cols-2 md:gap-0"
+  "grid grid-cols-1 w-full md:items-center lg:grid-cols-2 md:gap-0"
 );
 
 const ContentWrapper = classed.div("md:px-0", {
   variants: {
     reverse: {
-      true: "md:ml-[110px]",
-      false: "md:mr-[110px]",
+      true: "lg:ml-[110px]",
+      false: "lg:mr-[110px]",
     },
   },
   defaultVariants: {
@@ -70,38 +69,35 @@ const BUILD_ITEMS: BuildItem[] = [
 
 export const BuildDescriptionSection = () => {
   return (
-    <Section.Wrapper color="green" className=" flex flex-col gap-14">
+    <Section.Wrapper color="green" className="flex flex-col gap-14">
       {BUILD_ITEMS.map(({ title, description, image, links = [] }, index) => {
         const isReverse = index % 2 !== 0;
         return (
           <AppContainer
             key={index}
+            containerClass="flex flex-col gap-14"
             element={
               <div
                 className={cn(
-                  "absolute h-[355px] md:h-[520px] md:w-[520px] object-cover bg-center ",
+                  "relative lg:absolute h-[380px] md:h-[490px] md:w-[788px] xl:h-[590px] xl:w-[888px] object-cover bg-center ",
                   isReverse
-                    ? "order-1 md:order-1 md:mr-0"
-                    : "md:order-2 md:ml-0"
+                    ? "-left-8  md:left-0 md:-translate-x-20 lg:-translate-x-60 rounded-r-[48px]"
+                    : "-right-8 md:right-0 md:translate-x-20 lg:translate-x-60 rounded-l-[48px]"
                 )}
-              >
-                <Image
-                  className={cn(
-                    "blur-[0.5px]",
-                    isReverse ? "rounded-r-[48px]" : "rounded-l-[48px]"
-                  )}
-                  src={image}
-                  fill
-                  alt="illustration"
-                />
-              </div>
+                style={{
+                  backgroundImage: `url(${image})`,
+                  backgroundSize: "cover",
+                }}
+              ></div>
             }
           >
-            <DescriptionSection>
+            <DescriptionSection className="lg:h-[645px] ">
               <ContentWrapper
                 className={cn(
                   "flex flex-col gap-24",
-                  isReverse ? "order-2 md:order-2 pr-8 md:pr-20" : "md:order-1"
+                  isReverse
+                    ? "order-2 md:order-2 pr-8 md:pr-20 md:col-start-2"
+                    : "md:order-1"
                 )}
                 reverse={isReverse}
               >
@@ -133,13 +129,6 @@ export const BuildDescriptionSection = () => {
                   </div>
                 )}
               </ContentWrapper>
-              <div
-                className={cn(
-                  isReverse
-                    ? "order-1 md:order-1 md:mr-0"
-                    : "md:order-2 md:ml-0"
-                )}
-              ></div>
             </DescriptionSection>
           </AppContainer>
         );

diff --git a/sections/homePage/ProjectsSection.tsx b/sections/homePage/ProjectsSection.tsx
@@ -11,7 +11,6 @@ import {
   PROJECTS,
 } from "@/shared/content/projects";
 import { LABELS } from "@/shared/labels";
-import Image from "next/image";
 import Link from "next/link";
 
 export const ProjectSection = () => {

diff --git a/shared/utils.ts b/shared/utils.ts
@@ -25,3 +25,32 @@ export const arrayToggle = (arr: any[], value: any) => {
   }
   return [...arr, value];
 };
+
+export const svgHoverAnimation = (e: any) => {
+  console.log("svgHoverAnimation");
+  const clientX = e?.clientX;
+  const clientY = e?.clientY;
+
+  const pathElement = document
+    ?.elementFromPoint(clientX, clientY)
+    ?.closest("path");
+
+  console.log("path", pathElement);
+
+  if (!pathElement) return;
+
+  const color = (pathElement.attributes as any)?.stroke.value ?? "transparent";
+
+  const startingColor = `#80${color.replace("#", "")}`;
+
+  pathElement.animate(
+    {
+      fill: [startingColor, color],
+    },
+    {
+      duration: 500,
+      iterations: 1,
+      easing: "ease-in-out",
+    }
+  );
+};