From 4c7a01a69d22382fb7f14b51fa2caef87a632850 Mon Sep 17 00:00:00 2001 From: Bryan Khor Date: Sun, 24 Nov 2024 21:06:50 -0800 Subject: [PATCH] Added new feature (Slideshow for inspirational chef quotes) --- .firebase/hosting.YnVpbGQ.cache | 22 ++++---- src/components/chefQuotes.css | 23 ++++++++ src/components/chefQuotes.jsx | 87 +++++++++++++++++++++++++++++++ src/components/chefQuotesCard.css | 70 +++++++++++++++++++++++++ src/components/chefQuotesCard.jsx | 13 +++++ src/pages/my-recipes/index.jsx | 2 + src/pages/recipes/index.jsx | 2 + 7 files changed, 208 insertions(+), 11 deletions(-) create mode 100644 src/components/chefQuotes.css create mode 100644 src/components/chefQuotes.jsx create mode 100644 src/components/chefQuotesCard.css create mode 100644 src/components/chefQuotesCard.jsx diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache index 08842ad..578062b 100644 --- a/.firebase/hosting.YnVpbGQ.cache +++ b/.firebase/hosting.YnVpbGQ.cache @@ -5,14 +5,14 @@ logo512.png,1731212379472,212b102aa09e51b3b3e06647e81f7801a61333e171f6582e812437 logo192.png,1731212379364,79e2b749561016bc8af300ea19f48347ceed3cb1a54f48ae456172eca45e08f0 favicon.ico,1731212377518,27edce7be5922cf0bef7d4136f69b5bfbdd5bf8c13c7b026f71187d41a00aa7d 404.html,1732137662854,762bf484ba67404bd1a3b181546ea28d60dfddf18e9dd4795d8d25bcf3c1a890 -index.html,1732301683847,3323a2c677d315f5ce3aa10f8e4f8c3a6aa5f6d0d55abdb846e0e9995d0bc80e -static/js/main.19b5b0c4.js.LICENSE.txt,1732301683863,c65fc35201c941992e9eafa419204cb464665f9b55456cacb63984e17cd81351 -static/media/google-icon.c920552d98e3ca0c9df5.webp,1732301683863,5d10e8f1b91339b5922ca21a6eb65c23e8c5508d78342dbc7c25a893a983c16f -asset-manifest.json,1732301683847,a4c61ae7c2a762e2b2e06150dba6ced74eaded1f5abf77af2ab189727107b083 -static/js/453.e120f09d.chunk.js,1732301683863,b835c0a01e69db4978d2421ec616111e38f1c5ca2a7626659d66545c61072f2a -static/js/453.e120f09d.chunk.js.map,1732301683847,bf336902b329b63f00548cab95d8a810de93c00b7833f9a9f9f951adba94deb3 -static/css/main.2a6c1c07.css,1732301683863,e010349ba943ec84e9c35ee036d557332406b02f42bc3f6366be3468acaac456 -static/css/main.2a6c1c07.css.map,1732301683863,80d077c1c9603f3220de9f1ef848a09cb1517de151ddcdb3648d1430fbf5ce63 -static/media/onlinerecipebackground.f304ebe8c62e40b071d8.jpg,1732301683863,2ada5911bbcc257b7c0cb57ff1512c2365ef2223f9a022c41a38bd7cbaa23c3f -static/js/main.19b5b0c4.js,1732301683863,cea40210b646793ae937ed11f255c24364387addf9262c68ea41d17c5ecad3e5 -static/js/main.19b5b0c4.js.map,1732301683863,4020c702d7424af40987619f36a7d9c34755908c28df0f85f8b9d41f7628431b +index.html,1732485861090,d88cb46069ac53c2b5a56124540acca80cdd1a7c6e86f230ffaf8720ebb7098e +static/media/google-icon.c920552d98e3ca0c9df5.webp,1732485861100,5d10e8f1b91339b5922ca21a6eb65c23e8c5508d78342dbc7c25a893a983c16f +asset-manifest.json,1732485861090,9f41b17824e8c73aeb9da21d6dcf5a74a790c478ecdf8e0c558a9ac023c099bf +static/js/main.4f9477e8.js.LICENSE.txt,1732485861101,c65fc35201c941992e9eafa419204cb464665f9b55456cacb63984e17cd81351 +static/js/453.e120f09d.chunk.js,1732485861101,b835c0a01e69db4978d2421ec616111e38f1c5ca2a7626659d66545c61072f2a +static/js/453.e120f09d.chunk.js.map,1732485861101,bf336902b329b63f00548cab95d8a810de93c00b7833f9a9f9f951adba94deb3 +static/css/main.f5cf8ac9.css,1732485861101,4bb1be1b1c85bcab7a947ed64720dec1b567ff40d568f575706c6fcd9b8d2053 +static/css/main.f5cf8ac9.css.map,1732485861101,ac3219b664499451b6a92ffe049b04cdc76d44c44d2a065a9f1aa63ebc603bfa +static/media/onlinerecipebackground.f304ebe8c62e40b071d8.jpg,1732485861100,2ada5911bbcc257b7c0cb57ff1512c2365ef2223f9a022c41a38bd7cbaa23c3f +static/js/main.4f9477e8.js,1732485861101,8268e194b60f2b3a08697c84aa9b02a509849bbd4735598959975f50b0ee5fff +static/js/main.4f9477e8.js.map,1732485861103,ce81b004f9dfa640c34134240f43eab55af1d7abb75ade110342825436bb0eb7 diff --git a/src/components/chefQuotes.css b/src/components/chefQuotes.css new file mode 100644 index 0000000..8132227 --- /dev/null +++ b/src/components/chefQuotes.css @@ -0,0 +1,23 @@ +.chef-quotes { + margin: 5rem; + padding-bottom: 2rem; + font-family: Arial, sans-serif; + border: 2rem solid #d00000; +} + +.chef-quotes-title { + color: #d00000; + font-family: "Kavoon", sans-serif; + font-weight: 400; + text-align: center; + font-size: 2em; + margin-bottom: 20px; +} + +.chef-quotes-container { + position: relative; + width: 100%; + max-width: 600px; + margin: 0 auto; + text-align: center; +} diff --git a/src/components/chefQuotes.jsx b/src/components/chefQuotes.jsx new file mode 100644 index 0000000..fc6fc1a --- /dev/null +++ b/src/components/chefQuotes.jsx @@ -0,0 +1,87 @@ +import ChefQuotesCard from "./chefQuotesCard"; +import { useEffect, useState } from "react"; +import "./chefQuotes.css"; + +export default function ChefQuotes() { + const quotes = [ + { + text: "Cooking is like love. It should be entered into with abandon or not at all.", + author: "Harriet Van Horne", + authorImage: + "https://c8.alamy.com/comp/HD7010/whats-the-story-panelist-and-newspaper-columnist-harriet-van-horne-HD7010.jpg", + }, + { + text: "Cooking is a bit like cinema. It's the emotion that counts.", + author: "Anne-Sophie Pic", + authorImage: + "https://www.swissdeluxehotels.com/media/wj2clvss/swiss-deluxe-hotels-stories-summer-2021-chefs-portrait-anne-sophie-pic-07-asp-officielle-2016_credit-anne-emmanuelle-thion_ecirgb.jpg?rxy=0.4974937343358396,0.44657860239655295&width=502&height=670&format=webp&v=1d9663fef5c80d0", + }, + { + text: "Food is art, and food is love. And we should show love and appreciation for those who cook it by eating it with relish.", + author: "Mark Bittman", + authorImage: + "https://upload.wikimedia.org/wikipedia/commons/a/a9/Mark_Bittman_2017.jpg", + }, + { + text: "Eating is so intimate. It’s very sensual. When you invite someone to sit at your table and you want to cook for them, you’re inviting a person into your life.", + author: "Maya Angelou", + authorImage: + "https://www.victoryforwomen.org/sites/default/files/share_bundle/Maya%20Angelou.jpg", + }, + { + text: "Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.", + author: "Guy Fieri", + authorImage: + "https://food.fnr.sndimg.com/content/dam/images/food/editorial/talent/guy-fieri/FN-TalentAvatar-Guy-Fieri-colorblock.jpg.rend.hgtvcom.616.616.suffix/1531174403377.jpeg", + }, + { + text: "The only real stumbling block is fear of failure. In cooking, you’ve got to have a what-the-hell attitude.", + author: "Julia Child", + authorImage: + "https://hips.hearstapps.com/hmg-prod/images/gettyimages-82645345.jpg", + }, + { + text: "If you want to become a great chef, you have to work with great chefs. And that's exactly what I did.", + author: "Gordon Ramsay", + authorImage: + "https://pbs.twimg.com/profile_images/1448696882746695683/Jp2_LEBL_400x400.jpg", + }, + { + text: "To me, there's no great chef without a great team.", + author: "Daniel Boulud", + authorImage: + "https://americanpistachios.org/sites/default/files/pictures/2021-09/Daniel-Boulud-500x500.jpg", + }, + { + text: "One man’s trash is another man’s treasure, and the by-product from one food can be perfect for making another.", + author: "Yotam Ottolenghi", + authorImage: + "https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Yotam_Ottolenghi.jpg/1200px-Yotam_Ottolenghi.jpg", + }, + ]; + + const [currentQuoteIndex, setCurrentQuoteIndex] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setCurrentQuoteIndex((prevIndex) => (prevIndex + 1) % quotes.length); + }, 8000); // Change quote every 8 seconds + + return () => clearInterval(interval); // Cleanup interval on component unmount + }, [quotes.length]); + + return ( +
+

+ Flavors of Wisdom: Chef Quotes to Inspire +

+
+ +
+
+ ); +} diff --git a/src/components/chefQuotesCard.css b/src/components/chefQuotesCard.css new file mode 100644 index 0000000..eb19882 --- /dev/null +++ b/src/components/chefQuotesCard.css @@ -0,0 +1,70 @@ +.chef-quotes-card { + background-color: #d7ffb9; + border: 1px solid #ddd; + border-radius: 8px; + padding: 15px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; + opacity: 0; + animation: fade-in-out 8s ease-in-out infinite; + font-family: "Anonymous Pro", monospace; +} + +@keyframes fade-in-out { + 0% { + opacity: 0; + } + 20% { + opacity: 1; /* Fully visible */ + } + 80% { + opacity: 1; /* Stay fully visible */ + } + 100% { + opacity: 0; /* Fade out */ + } +} + +.chef-quotes-card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); +} + +.chef-quotes-text { + font-size: 1.2em; + margin-bottom: 15px; + color: #333; +} + +.chef-quotes-author { + font-weight: bold; + font-size: 1em; + margin: 0; +} + +.chef-quotes-card img { + width: 50px; + height: 50px; + border-radius: 50%; + margin-left: 10px; +} + +.chef-quotes-author-container { + display: flex; + align-items: center; + justify-content: center; + margin-top: 10px; +} + +@media (max-width: 768px) { + .chef-quotes-container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 480px) { + .chef-quotes-container { + grid-template-columns: 1fr; + } +} diff --git a/src/components/chefQuotesCard.jsx b/src/components/chefQuotesCard.jsx new file mode 100644 index 0000000..9421c46 --- /dev/null +++ b/src/components/chefQuotesCard.jsx @@ -0,0 +1,13 @@ +import "./chefQuotesCard.css"; + +export default function ChefQuotesCard(props) { + return ( +
+ {props.text} +
+

- {props.author}

+ +
+
+ ); +} diff --git a/src/pages/my-recipes/index.jsx b/src/pages/my-recipes/index.jsx index b757f34..55a6ca9 100644 --- a/src/pages/my-recipes/index.jsx +++ b/src/pages/my-recipes/index.jsx @@ -7,6 +7,7 @@ import RecipeCard from "../../components/recipeCard"; import RecipeModal from "../../components/recipeModal"; import SearchBar from "../../components/searchBar"; import CuisineFilter from "../../components/cuisineFilter"; +import ChefQuotes from "../../components/chefQuotes"; import Footer from "../../components/footer"; import "./styles.css"; @@ -99,6 +100,7 @@ export default function MyRecipes() { {selectedRecipe && ( )} +