Merge pull request #203 from mohangolakoti/ReadMore

Feature Added : Implemented Responsive "Read More" Button with Dynamic Project Details #181

src/App.js

@@ -8,10 +8,14 @@ import BlogPage from "./Components/footer_section/BlogPage/BlogPage"
 import FAQPage from "./Components/footer_section/FAQPage/FAQPage";
 import Services from "./Components/footer_section/services/Services";
 import ContactUs from "./Components/footer_section/ContactUs/contact_us";
+
+import Readmore from "./Components/Readmore";
+
 import Pricing from "./Components/footer_section/Pricing/pricing";
 import MyProjects from "./Components/menu_section/my_projects/MyProjects";
 import NewProject from "./Components/menu_section/new_project/NewProject";
 import Error from "./Components/404_page/Error";
+
 function App() {
   return (
     <Router>
@@ -26,9 +30,13 @@ function App() {
           <Route path="/faq" element={<FAQPage />} /> 
           <Route path="/services" element={<Services />} />
           <Route path="/contacts" element={<ContactUs />} />
+
+          <Route path="/readmore/:id" element={<Readmore/>}/>
+
           <Route path="/pricing" element={<Pricing />} />
           <Route path="/projects" element={<MyProjects />} />
           <Route path="/new/project" element={<NewProject />} />
+
         </Routes>
         <Footer />
       </div>

src/Components/CardMain.js

@@ -1,8 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { BsFillHeartFill } from "react-icons/bs";
+import { Link } from "react-router-dom";
+import { features } from "./projects";
 
 function CardMain({ imgSrc, title, hearts }) {
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(new Array(features.length).fill(false));
+
   let hideTimeout;
 
   useEffect(() => {
@@ -11,25 +14,33 @@ function CardMain({ imgSrc, title, hearts }) {
     };
   }, []);
 
-  const handleMouseOver = () => {
+  const handleMouseOver = (index) => {
     clearTimeout(hideTimeout);
-    setIsVisible(true);
+    setIsVisible((prevIsVisible) => {
+      prevIsVisible[index] = true;
+      return [...prevIsVisible];
+    });
   };
-
-  const handleMouseOut = () => {
+  
+  const handleMouseOut = (index) => {
     hideTimeout = setTimeout(() => {
-      setIsVisible(false);
+      setIsVisible((prevIsVisible) => {
+        prevIsVisible[index] = false;
+        return [...prevIsVisible];
+      });
     }, 200);
   };
 
   return (
-    <div className="card_main">
-      <img src={imgSrc} alt="" className="card_main_img" title={title} />
+    <div className="card">
+    { features.map((project,index)=>
+    <div className="card_main" key={index}>
+      <img src={project.img} alt="" className="card_main_img" title={project.title} />
       <div className="card_main_name">
-        <h2>{title}</h2>
+        <h2>{project.title}</h2>
         <div className="card_main_icon">
           <i>
-            <BsFillHeartFill /> <span>{hearts}</span>
+            <BsFillHeartFill /> <span>{project.hearts}</span>
           </i>
         </div>
       </div>
@@ -50,27 +61,27 @@ function CardMain({ imgSrc, title, hearts }) {
         <div className="nameAuthor">
           <p>By : &nbsp; </p>
           <p
-            id="author_name"
-            onMouseOver={handleMouseOver}
-            onMouseOut={handleMouseOut}
-          >
+        id="author_name"
+        onMouseOver={() => handleMouseOver(index)}
+        onMouseOut={() => handleMouseOut(index)}
+      >
             Abc
           </p>
         </div>
       </div>
       <div className="card_main_button">
-        <a href="#" className="button btn">
+        <Link to={`/readmore/${project.id}`} className="button btn">
           Read More
-        </a>
-        <a href="#" className="button2 btn">
+        </Link>
+        <a href="#" className="button2 btn">  
           Source Code
         </a>
       </div>
       <div
-        className={`contBox ${isVisible ? "visible" : "hidden"}`}
-        onMouseOver={handleMouseOver}
-        onMouseOut={handleMouseOut}
-      >
+      className={`contBox ${isVisible[index]? "visible" : "hidden"}`}
+      onMouseOver={() => handleMouseOver(index)}
+      onMouseOut={() => handleMouseOut(index)}
+    >
         <div className="heading">
           <div className="dp"></div>
           <div className="details1">
@@ -90,7 +101,9 @@ function CardMain({ imgSrc, title, hearts }) {
           <button>View Profile</button>
         </div>
       </div>
-    </div>
+      </div>
+  )}
+  </div>
   );
 }
 

src/Components/MainContainer.css

@@ -106,6 +106,10 @@
   align-items: center;
   flex-wrap: wrap;
 }
+.card{  
+  display: flex;
+  flex-wrap: wrap;
+}
 .card_main {
   height: 365px;
 }

src/Components/MainContainer.js

@@ -1,11 +1,11 @@
 import React, { useRef, useState } from "react";
 import DefaultBanner from "../img/1.jpg";
-import Card1 from "../img/card1.jpg";
+/* import Card1 from "../img/card1.jpg";
 import Card2 from "../img/card2.jpg";
 import Card3 from "../img/card3.jpg";
 import Card4 from "../img/card4.jpg";
 import Card5 from "../img/card5.jpg";
-import Card6 from "../img/card6.jpg";
+import Card6 from "../img/card6.jpg"; */
 import CardMain from "./CardMain";
 import "./MainContainer.css";
 import MainRightBottomCard from "./MainRightBottomCard";
@@ -83,12 +83,13 @@ function MainContainer() {
           </div>
 
           <main className="fromBottom">
-            <CardMain imgSrc={Card1} title={"StockIT"} hearts={"83"} />
+            <CardMain/>
+            {/* <CardMain imgSrc={Card1} title={"StockIT"} hearts={"83"} />
             <CardMain imgSrc={Card2} title={"TakeNote"} hearts={"65"} />
             <CardMain imgSrc={Card3} title={"TaRct"} hearts={"32"} />
             <CardMain imgSrc={Card4} title={"To Do"} hearts={"51"} />
             <CardMain imgSrc={Card5} title={"ArchiTect"} hearts={"47"} />
-            <CardMain imgSrc={Card6} title={"WeatherLy"} hearts={"77"} />
+            <CardMain imgSrc={Card6} title={"WeatherLy"} hearts={"77"} /> */}
           </main>
         </div>
       </div>

src/Components/Readmore.css

@@ -0,0 +1,94 @@
+.readmore{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 30px 100px;
+    font-family: sans-serif;
+}
+.readmore .arrow{
+    position: fixed;
+    top: 0;
+    left: 0;
+    padding: 20px;
+    width: 90px;
+}
+.readmore .image{
+    display: flex;
+    justify-content: center;
+}
+.readmore img{
+    width: 100%;
+    border-radius: 8px;
+}
+.head{
+    padding-top: 40px;
+    color: #0db5cb;
+    font-weight: bold;
+    font-size: large;
+    line-height: 30px;
+}
+.upload{
+    color: #e9e9ec;
+    text-transform: uppercase;
+}
+.title{  
+    color: #e9e9ec;
+    text-align: center;
+    font-weight: bolder;
+    font-size: 2rem;
+    padding: 10px;
+    text-transform: uppercase;
+}
+.description{
+    font-size: large;
+    font-weight: bold;
+    color: #e9e9ec;
+    text-transform: uppercase;
+}
+.text{
+    padding-top: 40px;
+}
+.dtex{
+    padding-top: 15px;
+    color: #e9e9ec;
+    text-transform: none;
+    line-height: 27px;
+    font-size: large;
+    word-spacing: 2px;
+    font-weight: normal;
+}
+.developer{
+    color: #0db5cb;
+    padding-top: 30px;
+    font-weight: bold;
+    font-size: large;
+}
+.abc{
+    padding-top: 10px;
+    font-size: large;
+    display: flex;
+}
+.abc .dp{
+    align-items: center;
+    justify-content: center;
+}
+.readmore .btn button{
+    background-color: #0db5cb;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+.readmore .occupation{
+    color: #e9e9ec;
+}
+
+@media (max-width:786px) {
+    .readmore{
+        padding: 30px 50px;
+    }
+}
+@media (max-width:425px) {
+    .readmore{
+        padding: 30px;
+    }
+}

src/Components/Readmore.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { features } from './projects'
+import './Readmore.css'
+import { Link } from 'react-router-dom'
+import Arrow from '../Components/projects/arrow.png'
+
+const Readmore = () => {
+    const { id } = useParams();
+    const feature = features.find((item) => item.id === parseInt(id));
+  return (
+    <div className='readmore'>
+      <Link className='arrow' to="/"><img src={Arrow} alt="" /></Link>
+      <div className="title">{feature.title}</div>
+      <div className="image">
+      <img src={feature.img} height={480} alt={feature.title} />
+      </div>
+
+      <div className="head">
+        <span className='upload'>Uploaded On:</span><br />
+        dd:mm:yy
+      </div>
+      <div className="head">
+        <span className='upload'>By:</span><br />
+        <div className='abc'>
+          <div className="dp"></div>
+          <div className="details1">
+            <p className="name">@Abc</p>
+            <p className="occupation">Web Designer, Video Editor</p>
+          </div>
+        </div>
+          <div className="dtex">
+            I'm a versatile professional skilled in web development and video
+            editing, creating seamless online experiences and high-quality
+            multimedia content.
+          </div>
+      </div>
+      <div className="text">
+        <span className='description'>Description:</span><br />
+        <div className='dtex'>{feature.text}</div>
+      </div>
+      <div className="developer">
+        Developer-X
+      </div>
+
+    </div>
+  )
+}
+
+export default Readmore