updated

rNLKJA · Dec 28, 2023 · 538f98c · 538f98c
1 parent c390ef9
commit 538f98c
Show file tree

Hide file tree

Showing 21 changed files with 874 additions and 14 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
+
+body {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 1rem;
+}
+
+h1 {
+  font-size: 2.5rem; /* 40px */
+  font-family: "Roboto", sans-serif;
+}
+
+h2 {
+  font-size: 2rem; /* 32px */
+  font-family: "Roboto", sans-serif;
+}
+
+h3 {
+  font-size: 1.75rem; /* 28px */
+  font-family: "Open Sans", sans-serif;
+}
+
+h4 {
+  font-size: 1.5rem; /* 24px */
+  font-family: "Open Sans", sans-serif;
+}
+
+h5 {
+  font-size: 1.25rem; /* 20px */
+  font-family: "Open Sans", sans-serif;
+}
+
+p {
+  font-size: 1rem; /* 16px */
+  font-family: "Open Sans", sans-serif;
+}
+
+span {
+  font-size: 0.875rem; /* 14px */
+  font-family: "Open Sans", sans-serif;
+}
+
+* {
+  user-select: none; /* Disables text selection */
+}
diff --git a/components/layout copy/Footer.jsx b/components/layout copy/Footer.jsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { FaInstagram, FaLinkedin } from "react-icons/fa";
+import { BsTwitterX } from "react-icons/bs";
+import { FiGithub } from "react-icons/fi";
+import Link from "next/link";
+import Image from "next/image";
+
+const Footer = () => {
+  return (
+    <footer className="pt-10 pb-10 pl-4 pr-4 ">
+      <div className="grid md:grid-cols-4 grid-cols-1 gap-10 items-center text-center ">
+        <div className="md:col-span-2">
+          <div className="inline-block">
+            <Image src="/logo.svg" alt="Logo" width={200} height={200} />
+          </div>
+          <p className="text-pretty">
+            Fueling the future with purr-cision and cutting-edge data science
+            technology, I enthusiastically craft a trail of endless
+            pawssibilities, unleashing extraordinary potential with each
+            innovative leap.
+          </p>
+          <br />
+        </div>
+
+        <div className="tablet:col-span-2 laptop: flex-col text-left">
+          <h4>Follow me</h4>
+          <br />
+          <div className="flex flex-col md:flex-row flex-start gap-8 justify-center md:justify-start">
+            {/* External links can remain as <a> tags */}
+            <div className="flex items-center gap-3">
+              <BsTwitterX />
+              <a href="https://twitter.com/rNLKJA" alt="Twitter">
+                Twitter
+              </a>
+            </div>
+            <div className="flex items-center gap-3">
+              <FaInstagram />
+              <a
+                href="https://www.instagram.com/chuangyu_hscy/"
+                alt="Instagram"
+              >
+                Instagram
+              </a>
+            </div>
+            <div className="flex items-center gap-3">
+              <FaLinkedin />
+              <a
+                href="https://www.linkedin.com/in/sunchuangyuhuang/"
+                alt="LinkedIn"
+              >
+                LinkedIn
+              </a>
+            </div>
+            <div className="flex items-center gap-3">
+              <FiGithub />
+              <a href="https://github.com/rNLKJA" alt="GitHub">
+                GitHub
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr className="my-4" />
+
+      <div className="flex flex-col md:flex-row justify-between p-4">
+        <p>
+          © 2024 {/* Correct usage of Link component for internal navigation */}
+          <Link href="/">rNLKJA</Link>. All rights reserved.
+        </p>
+        <div className="flex space-x-4 justify-center mt-4 md:mt-0">
+          {/* Internal navigation should use Link component */}
+          <Link href="/privacy-policy">Privacy Policy</Link>
+          <Link href="/terms-of-service">Terms of Service</Link>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/layout copy/Header.jsx b/components/layout copy/Header.jsx
@@ -0,0 +1,90 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+
+const Header = () => {
+  const [isMobile, setIsMobile] = React.useState(undefined);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 1024);
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  if (isMobile === undefined) return null;
+
+  return <>{isMobile ? <MobileHeader /> : <DesktopHeader />}</>;
+};
+
+export default Header;
+
+export const DesktopHeader = () => {
+  return (
+    <div className="flex justify-between items-center py-10 px-4">
+      <Link href="/" className="flex flex-row items-center">
+        <Image src="/logo.svg" alt="Logo" width={80} height={80} />
+        <span className="ml-2 font-bold">rNLKJA</span>
+      </Link>
+
+      <nav className="hidden md:flex space-x-4">
+        <Link href="/about-me" className="px-2 mr-4">
+          About Me
+        </Link>
+        <Link href="/projects" className="px-2 mr-4">
+          Projects
+        </Link>
+        <Link href="/blogs" className="px-2 mr-4">
+          Blogs
+        </Link>
+        <Link href="/contact" className="px-2 mr-4">
+          Contact
+        </Link>
+      </nav>
+    </div>
+  );
+};
+
+export const MobileHeader = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="flex justify-between items-center p-4">
+      <Link href="/" className="flex flex-row items-center">
+        <Image src="/logo.svg" alt="Logo" width={80} height={80} />
+        <span className="ml-2 font-bold">rNLKJA</span>
+      </Link>
+
+      <button onClick={toggleDropdown} className="md:hidden px-2">
+        Menu
+      </button>
+      {isOpen && (
+        <div className="absolute top-16 right-0 bg-white shadow-md z-10">
+          <Link href="/about-me" className="block px-4 py-2">
+            About Me
+          </Link>
+          <Link href="/projects" className="block px-4 py-2">
+            Projects
+          </Link>
+          <Link href="/blogs" className="block px-4 py-2">
+            Blogs
+          </Link>
+          <Link href="/contact" className="block px-4 py-2">
+            Contact
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+};