Animation

app/components/Animation.tsx

@@ -0,0 +1,48 @@
+const Animation = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    id="svg"
+    className="absolute -z-10 rotate-180 opacity-15 transition delay-150 duration-300 ease-in-out"
+    viewBox="0 0 1440 590"
+  >
+    <style>
+      {
+        '@keyframes pathAnim-0{0%,to{d:path("M 0,600 L 0,112 C 52.816586656372465,141.25694371891154 105.63317331274493,170.51388743782306 147,167 C 188.36682668725507,163.48611256217694 218.28389340539275,127.20139396761931 256,129 C 293.71610659460725,130.7986060323807 339.23125306568403,170.68053669169976 385,162 C 430.76874693431597,153.31946330830024 476.79109433187125,96.07645926558165 523,83 C 569.2089056681288,69.92354073441835 615.604369606831,101.01362624597365 664,98 C 712.395630393169,94.98637375402635 762.7914272408048,57.86903575052372 801,68 C 839.2085727591952,78.13096424947628 865.2299214299501,135.5102307519315 905,155 C 944.7700785700499,174.4897692480685 998.2888870393949,156.09004124175033 1052,126 C 1105.711112960605,95.90995875824967 1159.6145304124707,54.129604281067216 1196,66 C 1232.3854695875293,77.87039571893278 1251.2529913107226,143.3915416339808 1289,160 C 1326.7470086892774,176.6084583660192 1383.3735043446386,144.3042291830096 1440,112 L 1440,600 L 0,600 Z")}25%{d:path("M 0,600 L 0,112 C 39.97865487082956,92.3496641692594 79.95730974165912,72.6993283385188 124,65 C 168.04269025834088,57.300671661481196 216.14941590419306,61.55235081518417 269,69 C 321.85058409580694,76.44764918481583 379.44502664156863,87.09126840074445 416,94 C 452.55497335843137,100.90873159925555 468.07047752953235,104.08257558183804 509,104 C 549.9295224704676,103.91742441816196 616.2730632403019,100.57842927190337 660,105 C 703.7269367596981,109.42157072809663 724.8372695092603,121.60370733054847 765,132 C 805.1627304907397,142.39629266945153 864.3778587226568,151.00674140590277 913,140 C 961.6221412773432,128.99325859409723 999.6512956001127,98.3693270458405 1037,98 C 1074.3487043998873,97.6306729541595 1111.0169588768927,127.51595041073524 1160,123 C 1208.9830411231073,118.48404958926476 1270.2808688923164,79.56687131121849 1319,72 C 1367.7191311076836,64.43312868878151 1403.8595655538418,88.21656434439075 1440,112 L 1440,600 L 0,600 Z")}50%{d:path("M 0,600 L 0,112 C 50.573368347797754,105.60781556845086 101.14673669559551,99.21563113690172 141,100 C 180.8532633044045,100.78436886309828 209.98642156541575,108.745291020844 245,104 C 280.01357843458425,99.254708979156 320.90757704274165,81.80320477972231 369,99 C 417.09242295725835,116.19679522027769 472.38327026361765,168.0418898602668 516,167 C 559.6167297363824,165.9581101397332 591.5593419027871,112.02923577921054 641,89 C 690.4406580972129,65.97076422078946 757.3793621252339,73.84116702289103 802,71 C 846.6206378747661,68.15883297710897 868.9232095962773,54.60609612922534 905,58 C 941.0767904037227,61.39390387077466 990.9277994896577,81.73444846020763 1043,82 C 1095.0722005103423,82.26555153979237 1149.3655924450923,62.456110029944085 1198,78 C 1246.6344075549077,93.54388997005591 1289.6098307299735,144.441111420016 1329,156 C 1368.3901692700265,167.558888579984 1404.1950846350132,139.779444289992 1440,112 L 1440,600 L 0,600 Z")}75%{d:path("M 0,600 L 0,112 C 54.71879288637358,100.85282768952347 109.43758577274716,89.70565537904693 147,107 C 184.56241422725284,124.29434462095307 204.96844979538497,170.03020617333576 240,160 C 275.03155020461503,149.96979382666424 324.688615045713,84.17351992761002 371,74 C 417.311384954287,63.82648007238998 460.277090021763,109.27571411622418 507,120 C 553.722909978237,130.72428588377582 604.2030248672347,106.72362360749328 647,91 C 689.7969751327653,75.27637639250672 724.9108105092977,67.82979145380268 765,68 C 805.0891894907023,68.17020854619732 850.153733095575,75.95721057729597 892,94 C 933.846266904425,112.04278942270403 972.4742571084025,140.34136623701346 1024,143 C 1075.5257428915975,145.65863376298654 1139.9492384708146,122.6773244746502 1186,117 C 1232.0507615291854,111.3226755253498 1259.7287890083385,122.94933586438565 1299,125 C 1338.2712109916615,127.05066413561435 1389.1356054958308,119.52533206780717 1440,112 L 1440,600 L 0,600 Z")}}@keyframes pathAnim-1{0%,to{d:path("M 0,600 L 0,262 C 51.69131196223255,290.54742270049354 103.3826239244651,319.0948454009871 146,306 C 188.6173760755349,292.9051545990129 222.16081626437216,238.16804109654532 263,234 C 303.83918373562784,229.83195890345468 351.9741110180462,276.23299021283157 400,287 C 448.0258889819538,297.76700978716843 495.94273966344326,272.8999980521286 533,274 C 570.0572603365567,275.1000019478714 596.254930328181,302.16701757865417 630,299 C 663.745069671819,295.83298242134583 705.037539023833,262.43193163325475 763,252 C 820.962460976167,241.56806836674525 895.5949135764868,254.10525588832672 938,266 C 980.4050864235132,277.8947441116733 990.5828066702202,289.1470448134382 1026,300 C 1061.4171933297798,310.8529551865618 1122.073859742633,321.3065648579205 1172,302 C 1221.926140257367,282.6934351420795 1261.1217543592477,233.62669575487988 1304,222 C 1346.8782456407523,210.37330424512012 1393.4391228203763,236.18665212256008 1440,262 L 1440,600 L 0,600 Z")}25%{d:path("M 0,600 L 0,262 C 33.64478970957238,260.2983253618171 67.28957941914476,258.59665072363424 111,276 C 154.71042058085524,293.40334927636576 208.4864720329934,329.9117224672802 260,315 C 311.5135279670066,300.0882775327198 360.7645324488817,233.756459407245 406,209 C 451.2354675511183,184.243540592755 492.45539817147994,201.06243990373977 533,225 C 573.5446018285201,248.93756009626023 613.4138748651984,279.99378097779606 651,268 C 688.5861251348016,256.00621902220394 723.8891023677262,200.9624361850761 768,207 C 812.1108976322738,213.0375638149239 865.0297156638966,280.1564742818996 918,279 C 970.9702843361034,277.8435257181004 1023.9920349766876,208.41166668732586 1068,208 C 1112.0079650233124,207.58833331267414 1147.0021444293534,276.1968589687969 1188,304 C 1228.9978555706466,331.8031410312031 1275.9993873058993,318.8008974374866 1319,305 C 1362.0006126941007,291.1991025625134 1401.0003063470504,276.5995512812567 1440,262 L 1440,600 L 0,600 Z")}50%{d:path("M 0,600 L 0,262 C 55.02303977730517,268.27778063072077 110.04607955461034,274.55556126144154 155,273 C 199.95392044538966,271.44443873855846 234.83872155886377,262.05553558495467 275,255 C 315.16127844113623,247.94446441504536 360.5990342099346,243.22229639873993 399,247 C 437.4009657900654,250.77770360126007 468.7651416013982,263.05527882008573 515,270 C 561.2348583986018,276.94472117991427 622.3403993844727,278.5565883209171 674,267 C 725.6596006155273,255.44341167908289 767.8732608607111,230.71836789624575 805,229 C 842.1267391392889,227.28163210375425 874.1665571726825,248.56994009409988 920,243 C 965.8334428273175,237.43005990590012 1025.4605104485593,205.00187172735468 1069,211 C 1112.5394895514407,216.99812827264532 1139.9914010330801,261.42257299648145 1181,269 C 1222.0085989669199,276.57742700351855 1276.57388541912,247.30783628671958 1322,240 C 1367.42611458088,232.69216371328042 1403.71305729044,247.3460818566402 1440,262 L 1440,600 L 0,600 Z")}75%{d:path("M 0,600 L 0,262 C 43.988043611070296,272.4675741386424 87.97608722214059,282.93514827728484 125,287 C 162.0239127778594,291.06485172271516 192.08369472250797,288.7269810295032 244,270 C 295.91630527749203,251.27301897049682 369.6891338878274,216.1569276047025 412,211 C 454.3108661121726,205.8430723952975 465.1597697261823,230.64530855168675 507,245 C 548.8402302738177,259.35469144831325 621.671787207443,263.26183818855037 676,265 C 730.328212792557,266.73816181144963 766.1530814440456,266.3073386941116 801,282 C 835.8469185559544,297.6926613058884 869.7158870163745,329.50880703500326 914,316 C 958.2841129836255,302.49119296499674 1012.9833704904563,243.6574331658754 1052,221 C 1091.0166295095437,198.3425668341246 1114.3506310218004,211.86146030149504 1154,221 C 1193.6493689781996,230.13853969850496 1249.6141054223426,234.89672562814428 1300,241 C 1350.3858945776574,247.10327437185572 1395.1929472888287,254.55163718592786 1440,262 L 1440,600 L 0,600 Z")}}@keyframes pathAnim-2{0%,to{d:path("M 0,600 L 0,412 C 43.525183321262446,429.5924380089921 87.05036664252489,447.18487601798415 126,436 C 164.9496333574751,424.81512398201585 199.32371675116298,384.85293393705547 250,388 C 300.676283248837,391.14706606294453 367.6547663528233,437.4033882337941 409,447 C 450.3452336471767,456.5966117662059 466.05721783754404,429.533513127768 508,426 C 549.942782162456,422.466486872232 618.1163622970008,442.4625592551339 660,449 C 701.8836377029992,455.5374407448661 717.4773329744528,448.6162498516962 763,443 C 808.5226670255472,437.3837501483038 883.9743058051879,433.07244133808143 934,419 C 984.0256941948121,404.92755866191857 1008.6254438047949,381.09398479597814 1043,381 C 1077.374556195205,380.90601520402186 1121.5239189756323,404.55161947800593 1166,420 C 1210.4760810243677,435.44838052199407 1255.2788802926764,442.69953729199824 1301,440 C 1346.7211197073236,437.30046270800176 1393.360559853662,424.6502313540009 1440,412 L 1440,600 L 0,600 Z")}25%{d:path("M 0,600 L 0,412 C 31.35269045312802,403.7033391828502 62.70538090625604,395.40667836570043 110,397 C 157.29461909374396,398.59332163429957 220.5311668281039,410.0766257200484 275,420 C 329.4688331718961,429.9233742799516 375.16995178132845,438.286818754106 412,432 C 448.83004821867155,425.713181245894 476.7890260465824,404.77609926352756 512,408 C 547.2109739534176,411.22390073647244 589.6739440323418,438.6087841917838 635,451 C 680.3260559676582,463.3912158082162 728.5151978240506,460.78876396933697 778,465 C 827.4848021759494,469.21123603066303 878.265264671456,480.23615993086827 918,457 C 957.734735328544,433.76384006913173 986.4237434901252,376.2665963071899 1025,367 C 1063.5762565098748,357.7334036928101 1112.0397613680432,396.697454840372 1165,415 C 1217.9602386319568,433.302545159628 1275.4172110377021,430.9435843313223 1322,427 C 1368.5827889622979,423.0564156686777 1404.291394481149,417.52820783433884 1440,412 L 1440,600 L 0,600 Z")}50%{d:path("M 0,600 L 0,412 C 32.395357691170304,428.2510629180176 64.79071538234061,444.50212583603525 112,454 C 159.2092846176594,463.49787416396475 221.2324961618079,466.2425595738766 272,455 C 322.7675038381921,443.7574404261234 362.2792999704278,418.5276358684585 405,422 C 447.7207000295722,425.4723641315415 493.6503039564809,457.6468969522895 541,440 C 588.3496960435191,422.3531030477105 637.1194842036482,354.88477632238335 672,363 C 706.8805157963518,371.11522367761665 727.8717592289263,454.8139977581771 775,456 C 822.1282407710737,457.1860022418229 895.3934788806466,375.8592326449084 937,361 C 978.6065211193534,346.1407673550916 988.5543252484865,397.7490716621895 1028,422 C 1067.4456747515135,446.2509283378105 1136.3892201254077,443.14448070633364 1181,433 C 1225.6107798745923,422.85551929366636 1245.8887942498834,405.6730055124761 1285,401 C 1324.1112057501166,396.3269944875239 1382.0556028750584,404.163497243762 1440,412 L 1440,600 L 0,600 Z")}75%{d:path("M 0,600 L 0,412 C 55.97969963822716,418.90607541095665 111.95939927645432,425.81215082191324 149,412 C 186.04060072354568,398.18784917808676 204.14210253240992,363.6574721233038 239,372 C 273.8578974675901,380.3425278766962 325.47219059390596,431.5579606848716 380,451 C 434.52780940609404,470.4420393151284 491.9691350919661,458.1106851372099 543,440 C 594.0308649080339,421.8893148627901 638.6512690382297,397.9992987662891 674,387 C 709.3487309617703,376.0007012337109 735.4257887551154,377.8921197976339 773,380 C 810.5742112448846,382.1078802023661 859.6455759413088,384.4322220431755 911,379 C 962.3544240586912,373.5677779568245 1015.9919074796494,360.3789920296643 1056,359 C 1096.0080925203506,357.6210079703357 1122.3867941400943,368.05180983816734 1167,368 C 1211.6132058599057,367.94819016183266 1274.4609159599731,357.4137686176665 1323,363 C 1371.5390840400269,368.5862313823335 1405.7695420200134,390.29311569116675 1440,412 L 1440,600 L 0,600 Z")}}'
+      }
+    </style>
+    <path
+      fillOpacity={0.4}
+      strokeWidth={0}
+      d="M0 600V112c52.82 29.26 105.63 58.51 147 55 41.37-3.51 71.28-39.8 109-38 37.72 1.8 83.23 41.68 129 33 45.77-8.68 91.8-65.92 138-79 46.2-13.08 92.6 18.01 141 15 48.4-3.01 98.8-40.13 137-30 38.2 10.13 64.23 67.51 104 87 39.77 19.49 93.29 1.09 147-29 53.71-30.09 107.61-71.87 144-60 36.39 11.87 55.25 77.4 93 94 37.75 16.6 94.37-15.7 151-48v488H0Z"
+      className="fill-teal-700 transition-all duration-300 ease-in-out dark:fill-[#ff0080]"
+      style={{
+        animation: "pathAnim-0 12s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+      }}
+    />
+    <path
+      fillOpacity={0.53}
+      strokeWidth={0}
+      d="M0 600V262c51.7 28.55 103.38 57.1 146 44 42.62-13.1 76.16-67.83 117-72 40.84-4.17 88.97 42.23 137 53 48.03 10.77 95.94-14.1 133-13 37.06 1.1 63.25 28.17 97 25 33.75-3.17 75.04-36.57 133-47 57.96-10.43 132.6 2.1 175 14 42.4 11.9 52.58 23.15 88 34 35.42 10.85 96.07 21.3 146 2 49.93-19.3 89.12-68.37 132-80 42.88-11.63 89.44 14.19 136 40v338H0Z"
+      className="fill-teal-700 transition-all duration-300 ease-in-out dark:fill-[#ff0080]"
+      style={{
+        animation: "pathAnim-1 12s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+      }}
+    />
+    <path
+      strokeWidth={0}
+      d="M0 600V412c43.53 17.6 87.05 35.18 126 24s73.32-51.15 124-48c50.68 3.15 117.65 49.4 159 59 41.35 9.6 57.06-17.47 99-21 41.94-3.53 110.12 16.46 152 23 41.88 6.54 57.48-.38 103-6s120.97-9.93 171-24 74.63-37.9 109-38c34.37-.1 78.52 23.55 123 39 44.48 15.45 89.28 22.7 135 20 45.72-2.7 92.36-15.35 139-28v188H0Z"
+      className="fill-teal-700 transition-all duration-300 ease-in-out dark:fill-[#ff0080]"
+      style={{
+        animation: "pathAnim-2 12s",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+      }}
+    />
+  </svg>
+);
+
+export default Animation;

app/root.tsx

@@ -106,7 +106,10 @@ export function InnerLayout({
         <Meta />
         <Links />
       </head>
-      <body className="relative flex h-full flex-col" suppressHydrationWarning>
+      <body
+        className="relative flex h-full flex-col bg-background"
+        suppressHydrationWarning
+      >
         <a
           href="#main"
           className="absolute left-0 z-50 m-3 -translate-y-16 rounded-md border bg-popover px-2 py-1 text-sm text-popover-foreground transition focus:translate-y-0"

app/routes/_layout._index/Hero.tsx

@@ -2,7 +2,7 @@ import { Container } from "~/components/Container";
 
 export const Hero = () => {
   return (
-    <Container className="bg-background">
+    <Container className="">
       <Container.Inner>
         <div className="flex max-w-3xl flex-col">
           <img

app/routes/_layout._index/ProjectCard.tsx

@@ -12,7 +12,7 @@ export const ProjectCard = (props: ProjectCardProps) => {
   const { title, href, description, logo, linkText } = props;
 
   return (
-    <article className="group relative flex flex-col items-start rounded-md border p-6 hover:bg-background-2">
+    <article className="group relative flex flex-col items-start rounded-md border bg-background p-6 hover:bg-background-2">
       <div className="flex h-full w-full max-w-xl flex-col justify-between">
         <div>
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-foreground p-2.5 text-2xl">

app/routes/_layout._index/TechCloud.tsx

@@ -70,7 +70,7 @@ const TechCloudItem = ({ label, src }: { label: string; src: string }) => (
 
 export const TechCloud = () => {
   return (
-    <Container className="bg-background text-foreground">
+    <Container className="text-foreground">
       <Container.Inner>
         <div id="tech" />
         <h2 className="mb-6 flex text-sm font-semibold">

app/routes/_layout._index/Work.tsx

@@ -37,7 +37,7 @@ export const Work = () => {
   ];
 
   return (
-    <div className="shrink-0 grow basis-80 bg-card text-card-foreground">
+    <div className="shrink-0 grow basis-80 text-card-foreground">
       <h2 className="flex text-sm font-semibold">
         <BriefcaseIcon className="h-6 w-6 flex-none" />
         <span className="ml-3">Work</span>

app/routes/_layout._index/route.tsx

@@ -10,7 +10,7 @@ export default function Home() {
     <>
       <Hero />
 
-      <Container className="bg-background">
+      <Container className="">
         <Container.Inner>
           <div
             id="projects"

app/routes/_layout/Header.tsx

@@ -10,7 +10,7 @@ const Header = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="bg-background">
+    <header className="">
       <nav className="mx-auto flex max-w-7xl p-6 md:px-8" aria-label="Global">
         <div className="flex flex-1 md:justify-center">
           <div className="hidden items-center md:flex md:gap-x-12">

app/routes/_layout/route.tsx

@@ -1,11 +1,16 @@
 import { Outlet } from "@remix-run/react";
+import { Suspense, lazy } from "react";
 
 import Footer from "./Footer";
 import Header from "./Header";
+const Animation = lazy(() => import("../../components/Animation"));
 
 export default function Layout() {
   return (
     <>
+      <Suspense>
+        <Animation />
+      </Suspense>
       <Header />
       <div className="flex-grow">
         <Outlet />

tailwind.config.ts

@@ -4,6 +4,7 @@ import tailwindforms from "@tailwindcss/forms";
 import type { Config } from "tailwindcss";
 
 export default {
+  darkMode: "selector",
   content: ["./app/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {