Skip to content

Commit

Permalink
Merge pull request #711 from saketh-05/fixes2
Browse files Browse the repository at this point in the history 
Updated Projects Page
  • Loading branch information
@SUGAM-ARORA
SUGAM-ARORA authored Aug 10, 2024
2 parents da42049 + 6dd730d commit 1e87429
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 80 deletions.
40 changes: 37 additions & 3 deletions src/Components/menu_section/my_projects/MyProjects.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
}
101 changes: 24 additions & 77 deletions src/Components/menu_section/my_projects/MyProjects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,94 +2,45 @@ 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
const truncateText = (text) =>{
if (text.length <= 70) {
return text;
}
]
return text.slice(0, 70) + '...';
}

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>
Expand All @@ -101,32 +52,28 @@ 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>{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>
</div>
</div>

</div>
)
);
}
3 changes: 3 additions & 0 deletions src/Components/menu_section/new_project/NewProject.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,4 +118,7 @@ span {
transform: scale(1);
opacity: 1;
}
}
.top{
margin-left: 60px;
}

0 comments on commit 1e87429

Please sign in to comment.