-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from EnthusiastiCoder/main
WOC FAQ and Timeline sections
- Loading branch information
Showing
54 changed files
with
1,360 additions
and
331 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| // Function to set the font size based on the parent's width | ||
| function setFontSizeForTextScaleElements(): void { | ||
| // Select all elements whose class contains "text-scale" | ||
| const elements = document.querySelectorAll<HTMLElement>('[class*="text-scale"]'); | ||
|
|
||
| // Iterate over each selected element | ||
| elements.forEach(element => { | ||
| // Get the parent element's width | ||
| const parentElement = element.parentElement; | ||
|
|
||
| // Ensure parentElement exists before proceeding | ||
| if (parentElement) { | ||
| const parentWidth = parentElement.clientWidth; | ||
|
|
||
| // Set the font size to 2 times the parent's width | ||
| element.style.fontSize = `${2 * parentWidth}px`; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // Set the initial font size for all matching elements | ||
| setFontSizeForTextScaleElements(); | ||
|
|
||
| // Optionally, adjust the font size when the window is resized | ||
| window.addEventListener('resize', setFontSizeForTextScaleElements); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React from 'react'; | ||
|
|
||
| const ParallelAnimatedTextBorderTrace = () => { | ||
| const text = Array.from("WINTEROFCODE"); | ||
| const x = [0, 90, 180, 270, 360,450,0, 85, 195, 280, 365, 450]; | ||
| return ( | ||
| <div className="flex items-center mt-[5%] justify-center w-full sm:p-0 relative"> | ||
| {false && <div className="absolute w-full h-fit top-[-19%] font-kleemax text-scale-260 text-center text-white">WOC</div>} | ||
| <svg className="z-20 w-[80%]" viewBox="0 0 570 170"> | ||
| {text.map((letter,index)=> | ||
| <text | ||
| key={index} | ||
| x={x[index]+20} | ||
| y={index > 5? 160 : 70} | ||
| className="text-trace font-kleemax" | ||
| stroke="#609CFF" | ||
| fill="#151D2F" | ||
| strokeWidth="0.5%" | ||
| > | ||
| {letter} | ||
| </text> | ||
| )} | ||
| </svg> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = ` | ||
| @keyframes trace { | ||
| 0% { | ||
| stroke-dashoffset: 0%; | ||
| } | ||
| 100% { | ||
| stroke-dashoffset: 155%; | ||
| } | ||
| } | ||
| .text-trace { | ||
| font-size: 70px; | ||
| stroke-dasharray: 150%,5%; | ||
| stroke-linejoin: round; | ||
| animation: trace 8s linear 1; | ||
| } | ||
| /* Add a glow effect */ | ||
| .text-trace { | ||
| filter: drop-shadow(0 0 0.5vw rgba(96, 156, 255, 1)); | ||
| } | ||
| `; | ||
|
|
||
| const BorderText = () => { | ||
| return ( | ||
| <> | ||
| <style>{styles}</style> | ||
| <ParallelAnimatedTextBorderTrace /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default BorderText; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import React, { useState, useEffect } from 'react' | ||
| import Image from 'next/image' | ||
| import asset2 from '../public/triangle.svg' | ||
| import asset3 from '../public/triangle2.svg' | ||
|
|
||
| const Carousel = ({ images = [] }) => { | ||
| const [currentIndex, setCurrentIndex] = useState(0); | ||
| const [nextIndex, setNextIndex] = useState<number | null>(null); | ||
| const [direction, setDirection] = useState(''); | ||
|
|
||
| useEffect(() => { | ||
| if (nextIndex !== null) { | ||
| const timer = setTimeout(() => { | ||
| setCurrentIndex(nextIndex); | ||
| setNextIndex(null); | ||
| }, 300); // Match this with the CSS transition duration | ||
| return () => clearTimeout(timer); | ||
| } | ||
| }, [nextIndex]); | ||
|
|
||
| if (!images || images.length === 0) { | ||
| return <div className="w-full h-[300px] bg-gray-200 flex items-center justify-center">No images available</div>; | ||
| } | ||
|
|
||
| const slide = (newIndex: number , newDirection: React.SetStateAction<string>) => { | ||
| setNextIndex(newIndex); | ||
| setDirection(newDirection); | ||
| }; | ||
|
|
||
| const goToPrevious = () => { | ||
| const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1; | ||
| slide(newIndex, 'left'); | ||
| }; | ||
|
|
||
| const goToNext = () => { | ||
| const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1; | ||
| slide(newIndex, 'right'); | ||
| }; | ||
|
|
||
| const goToSlide = (index:number) => { | ||
| if (index === currentIndex) return; | ||
| slide(index, index > currentIndex ? 'right' : 'left'); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="w-full max-w-3xl mx-auto"> | ||
| <div className="relative w-full h-[300px] mb-4 overflow-hidden"> | ||
| <div | ||
| className={`absolute w-full h-full transition-transform duration-300 ease-in-out ${ | ||
| nextIndex !== null ? (direction === 'right' ? '-translate-x-full' : 'translate-x-full') : 'translate-x-0' | ||
| }`} | ||
| style={{ backgroundImage: `url(${images[currentIndex]})`, backgroundSize: 'cover', backgroundPosition: 'center' }} | ||
| /> | ||
| {nextIndex !== null && ( | ||
| <div | ||
| className={`absolute w-full h-full transition-transform duration-300 ease-in-out ${ | ||
| direction === 'right' ? 'translate-x-full' : '-translate-x-full' | ||
| }`}> | ||
| <Image src={images[currentIndex]} alt="slide" /> | ||
| </div> | ||
| )} | ||
| <button | ||
| className="absolute top-1/2 -translate-y-1/2 left-2 z-10 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer transition-opacity hover:bg-black/40" | ||
| onClick={goToPrevious} | ||
| > | ||
| <Image src={asset3} alt="left" /> | ||
| </button> | ||
| <button | ||
| className="absolute top-1/2 -translate-y-1/2 right-2 z-10 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer transition-opacity hover:bg-black/40" | ||
| onClick={goToNext} | ||
| > | ||
| <Image src={asset2} alt="right" /> | ||
| </button> | ||
| </div> | ||
| <div className="flex justify-center space-x-2 overflow-x-auto"> | ||
| {images.map((image, index) => ( | ||
| <button | ||
| key={index} | ||
| className={`w-16 h-16 bg-center bg-cover cursor-pointer transition-all ${ | ||
| index === currentIndex ? 'border-2 border-blue-500 scale-110' : 'opacity-70 hover:opacity-100' | ||
| }`} | ||
| onClick={() => goToSlide(index)} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Carousel; |
Oops, something went wrong.