diff --git a/package.json b/package.json index 491f6f1a..f6241375 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-beautiful-dnd": "^13.1.1", "react-burger-menu": "^3.0.9", "react-dom": "^18.2.0", + "react-dom-confetti": "^0.2.0", "react-helmet": "^6.1.0", "react-router-dom": "^6.14.2", "react-spotify-player": "^1.0.4", diff --git a/src/Valentine/Valentine.scss b/src/Valentine/Valentine.scss new file mode 100644 index 00000000..19209a6d --- /dev/null +++ b/src/Valentine/Valentine.scss @@ -0,0 +1,9 @@ +@keyframes spin { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/src/Valentine/Valentine.tsx b/src/Valentine/Valentine.tsx new file mode 100644 index 00000000..63fee5c1 --- /dev/null +++ b/src/Valentine/Valentine.tsx @@ -0,0 +1,230 @@ +import { useState } from 'react'; +import Confetti from 'react-dom-confetti'; +import heart from './assets/heart.svg'; +import './Valentine.scss'; +import img0 from './assets/IMG_0104.jpeg'; +import img1 from './assets/IMG_1200.jpeg'; +import img2 from './assets/IMG_3226.jpeg'; +import img3 from './assets/IMG_3240.jpeg'; +import img4 from './assets/IMG_3683.jpeg'; +import img5 from './assets/IMG_6763.jpeg'; +import img6 from './assets/IMG_9320.jpeg'; +import img7 from './assets/IMG_9441.jpeg'; +import img8 from './assets/IMG_9533.jpeg'; +import img9 from './assets/IMG_9737.jpeg'; + +const confettiConfig = { + angle: 90, + spread: 360, + startVelocity: 15, + elementCount: 200, + dragFriction: 0.05, + duration: 3000, + stagger: 3, + width: '10px', + height: '10px', + perspective: '500px', + colors: ['#a864fd', '#29cdff', '#78ff44', '#ff718d', '#fdff6a'], +}; + +function Valentine(): JSX.Element { + const [showConfetti, setShowConfetti] = useState(false); + + const handleClick = () => { + setShowConfetti(true); + setTimeout(() => setShowConfetti(false), 3000); // Reset after 3 seconds + }; + + const button = ( + + ); + + if (window.innerWidth < 768) { + return ( +
+ Come back on desktop! +
+ ); + } + + return ( +
+ img0 + + img1 + + img2 + + img3 + + img4 + + img5 + + img6 + + img7 + + img8 + + img9 + + + + heart + +
+ Emi, will you be my valentine? +
+ +
+ {button} + {button} +
+
+ ); +} + +export default Valentine; diff --git a/src/Valentine/assets/IMG_0104.jpeg b/src/Valentine/assets/IMG_0104.jpeg new file mode 100644 index 00000000..a8de5471 Binary files /dev/null and b/src/Valentine/assets/IMG_0104.jpeg differ diff --git a/src/Valentine/assets/IMG_1200.jpeg b/src/Valentine/assets/IMG_1200.jpeg new file mode 100644 index 00000000..e9b635fa Binary files /dev/null and b/src/Valentine/assets/IMG_1200.jpeg differ diff --git a/src/Valentine/assets/IMG_3226.jpeg b/src/Valentine/assets/IMG_3226.jpeg new file mode 100644 index 00000000..00875a56 Binary files /dev/null and b/src/Valentine/assets/IMG_3226.jpeg differ diff --git a/src/Valentine/assets/IMG_3240.jpeg b/src/Valentine/assets/IMG_3240.jpeg new file mode 100644 index 00000000..0bd31555 Binary files /dev/null and b/src/Valentine/assets/IMG_3240.jpeg differ diff --git a/src/Valentine/assets/IMG_3683.jpeg b/src/Valentine/assets/IMG_3683.jpeg new file mode 100644 index 00000000..aa8f2c43 Binary files /dev/null and b/src/Valentine/assets/IMG_3683.jpeg differ diff --git a/src/Valentine/assets/IMG_6763.jpeg b/src/Valentine/assets/IMG_6763.jpeg new file mode 100644 index 00000000..dbc119b0 Binary files /dev/null and b/src/Valentine/assets/IMG_6763.jpeg differ diff --git a/src/Valentine/assets/IMG_9320.jpeg b/src/Valentine/assets/IMG_9320.jpeg new file mode 100644 index 00000000..707d39f6 Binary files /dev/null and b/src/Valentine/assets/IMG_9320.jpeg differ diff --git a/src/Valentine/assets/IMG_9441.jpeg b/src/Valentine/assets/IMG_9441.jpeg new file mode 100644 index 00000000..4fa3b63b Binary files /dev/null and b/src/Valentine/assets/IMG_9441.jpeg differ diff --git a/src/Valentine/assets/IMG_9533.jpeg b/src/Valentine/assets/IMG_9533.jpeg new file mode 100644 index 00000000..ce3456b6 Binary files /dev/null and b/src/Valentine/assets/IMG_9533.jpeg differ diff --git a/src/Valentine/assets/IMG_9737.jpeg b/src/Valentine/assets/IMG_9737.jpeg new file mode 100644 index 00000000..7aa86ff2 Binary files /dev/null and b/src/Valentine/assets/IMG_9737.jpeg differ diff --git a/src/Valentine/assets/heart.svg b/src/Valentine/assets/heart.svg new file mode 100644 index 00000000..d8c734cc --- /dev/null +++ b/src/Valentine/assets/heart.svg @@ -0,0 +1 @@ +red-heart \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index b11b5d7b..41bbe5ba 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,6 +4,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import Home from './Home'; import LoadingSpinner from './Connections/Loading'; +import Valentine from './Valentine/Valentine'; const ConnectionsProvider = lazy(() => import('./Connections/ConnectionsProvider')); const ConnectionsRouter = lazy(() => import('./Connections/ConnectionsRouter')); @@ -12,6 +13,8 @@ const ConnectionsNYTArchive = lazy(() => import('./Connections/ConnectionsNYTArc const ConnectionsNYTToday = lazy(() => import('./Connections/ConnectionsNYTToday')); const ConnectionsLanding = lazy(() => import('./Connections/ConnectionsLanding')); +const isValentines = new Date().getMonth() === 1 && new Date().getDate() === 14; + ReactDOM.createRoot(document.getElementById('root')!).render( }> @@ -57,6 +60,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render( )} /> + {isValentines && } diff --git a/yarn.lock b/yarn.lock index 8151cf7f..bffeb41f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1914,6 +1914,11 @@ dom-align@^1.7.0: resolved "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz" integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw== +dom-confetti@0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/dom-confetti/-/dom-confetti-0.2.2.tgz#bdf2e7652d37b5cffb532c0a3263d108dd8a2363" + integrity sha512-+UVH9Y85qmpTnbmFURwLWjqLIykyIrsNSRkPX/eFlBuOURz9RDX8JoZHnajZHyFuCV0w/K3+tZK0ztfoTw6ejg== + electron-to-chromium@^1.4.477: version "1.4.512" resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.512.tgz" @@ -3737,6 +3742,13 @@ react-burger-menu@^3.0.9: prop-types "^15.7.2" snapsvg-cjs "0.0.6" +react-dom-confetti@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/react-dom-confetti/-/react-dom-confetti-0.2.0.tgz#76df26762da532057d5b1fbe38a8096f9dc33d40" + integrity sha512-+XRTi+WlCrcRN2dTjdEopOaPFtS7hpaHRRQ0sHiVRGqpchKz4QVh3i+6eLEEpNHYpN2VgPmhjvJ/vnjmUYhlIQ== + dependencies: + dom-confetti "0.2.2" + react-dom@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"