From 9c57767b6131610f3872a49ff5865ec3809f9ce0 Mon Sep 17 00:00:00 2001
From: Ayushmaanagarwal1121 <agarwalayushmaan88@gmail.com>
Date: Fri, 9 Aug 2024 20:15:30 +0530
Subject: [PATCH 1/3] gap

---
 src/Components/Footer.css       | 1 -
 src/Components/TopContainer.css | 3 ++-
 src/Components/TopContainer.js  | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Components/Footer.css b/src/Components/Footer.css
index 2ead0f04..df2847e0 100644
--- a/src/Components/Footer.css
+++ b/src/Components/Footer.css
@@ -157,7 +157,6 @@
   font-size: 18px;
   border-radius: 25px;
   transition: ease-in-out 500ms;
-  margin-right: 1rem;
   text-decoration: none !important;
   width: 220px;
   text-align: center;
diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
index 979d8be5..ce345a8c 100644
--- a/src/Components/TopContainer.css
+++ b/src/Components/TopContainer.css
@@ -29,7 +29,7 @@
 
 /* Individual nav items */
 .largeview .nav-item {
-  margin-right: 10px;
+  margin-right: 20px;
 }
 
 /* Nav item links */
@@ -38,6 +38,7 @@
   text-decoration: none;
   transition: color 0.3s ease, font-size 0.3s ease;
   display: flex;
+  gap: 5px;
   align-items: center; /* Center items vertically */
 }
 
diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
index 473fe4a3..d2516437 100644
--- a/src/Components/TopContainer.js
+++ b/src/Components/TopContainer.js
@@ -108,7 +108,7 @@ function TopContainer() {
   return (
     <div className="topContainer">
       <div className="navbar">
-        <div className="mobview ">
+        <div className="mobview " style={{width:"900px"}}>
           <div className="bars" onClick={toggleMenu}>{mobMenu?<FontAwesomeIcon icon={faTimes}/>:<FontAwesomeIcon icon={faBars} />}</div>
           <div id="shortview" className={mobMenu ? 'show' : ''}>
             <ul className={`${mobMenu ? "open" : "largeview"}`}>
@@ -125,7 +125,7 @@ function TopContainer() {
           </div>
         </div>
 
-        <div className="inputBox o2">
+        <div className="inputBox o2" style={{width:"252px "}}>
           <div className="input-div">
             <i style={{ cursor: isMobile ? 'pointer' : 'default' }} onClick={searchbtnclick} className="searchbtn">
               <BiSearchAlt />
@@ -156,7 +156,7 @@ function TopContainer() {
 
         <div className="profileContainer o3">
           <a href="/pricing">
-            <button className="go-pro-btn">Go Pro</button>
+            <button className="go-pro-btn" style={{marginRight:"0px"}}>Go Pro</button>
           </a>
 
           <div className="notification-container" style={{ gap: "5px" }} ref={dropdownRef}>

From e9793e62ed83ac0faa9365eadb51dd07e08618d8 Mon Sep 17 00:00:00 2001
From: Saketh Surya <raisingsurya05@gmail.com>
Date: Fri, 9 Aug 2024 23:32:44 +0530
Subject: [PATCH 2/3] Updated Projects Page

Made few changes to several files and Improved look and feel of Projects page and also projects are correctly integrated in the page.
---
 .../menu_section/my_projects/MyProjects.css   | 40 +++++++-
 .../menu_section/my_projects/MyProjects.js    | 94 ++++---------------
 .../menu_section/new_project/NewProject.css   |  3 +
 3 files changed, 59 insertions(+), 78 deletions(-)

diff --git a/src/Components/menu_section/my_projects/MyProjects.css b/src/Components/menu_section/my_projects/MyProjects.css
index dd2b1c60..b99a2c3c 100644
--- a/src/Components/menu_section/my_projects/MyProjects.css
+++ b/src/Components/menu_section/my_projects/MyProjects.css
@@ -20,10 +20,11 @@ button {
    gap: 20px;
    margin: 20px 0;
 }
-.top h1 {
-    margin-left: 70px;
+.top a {
+    font-size: 30px;
+    margin-left: 20px;
+    margin-right: 40px;
 }
-
 .project-card {
     /* background-color: rgb(23, 23, 83); */
     color: white;
@@ -86,4 +87,37 @@ color: gray;
 .light .project-card h2 , .light .project-card p{
     background: #F3CFC6 !important;
     color: #000000 !important;
+}
+.home-icon{
+    margin-left: 5%;
+    cursor: pointer;  
+}
+.nav{
+    display: flex;
+    justify-content: space-around;
+}
+.top a:hover{
+    background-color: rgb(1, 1, 147);
+    border-radius: 10px;
+}
+.main-title{
+    text-decoration: underline;
+}
+
+@media screen and (max-width:560px) {
+    .nav{
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;       
+    }
+    .top{
+        flex-direction: column;
+    }
+    .home-icon{
+        margin-left: 15%;
+    }
+    .top a{
+        font-size: 20px;
+    }
 }
\ No newline at end of file
diff --git a/src/Components/menu_section/my_projects/MyProjects.js b/src/Components/menu_section/my_projects/MyProjects.js
index 7fad50c3..1a5620ed 100644
--- a/src/Components/menu_section/my_projects/MyProjects.js
+++ b/src/Components/menu_section/my_projects/MyProjects.js
@@ -2,94 +2,39 @@ import {FaPlus} from 'react-icons/fa';
 import Menu from '../../Menu';
 import './MyProjects.css'
 import {Link} from 'react-router-dom';
-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 {BsHeartFill} from 'react-icons/bs';
+import {features} from '../../projects/index.js';
+import { BsHeartFill } from 'react-icons/bs';
 import homeIcon from '../../../img/homeicon.png';
 import {useContext} from "react";
 import {ThemeContext} from "../../../App";
 
 
-const SampleData = [
-    {
-        id: 1,
-        name: "ToDo app",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card1
-    },
-    {
-        id: 2,
-        name: "Weather app",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card2
-    },
-    {
-        id: 3,
-        name: "Expense tracker",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card3
-    },
-    {
-        id: 4,
-        name: "E commerce website",
-        noOfHearts: "10",
-        github: "/",
-        description: "This is an awesome project. I have used bla blaaaa. This is an awesome project. I have used bla blaaaa",
-        skills: ['HTML', 'CSS', 'JavaScript'],
-        uploadedDate: '2023-10-15',
-        image: Card4
-    }
-]
-
 function MyProjects({showMenu = true}) {
-
     const {theme} = useContext(ThemeContext)
-
     return (
         <div className={`container my-projects-wrapper ${theme}`}>
             {showMenu && <Menu/>}
             <div className="content">
+                <div className='nav'>
                 <div className='top fromTop'>
-                    <h1>My Projects</h1>
-                    <Link to='/new/project'>
-                        <button><FaPlus size={15}/> New Project</button>
-                    </Link>
+                    <h2 className='main-title'><a href='#'>Projects</a></h2>
+                    <h2><a href='#'>My Projects</a></h2> {/*In future, Based on User Login, data can be added here in "href"*/}
                 </div>
                 <Link to="/">
-                    <img src={homeIcon} alt="Home" className="home-icon" style={{marginLeft: '300px'}}/>
+                    <img src={homeIcon} alt="Home" className="home-icon"/>
                 </Link>
-
+                <Link to='/new/project'>
+                        <button className='button-np'><FaPlus size={15}/> New Project</button>
+                </Link>
+                </div>
                 <div className='projects-wrapper zoomIn'>
-
                     {
-                        SampleData.map(project => {
-                            return (
+                        features.map(project => {
+                            return(
                                 <MyProjectCard project={project}/>
-                            )
+                            );
                         })
                     }
-                    {
-                        SampleData.map(project => {
-                            return (
-                                <MyProjectCard project={project}/>
-                            )
-                        })
-                    }
-
                 </div>
             </div>
         </div>
@@ -101,22 +46,21 @@ export default MyProjects;
 
 function MyProjectCard({project}) {
 
-    const {theme} = useContext(ThemeContext)
+    const {theme} = useContext(ThemeContext);
 
     return (
         <div className={`project-card ${theme}`}>
-            <img src={project.image} alt={project.name}/>
+            <img src={project.img} alt={project.title}/>
             <div className='details'>
                 <div className="top">
-                    <h2>{project.name}</h2>
+                    <h2>{project.title}</h2>
                     <div className="likes">
                         <i>
-                            <BsHeartFill/> <span>{project.noOfHearts}</span>
+                            <BsHeartFill/> <span>{project.hearts}</span>
                         </i>
                     </div>
                 </div>
-                <p>{project.description.substring(0, 75)}...</p>
-                <small>{project.uploadedDate}</small>
+                <p>{project.about}</p>
                 <div className="btn-wrapper">
                     <Link to="/">
                         <button className='edit-btn'>Edit</button>
@@ -128,5 +72,5 @@ function MyProjectCard({project}) {
             </div>
 
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/src/Components/menu_section/new_project/NewProject.css b/src/Components/menu_section/new_project/NewProject.css
index 482f1db5..a845bd03 100644
--- a/src/Components/menu_section/new_project/NewProject.css
+++ b/src/Components/menu_section/new_project/NewProject.css
@@ -118,4 +118,7 @@ span {
         transform: scale(1);
         opacity: 1;
     }
+}
+.top{
+    margin-left: 60px;
 }
\ No newline at end of file

From 6dd730d49db322a777f50975fda59bae0a7e9d51 Mon Sep 17 00:00:00 2001
From: Saketh Surya <raisingsurya05@gmail.com>
Date: Sat, 10 Aug 2024 09:08:44 +0530
Subject: [PATCH 3/3] Few fixes

---
 src/Components/menu_section/my_projects/MyProjects.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Components/menu_section/my_projects/MyProjects.js b/src/Components/menu_section/my_projects/MyProjects.js
index 1a5620ed..69acd95f 100644
--- a/src/Components/menu_section/my_projects/MyProjects.js
+++ b/src/Components/menu_section/my_projects/MyProjects.js
@@ -8,6 +8,12 @@ import homeIcon from '../../../img/homeicon.png';
 import {useContext} from "react";
 import {ThemeContext} from "../../../App";
 
+const truncateText = (text) =>{
+    if (text.length <= 70) {
+        return text;
+    }
+    return text.slice(0, 70) + '...';
+} 
 
 function MyProjects({showMenu = true}) {
     const {theme} = useContext(ThemeContext)
@@ -60,11 +66,8 @@ function MyProjectCard({project}) {
                         </i>
                     </div>
                 </div>
-                <p>{project.about}</p>
+                <p>{truncateText(project.text)}</p>
                 <div className="btn-wrapper">
-                    <Link to="/">
-                        <button className='edit-btn'>Edit</button>
-                    </Link>
                     <Link to={project.github}>
                         <button className='github-btn'>GitHub</button>
                     </Link>