add transparent nav, make all caps i think, add new index design

hannahmcg · Mar 6, 2024 · 9ec4b46 · 9ec4b46
1 parent 46afbe1
commit 9ec4b46
Show file tree

Hide file tree

Showing 597 changed files with 19,798 additions and 3,351 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.history/components/Nav_20240228174000.js b/.history/components/Nav_20240228174000.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center justify-around text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="3xl:text-4xl mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-8 w-8" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-8 w-8" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}
diff --git a/.history/components/Nav_20240228174051.js b/.history/components/Nav_20240228174051.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="3xl:text-4xl mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-8 w-8" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-8 w-8" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}
diff --git a/.history/components/Nav_20240228174300.js b/.history/components/Nav_20240228174300.js
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="mx-auto px-12 py-3 bg-transparent shadow-none">
+      <div className="flex items-center justify-between text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="3xl:text-4xl mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-8 w-8" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-8 w-8" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}
diff --git a/.history/components/Nav_20240228174912.js b/.history/components/Nav_20240228174912.js
@@ -0,0 +1,115 @@
+import React from "react";
+import {
+  Navbar,
+  Collapse,
+  Typography,
+  IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+
+function NavList() {
+  return (
+    <ul className="my-3 flex flex-col items-end justify-center gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/work" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          work
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/about" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          about
+        </a>
+      </Typography>
+      <Typography
+        as="li"
+        variant="h6"
+        className="text-lg 3xl:text-2xl p-1 font-semibold text-slate-900"
+      >
+        <a href="/gallery" className="flex items-center hover:text-light-blue-500 active:text-light-blue-800 transition-colors">
+          gallery
+        </a>
+      </Typography>
+    </ul>
+  );
+};
+
+export default function NavMain() {
+  const [openNav, setOpenNav] = React.useState(false);
+
+  const handleWindowResize = () =>
+    window.innerWidth >= 960 && setOpenNav(false);
+
+  React.useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, []);
+
+  return (
+    <Navbar fullWidth={true} className="flex fixed w-screen bg-transparent shadow-none">
+
+      <nav class="flex fixed w-screen">
+          {/* Left Navigation */}
+          <div class="flex-1 flex justify-center mr-auto">
+            <Typography
+              as="a"
+              href="/"
+              variant="h3"
+              className="3xl:text-4xl mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+            >
+              H+M
+            </Typography>
+          </div>
+          {/* Logo */}
+          <div class="mx-12 hidden lg:block">
+            <NavList />
+          </div>
+          {/* Right Navigation */}
+          <div class="flex-1 flex justify-center ml-auto">
+              <a class="mx-2">CONTACT</a>  
+          </div>
+        </nav>
+
+
+
+      <div className="flex items-center justify-between text-slate-900">
+        <Typography
+          as="a"
+          href="/"
+          variant="h3"
+          className="3xl:text-4xl mr-4 cursor-pointer py-1.5 hover:text-light-blue-500 active:text-light-blue-800"
+        >
+          H+M
+        </Typography>
+        <div className="hidden lg:block">
+          <NavList />
+        </div>
+        <IconButton
+          variant="text"
+          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+          ripple={false}
+          onClick={() => setOpenNav(!openNav)}
+        >
+          {openNav ? (
+            <XMarkIcon className="h-8 w-8" strokeWidth={3} />
+          ) : (
+            <Bars3Icon className="h-8 w-8" strokeWidth={3} />
+          )}
+        </IconButton>
+      </div>
+      <Collapse open={openNav}>
+        <NavList />
+      </Collapse>
+    </Navbar>
+  );
+}