diff --git a/src/App.jsx b/src/App.jsx index c55fd80..5a445e0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,6 +11,7 @@ import Cp from './components/Cp/Cp' // import CursorFollower from './components/CursorFollower'; import LandingPage from './pages/LandingPage' +import StatusCode0 from './components/StatusCode0/StatusCode0' function App() { @@ -19,6 +20,7 @@ function App() { {/* */} + diff --git a/src/assets/images/sc0/00.png b/src/assets/images/sc0/00.png new file mode 100644 index 0000000..981796f Binary files /dev/null and b/src/assets/images/sc0/00.png differ diff --git a/src/assets/images/sc0/01.png b/src/assets/images/sc0/01.png new file mode 100644 index 0000000..c3a48f8 Binary files /dev/null and b/src/assets/images/sc0/01.png differ diff --git a/src/assets/images/sc0/02.png b/src/assets/images/sc0/02.png new file mode 100644 index 0000000..3cd8d03 Binary files /dev/null and b/src/assets/images/sc0/02.png differ diff --git a/src/assets/images/sc0/03.png b/src/assets/images/sc0/03.png new file mode 100644 index 0000000..2d8c3ef Binary files /dev/null and b/src/assets/images/sc0/03.png differ diff --git a/src/assets/images/sc0/10.png b/src/assets/images/sc0/10.png new file mode 100644 index 0000000..f4323ef Binary files /dev/null and b/src/assets/images/sc0/10.png differ diff --git a/src/assets/images/sc0/11.png b/src/assets/images/sc0/11.png new file mode 100644 index 0000000..9a92d6f Binary files /dev/null and b/src/assets/images/sc0/11.png differ diff --git a/src/assets/images/sc0/12.png b/src/assets/images/sc0/12.png new file mode 100644 index 0000000..39bc112 Binary files /dev/null and b/src/assets/images/sc0/12.png differ diff --git a/src/assets/images/sc0/13.png b/src/assets/images/sc0/13.png new file mode 100644 index 0000000..d37937f Binary files /dev/null and b/src/assets/images/sc0/13.png differ diff --git a/src/assets/images/sc0/14.png b/src/assets/images/sc0/14.png new file mode 100644 index 0000000..87cfba4 Binary files /dev/null and b/src/assets/images/sc0/14.png differ diff --git a/src/assets/images/sc0/20.png b/src/assets/images/sc0/20.png new file mode 100644 index 0000000..649ad1b Binary files /dev/null and b/src/assets/images/sc0/20.png differ diff --git a/src/assets/images/sc0/21.png b/src/assets/images/sc0/21.png new file mode 100644 index 0000000..2640b74 Binary files /dev/null and b/src/assets/images/sc0/21.png differ diff --git a/src/assets/images/sc0/22.png b/src/assets/images/sc0/22.png new file mode 100644 index 0000000..fa34f38 Binary files /dev/null and b/src/assets/images/sc0/22.png differ diff --git a/src/assets/images/sc0/23.png b/src/assets/images/sc0/23.png new file mode 100644 index 0000000..bf9267d Binary files /dev/null and b/src/assets/images/sc0/23.png differ diff --git a/src/assets/images/sc0/24.png b/src/assets/images/sc0/24.png new file mode 100644 index 0000000..7db1d71 Binary files /dev/null and b/src/assets/images/sc0/24.png differ diff --git a/src/assets/images/sc0/31.png b/src/assets/images/sc0/31.png new file mode 100644 index 0000000..13d3b8c Binary files /dev/null and b/src/assets/images/sc0/31.png differ diff --git a/src/assets/images/sc0/32.png b/src/assets/images/sc0/32.png new file mode 100644 index 0000000..610830f Binary files /dev/null and b/src/assets/images/sc0/32.png differ diff --git a/src/assets/images/sc0/40.png b/src/assets/images/sc0/40.png new file mode 100644 index 0000000..35e70c9 Binary files /dev/null and b/src/assets/images/sc0/40.png differ diff --git a/src/assets/images/sc0/41.png b/src/assets/images/sc0/41.png new file mode 100644 index 0000000..beef0e2 Binary files /dev/null and b/src/assets/images/sc0/41.png differ diff --git a/src/assets/images/sc0/42.png b/src/assets/images/sc0/42.png new file mode 100644 index 0000000..898c2f5 Binary files /dev/null and b/src/assets/images/sc0/42.png differ diff --git a/src/assets/images/sc0/mascot.png b/src/assets/images/sc0/mascot.png new file mode 100644 index 0000000..9748577 Binary files /dev/null and b/src/assets/images/sc0/mascot.png differ diff --git a/src/components/StatusCode0/StatusCode0.css b/src/components/StatusCode0/StatusCode0.css new file mode 100644 index 0000000..e189700 --- /dev/null +++ b/src/components/StatusCode0/StatusCode0.css @@ -0,0 +1,81 @@ +.gallery { + --s: 10vw; /* control the size */ + --g: 0px; /* control the gap */ + --r: 2.1vw; /* control the circular shapes */ + + display: grid; + gap: var(--g); + grid: auto-flow var(--s) / repeat(5, var(--s)); +} +@media screen and (max-width: 768px) { + .gallery { + --s: 18vw; + --r: 3.78vw; + } +} +@media screen and (max-width: 1280px) and (min-width: 769px) { + .gallery { + --s: 15vw; + --r: 3.15vw; + } +} +@media screen and (max-width: 1536px) and (min-width: 1281px) { + .gallery { + --s: 12vw; + --r: 2.52vw; + } +} +.sc0-text { + grid-column: 4 / 6; + grid-row: 5 / 6; +} +.gallery > img { + object-fit: cover; +} +.gallery > img:hover { + z-index: 2; +} +.gallery > img:is(:nth-child(2), :nth-child(15), :nth-child(18)) { + min-width: 100%; + min-height: 100%; +} +.gallery > img:is(:nth-child(3), :nth-child(11)) { + min-width: calc(100% + var(--r)); + min-height: 100%; + translate: calc(-1 * var(--r)) 0; +} +.gallery > img:is(:nth-child(4), :nth-child(6)) { + min-width: calc(100% + 2 * var(--r)); + min-height: calc(100% + 2 * var(--r)); + translate: calc(-1 * var(--r)) calc(-1 * var(--r)); +} +.gallery > img:is(:nth-child(7), :nth-child(8), :nth-child(17)) { + min-width: calc(100% + var(--r)); + min-height: calc(100% + var(--r)); + translate: 0 calc(-1 * var(--r)); +} +.gallery > img:is(:nth-child(9), :nth-child(10)) { + min-width: calc(100% + var(--r)); + min-height: calc(100% + var(--r)); + /* translate: calc(-1 * var(--r)) 0; */ +} +.gallery > img:is(:nth-child(12)) { + min-width: calc(100% + 2*var(--r)); + min-height: calc(100% + var(--r)); + translate: calc(-1 * var(--r)) calc(-1 * var(--r)); +} +.gallery > img:is(:nth-child(13), :nth-child(23)) { + min-width: 100%; + min-height: 100%; + translate: 0 calc(-1 * var(--r)); +} +.gallery > img:is(:nth-child(14), :nth-child(21)) { + min-width: calc(100% + 2*var(--r)); + min-height: calc(100% + var(--r)); + translate: calc(-1 * var(--r)); +} +.gallery > img:is(:nth-child(22)) { + min-width: calc(100% + var(--r)); + min-height: calc(100% + 2*var(--r)); + translate: 0 calc(-1 * var(--r)); +} diff --git a/src/components/StatusCode0/StatusCode0.jsx b/src/components/StatusCode0/StatusCode0.jsx new file mode 100644 index 0000000..2a603ea --- /dev/null +++ b/src/components/StatusCode0/StatusCode0.jsx @@ -0,0 +1,96 @@ +import React, { useState, useEffect } from 'react'; +import stars from '../../assets/images/discord/stars.svg'; +import './StatusCode0.css'; +import x01 from '../../assets/images/sc0/01.png'; +import x02 from '../../assets/images/sc0/02.png'; +import x03 from '../../assets/images/sc0/03.png'; +import x10 from '../../assets/images/sc0/10.png'; +import x11 from '../../assets/images/sc0/11.png'; +import x12 from '../../assets/images/sc0/12.png'; +import x13 from '../../assets/images/sc0/13.png'; +import x14 from '../../assets/images/sc0/14.png'; +import x20 from '../../assets/images/sc0/20.png'; +import x21 from '../../assets/images/sc0/21.png'; +import x22 from '../../assets/images/sc0/22.png'; +import x23 from '../../assets/images/sc0/23.png'; +import x24 from '../../assets/images/sc0/24.png'; +import x31 from '../../assets/images/sc0/31.png'; +import x32 from '../../assets/images/sc0/32.png'; +import x40 from '../../assets/images/sc0/40.png'; +import x41 from '../../assets/images/sc0/41.png'; +import x42 from '../../assets/images/sc0/42.png'; +import mascot from '../../assets/images/sc0/mascot.png'; + + +const StatusCode0 = () => { + const [selectedTrack, setSelectedTrack] = useState(1); + const [bgPosition, setBgPosition] = useState({ x: 0, y: 0 }); + + + useEffect(() => { + + const handleMouseMove = (e) => { + const { innerWidth, innerHeight } = window; + const x = (e.clientX / innerWidth - 0.5) * 60; // Adjust the multiplier for sensitivity + const y = (e.clientY / innerHeight - 0.5) * 60; // Adjust the multiplier for sensitivity + setBgPosition({ x, y }); + }; + + window.addEventListener('mousemove', handleMouseMove); + + return () => { + window.removeEventListener('mousemove', handleMouseMove); + }; + }, []); + + return ( +
+ {/* */} +
+

$ man statusCode0

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* + */} +
+

GLIMPSES OF

+

STATUS

+

CODE0

+
+
+
+
+ ); +}; + +export default StatusCode0;