Merge pull request #17 from gractwo/11-add-contact-section

small fixes, changed font
2023-11-09 19:14:53 +01:00
parent 2b213c9ce1 d3ea56c8e9
commit 6a3b01ef3e
7 changed files with 71 additions and 19 deletions
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,7 +5,6 @@ const page = () => {
  return (
    <main className="w-100 m-0 h-screen">
      <Stars />
-      <div className="fixed top-1/2"></div>
    </main>
  );
 };
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { Zilla_Slab_Highlight } from "next/font/google";
+import { Zen_Tokyo_Zoo } from "next/font/google";
 import "./globals.css";
 import Stars from "@/components/stars";
 import Footer from "@/components/footer";
@@ -8,6 +10,14 @@ import Loading from "./loading";
 import Link from "next/link";

 const inter = Inter({ subsets: ["latin"] });
+const zilla_slab_highlight = Zilla_Slab_Highlight({
+  weight: "700",
+  subsets: ["latin"],
+});
+const zen_tokyo_zoo = Zen_Tokyo_Zoo({
+  weight: "400",
+  subsets: ["latin"],
+});

 export const metadata: Metadata = {
  title: "Create Next App",
@@ -23,7 +33,14 @@ export default function RootLayout({
    <html lang="en">
      <body className={inter.className}>
        <Link href={"/"}>
-          <h1 className="fixed text-white top-0 z-50 m-5 text-5xl">J4roid</h1>
+          <div className="fixed text-white top-0 z-50 m-5 text-8xl flex flex-row gap-1">
+            <h1
+              className={`${zilla_slab_highlight.className} text-stachowiak-green-950`}
+            >
+              J4
+            </h1>
+            <h1 className={`${zen_tokyo_zoo.className} text-8xl`}>studio</h1>
+          </div>
        </Link>
        <Suspense fallback={<Loading />}>{children}</Suspense>
        <Footer />
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,11 +12,11 @@ export default function Home() {
    <main className="w-100 m-0 h-screen">
      <Stars />

-      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white">
+      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white text-7xl ">
        <Link href={"/about"}>
          <FramerTextAnimate
            styles={
-              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
            }
            duration={2}
            delay={0.5}
@@ -24,10 +24,10 @@ export default function Home() {
            {about}
          </FramerTextAnimate>
        </Link>
-        <Link className="text-5xl hover:text-shadow" href={"/models"}>
+        <Link className="" href={"/models"}>
          <FramerTextAnimate
            styles={
-              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
            }
            duration={2}
            delay={1}
@@ -35,10 +35,10 @@ export default function Home() {
            {models}
          </FramerTextAnimate>
        </Link>
-        <Link className="text-5xl hover:text-shadow" href={"/contact"}>
+        <Link className="" href={"/contact"}>
          <FramerTextAnimate
            styles={
-              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
            }
            duration={2}
            delay={1.5}
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -7,21 +7,21 @@ export default function Footer() {
  return (
    <footer className="fixed z-50 bottom-0 flex row gap-3 m-5">
      <Link
-        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-white hover:border-black"
+        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-stachowiak-green-950 hover:border-black transition ease-in-out duration-300"
        target="_blank"
        href={"https://www.myminifactory.com/users/j4roid"}
      >
        <MyMiniFactory className="" />
      </Link>
      <Link
-        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-white hover:border-black"
+        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-stachowiak-green-950 hover:border-black transition ease-in-out duration-300"
        target="_blank"
        href={"https://cults3d.com/en/users/j4roid/3d-models"}
      >
        <Discord className="" />
      </Link>
      <Link
-        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-white hover:border-black"
+        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-stachowiak-green-950 hover:border-black transition ease-in-out duration-300"
        target="_blank"
        href={"https://www.patreon.com/j4roid"}
      >
--- a/src/components/framer/framerTextAnimate.tsx
+++ b/src/components/framer/framerTextAnimate.tsx
@@ -1,10 +1,10 @@
 "use client";

 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
-import { Special_Elite } from "next/font/google";
-import React, { useEffect } from "react";
+import { Courier_Prime } from "next/font/google";
+import React, { useEffect, useState } from "react";

-const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
+const special_elite = Courier_Prime({ weight: "400", subsets: ["latin"] });

 type props = {
  children: string;
@@ -17,16 +17,29 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
  const count = useMotionValue(0);
  const baseText = children as string;

+  const [durationInternal, setDurationInternal] = useState<number>(duration);
+
  const rounded = useTransform(count, (latest) => Math.round(latest));
  const displayText = useTransform(rounded, (latest) =>
    baseText.slice(0, latest)
  );

+  //   Skip the animation on mouse press
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      setDurationInternal(0.5);
+    };
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+
  useEffect(() => {
    // Delay the animation start
    const delayTimeout = setTimeout(() => {
      const controls = animate(count, baseText.length, {
-        duration: duration,
+        duration: durationInternal,
        ease: "easeInOut",
      });
      return () => controls.stop();
@@ -34,11 +47,19 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {

    // Clear the timeout on unmount to prevent memory leaks
    return () => clearTimeout(delayTimeout);
-  }, []);
+  }, [durationInternal]);
+
+  const handleUserInput = () => {
+    setDurationInternal(0);
+    console.log("test");
+  };

  return (
    <>
-      <motion.span className={`${special_elite.className} ${styles}`}>
+      <motion.span
+        onClick={handleUserInput}
+        className={`${special_elite.className} ${styles}`}
+      >
        {displayText}
      </motion.span>
    </>
--- a/src/components/stars.tsx
+++ b/src/components/stars.tsx
@@ -35,7 +35,7 @@ export default function Stars(props: any) {
        {meshArray.map((el) => {
          return (
            <mesh position={[el.x, el.y, el.z]}>
-              <sphereGeometry args={[0.2 * Math.random()]} />
+              <sphereGeometry args={[0.15 * Math.random()]} />
              <meshPhysicalMaterial color="white" />
            </mesh>
          );
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,22 @@ module.exports = {
    extend: {
      textShadow: {
        DEFAULT:
-          "0 0 10px #fff, 0 0 20px #fff, 0 0 30px #23d400, 0 0 40px #00a30e, 0 0 50px #0a7c00, 0 0 60px #0b5e00, 0 0 70px #00440b",
+          "0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00440b, 0 0 40px #00440b, 0 0 50px #0a7c00, 0 0 60px #00440b, 0 0 70px #00440b",
+      },
+      colors: {
+        "stachowiak-green": {
+          50: "#eeffef",
+          100: "#d8ffdc",
+          200: "#b4febb",
+          300: "#79fc87",
+          400: "#38f04c",
+          500: "#0ed926",
+          600: "#05b419",
+          700: "#088d18",
+          800: "#0c6f19",
+          900: "#0c5b17",
+          950: "#00440b", //stachowiak-green
+        },
      },
    },
  },