From 90924779cfa585e22f4b22eeb0a598999fd249b5 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 10:59:30 +0800 Subject: [PATCH 01/34] wavy scroll component --- components/providers/Wavy-Scroll-Provider.tsx | 87 +++++++++++++++++++ package.json | 1 + yarn.lock | 39 +++++++++ 3 files changed, 127 insertions(+) create mode 100644 components/providers/Wavy-Scroll-Provider.tsx diff --git a/components/providers/Wavy-Scroll-Provider.tsx b/components/providers/Wavy-Scroll-Provider.tsx new file mode 100644 index 0000000..eca9045 --- /dev/null +++ b/components/providers/Wavy-Scroll-Provider.tsx @@ -0,0 +1,87 @@ +"use client"; + +import * as React from "react"; +import { useScroll, animated } from "@react-spring/web"; + +const X_LINES = 40; +const PAGE_COUNT = 5; +const INITIAL_WIDTH_VW = 5; // Set initial width as a percentage of viewport width + +const WavyScrollProvider: React.FC<{ children: React.ReactNode }> = ({ + children, +}) => { + const containerRef = React.useRef(null!); + + const { scrollYProgress } = useScroll({ + container: containerRef, + default: { + immediate: true, + }, + }); + + return ( +
+
+
+ {Array.from({ length: X_LINES }).map((_, i) => ( + { + const percentilePosition = + (i + 1) / X_LINES; + return `${ + INITIAL_WIDTH_VW / 4 + + 10 * + Math.cos( + ((percentilePosition - + scrollP) * + Math.PI) / + 1.5 + ) ** + 32 + }vw`; + }), + }} + /> + ))} +
+
+ {Array.from({ length: X_LINES }).map((_, i) => ( + { + const percentilePosition = + 1 - (i + 1) / X_LINES; + return `${ + INITIAL_WIDTH_VW / 4 + + 10 * + Math.cos( + ((percentilePosition - + scrollP) * + Math.PI) / + 1.5 + ) ** + 32 + }vw`; + }), + }} + /> + ))} +
+
+ {children} + {Array.from({ length: PAGE_COUNT }, (_, index) => ( +
+ ))} +
+ ); +}; + +export default WavyScrollProvider; diff --git a/package.json b/package.json index 57d1876..87000f8 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-tabs": "^1.0.4", "@react-email/components": "^0.0.7", "@react-email/render": "^0.0.7", + "@react-spring/web": "^9.7.3", "@tanstack/react-query": "^4.35.3", "@xata.io/client": "^0.26.7", "ace-builds": "^1.30.0", diff --git a/yarn.lock b/yarn.lock index e52295e..8ff3338 100644 --- a/yarn.lock +++ b/yarn.lock @@ -846,6 +846,45 @@ dependencies: react "18.2.0" +"@react-spring/animated@~9.7.3": + version "9.7.3" + resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f" + integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw== + dependencies: + "@react-spring/shared" "~9.7.3" + "@react-spring/types" "~9.7.3" + +"@react-spring/core@~9.7.3": + version "9.7.3" + resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095" + integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ== + dependencies: + "@react-spring/animated" "~9.7.3" + "@react-spring/shared" "~9.7.3" + "@react-spring/types" "~9.7.3" + +"@react-spring/shared@~9.7.3": + version "9.7.3" + resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53" + integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA== + dependencies: + "@react-spring/types" "~9.7.3" + +"@react-spring/types@~9.7.3": + version "9.7.3" + resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b" + integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw== + +"@react-spring/web@^9.7.3": + version "9.7.3" + resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d" + integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg== + dependencies: + "@react-spring/animated" "~9.7.3" + "@react-spring/core" "~9.7.3" + "@react-spring/shared" "~9.7.3" + "@react-spring/types" "~9.7.3" + "@rushstack/eslint-patch@^1.1.3": version "1.5.1" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922" From 0257d91bbc9716b26f9dfaed2aadf4491f5a54be Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 10:59:51 +0800 Subject: [PATCH 02/34] trying to use wavy scroll --- app/layout.tsx | 4 ++-- app/page.tsx | 45 ++++++++++++++++++++++++++++----------------- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 6186aaa..afd66cc 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,8 @@ import "./globals.css"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; -import { ThemeProvider } from "@/components/providers/theme-provider"; -import { ToasterProvider } from "@/components/providers/toast-provider"; +import { ThemeProvider } from "@/components/providers/ThemeProvider"; +import { ToasterProvider } from "@/components/providers/ToastProvider"; import TanStackProvider from "@/components/providers/TanstackProvider"; const inter = Inter({ subsets: ["latin"] }); diff --git a/app/page.tsx b/app/page.tsx index 24c1a14..3a0c466 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,6 +7,29 @@ import AboutTailspin from "@/components/landing/about-tailspin"; import FAQ from "@/components/landing/faq"; import Timeline from "@/components/landing/timeline"; import ThanksPage from "@/components/landing/thanks"; +// import WavyScrollProvider from "@/components/providers/Wavy-Scroll-Provider"; + +const ComponentsWithScroll: React.FC = () => { + return ( + <> +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + ); +}; export default function Home() { return ( @@ -23,26 +46,14 @@ export default function Home() {
+
-
- -
-
-
- -
-
-
- -
-
- -
-
- -
+ + {/* */} + + {/* */} ); } From 0e85e7f6667ddcc43f894758ca3da65f07b7e5c1 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 11:00:00 +0800 Subject: [PATCH 03/34] facelift --- components/landing/hero.tsx | 50 ++++++++++++++++++++----------------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/components/landing/hero.tsx b/components/landing/hero.tsx index 995b763..0b0b070 100644 --- a/components/landing/hero.tsx +++ b/components/landing/hero.tsx @@ -1,34 +1,38 @@ import { ArrowHead } from "@/components/ui/arrow"; -import { cn } from "@/lib/utils"; -import { Montserrat } from "next/font/google"; import { HeroSubText } from "@/components/ui/typewriter-effect"; -import { TailspinLogo } from "@/components/ui/spinning-logo"; import HeroPageToast from "./hero-page-toast"; - -const font = Montserrat({ weight: "700", subsets: ["latin"] }); +import { Button } from "../ui/button"; +import Link from "next/link"; export const Hero = () => { return (
-

-
- - Tailspin +
+

Competitive TailwindCSS Developer centric

+
+
-

-
-
- + Show off your Tailwind skills and build community. +
+
+ + + +
+
+ Forever free. Not affiliated with{" "} + + The Tailwind Org + +
+ @@ -50,7 +54,7 @@ export const Hero = () => { strokeWidth='4' /> - + ); From 86e854f4f6498180446a83d7e7c49df282c08ab2 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 11:00:11 +0800 Subject: [PATCH 04/34] rename provider files --- components/providers/{theme-provider.tsx => ThemeProvider.tsx} | 0 components/providers/{toast-provider.tsx => ToastProvider.tsx} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename components/providers/{theme-provider.tsx => ThemeProvider.tsx} (100%) rename components/providers/{toast-provider.tsx => ToastProvider.tsx} (100%) diff --git a/components/providers/theme-provider.tsx b/components/providers/ThemeProvider.tsx similarity index 100% rename from components/providers/theme-provider.tsx rename to components/providers/ThemeProvider.tsx diff --git a/components/providers/toast-provider.tsx b/components/providers/ToastProvider.tsx similarity index 100% rename from components/providers/toast-provider.tsx rename to components/providers/ToastProvider.tsx From ed63b0c5892e01355f316dd2d7e8361be15a2e33 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 11:00:20 +0800 Subject: [PATCH 05/34] facelift --- components/ui/typewriter-effect.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/ui/typewriter-effect.tsx b/components/ui/typewriter-effect.tsx index 38b107d..39f29e5 100644 --- a/components/ui/typewriter-effect.tsx +++ b/components/ui/typewriter-effect.tsx @@ -6,7 +6,12 @@ export const HeroSubText = () => { return ( Date: Sun, 5 Nov 2023 18:10:46 +0800 Subject: [PATCH 06/34] merge conflict fix --- app/page.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/page.tsx b/app/page.tsx index d1c3487..d6b2f55 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,7 +2,7 @@ import ScrollToTop from "@/components/ui/back-to-top"; import { Hero } from "@/components/landing/hero"; import { TabSection } from "@/components/landing/tabs"; import { Navigation } from "@/components/landing/navigation"; -import SiteCounter from "@/components/landing/site-counter"; +import SiteCounter from "@/components/landing/stats"; import AboutTailspin from "@/components/landing/about-tailspin"; import FAQ from "@/components/landing/faq"; import Timeline from "@/components/landing/timeline"; @@ -28,6 +28,9 @@ const ComponentsWithScroll: React.FC = () => {
+
+ +
); }; From f794062106941b90da321261e33b83ec02ab9e60 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 18:11:01 +0800 Subject: [PATCH 07/34] rename file --- components/landing/site-counter.tsx | 15 --------------- components/landing/stats.tsx | 20 ++++++++++++++++++++ 2 files changed, 20 insertions(+), 15 deletions(-) delete mode 100644 components/landing/site-counter.tsx create mode 100644 components/landing/stats.tsx diff --git a/components/landing/site-counter.tsx b/components/landing/site-counter.tsx deleted file mode 100644 index babda27..0000000 --- a/components/landing/site-counter.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { CodeSubmitCountBox } from "../ui/statistics/code-submit-count-box"; -import { SiteRatingStatBox } from "../ui/statistics/site-rating"; -import { SiteVisitCountBox } from "../ui/statistics/site-visit-count-box"; - -const SiteCounter = async () => { - return ( -
- - - -
- ); -}; - -export default SiteCounter; diff --git a/components/landing/stats.tsx b/components/landing/stats.tsx new file mode 100644 index 0000000..2ae9263 --- /dev/null +++ b/components/landing/stats.tsx @@ -0,0 +1,20 @@ +import { CodeSubmitCountBox } from "../ui/statistics/code-submit-count-box"; +import { SiteRatingStatBox } from "../ui/statistics/site-rating"; +import { SiteVisitCountBox } from "../ui/statistics/site-visit-count-box"; + +const SiteCounter = async () => { + return ( +
+

+ Some Statistics +

+
+ + + +
+
+ ); +}; + +export default SiteCounter; From 2dba340bcbb1c71b7974c05a93aa8b4688c702cb Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 18:11:16 +0800 Subject: [PATCH 08/34] rename Box component --- components/ui/stat-box.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/components/ui/stat-box.tsx b/components/ui/stat-box.tsx index a65be5d..187ebe8 100644 --- a/components/ui/stat-box.tsx +++ b/components/ui/stat-box.tsx @@ -1,8 +1,15 @@ -export const Box = (props: any) => { +interface StatBoxProps { + icon: React.ReactNode; + content: string; +} + +const StatBox: React.FC = ({ icon, content }) => { return ( -
- {" "} - {props.children}{" "} +
+ {icon} + {content}
); }; + +export default StatBox; From 2c50f2cf884388d4e3275f0e1bd727c1985c3f32 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 18:11:46 +0800 Subject: [PATCH 09/34] add hovering animation --- components/landing/about-tailspin.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/landing/about-tailspin.tsx b/components/landing/about-tailspin.tsx index 3292ee8..83179f0 100644 --- a/components/landing/about-tailspin.tsx +++ b/components/landing/about-tailspin.tsx @@ -14,7 +14,7 @@ const AboutTailSpinBoxes: React.FC = ({ footer, }) => { return ( -
+

{title} From 11e61716f3b78dd886f56b7e40b336fd5d99b19f Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 5 Nov 2023 18:11:58 +0800 Subject: [PATCH 10/34] utilize the new StatBox component --- .../ui/statistics/code-submit-count-box.tsx | 10 ++++-- components/ui/statistics/site-rating.tsx | 31 +++++++------------ .../ui/statistics/site-visit-count-box.tsx | 10 ++++-- 3 files changed, 27 insertions(+), 24 deletions(-) diff --git a/components/ui/statistics/code-submit-count-box.tsx b/components/ui/statistics/code-submit-count-box.tsx index 127dacc..889bcf8 100644 --- a/components/ui/statistics/code-submit-count-box.tsx +++ b/components/ui/statistics/code-submit-count-box.tsx @@ -1,9 +1,15 @@ "use client"; import { getCodeSubmitCount } from "@/client-side-queries/rq-queries/code-submit"; -import { Box } from "../stat-box"; +import StatBox from "../stat-box"; +import { CheckCheckIcon } from "lucide-react"; export const CodeSubmitCountBox = (props: any) => { const value = getCodeSubmitCount(); - return How many people have submitted their code : {value}; + return ( + } + content={`How many people have submitted their code : ${value}`} + /> + ); }; diff --git a/components/ui/statistics/site-rating.tsx b/components/ui/statistics/site-rating.tsx index 640d33c..3de9aa4 100644 --- a/components/ui/statistics/site-rating.tsx +++ b/components/ui/statistics/site-rating.tsx @@ -1,9 +1,10 @@ "use client"; import React from "react"; -import { Box } from "../stat-box"; import { useGetRating } from "@/client-side-queries/rq-queries/rating-submit"; import { Skeleton } from "@/components/ui/skeleton"; +import StatBox from "../stat-box"; +import { Star } from "lucide-react"; function SkeletonDemo() { return ( @@ -25,25 +26,15 @@ export const SiteRatingStatBox = (props: any) => { value.map( (val: { field_name: string; field_value: string }) => ( - -
-

- {val.field_name} :{" "} - {( - Number( - val.field_value.split("-")[0] - ) / - Number( - val.field_value.split("-")[1] - ) - ).toFixed(2)}{" "} - stars. -

-

- {val.field_value.split("-")[1]} ratings. -

-
- + } + content={`${val.field_name}:${( + Number(val.field_value.split("-")[0]) / + Number(val.field_value.split("-")[1]) + ).toFixed(2)} with ${ + val.field_value.split("-")[1] + } ratings`} + /> ) ) diff --git a/components/ui/statistics/site-visit-count-box.tsx b/components/ui/statistics/site-visit-count-box.tsx index ed9e0fe..ae30c9b 100644 --- a/components/ui/statistics/site-visit-count-box.tsx +++ b/components/ui/statistics/site-visit-count-box.tsx @@ -1,11 +1,17 @@ -import { Box } from "../stat-box"; import { directDB_getSiteCount, directDB_incrementSiteCount, } from "@/client-side-queries/direct-db-query/landing-page-queries"; +import StatBox from "../stat-box"; +import { User } from "lucide-react"; export const SiteVisitCountBox = async (props: any) => { const siteCountValue = await directDB_getSiteCount(); await directDB_incrementSiteCount(siteCountValue[1]!, siteCountValue[0]!); - return Site Visitors: {siteCountValue[0]}; + return ( + } + content={`Site Visitors: ${siteCountValue[0]}`} + /> + ); }; From 57bf0412617dcbfe58fe3eb6ce70665500dda10e Mon Sep 17 00:00:00 2001 From: Zac Date: Fri, 10 Nov 2023 19:44:57 +0800 Subject: [PATCH 11/34] add framer motion to about section --- components/landing/about-tailspin.tsx | 31 ++++++++++++++++++++++++--- package.json | 1 + yarn.lock | 21 ++++++++++++++++++ 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/components/landing/about-tailspin.tsx b/components/landing/about-tailspin.tsx index 8433b7f..07d11de 100644 --- a/components/landing/about-tailspin.tsx +++ b/components/landing/about-tailspin.tsx @@ -1,6 +1,10 @@ +"use client"; + import Link from "next/link"; import { Button } from "@/components/ui/button"; import { BarChartBig } from "lucide-react"; +import { motion, useInView } from "framer-motion"; +import { useRef } from "react"; type AboutTailSpinBoxesProps = { title: string; @@ -8,13 +12,34 @@ type AboutTailSpinBoxesProps = { footer?: React.ReactNode; }; +const variants = { + visible: { + rotateY: 0, + opacity: 1, + transition: { duration: 0.5, ease: "easeOut" }, + }, + hidden: { + rotateY: 90, + opacity: 0, + transition: { duration: 0.5, ease: "easeIn" }, + }, +}; + const AboutTailSpinBoxes: React.FC = ({ title, paragraphComponent, footer, }) => { + const ref = useRef(null); + const isInView = useInView(ref); return ( -
+

{title} @@ -26,14 +51,14 @@ const AboutTailSpinBoxes: React.FC = ({ {footer} )} -

+ ); }; const AboutTailspin = () => { return (
diff --git a/package.json b/package.json index a4f0fdb..846f398 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "axios": "^1.5.1", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", + "framer-motion": "^10.16.4", "js-beautify": "^1.14.9", "lucide-react": "^0.279.0", "next": "13.4.19", diff --git a/yarn.lock b/yarn.lock index a845f74..1ec79f5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -26,11 +26,23 @@ dependencies: "@emotion/memoize" "0.7.1" +"@emotion/is-prop-valid@^0.8.2": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + "@emotion/memoize@0.7.1": version "0.7.1" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" @@ -2217,6 +2229,15 @@ fraction.js@^4.2.0: resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7" integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew== +framer-motion@^10.16.4: + version "10.16.4" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8" + integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA== + dependencies: + tslib "^2.4.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" From c2d54dc6518ada943b71c1ebd278bd9773997cd7 Mon Sep 17 00:00:00 2001 From: Zac Date: Fri, 10 Nov 2023 19:45:03 +0800 Subject: [PATCH 12/34] adjust typewriter speed --- components/ui/typewriter-effect.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/ui/typewriter-effect.tsx b/components/ui/typewriter-effect.tsx index 39f29e5..0db09b2 100644 --- a/components/ui/typewriter-effect.tsx +++ b/components/ui/typewriter-effect.tsx @@ -14,6 +14,8 @@ export const HeroSubText = () => { ], autoStart: true, loop: true, + delay: 50, + deleteSpeed: 50, }} /> ); From b975ea4931a0ba6e3b4479fd9f2d0dc9597dd4a6 Mon Sep 17 00:00:00 2001 From: Zac Date: Fri, 10 Nov 2023 19:52:28 +0800 Subject: [PATCH 13/34] change page height --- app/page.tsx | 2 +- components/core/rating-area/rating-component.tsx | 2 +- components/landing/faq.tsx | 2 +- components/landing/stats.tsx | 2 +- components/landing/thanks.tsx | 2 +- components/landing/timeline.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index a40bf77..5762048 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -15,7 +15,7 @@ const ComponentsWithScroll: React.FC = () => { <>
diff --git a/components/core/rating-area/rating-component.tsx b/components/core/rating-area/rating-component.tsx index c33c23f..241c544 100644 --- a/components/core/rating-area/rating-component.tsx +++ b/components/core/rating-area/rating-component.tsx @@ -27,7 +27,7 @@ For example: */ const RatingBody = () => { return ( -
+
Rate Tailspin diff --git a/components/landing/faq.tsx b/components/landing/faq.tsx index 033bf61..cb70c51 100644 --- a/components/landing/faq.tsx +++ b/components/landing/faq.tsx @@ -11,7 +11,7 @@ import Link from "next/link"; const FAQ = () => { return (
FAQ diff --git a/components/landing/stats.tsx b/components/landing/stats.tsx index 2ae9263..ff4eb9a 100644 --- a/components/landing/stats.tsx +++ b/components/landing/stats.tsx @@ -4,7 +4,7 @@ import { SiteVisitCountBox } from "../ui/statistics/site-visit-count-box"; const SiteCounter = async () => { return ( -
+

Some Statistics

diff --git a/components/landing/thanks.tsx b/components/landing/thanks.tsx index 37a94a7..2fa1d26 100644 --- a/components/landing/thanks.tsx +++ b/components/landing/thanks.tsx @@ -70,7 +70,7 @@ const ThanksPage = async () => { ["https://tanstack.com/favicon.ico", "ReactQuery"], ]); return ( -
+
diff --git a/components/landing/timeline.tsx b/components/landing/timeline.tsx index 2e198c8..e53f581 100644 --- a/components/landing/timeline.tsx +++ b/components/landing/timeline.tsx @@ -16,7 +16,7 @@ const TimelineSVGIcon = () => { const Timeline = () => { return ( -
+

Timeline

  1. From 9841e2fb777c9da05e0b2af9d57d311814a58deb Mon Sep 17 00:00:00 2001 From: Zac Date: Fri, 10 Nov 2023 20:08:58 +0800 Subject: [PATCH 14/34] add more styles and anti small screen overlay --- app/page.tsx | 15 ++++++++++++++- components/ui/useCode/StepperCard.tsx | 5 ++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 5762048..c141de4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -15,8 +15,21 @@ const ComponentsWithScroll: React.FC = () => { <>
    +
    +
    +
    +

    + It looks like you"re on a small screen +

    +

    + We hate to be non-inclusive towards phones and + tablets, however we want to provide you with the + best experience possible! +

    +
    +
    diff --git a/components/ui/useCode/StepperCard.tsx b/components/ui/useCode/StepperCard.tsx index d9358cc..21086ea 100644 --- a/components/ui/useCode/StepperCard.tsx +++ b/components/ui/useCode/StepperCard.tsx @@ -11,8 +11,8 @@ import { StepperForm } from "./Stepper-Form"; export function StepperCard() { return ( - - + + Try One Of Our Coding Challenges!!! @@ -24,7 +24,6 @@ export function StepperCard() { - From dfd8bf71c781955ba5942715f623def4934e995b Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 07:56:59 +0800 Subject: [PATCH 15/34] put timeline and stats on same page --- app/page.tsx | 7 ++- components/landing/stats.tsx | 2 +- components/landing/timeline.tsx | 101 ++++++++++++++++---------------- 3 files changed, 57 insertions(+), 53 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index c141de4..c12a244 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -32,15 +32,16 @@ const ComponentsWithScroll: React.FC = () => {
-
+
+
-
+ {/*
-
+
*/}
diff --git a/components/landing/stats.tsx b/components/landing/stats.tsx index ff4eb9a..0514e71 100644 --- a/components/landing/stats.tsx +++ b/components/landing/stats.tsx @@ -8,7 +8,7 @@ const SiteCounter = async () => {

Some Statistics

-
+
diff --git a/components/landing/timeline.tsx b/components/landing/timeline.tsx index e53f581..1ef9ec1 100644 --- a/components/landing/timeline.tsx +++ b/components/landing/timeline.tsx @@ -18,55 +18,58 @@ const Timeline = () => { return (

Timeline

-
    -
  1. - -

    - V0 - - Current - -

    - -

    - Building out this landing page. Polishing the - interactive playground. Adding nice UI/UX. -

    -
    2. -
  2. - -

    - V1.0 -

    - -

    - Innovate and make incremental improvements to the core - business of Tailspin - the coding page. Iteratively add, - optimize, and beautify features to the coding page. -

    -
    3. -
  3. - -

    - V1.1 -

    - -

    - Implement user profiles to keep track of their progress. - Provide intelligent dashboards to help users analyze - their performance in an empirical and systematic manner. - Provide a fully customizable public profile page that - optimizes showing off user's achievements and - accomplishments. -

    -
    4. -
+
+
    +
  1. + +

    + V0 + + Current + +

    + +

    + Building out this landing page. Polishing the + interactive playground. Adding nice UI/UX. +

    +
    2. +
  2. + +

    + V1.0 +

    + +

    + Innovate and make incremental improvements to the + core business of Tailspin - the coding page. + Iteratively add, optimize, and beautify features to + the coding page. +

    +
    3. +
  3. + +

    + V1.1 +

    + +

    + Implement user profiles to keep track of their + progress. Provide intelligent dashboards to help + users analyze their performance in an empirical and + systematic manner. Provide a fully customizable + public profile page that optimizes showing off + user's achievements and accomplishments. +

    +
    4. +
+
); }; From 7e6ca34e1058c741683904230de00c5c90be7ae6 Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 08:00:23 +0800 Subject: [PATCH 16/34] let small screens get margin too --- components/core/rating-area/rating-component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/core/rating-area/rating-component.tsx b/components/core/rating-area/rating-component.tsx index 241c544..83e323d 100644 --- a/components/core/rating-area/rating-component.tsx +++ b/components/core/rating-area/rating-component.tsx @@ -27,7 +27,7 @@ For example: */ const RatingBody = () => { return ( -
+
Rate Tailspin From 362b8349d7d8fba8e7e1ceb2e511aadfbf4ae533 Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 08:41:46 +0800 Subject: [PATCH 17/34] reworked navigation --- components/landing/navigation.tsx | 133 +++++++++++++++++++++++------- components/ui/navigation-menu.tsx | 128 ++++++++++++++++++++++++++++ package.json | 1 + yarn.lock | 21 +++++ 4 files changed, 252 insertions(+), 31 deletions(-) create mode 100644 components/ui/navigation-menu.tsx diff --git a/components/landing/navigation.tsx b/components/landing/navigation.tsx index 9ab4384..00ea123 100644 --- a/components/landing/navigation.tsx +++ b/components/landing/navigation.tsx @@ -1,39 +1,110 @@ -import { Button } from "@/components/ui/button"; +"use client"; + import Link from "next/link"; import { TailspinLogo } from "../ui/spinning-logo"; +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, + navigationMenuTriggerStyle, +} from "@/components/ui/navigation-menu"; +import { cn } from "@/lib/utils"; -// TODO: Add better responsiveness and mobile design, refactor Button into the button component +interface ListItemProps { + className?: string; + title: string; + children: React.ReactNode; + href: string; +} -export const Navigation = () => { +const ListItem: React.FC = ({ + className, + title, + children, + href, +}) => { return ( - +
+ {title} +
+

+ {children} +

+ + + + ); +}; + +export const Navigation = () => { + return ( +
+ + + + + + Getting started + + + + + + + + + Let's write some code! + + + + + +
); }; diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx new file mode 100644 index 0000000..1419f56 --- /dev/null +++ b/components/ui/navigation-menu.tsx @@ -0,0 +1,128 @@ +import * as React from "react" +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" +import { cva } from "class-variance-authority" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const NavigationMenu = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + +)) +NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName + +const NavigationMenuList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName + +const NavigationMenuItem = NavigationMenuPrimitive.Item + +const navigationMenuTriggerStyle = cva( + "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" +) + +const NavigationMenuTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children}{" "} + +)) +NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName + +const NavigationMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName + +const NavigationMenuLink = NavigationMenuPrimitive.Link + +const NavigationMenuViewport = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( +
+ +
+)) +NavigationMenuViewport.displayName = + NavigationMenuPrimitive.Viewport.displayName + +const NavigationMenuIndicator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +
+ +)) +NavigationMenuIndicator.displayName = + NavigationMenuPrimitive.Indicator.displayName + +export { + navigationMenuTriggerStyle, + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, +} diff --git a/package.json b/package.json index 846f398..877a14b 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-navigation-menu": "^1.1.4", "@radix-ui/react-progress": "^1.0.3", "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 1ec79f5..f72d814 100644 --- a/yarn.lock +++ b/yarn.lock @@ -489,6 +489,27 @@ aria-hidden "^1.1.1" react-remove-scroll "2.5.5" +"@radix-ui/react-navigation-menu@^1.1.4": + version "1.1.4" + resolved "https://registry.yarnpkg.com/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.1.4.tgz#654151310c3f9a29afd19fb60ddc7977e54b8a3d" + integrity sha512-Cc+seCS3PmWmjI51ufGG7zp1cAAIRqHVw7C9LOA2TZ+R4hG6rDvHcTqIsEEFLmZO3zNVH72jOOE7kKNy8W+RtA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.1" + "@radix-ui/react-collection" "1.0.3" + "@radix-ui/react-compose-refs" "1.0.1" + "@radix-ui/react-context" "1.0.1" + "@radix-ui/react-direction" "1.0.1" + "@radix-ui/react-dismissable-layer" "1.0.5" + "@radix-ui/react-id" "1.0.1" + "@radix-ui/react-presence" "1.0.1" + "@radix-ui/react-primitive" "1.0.3" + "@radix-ui/react-use-callback-ref" "1.0.1" + "@radix-ui/react-use-controllable-state" "1.0.1" + "@radix-ui/react-use-layout-effect" "1.0.1" + "@radix-ui/react-use-previous" "1.0.1" + "@radix-ui/react-visually-hidden" "1.0.3" + "@radix-ui/react-popper@1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42" From 89aa116e8f20592704c9bcb916bd10a58987bf46 Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 17:36:49 +0800 Subject: [PATCH 18/34] change navigation to stepper --- components/landing/hero.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/landing/hero.tsx b/components/landing/hero.tsx index 0b0b070..e0b28ac 100644 --- a/components/landing/hero.tsx +++ b/components/landing/hero.tsx @@ -17,8 +17,8 @@ export const Hero = () => { Show off your Tailwind skills and build community.
- - @@ -33,8 +33,8 @@ export const Hero = () => {
Date: Sat, 11 Nov 2023 17:37:02 +0800 Subject: [PATCH 19/34] support nav bar on small screens --- components/landing/navigation.tsx | 125 +++++++++++++++++------------- 1 file changed, 71 insertions(+), 54 deletions(-) diff --git a/components/landing/navigation.tsx b/components/landing/navigation.tsx index 00ea123..19c6a04 100644 --- a/components/landing/navigation.tsx +++ b/components/landing/navigation.tsx @@ -12,6 +12,9 @@ import { navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu"; import { cn } from "@/lib/utils"; +import { Button } from "../ui/button"; +import { useState } from "react"; +import { Menu } from "lucide-react"; interface ListItemProps { className?: string; @@ -49,62 +52,76 @@ const ListItem: React.FC = ({ }; export const Navigation = () => { + const [isMenuOpen, setIsMenuOpen] = useState(false); return (
- - - - - - Getting started - - - - - - - - - Let's write some code! - - - - - + +
+ + + + + + Getting started + + +
    +
  • + + + +
    + Tailspin +
    +

    + Competitive TailwindCSS + built for the community by + the community. +

    + +     +
    • + + See what Tailspin is all about. + + + Try out Tailspin. Just follow the steps + and happy coding! + + + Need a little help? We got you. + +
+ + + + + + Let's write some code! + + + + + +
); }; From 1e69d388d0028a0a27fd11a210fd7ece09ab3f5e Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 17:37:42 +0800 Subject: [PATCH 20/34] empty file --- components/landing/feedback/feedback-card.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 components/landing/feedback/feedback-card.tsx diff --git a/components/landing/feedback/feedback-card.tsx b/components/landing/feedback/feedback-card.tsx deleted file mode 100644 index e69de29..0000000 From d2f6d0fb443c75b4dc26fd6f0db6ab425a5a6eff Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 17:41:11 +0800 Subject: [PATCH 21/34] mobile friendly features --- components/core/rating-area/rating-component.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/core/rating-area/rating-component.tsx b/components/core/rating-area/rating-component.tsx index 83e323d..9ef1a98 100644 --- a/components/core/rating-area/rating-component.tsx +++ b/components/core/rating-area/rating-component.tsx @@ -27,8 +27,8 @@ For example: */ const RatingBody = () => { return ( -
- +
+ Rate Tailspin From 283a3d8baea400ab858b3f975875979b439980c5 Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 17:44:37 +0800 Subject: [PATCH 22/34] linting --- components/landing/navigation.tsx | 2 +- components/ui/navigation-menu.tsx | 202 ++++++++++++------------ components/ui/useCode/TOS-FormField.tsx | 4 +- 3 files changed, 105 insertions(+), 103 deletions(-) diff --git a/components/landing/navigation.tsx b/components/landing/navigation.tsx index 19c6a04..524ed49 100644 --- a/components/landing/navigation.tsx +++ b/components/landing/navigation.tsx @@ -115,7 +115,7 @@ export const Navigation = () => { "bg-transparent font-bold text-muted-foreground" )} > - Let's write some code! + Let's write some code! diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx index 1419f56..afcc17a 100644 --- a/components/ui/navigation-menu.tsx +++ b/components/ui/navigation-menu.tsx @@ -1,128 +1,128 @@ -import * as React from "react" -import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" -import { cva } from "class-variance-authority" -import { ChevronDown } from "lucide-react" +import * as React from "react"; +import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; +import { cva } from "class-variance-authority"; +import { ChevronDown } from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const NavigationMenu = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( - - {children} - - -)) -NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName + + {children} + + +)); +NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName; const NavigationMenuList = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -)) -NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName + +)); +NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName; -const NavigationMenuItem = NavigationMenuPrimitive.Item +const NavigationMenuItem = NavigationMenuPrimitive.Item; const navigationMenuTriggerStyle = cva( - "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" -) + "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50" +); const NavigationMenuTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( - - {children}{" "} - -)) -NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName + + {children}{" "} + +)); +NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName; const NavigationMenuContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -)) -NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName + +)); +NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName; -const NavigationMenuLink = NavigationMenuPrimitive.Link +const NavigationMenuLink = NavigationMenuPrimitive.Link; const NavigationMenuViewport = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( -
- -
-)) +
+ +
+)); NavigationMenuViewport.displayName = - NavigationMenuPrimitive.Viewport.displayName + NavigationMenuPrimitive.Viewport.displayName; const NavigationMenuIndicator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -
- -)) + +
+ +)); NavigationMenuIndicator.displayName = - NavigationMenuPrimitive.Indicator.displayName + NavigationMenuPrimitive.Indicator.displayName; export { - navigationMenuTriggerStyle, - NavigationMenu, - NavigationMenuList, - NavigationMenuItem, - NavigationMenuContent, - NavigationMenuTrigger, - NavigationMenuLink, - NavigationMenuIndicator, - NavigationMenuViewport, -} + navigationMenuTriggerStyle, + NavigationMenu, + NavigationMenuList, + NavigationMenuItem, + NavigationMenuContent, + NavigationMenuTrigger, + NavigationMenuLink, + NavigationMenuIndicator, + NavigationMenuViewport, +}; diff --git a/components/ui/useCode/TOS-FormField.tsx b/components/ui/useCode/TOS-FormField.tsx index 4af71ed..788a5a8 100644 --- a/components/ui/useCode/TOS-FormField.tsx +++ b/components/ui/useCode/TOS-FormField.tsx @@ -9,6 +9,7 @@ import { progressIncrements, useStepperStore, } from "@/data-store/stepper-store"; +import Image from "next/image"; import Link from "next/link"; export function TOSFormField(form: any) { @@ -49,9 +50,10 @@ export function TOSFormField(form: any) { className='italic text-blue-500 underline' > Tailspin's terms & conditions. - Open Tab in New Page From 036f50978dbcf42fbd769f3e9d657ab265d1a4aa Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 18:03:22 +0800 Subject: [PATCH 23/34] use Image component instead of img --- components/ui/useCode/TOS-FormField.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/ui/useCode/TOS-FormField.tsx b/components/ui/useCode/TOS-FormField.tsx index 788a5a8..7ddc36d 100644 --- a/components/ui/useCode/TOS-FormField.tsx +++ b/components/ui/useCode/TOS-FormField.tsx @@ -54,6 +54,8 @@ export function TOSFormField(form: any) { className='ml-1 inline-block' src='/newTab.webp' alt='Open Tab in New Page' + width={15} + height={15} /> From 9f42e282df4dd57e427ed0fd26df384207578106 Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 18:03:40 +0800 Subject: [PATCH 24/34] implement components growing on scroll --- app/page.tsx | 8 +++--- components/ui/grow-on-scroll.tsx | 46 ++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 5 deletions(-) create mode 100644 components/ui/grow-on-scroll.tsx diff --git a/app/page.tsx b/app/page.tsx index c12a244..f783f9c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,6 +8,7 @@ import Timeline from "@/components/landing/timeline"; import ThanksPage from "@/components/landing/thanks"; import StepperCard from "@/components/ui/useCode/StepperCard"; import RatingBody from "@/components/core/rating-area/rating-component"; +import GrowOnScroll from "@/components/ui/grow-on-scroll"; // import WavyScrollProvider from "@/components/providers/Wavy-Scroll-Provider"; const ComponentsWithScroll: React.FC = () => { @@ -32,16 +33,13 @@ const ComponentsWithScroll: React.FC = () => {
-
+ -
+
- {/*
- -
*/}
diff --git a/components/ui/grow-on-scroll.tsx b/components/ui/grow-on-scroll.tsx new file mode 100644 index 0000000..8abb6d6 --- /dev/null +++ b/components/ui/grow-on-scroll.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { useRef, useEffect } from "react"; +import { motion, useAnimation, useInView } from "framer-motion"; +import { cn } from "@/lib/utils"; + +interface GrowOnScrollProps { + children: React.ReactNode; + className?: string; +} + +const GrowOnScroll: React.FC = ({ children, className }) => { + const controls = useAnimation(); + const ref = useRef(null); + const isInView = useInView(ref); + + useEffect(() => { + if (isInView) { + controls.start("visible"); + } else { + controls.start("hidden"); + } + }, [controls, isInView]); + + const variants = { + visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } }, + hidden: { scale: 0.8, opacity: 0 }, + }; + + return ( + + {children} + + ); +}; + +export default GrowOnScroll; From 9c9d4fe430545ad7ddfd9fe4033a86f44d4e23e7 Mon Sep 17 00:00:00 2001 From: Zac Date: Sat, 11 Nov 2023 18:03:49 +0800 Subject: [PATCH 25/34] refactored flipping on scrolling --- components/landing/about-tailspin.tsx | 45 ++------------------------- components/ui/flip-on-scroll.tsx | 39 +++++++++++++++++++++++ 2 files changed, 42 insertions(+), 42 deletions(-) create mode 100644 components/ui/flip-on-scroll.tsx diff --git a/components/landing/about-tailspin.tsx b/components/landing/about-tailspin.tsx index 07d11de..00dc51d 100644 --- a/components/landing/about-tailspin.tsx +++ b/components/landing/about-tailspin.tsx @@ -1,10 +1,7 @@ -"use client"; - import Link from "next/link"; import { Button } from "@/components/ui/button"; import { BarChartBig } from "lucide-react"; -import { motion, useInView } from "framer-motion"; -import { useRef } from "react"; +import FlipOnScroll from "../ui/flip-on-scroll"; type AboutTailSpinBoxesProps = { title: string; @@ -12,34 +9,13 @@ type AboutTailSpinBoxesProps = { footer?: React.ReactNode; }; -const variants = { - visible: { - rotateY: 0, - opacity: 1, - transition: { duration: 0.5, ease: "easeOut" }, - }, - hidden: { - rotateY: 90, - opacity: 0, - transition: { duration: 0.5, ease: "easeIn" }, - }, -}; - const AboutTailSpinBoxes: React.FC = ({ title, paragraphComponent, footer, }) => { - const ref = useRef(null); - const isInView = useInView(ref); return ( - +

{title} @@ -51,7 +27,7 @@ const AboutTailSpinBoxes: React.FC = ({ {footer} )} - + ); }; @@ -159,18 +135,3 @@ const AboutTailspin = () => { }; export default AboutTailspin; -// footer={ -// <> -// profile picture -//
-//
Bonnie Green
-//
-// Developer at Open AI -//
-//
-// -// } diff --git a/components/ui/flip-on-scroll.tsx b/components/ui/flip-on-scroll.tsx new file mode 100644 index 0000000..ddd6ce8 --- /dev/null +++ b/components/ui/flip-on-scroll.tsx @@ -0,0 +1,39 @@ +"use client"; + +import { motion, useInView } from "framer-motion"; +import { useRef } from "react"; + +type FlipOnScrollProps = { + children: React.ReactNode; +}; + +const variants = { + visible: { + rotateY: 0, + opacity: 1, + transition: { duration: 0.5, ease: "easeOut" }, + }, + hidden: { + rotateY: 90, + opacity: 0, + transition: { duration: 0.5, ease: "easeIn" }, + }, +}; + +const FlipOnScroll: React.FC = ({ children }) => { + const ref = useRef(null); + const isInView = useInView(ref); + return ( + + {children} + + ); +}; + +export default FlipOnScroll; From 7884403a8b6219ea0e8d7385b40ba0becafc1c99 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 12 Nov 2023 07:50:12 +0800 Subject: [PATCH 26/34] bug in faq --- components/landing/faq.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/landing/faq.tsx b/components/landing/faq.tsx index cb70c51..8f268cd 100644 --- a/components/landing/faq.tsx +++ b/components/landing/faq.tsx @@ -157,7 +157,7 @@ const FAQ = () => { - + Not an FAQ, but in the spirit of transparency... From 6cf6b9a7fb2899a09501caf7d66f24d2d11b982b Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 12 Nov 2023 07:57:58 +0800 Subject: [PATCH 27/34] add a footer --- app/page.tsx | 4 +++ components/landing/footer.tsx | 47 +++++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 components/landing/footer.tsx diff --git a/app/page.tsx b/app/page.tsx index f783f9c..a3a73c3 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -9,6 +9,7 @@ import ThanksPage from "@/components/landing/thanks"; import StepperCard from "@/components/ui/useCode/StepperCard"; import RatingBody from "@/components/core/rating-area/rating-component"; import GrowOnScroll from "@/components/ui/grow-on-scroll"; +import Footer from "@/components/landing/footer"; // import WavyScrollProvider from "@/components/providers/Wavy-Scroll-Provider"; const ComponentsWithScroll: React.FC = () => { @@ -69,6 +70,9 @@ export default function Home() { +
+
+
); } diff --git a/components/landing/footer.tsx b/components/landing/footer.tsx new file mode 100644 index 0000000..c9e5015 --- /dev/null +++ b/components/landing/footer.tsx @@ -0,0 +1,47 @@ +import Link from "next/link"; +import { TailspinLogo } from "../ui/spinning-logo"; + +const Footer = () => { + return ( +
+
+
+ + + + Tailspin + + + +
+
+ + No © 2023{" "} + + Tailspin + + . No Rights Reserved. + +
+
+ ); +}; + +export default Footer; From dd8212e6a193e84a38fa9c3b800690405c8c2a10 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 12 Nov 2023 08:42:46 +0800 Subject: [PATCH 28/34] remove react spring --- components/providers/Wavy-Scroll-Provider.tsx | 87 ------------------- package.json | 1 - yarn.lock | 39 --------- 3 files changed, 127 deletions(-) delete mode 100644 components/providers/Wavy-Scroll-Provider.tsx diff --git a/components/providers/Wavy-Scroll-Provider.tsx b/components/providers/Wavy-Scroll-Provider.tsx deleted file mode 100644 index eca9045..0000000 --- a/components/providers/Wavy-Scroll-Provider.tsx +++ /dev/null @@ -1,87 +0,0 @@ -"use client"; - -import * as React from "react"; -import { useScroll, animated } from "@react-spring/web"; - -const X_LINES = 40; -const PAGE_COUNT = 5; -const INITIAL_WIDTH_VW = 5; // Set initial width as a percentage of viewport width - -const WavyScrollProvider: React.FC<{ children: React.ReactNode }> = ({ - children, -}) => { - const containerRef = React.useRef(null!); - - const { scrollYProgress } = useScroll({ - container: containerRef, - default: { - immediate: true, - }, - }); - - return ( -
-
-
- {Array.from({ length: X_LINES }).map((_, i) => ( - { - const percentilePosition = - (i + 1) / X_LINES; - return `${ - INITIAL_WIDTH_VW / 4 + - 10 * - Math.cos( - ((percentilePosition - - scrollP) * - Math.PI) / - 1.5 - ) ** - 32 - }vw`; - }), - }} - /> - ))} -
-
- {Array.from({ length: X_LINES }).map((_, i) => ( - { - const percentilePosition = - 1 - (i + 1) / X_LINES; - return `${ - INITIAL_WIDTH_VW / 4 + - 10 * - Math.cos( - ((percentilePosition - - scrollP) * - Math.PI) / - 1.5 - ) ** - 32 - }vw`; - }), - }} - /> - ))} -
-
- {children} - {Array.from({ length: PAGE_COUNT }, (_, index) => ( -
- ))} -
- ); -}; - -export default WavyScrollProvider; diff --git a/package.json b/package.json index 877a14b..ea0d0fc 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@radix-ui/react-tabs": "^1.0.4", "@react-email/components": "^0.0.7", "@react-email/render": "^0.0.7", - "@react-spring/web": "^9.7.3", "@tanstack/react-query": "^4.35.3", "@xata.io/client": "^0.26.7", "ace-builds": "^1.30.0", diff --git a/yarn.lock b/yarn.lock index f72d814..1eafc2b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -903,45 +903,6 @@ dependencies: react "18.2.0" -"@react-spring/animated@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f" - integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw== - dependencies: - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/core@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095" - integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/shared@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53" - integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA== - dependencies: - "@react-spring/types" "~9.7.3" - -"@react-spring/types@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b" - integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw== - -"@react-spring/web@^9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d" - integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - "@rushstack/eslint-patch@^1.1.3": version "1.5.1" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz#5f1b518ec5fa54437c0b7c4a821546c64fed6922" From 6a524d4e304f6cca59ed4a206d398042c6f53b04 Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 12 Nov 2023 08:43:19 +0800 Subject: [PATCH 29/34] implement carousel --- app/page.tsx | 50 +++++++++++----------------- components/landing/faq.tsx | 2 +- components/landing/thanks.tsx | 2 +- components/ui/component-carousel.tsx | 49 +++++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 32 deletions(-) create mode 100644 components/ui/component-carousel.tsx diff --git a/app/page.tsx b/app/page.tsx index a3a73c3..f883a09 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -10,11 +10,24 @@ import StepperCard from "@/components/ui/useCode/StepperCard"; import RatingBody from "@/components/core/rating-area/rating-component"; import GrowOnScroll from "@/components/ui/grow-on-scroll"; import Footer from "@/components/landing/footer"; -// import WavyScrollProvider from "@/components/providers/Wavy-Scroll-Provider"; +import ComponentCarousel from "@/components/ui/component-carousel"; -const ComponentsWithScroll: React.FC = () => { +export default function Home() { return ( - <> +
+ + +
+
+ +
+
+
+ +
{
- -
-
- + , ]} + title='Some useless information' + />
- - ); -}; - -export default function Home() { - return ( -
- - - - -
-
- -
-
-
- -
-
diff --git a/components/landing/faq.tsx b/components/landing/faq.tsx index 8f268cd..2a5996c 100644 --- a/components/landing/faq.tsx +++ b/components/landing/faq.tsx @@ -11,7 +11,7 @@ import Link from "next/link"; const FAQ = () => { return (
FAQ diff --git a/components/landing/thanks.tsx b/components/landing/thanks.tsx index 2fa1d26..51c3b40 100644 --- a/components/landing/thanks.tsx +++ b/components/landing/thanks.tsx @@ -70,7 +70,7 @@ const ThanksPage = async () => { ["https://tanstack.com/favicon.ico", "ReactQuery"], ]); return ( -
+
diff --git a/components/ui/component-carousel.tsx b/components/ui/component-carousel.tsx new file mode 100644 index 0000000..c674a7d --- /dev/null +++ b/components/ui/component-carousel.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { useState } from "react"; +import { Button } from "./button"; +import { ArrowBigLeft, ArrowBigRight } from "lucide-react"; + +interface ComponentCarouselProps { + nodes: React.ReactNode[]; + title?: string; +} + +const ComponentCarousel: React.FC = ({ + nodes, + title, +}) => { + const [page, setPage] = useState(0); + + return ( +
+

{title}

+
+ +
+ {nodes[page]} +

+ {page + 1}/2 +

+
+ +
+
+ ); +}; + +export default ComponentCarousel; From 68e4e47c6771e8ae155fbe43dc1477206ef8db7e Mon Sep 17 00:00:00 2001 From: Zac Date: Sun, 12 Nov 2023 09:00:13 +0800 Subject: [PATCH 30/34] don't hard code page number --- components/ui/component-carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/component-carousel.tsx b/components/ui/component-carousel.tsx index c674a7d..42d3e1e 100644 --- a/components/ui/component-carousel.tsx +++ b/components/ui/component-carousel.tsx @@ -32,7 +32,7 @@ const ComponentCarousel: React.FC = ({
{nodes[page]}

- {page + 1}/2 + {page + 1}/{nodes.length}

diff --git a/components/landing/about-tailspin.tsx b/components/landing/about-tailspin.tsx index 00dc51d..699e732 100644 --- a/components/landing/about-tailspin.tsx +++ b/components/landing/about-tailspin.tsx @@ -37,9 +37,12 @@ const AboutTailspin = () => { className='relative flex h-full flex-col items-center justify-center rounded-lg bg-black p-6' id='about-section' > +

+ Tailspin +

Show off your skills and compete against the world diff --git a/components/landing/footer.tsx b/components/landing/footer.tsx index c9e5015..d7599af 100644 --- a/components/landing/footer.tsx +++ b/components/landing/footer.tsx @@ -3,7 +3,7 @@ import { TailspinLogo } from "../ui/spinning-logo"; const Footer = () => { return ( -