diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index fd7dac7c..565bc01b 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -161,7 +161,7 @@ - + Tyler Celestin - + + + + + + +
+ Negar Nasiri + + + + diff --git a/ROADMAP.md b/ROADMAP.md index ce1a1c92..dc51a96d 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -10,18 +10,18 @@ The goals { return ( <>
-
+ +
-
+
diff --git a/src/Components/Header/Header.jsx b/src/Components/Header/Header.jsx index ea93efd1..c1ea5ecf 100644 --- a/src/Components/Header/Header.jsx +++ b/src/Components/Header/Header.jsx @@ -49,7 +49,7 @@ const Header = () => { {" "}

- + { +const MasonryBox = ({ + wallSrc, + userProf, + userName, + userJob, + githubUrl, + userText, +}) => { const handleUserProfClick = () => { if (githubUrl) { - window.open(githubUrl, '_blank'); + window.open(githubUrl, "_blank"); } }; - + const [randomColor, setRandomColor] = useState(); const [isEnlarged, setIsEnlarged] = useState(false); const [isUserTextVisible, setIsUserTextVisible] = useState(true); const [isTextVisible, setIsTextVisible] = useState(false); @@ -22,38 +28,95 @@ const MasonryBox = ({ wallSrc, userProf, userName, userJob, githubUrl, userText const toggleText = () => { setIsTextVisible(!isTextVisible); }; + useEffect(() => { + setRandomColor(() => { + const minBrightness = 80; + + // Generate random RGB values with a minimum brightness + let red, green, blue; + do { + red = Math.floor(Math.random() * 256); + green = Math.floor(Math.random() * 256); + blue = Math.floor(Math.random() * 256); + } while (red + green + blue < minBrightness * 3); + // Convert RGB values to a hexadecimal color + const color = `#${red.toString(16)}${green.toString(16)}${blue.toString( + 16 + )}`; + + return color; + }); + }, [isEnlarged]); const presetText = ( - Before I Die
- 💭 🌎 🎨 🎓 ❤️ 🌲 🏠 ✈️ 🏆
💵 🤝 🌃 📚 🎸 🚴 🌟 🏰 🚀 + Before I Die...
+ {/* 💭 🌎 🎨 🎓 ❤️ 🌲 🏠 ✈️ 🏆
💵 🤝 🌃 📚 🎸 🚴 🌟 🏰 🚀 */}
); return (
- + {isEnlarged && ( -
- -
{presetText} {userText}
{/* Add preset text here */} +
+
+ +
+

{presetText}

+

{userText}

+
{" "} +
+ + {/* Add preset text here */} {isTextVisible && (
-

{presetText} {userText}

{/* Add preset text here */} +

+ {presetText} {userText} +

{" "} + {/* Add preset text here */}
)}
)} {isUserTextVisible && (
-
+
-
+

{userName}

{/* Add preset text here */}

{userJob}

diff --git a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css index 79b17e4b..2900e8d5 100644 --- a/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css +++ b/src/Components/MasonryLayout/MasonryBox/MasonryBox.module.css @@ -2,12 +2,15 @@ @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@500&display=swap"); @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@1,700&display=swap'); + + .my-masonry { position: relative; margin-bottom: 30px; display: flex; border-radius: 10px; overflow: hidden; + } .my-masonry img:hover { @@ -25,28 +28,58 @@ justify-content: center; align-items: center; z-index: 999; + padding: 0 30px; +} + +.enlargedPhotoContainer { + display: flex; + background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); + width: 80%; + height: 70%; + border-radius: 10px; } .enlargedPhotoImage { - max-width: 50%; - max-height: 50%; +width: 50%; +object-fit: cover; +border-radius: 10px 0px 0px 10px + /* max-height: 50%; */ } .enlargedPhotoText { - color: black; + overflow-y: scroll; + color: azure; font-size: 18px; font-family: "Fira Code", monospace; padding: 20px; - background: linear-gradient(to right, #006dff, rgb(254, 234, 58)); + /* background: url(https://raw.github.com/mmoustafa/Chalkboard/master/img/bg.png); */ max-width: 50%; width: auto; /* adjust the width as needed */ - margin-left: 50px; + margin-left: 0px; /* adjust the margin as needed */ - text-align: center; + /* text-align: center; */ /* add this property to center the text */ + scrollbar-width: thin; + scrollbar-color: #888 #2f2e2e; +} +.enlargedPhotoText::-webkit-scrollbar { + width: 5px; } +.enlargedPhotoText::-webkit-scrollbar-thumb { + background-color: #888; +} + +.enlargedPhotoText::-webkit-scrollbar-thumb:hover { + background-color: #555; +} + +.enlargedPhotoText p{ + line-height: normal; + max-height: 70%; + font-family: "Chalk_3", sans-serif; +} @media (max-width: 640px) { /* When screen & mobile size less than 640px */ .enlargedPhoto { @@ -54,16 +87,29 @@ flex-direction: column; } + .enlargedPhotoContainer{ + display: flex; + flex-direction: column; + width: 100%; + height: 90%; + } .enlargedPhotoImage { width: auto; - height: auto; + height: 50%; + border-radius: 10px 10px 0 0; } .enlargedPhotoText { margin: 0; max-width: 100%; + } -} + + } + + + + .enlargedPhotoTextBox { position: absolute; @@ -160,12 +206,14 @@ .my-masnry-user-prof-desc { font-size: 1rem; } + } .boldText { + color: azure; font-weight: bolder; - font-size: 25px; - font-family: "EB Garamond", serif; + font-size: 30px; + font-family: "Chalk_3", sans-serif; /* Adjust the font size as desired */ text-align: center; } diff --git a/src/Components/MasonryLayout/MasonryLayout.jsx b/src/Components/MasonryLayout/MasonryLayout.jsx index 44765b86..f07934d8 100644 --- a/src/Components/MasonryLayout/MasonryLayout.jsx +++ b/src/Components/MasonryLayout/MasonryLayout.jsx @@ -1,18 +1,18 @@ // import styles of this component -import styles from "./MasonryLayout.module.css" +import styles from "./MasonryLayout.module.css"; // import other react pkg to use -import Masonry from "react-masonry-css" +import Masonry from "react-masonry-css"; // import other component to use -import MasonryBox from './MasonryBox/MasonryBox'; +import MasonryBox from "./MasonryBox/MasonryBox"; // MasonryLayout Component const MasonryLayout = ({ images }) => { const breakpointColumnsObj = { default: 3, 1100: 2, - 700: 1 + 700: 1, }; // Shuffle the images array @@ -24,7 +24,7 @@ const MasonryLayout = ({ images }) => { className={styles["my-masonry-grid"]} columnClassName={styles["my-masonry-grid_column"]} > - {shuffledImages.map(item => ( + {shuffledImages.map((item) => ( { /> ))} - ) -} + ); +}; -export default MasonryLayout +export default MasonryLayout; diff --git a/src/Components/MasonryLayout/MasonryLayout.module.css b/src/Components/MasonryLayout/MasonryLayout.module.css index 8421aa16..6683bf51 100644 --- a/src/Components/MasonryLayout/MasonryLayout.module.css +++ b/src/Components/MasonryLayout/MasonryLayout.module.css @@ -2,9 +2,12 @@ display: -webkit-box; display: -ms-flexbox; display: flex; - margin-left: -30px; + /* margin-left: -30px; */ width: auto; } .my-masonry-grid_column { padding-left: 30px; } +.my-masonry-grid_column:first-child { + padding-left: 0; + } \ No newline at end of file diff --git a/src/Jsons/Contributors.json b/src/Jsons/Contributors.json index 442eb24d..c07d3c99 100644 --- a/src/Jsons/Contributors.json +++ b/src/Jsons/Contributors.json @@ -1,5 +1,5 @@ [ -{ + { "id": "Alexander Clemens", "image": "img/bid_image/Alexander_Clemens.jpg", "avatar": "img/avatar/Alexander_Clemens.jpg", @@ -153,12 +153,21 @@ "text": "I want to visit as many countries as possible before I die." }, { - "id":"Tyler Celestin", - "image":"img/bid_image/Tyler_Celestin.jpg", - "avatar":"img/avatar/Tyler_Celestin.jpg", - "name":"Tyler Celestin", - "location":"Brooklyn, New York, USA 🇺🇸", - "GitHub":"https://github.com/ccelest1", - "text":"I sincerely appreciate great design and aesthetics. In that same vein, I would cherish the opportunity to travel to vistas that exhibit careful and detailed architecture that is synergistic with their cultural and environmental surroundings. One of those places is, of course, Japan, which is renowned for its talented engineers and attention to green practices. One of my dreams is to work in the field of design, or potentially civil engineering if possible." - } + "id": "Tyler Celestin", + "image": "img/bid_image/Tyler_Celestin.jpg", + "avatar": "img/avatar/Tyler_Celestin.jpg", + "name": "Tyler Celestin", + "location": "Brooklyn, New York, USA 🇺🇸", + "GitHub": "https://github.com/ccelest1", + "text": "I sincerely appreciate great design and aesthetics. In that same vein, I would cherish the opportunity to travel to vistas that exhibit careful and detailed architecture that is synergistic with their cultural and environmental surroundings. One of those places is, of course, Japan, which is renowned for its talented engineers and attention to green practices. One of my dreams is to work in the field of design, or potentially civil engineering if possible." + }, + { + "id": "Negar Nasiri", + "image": "img/bid_image/Negar_Nasiri.jpg", + "avatar": "img/avatar/Negar_Nasiri.jpeg", + "name": "Negar Nasiri", + "location": "Lisbon, Portugal 🇵🇹", + "GitHub": "https://github.com/negar-75", + "text": "I've always dreamed of owning my own business, generating income, creating numerous job opportunities, and leaving a significant mark on the world." + } ] diff --git a/src/fonts/Chalk/Chalk-3.ttf b/src/fonts/Chalk/Chalk-3.ttf new file mode 100644 index 00000000..24bff7f6 Binary files /dev/null and b/src/fonts/Chalk/Chalk-3.ttf differ diff --git a/src/index.css b/src/index.css index 17d31fc4..8f664df5 100644 --- a/src/index.css +++ b/src/index.css @@ -8,6 +8,13 @@ --green-white-100: #C3EFC0; } +@font-face { + + font-family: "Chalk_3"; + src: local("Chalk_3"), + url("./fonts/Chalk/Chalk-3.ttf") format("truetype"); + +} body { background: var(--dark-900); } diff --git a/src/index.js b/src/index.js index 53db037e..12cb5970 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,10 @@ -import React from 'react'; -import { createRoot } from 'react-dom/client'; -import App from './App'; -import "./index.css" +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; +import "./index.css"; + +import "./fonts/Chalk/Chalk-3.ttf"; const container = document.getElementById("root"); const root = createRoot(container); -root.render(); \ No newline at end of file +root.render();