From 19aa39ef0eabb80f5058094235a5ca75d2dbbadc Mon Sep 17 00:00:00 2001 From: Sayak-Bhunia <110457746+Sayak-Bhunia@users.noreply.github.com> Date: Sun, 28 Apr 2024 14:19:30 +0530 Subject: [PATCH] first commit --- package-lock.json | 18 ++++ package.json | 12 +-- src/app/components/Content.jsx | 60 +++++++++++++ src/app/components/Footer.jsx | 54 ++++++++++++ src/app/components/Header.jsx | 18 ++++ src/app/components/fonts/Trap-Bold.otf | Bin 0 -> 10308 bytes src/app/components/fonts/index.jsx | 6 ++ src/app/favicon.ico | Bin 25931 -> 15406 bytes src/app/globals.css | 10 +-- src/app/layout.js | 36 ++++++-- src/app/page.js | 117 ++----------------------- src/app/page.module.css | 33 +++++++ tailwind.config.js | 3 + 13 files changed, 240 insertions(+), 127 deletions(-) create mode 100644 src/app/components/Content.jsx create mode 100644 src/app/components/Footer.jsx create mode 100644 src/app/components/Header.jsx create mode 100644 src/app/components/fonts/Trap-Bold.otf create mode 100644 src/app/components/fonts/index.jsx create mode 100644 src/app/page.module.css diff --git a/package-lock.json b/package-lock.json index 8a7e8a6..2b44a8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,9 @@ "name": "para", "version": "0.1.0", "dependencies": { + "gsap": "^3.12.5", "next": "14.2.3", + "next-google-fonts": "^2.2.0", "react": "^18", "react-dom": "^18" }, @@ -2249,6 +2251,11 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/gsap": { + "version": "3.12.5", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz", + "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==" + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", @@ -3112,6 +3119,17 @@ } } }, + "node_modules/next-google-fonts": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/next-google-fonts/-/next-google-fonts-2.2.0.tgz", + "integrity": "sha512-TCtNp+uu0vof2X8Xfptfw96Unc3zsUekBY2l4g2mGAX+U8QO/yfAaEioGhFCwU05M8NbMgwP5C8V40Vtwp87iQ==", + "deprecated": "As of Next.js 10.2, Google Fonts are automatically optimized! For more info, see https://github.com/joe-bell/next-google-fonts", + "peerDependencies": { + "next": ">= 10.0.7", + "react": ">= 17.0.1", + "react-dom": ">= 17.0.1" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index 51e6002..f81ff97 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,16 @@ "lint": "next lint" }, "dependencies": { + "gsap": "^3.12.5", + "next": "14.2.3", + "next-google-fonts": "^2.2.0", "react": "^18", - "react-dom": "^18", - "next": "14.2.3" + "react-dom": "^18" }, "devDependencies": { - "postcss": "^8", - "tailwindcss": "^3.4.1", "eslint": "^8", - "eslint-config-next": "14.2.3" + "eslint-config-next": "14.2.3", + "postcss": "^8", + "tailwindcss": "^3.4.1" } } diff --git a/src/app/components/Content.jsx b/src/app/components/Content.jsx new file mode 100644 index 0000000..39c1d9e --- /dev/null +++ b/src/app/components/Content.jsx @@ -0,0 +1,60 @@ +'use client'; +import styles from '../page.module.css' +import { useRef, useEffect } from 'react'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import gsap from 'gsap'; + +const phrase = "In Willowbrook, a boy named Ezra dreamed big. Despite humble beginnings, he devoured books, fueled by curiosity. With grit, he conquered obstacles, turning challenges into stepping stones. When opportunity came, he seized it, embarking on a journey to success. Against all odds, the small-town boy emerged triumphant, a beacon of determination and self-belief." + +export default function Cont() { + + let refs = useRef([]); + const body = useRef(null); + const container = useRef(null); + + useEffect( () => { + gsap.registerPlugin(ScrollTrigger); + createAnimation(); + }, []) + + const createAnimation = () => { + gsap.to(refs.current, { + scrollTrigger: { + trigger: container.current, + scrub: true, + start: `top`, + end: `+=${window.innerHeight / 2.5}`, + }, + opacity: 1, + ease: "none", + stagger: 0.1 + }) + } + + const splitWords = (phrase) => { + let body = []; + phrase.split(" ").forEach( (word, i) => { + const letters = splitLetters(word); + body.push(

{letters}

) + }) + return body + } + + const splitLetters = (word) => { + let letters = [] + word.split("").forEach( (letter, i) => { + letters.push( {refs.current.push(el)}}>{letter}) + }) + return letters; + } + + return ( +
+
+ { + splitWords(phrase) + } +
+
+ ) +} \ No newline at end of file diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx new file mode 100644 index 0000000..b1a11c1 --- /dev/null +++ b/src/app/components/Footer.jsx @@ -0,0 +1,54 @@ +import '../globals.css'; +import { trapBold } from './fonts'; +import { Open_Sans, Syne } from 'next/font/google'; +import React, { useEffect, useState } from 'react'; + +const inter = Open_Sans({ subsets: ['latin'] }) + +const thankyouList = [ + "thank you", + "gracias", + "धन्यवाद", + "merci", + "danke", + "ありがとう", + "谢谢", + "Спасибо", + "شكراً", + "감사합니다", +]; + +export default function Footer() { + const [currthank, setCurrThank] = useState(thankyouList[0]); + + useEffect(() => { + const intervalId = setInterval(() => { + const currentIndex = thankyouList.indexOf(currthank); + const nextIndex = (currentIndex + 1) % thankyouList.length; + setCurrThank(thankyouList[nextIndex]); + }, 1500); + + return () => { + clearInterval(intervalId); + }; + }, [currthank]); + + return ( + <> +
+
+

+ {currthank === "شكراً" && "!"} {currthank}{" "} + {currthank != "شكراً" && "!"} +

+
+
+
+
+
+

@{new Date().getFullYear()} mystory. all rights reserved.

+
+
+ + ); +}; \ No newline at end of file diff --git a/src/app/components/Header.jsx b/src/app/components/Header.jsx new file mode 100644 index 0000000..770424c --- /dev/null +++ b/src/app/components/Header.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import '../globals.css'; +import { trapBold } from './fonts'; + +export default function Header() { + return ( + <> +
+
+

mystory

+
+
+
+

A way to share stories anonymously.

+
+ + ); +}; \ No newline at end of file diff --git a/src/app/components/fonts/Trap-Bold.otf b/src/app/components/fonts/Trap-Bold.otf new file mode 100644 index 0000000000000000000000000000000000000000..87f2446dc76cca687f80cd8fef61836671871c38 GIT binary patch literal 10308 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 M`ygETDeaSg2SmjbWB>pF literal 0 HcmV?d00001 diff --git a/src/app/components/fonts/index.jsx b/src/app/components/fonts/index.jsx new file mode 100644 index 0000000..e4428eb --- /dev/null +++ b/src/app/components/fonts/index.jsx @@ -0,0 +1,6 @@ +import localFont from "next/font/local"; + +export const trapBold = localFont({ + src: "./Trap-Bold.otf", + display: "swap", +}); \ No newline at end of file diff --git a/src/app/favicon.ico b/src/app/favicon.ico index 718d6fea4835ec2d246af9800eddb7ffb276240c..a4f4de80cd1858966eae60094f27e11395f20562 100644 GIT binary patch literal 15406 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 LrJugUA?W`A8`#=m diff --git a/src/app/globals.css b/src/app/globals.css index 875c01e..f787a38 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap'); + @tailwind base; @tailwind components; @tailwind utilities; @@ -17,13 +19,7 @@ } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + background-color: #191919; } @layer utilities { diff --git a/src/app/layout.js b/src/app/layout.js index 9aef1df..6462b57 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,12 +1,34 @@ -import { Inter } from "next/font/google"; -import "./globals.css"; +import './globals.css'; +import { Inter } from 'next/font/google'; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ subsets: ['latin'] }) export const metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; + title: 'mystory | share your stories anonymously', + description: 'a place to share stories anonymously and connect with like minded people.', + keywords: [ + "Anonymous", + "Story Writing", + "Creative Writing", + "Anonymous Stories", + "Writing Community", + "Online Writing Platform", + "Narrative Writing", + "Anonymous Authorship", + "Story Sharing", + "Collaborative Writing", + "Creative Expression", + "Writing Prompt", + "User-generated Content", + "Community Stories", + "Anonymous Contributions", + "Narrative Community", + "Anonymous Feedback", + "Writing Forum", + "Anonymous Platform", + "Story Exchange", + ], +} export default function RootLayout({ children }) { return ( @@ -14,4 +36,4 @@ export default function RootLayout({ children }) { {children} ); -} +}; \ No newline at end of file diff --git a/src/app/page.js b/src/app/page.js index c9b26e0..3b9b87a 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,113 +1,14 @@ -import Image from "next/image"; +"use client"; +import Content from "./components/Content"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; export default function Home() { return ( -
-
-

- Get started by editing  - src/app/page.js -

- -
- -
- Next.js Logo -
- - +
+
+ +
); -} +} \ No newline at end of file diff --git a/src/app/page.module.css b/src/app/page.module.css new file mode 100644 index 0000000..27f5f7b --- /dev/null +++ b/src/app/page.module.css @@ -0,0 +1,33 @@ +.main { + display: flex; + height: 100vh; + align-items: flex-end; + justify-content: center; + margin-bottom: 100vh; + color: rgb(211, 211, 211); +} + +@media (max-width: 768px) { + .main { + height: 80vh; + margin-bottom: 80vh; + padding-bottom: 10vh; + } +} + +.body { + width: 90%; + display: flex; + flex-wrap: wrap; +} + +.body p { + font-size: 3.5vw; + margin: 0px; + margin-right: 1.5vw; + font-weight: 700; +} + +.body span { + opacity: 0.2; +} diff --git a/tailwind.config.js b/tailwind.config.js index 7980350..89191ff 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,6 +12,9 @@ module.exports = { "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, + fontFamily: { + 'Syne': '"Syne", Helvetica, Arial, sans-serif', + }, }, }, plugins: [],