archiwum/j4studio-web
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small fixes, changed font

Browse Source
This commit is contained in:
Adam Cała
2023-11-09 19:13:01 +01:00
parent 2b213c9ce1
commit d3ea56c8e9
7 changed files with 71 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/contact/page.tsx
View File

@@ -5,7 +5,6 @@ const page = () => {
return ( return (
<main className="w-100 m-0 h-screen"> <main className="w-100 m-0 h-screen">
<Stars /> <Stars />
<div className="fixed top-1/2"></div>
</main> </main>
); );
}; };

19
src/app/layout.tsx
View File

@@ -1,5 +1,7 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; 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 "./globals.css";
import Stars from "@/components/stars"; import Stars from "@/components/stars";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
@@ -8,6 +10,14 @@ import Loading from "./loading";
import Link from "next/link"; import Link from "next/link";
const inter = Inter({ subsets: ["latin"] }); 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 = { export const metadata: Metadata = {
title: "Create Next App", title: "Create Next App",
@@ -23,7 +33,14 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<Link href={"/"}> <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> </Link>
<Suspense fallback={<Loading />}>{children}</Suspense> <Suspense fallback={<Loading />}>{children}</Suspense>
<Footer /> <Footer />

12
src/app/page.tsx
View File

@@ -12,11 +12,11 @@ export default function Home() {
<main className="w-100 m-0 h-screen"> <main className="w-100 m-0 h-screen">
<Stars /> <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"}> <Link href={"/about"}>
<FramerTextAnimate <FramerTextAnimate
styles={ 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} duration={2}
delay={0.5} delay={0.5}
@@ -24,10 +24,10 @@ export default function Home() {
{about} {about}
</FramerTextAnimate> </FramerTextAnimate>
</Link> </Link>
<Link className="text-5xl hover:text-shadow" href={"/models"}> <Link className="" href={"/models"}>
<FramerTextAnimate <FramerTextAnimate
styles={ 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} duration={2}
delay={1} delay={1}
@@ -35,10 +35,10 @@ export default function Home() {
{models} {models}
</FramerTextAnimate> </FramerTextAnimate>
</Link> </Link>
<Link className="text-5xl hover:text-shadow" href={"/contact"}> <Link className="" href={"/contact"}>
<FramerTextAnimate <FramerTextAnimate
styles={ 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} duration={2}
delay={1.5} delay={1.5}

6
src/components/footer.tsx
View File

@@ -7,21 +7,21 @@ export default function Footer() {
return ( return (
<footer className="fixed z-50 bottom-0 flex row gap-3 m-5"> <footer className="fixed z-50 bottom-0 flex row gap-3 m-5">
<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" target="_blank"
href={"https://www.myminifactory.com/users/j4roid"} href={"https://www.myminifactory.com/users/j4roid"}
> >
<MyMiniFactory className="" /> <MyMiniFactory className="" />
</Link> </Link>
<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" target="_blank"
href={"https://cults3d.com/en/users/j4roid/3d-models"} href={"https://cults3d.com/en/users/j4roid/3d-models"}
> >
<Discord className="" /> <Discord className="" />
</Link> </Link>
<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" target="_blank"
href={"https://www.patreon.com/j4roid"} href={"https://www.patreon.com/j4roid"}
> >

33
src/components/framer/framerTextAnimate.tsx
View File

@@ -1,10 +1,10 @@
"use client"; "use client";
import { animate, motion, useMotionValue, useTransform } from "framer-motion"; import { animate, motion, useMotionValue, useTransform } from "framer-motion";
import { Special_Elite } from "next/font/google"; import { Courier_Prime } from "next/font/google";
import React, { useEffect } from "react"; 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 = { type props = {
children: string; children: string;
@@ -17,16 +17,29 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
const count = useMotionValue(0); const count = useMotionValue(0);
const baseText = children as string; const baseText = children as string;
const [durationInternal, setDurationInternal] = useState<number>(duration);
const rounded = useTransform(count, (latest) => Math.round(latest)); const rounded = useTransform(count, (latest) => Math.round(latest));
const displayText = useTransform(rounded, (latest) => const displayText = useTransform(rounded, (latest) =>
baseText.slice(0, 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(() => { useEffect(() => {
// Delay the animation start // Delay the animation start
const delayTimeout = setTimeout(() => { const delayTimeout = setTimeout(() => {
const controls = animate(count, baseText.length, { const controls = animate(count, baseText.length, {
duration: duration, duration: durationInternal,
ease: "easeInOut", ease: "easeInOut",
}); });
return () => controls.stop(); return () => controls.stop();
@@ -34,11 +47,19 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
// Clear the timeout on unmount to prevent memory leaks // Clear the timeout on unmount to prevent memory leaks
return () => clearTimeout(delayTimeout); return () => clearTimeout(delayTimeout);
}, []); }, [durationInternal]);
const handleUserInput = () => {
setDurationInternal(0);
console.log("test");
};
return ( return (
<> <>
<motion.span className={`${special_elite.className} ${styles}`}> <motion.span
onClick={handleUserInput}
className={`${special_elite.className} ${styles}`}
>
{displayText} {displayText}
</motion.span> </motion.span>
</> </>

2
src/components/stars.tsx
View File

@@ -35,7 +35,7 @@ export default function Stars(props: any) {
{meshArray.map((el) => { {meshArray.map((el) => {
return ( return (
<mesh position={[el.x, el.y, el.z]}> <mesh position={[el.x, el.y, el.z]}>
<sphereGeometry args={[0.2 * Math.random()]} /> <sphereGeometry args={[0.15 * Math.random()]} />
<meshPhysicalMaterial color="white" /> <meshPhysicalMaterial color="white" />
</mesh> </mesh>
); );

17
tailwind.config.js
View File

@@ -14,7 +14,22 @@ module.exports = {
extend: { extend: {
textShadow: { textShadow: {
DEFAULT: 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
},
}, },
}, },
}, },