-
Notifications
You must be signed in to change notification settings - Fork 119
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #186 from DharshiBalasubramaniyam/new-project
Add My Projects and New Project pages
- Loading branch information
Showing
6 changed files
with
542 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| .my-projects-wrapper .top { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| color: white; | ||
| } | ||
| button { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 5px; | ||
| justify-content: center; | ||
| font-size: 16px; | ||
| } | ||
| .projects-wrapper { | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: left; | ||
| flex-wrap: wrap; | ||
| gap: 20px; | ||
| margin: 20px 0; | ||
| } | ||
| .project-card { | ||
| /* background-color: rgb(23, 23, 83); */ | ||
| color: white; | ||
| flex: 1 0 300px; | ||
| max-width: 320px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| border-radius: 5px; | ||
| overflow: hidden; | ||
| box-shadow: 0 0 10px #3c395f; | ||
| transition: 0.3s ease-in-out; | ||
| } | ||
| .project-card:hover { | ||
| transform: translateY(-10px); | ||
| box-shadow: 0 0 15px #6052ff; | ||
| } | ||
| .project-card img { | ||
| width: 100%; | ||
| height: 220px; | ||
| } | ||
| .project-card .top h2{ | ||
| margin-right: auto; | ||
| } | ||
| .likes i { | ||
| display: flex; | ||
| gap: 5px; | ||
| align-items: center; | ||
| color: hotpink; | ||
| } | ||
| small { | ||
| color: gray; | ||
| } | ||
| .btn-wrapper { | ||
| display: flex; | ||
| gap: 10px; | ||
| flex-wrap: wrap; | ||
| } | ||
| .edit-btn { | ||
| background-color: blue; | ||
| } | ||
| .github-btn { | ||
| background-color: purple; | ||
| } | ||
| .edit-btn:hover { | ||
| background-color: rgb(1, 1, 213); | ||
| } | ||
| .github-btn:hover { | ||
| background-color: rgb(96, 1, 96); | ||
| } | ||
| .details { | ||
| padding: 15px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| 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 Card5 from "../../../img/card5.jpg"; | ||
| import Card6 from "../../../img/card6.jpg"; | ||
| import CardMain from '../../CardMain'; | ||
| import { BsHeartFill } from 'react-icons/bs'; | ||
|
|
||
|
|
||
| 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() { | ||
| return ( | ||
| <div className="container my-projects-wrapper"> | ||
| <Menu /> | ||
| <div className="content"> | ||
| <div className='top fromTop'> | ||
| <h1>My Projects</h1> | ||
| <Link to='/new/project'><button><FaPlus size={15} /> New Project</button></Link> | ||
| </div> | ||
| <div className='projects-wrapper zoomIn'> | ||
|
|
||
| { | ||
| SampleData.map(project => { | ||
| return ( | ||
| <MyProjectCard project={project}/> | ||
| ) | ||
| }) | ||
| } | ||
| { | ||
| SampleData.map(project => { | ||
| return ( | ||
| <MyProjectCard project={project}/> | ||
| ) | ||
| }) | ||
| } | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default MyProjects; | ||
|
|
||
|
|
||
| function MyProjectCard({ project }) { | ||
| return ( | ||
| <div className='project-card'> | ||
| <img src={project.image} alt={project.name} /> | ||
| <div className='details'> | ||
| <div className="top"> | ||
| <h2>{project.name}</h2> | ||
| <div className="likes"> | ||
| <i> | ||
| <BsHeartFill /> <span>{project.noOfHearts}</span> | ||
| </i> | ||
| </div> | ||
| </div> | ||
| <p>{project.description.substring(0, 75)}...</p> | ||
| <small>{project.uploadedDate}</small> | ||
| <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> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| * { | ||
| list-style-type: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| form { | ||
| padding: 20px 0; | ||
| width: 100%; | ||
| } | ||
| .input-box { | ||
| width: 100%; | ||
| color: white; | ||
| margin-bottom: 18px; | ||
| animation-name: fadeIn; | ||
| animation-duration: 1s; | ||
| animation-fill-mode: forwards; | ||
| animation-iteration-count: 1; | ||
| opacity: 0; | ||
| transform: translateY(10px); | ||
| transform: scale(0.5); | ||
|
|
||
| } | ||
| input, textarea { | ||
| width: 100%; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| background-color: #201d41; | ||
| border: 2px solid #201d41; | ||
| outline: none; | ||
| margin: 7px 0; | ||
| color: whitesmoke; | ||
|
|
||
| } | ||
| input:focus, textarea:focus { | ||
| border: 2px solid #231c6e; | ||
| } | ||
| span { | ||
| color: red; | ||
| } | ||
| .input-box:last-of-type { | ||
| display: flex; | ||
| gap: 10px; | ||
| } | ||
| .input-box:nth-of-type(2) { | ||
| animation-delay: 0.2s; | ||
| } | ||
| .input-box:nth-of-type(3) { | ||
| animation-delay: 0.4s; | ||
| } | ||
| .input-box:nth-of-type(4) { | ||
| animation-delay: 0.6s; | ||
| } | ||
| .input-box:nth-of-type(5) { | ||
| animation-delay: 0.8s; | ||
| } | ||
| .input-box:nth-of-type(6) { | ||
| animation-delay: 1s; | ||
| } | ||
| .suggesion-list { | ||
| width:fit-content; | ||
| min-width: 200px; | ||
| background-color: #231c6e; | ||
| position: relative; | ||
| margin-left: 10px; | ||
| margin-bottom: 10px; | ||
| } | ||
| .suggesion-list li { | ||
| padding: 10px; | ||
| cursor: pointer; | ||
| } | ||
| .suggesion-list::before { | ||
| position: absolute; | ||
| content: ''; | ||
| left: 0; | ||
| top: -8.9px; | ||
| width: 0; | ||
| height: 0; | ||
| border-left: 10px solid transparent; | ||
| border-right: 10px solid transparent; | ||
| border-bottom: 10px solid #231c6e; | ||
| } | ||
| .suggesion-list li:hover { | ||
| background-color: #201d41; | ||
| } | ||
| .selected { | ||
| display: flex; | ||
| gap: 12px; | ||
| flex-wrap: wrap; | ||
| } | ||
| .selected li { | ||
| width: fit-content; | ||
| padding: 7px 15px; | ||
| border-radius: 25px; | ||
| background-color: green; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 15px; | ||
| } | ||
| .error { | ||
| margin-bottom: 15px; | ||
| } | ||
| .error small { | ||
| color: rgb(205, 4, 4); | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 7px; | ||
| font-size: 14px; | ||
| margin-bottom: 5px; | ||
| } | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| transform: translateY(20px); | ||
| transform: scale(0.5); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
| } |
Oops, something went wrong.