+
+
+ )
+}
+
+export default MyProjects;
+
+
+function MyProjectCard({ project }) {
+ return (
+
+
+
+
+ My Projects
+ +
+
+ {
+ SampleData.map(project => {
+ return (
+
+ )
+ })
+ }
+ {
+ SampleData.map(project => {
+ return (
+
+ )
+ })
+ }
+
+
+
+ 
+
+ )
+}
\ 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
new file mode 100644
index 00000000..7c1e64c2
--- /dev/null
+++ b/src/Components/menu_section/new_project/NewProject.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/Components/menu_section/new_project/NewProject.js b/src/Components/menu_section/new_project/NewProject.js
new file mode 100644
index 00000000..2e4c1da1
--- /dev/null
+++ b/src/Components/menu_section/new_project/NewProject.js
@@ -0,0 +1,208 @@
+import './NewProject.css'
+import Menu from '../../Menu';
+import { Link } from 'react-router-dom';
+import { FaArrowCircleLeft, FaTimes } from 'react-icons/fa';
+import { useState } from 'react';
+
+
+const Skills = ['HTML', 'CSS', 'Javascript', 'Python', 'Java', 'React js', 'Angular', 'PHP', 'TypeScript', 'Spring boot']
+
+function NewProject() {
+
+ const [data, setData] = useState({ name: "", github: "", description: "", image: null, skill: "" });
+ const [skillSuggestions, setSuggestions] = useState([])
+ const [selectedSkills, setSelectedSkills] = useState([])
+ const [error, setError] = useState([])
+
+ const onInputChange = (e) => {
+ const { name, value } = e.target
+ setData(prev => ({ ...prev, [name]: value }));
+ setError([])
+ }
+
+ const onSkillChange = (e) => {
+ const { value } = e.target
+ if (value === "") {
+ setSuggestions([])
+ }
+ else {
+ const arr = Skills.filter(skill => skill.toLowerCase().startsWith(value.toLowerCase())).slice(0, 5)
+ setSuggestions(arr);
+ }
+ setData(prev => ({ ...prev, "skill": value }));
+ }
+
+ const addSkill = (val) => {
+ if (selectedSkills.length === 5) return;
+ const existing = selectedSkills.filter(skill => val === skill)
+ if (existing.length === 0) {
+ setSelectedSkills(prev => [...prev, val])
+ }
+ setSuggestions([])
+ onInputChange("skill", "")
+ }
+
+ const removeSkill = (val) => {
+ const newSkills = selectedSkills.filter(skill => skill !== val)
+ setSelectedSkills(newSkills)
+ }
+
+ const onImageChange = (e) => {
+ setData(prev => ({ ...prev, "image": e.target.files[0] }));
+ }
+
+ const handleSubmit = (e) => {
+ e.preventDefault()
+ const err = validateData(data, selectedSkills);
+ setError(err)
+ if (err.length !== 0) {
+ window.scroll(0, 0)
+ }
+ }
+
+
+ return (
+
+
+
+
+
+ {project.name}
+
+
+
+ {project.description.substring(0, 75)}...
+ {project.uploadedDate} +
+
+
+
+
+
+
+ )
+}
+
+export default NewProject;
+
+
+function validateData(data, skills) {
+ let errors = [];
+ const ImageMaxSize = 10 * 1024 * 1024;
+
+ if (data.name.trim() === "") errors.push("Project name is required.")
+ if (data.github.trim() === "") errors.push("Github repo link is required.")
+ if (data.description.trim() === "") errors.push("Description is required.")
+ if (skills.length === 0) errors.push("Select atleast one skill.")
+ if (!data.image) errors.push("Project image is required.")
+ else if (data.image.size > ImageMaxSize) errors.push("Select an image, not exceeding 10MB. ")
+
+ return errors;
+}
\ No newline at end of file
+
+
+
+
+
+
+