diff --git a/public/index.html b/public/index.html index 182c953..c77774f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,11 @@ + + + + + diff --git a/src/App.css b/src/App.css index 74b5e05..539dee3 100644 --- a/src/App.css +++ b/src/App.css @@ -22,6 +22,7 @@ justify-content: center; font-size: calc(10px + 2vmin); color: white; + position: fixed; } .App-link { @@ -36,3 +37,212 @@ transform: rotate(360deg); } } + +footer { + width: 100%; + background: black; + color: white; + text-align: center; + padding: 20px 0; + position: relative; + margin-top: auto; + display: block; + z-index: 1; +} + +/* Wooden background */ +body { + margin: 0; + padding: 0; + background: url("././images/Wood Pattern.png") no-repeat center center fixed; + background-size: cover; + font-family: Arial, sans-serif; + overflow-x: hidden; + /* min-height: 100vh; */ + height: 100%; + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + justify-content: flex-start; +} + +/* Sidebar for navigation through the articles */ +.sidebar { + position: fixed; + top: 50%; + right: 20px; + transform: translateY(-50%); + display: flex; + flex-direction: column; + align-items: center; + z-index: 2; /* sidebar should be above all paper and background */ +} + +.sidebar-circle { + /* values from figma */ + width: 16px; + height: 15px; + flex-shrink: 0; + stroke-width: 4px; + stroke: rgba(255, 255, 255, 0.70); + border-radius: 50%; + color: white; + display: flex; + justify-content: center; + align-items: center; + margin: 10px 0; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.sidebar-circle:hover { + background-color: #ffffffb3; + fill: #ffffffb3; +} + +/* Scroll container */ +.scroll-container { + display: flex; + flex-direction: column; + padding: 20px; + flex-grow: 1; + height: 100%; /* necessary for correct header and footer display */ + margin-left: auto; + margin-right: auto; + width: 100%; + overflow-y: scroll; + scroll-snap-type: y mandatory; + scroll-behavior: smooth; +} + +/* Paper for articles */ +.paper { + position: relative; + background: url("././images/Paper.png") no-repeat center center fixed; + background-size: cover; + width: 59vw; /* width set to be flexible */ + max-width: 856px; /* value from figma */ + height: auto; /* height dependant on the paper text */ + margin: 0 0; + flex-shrink: 0; + scroll-snap-align: start; + box-sizing: border-box; + margin-left: 291px; + margin-right: 291px; + padding: 40px; +} + +.paper .text-content { + color: #000; + font-family: "Courier Prime", monospace; + font-size: 18px; + padding: 78px 112px 62px 112px; + text-align: justify; + word-wrap: break-word; + z-index: 2; +} + +/* text for the papers */ +.courier-prime-regular { + font-family: "Courier Prime", serif; + font-weight: 400; + font-style: normal; +} + +.courier-prime-bold { + font-family: "Courier Prime", serif; + font-weight: 700; + font-style: normal; +} + +.courier-prime-regular-italic { + font-family: "Courier Prime", serif; + font-weight: 400; + font-style: italic; +} + +.courier-prime-bold-italic { + font-family: "Courier Prime", serif; + font-weight: 700; + font-style: italic; +} + +.folder-background { + position: absolute; + top: 30%; + left: 50%; + width: 90vw; + max-width: 1183.117px; + height: auto; + transform: translate(-50%, -50%); + z-index: -1; +} + +.coffee-background { + position: absolute; + top: 0%; + left: -15%; + /* width: 316px; + height: 316px; */ + width: 25vw; + height: 25vw; + transform: rotate(150.242deg); + flex-shrink: 0; + z-index: 1; +} + +@media (max-width: 1024px) { + .paper { + width: 60vw; + margin-left: 15vw; + margin-right: 0; + } + + .paper .text-content { + font-size: 17px; + padding: 20px 20px; + } + + .sidebar { + right: 10%; + } + + footer { + padding: 18px 0; + } + + .paper .text-content { + font-size: 14px; + padding: 10px; + } + + .folder-background { + width: 80vw; + max-width: 1000px; + } + + .coffee-background { + /* width: 20vw; + height: 20vw; */ + display: none; + } +} + +@media (max-width: 768px) { + .paper { + width: 90vw; + margin-left: 5vw; + } + + .paper .text-content { + font-size: 14px; + padding: 10px; + } + + .coffee-background { + /* width: 15vw; + height: 15vw; */ + display: none; + } +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 174fac5..b06a91e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,49 @@ import React, { useState, useEffect } from "react"; -import './App.css'; -import Header from './components/Header'; -import Footer from './components/Footer'; +import "./App.css"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import ScrollingEffect from "./components/ScrollingEffect"; function App() { - const [ data, setData ] = useState(null); - + const [data, setData] = useState(null); + useEffect(() => { - fetch("https://kerckhoff.dailybruin.com/api/packages/flatpages/pad-o-guys-24-25") - .then(res => res.json()) - .then(res => setData(res.data['article.aml'])) - }, []) + fetch("https://kerckhoff.dailybruin.com/api/packages/flatpages/pad-o-guys-24-25") + .then((res) => res.json()) + .then((res) => setData(res.data["article.aml"])) + .catch((err) => console.error("Error fetching data:", err)); + }, []); + + // hard code in the test slides + const testSlides = [ + `. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius.Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, Rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. + Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius.Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, Rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing.`, + `. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius.Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, Rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. + Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.`, + `. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius.Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, Rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. + Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.`, + `. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius.Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, Rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. + Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.`, + `. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius.Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, Rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. + Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.`, + ]; + + let slides = []; + + if (data) { + const firstArticle = data.articles?.[0] || null; + slides = firstArticle?.article_body ? firstArticle.article_body.split("\n").filter(Boolean) : []; + } + + // using test slides if API data empty + if (slides.length === 0) { + slides = testSlides; + } - return data && ( + return (
-
- Hello Daily Bruin! +
+
); diff --git a/src/components/ScrollingEffect.js b/src/components/ScrollingEffect.js new file mode 100644 index 0000000..1a4d664 --- /dev/null +++ b/src/components/ScrollingEffect.js @@ -0,0 +1,116 @@ +import React, { useRef } from "react"; +import "../App.css"; + +function ScrollingEffect({ slides }) { + const papersRef = useRef([]); // for each slide / paper + + // for sidebar navigation + const handleScroll = (index) => { + if (papersRef.current[index]) { + papersRef.current[index].scrollIntoView({ behavior: "smooth" }); + // counting the index of the paper to navigate + } + }; + + return ( +
+
+ {slides.map((_, index) => ( +
handleScroll(index)}> + {/* svg from the Figma */} + + + +
+ ))} +
+ + {/* Paper aka slide being generated */} + {slides.map((slide, index) => ( +
(papersRef.current[index] = el)}> +
+ {/* Embedded SVG for background */} + + + + + + +
+ {index === 0 && ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
)} + +
+

{slide}

+
+
+ ))} +
+ ); +} + +export default ScrollingEffect; diff --git a/src/images/Paper.png b/src/images/Paper.png new file mode 100644 index 0000000..6e2ca09 Binary files /dev/null and b/src/images/Paper.png differ diff --git a/src/images/Wood Pattern.png b/src/images/Wood Pattern.png new file mode 100644 index 0000000..fdf91c3 Binary files /dev/null and b/src/images/Wood Pattern.png differ diff --git a/src/images/wood-desk.png b/src/images/wood-desk.png new file mode 100644 index 0000000..3f36b2e Binary files /dev/null and b/src/images/wood-desk.png differ