made the profile page

client/src/App.jsx

@@ -4,6 +4,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import Welcome from './pages/Welcome/Welcome'
 import Login from './pages/Login/Login';
 import Signup from './pages/Login/Signup';
+import Profile from './pages/Profile/Profile';
 import Postings from './pages/Postings/Postings';
 import Navbar from './pages/Navbar/Navbar';
 import Profbar from './pages/Profbar/Profbar';
@@ -51,6 +52,7 @@ function App() {
             <Route path="/Postings" element={<Postings />} />
             <Route path="/Navbar" element={<Navbar />} />
             <Route path="/Profbar" element={<Profbar />} />
+            <Route path='/Profile' element={<Profile />} />
           </Routes>
         )}
       </AnimatePresence>

client/src/components/ProfVNavBar.jsx

@@ -22,6 +22,9 @@ const ProfVNavbar = () => {
         <a href="#bio" className="prof-navbar-link">
           <span className="prof-navbar-text">4. Bio/Interests</span>
         </a>
+        <a href="#profilePic" className="prof-navbar-link">
+          <span className="prof-navbar-text">5. Profile Picture</span>
+        </a>
       </div>
     </nav>
   );

client/src/components/profvnavbar.css

@@ -35,7 +35,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    margin-left: 20px;
+    margin-left: 5px;
 
   }
 

client/src/pages/Navbar/Navbar.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import VerticalNavbar from "../../components/VerticalNavbar";
-import Mlist from "../../components/Mlist";
 import "./navbar.css"
 
 

client/src/pages/Profbar/Profbar.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import Mlist from "../../components/Mlist";
 import ProfVNavBar from "../../components/ProfVNavBar";
 import "./profbar.css"
 

client/src/pages/Profile/Profile.jsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import ProfVNavbar from '../../components/ProfVNavBar';
+import './profile.css';
+
+function Profile() {
+  const [formData, setFormData] = useState({
+    name: '',
+    location: '',
+    school: '',
+    bio: '',
+    website: '',
+    resume: null,
+    profilePic: null, // Add profilePic to the form data
+  });
+
+  const [profilePicPreview, setProfilePicPreview] = useState(null); // Store the preview URL
+
+  const handleChange = (e) => {
+    const { name, value, files } = e.target;
+
+    if (name === 'profilePic') {
+      const file = files[0];
+      setFormData({
+        ...formData, //keeps old data
+        [name]: file, //updates by adding new pic file in formData
+      });
+      setProfilePicPreview(URL.createObjectURL(file)); // Create a preview URL
+    } else {
+      setFormData({
+        ...formData,
+        [name]: files ? files[0] : value,
+      });
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log('Submitted data:', formData);
+  };
+
+  return (
+    <>
+      <ProfVNavbar />
+      <div id="form-container">
+        <div className="profile-form-container">
+            <h1 className='profile-h1'>Your Profile</h1>
+            <form className="profile-form" onSubmit={handleSubmit}>
+            <div className="form-group">
+                <label htmlFor="name">Full Name:</label>
+                <input
+                type="text"
+                id="name"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                placeholder="Enter your full name"
+                required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="location">Location:</label>
+                <input
+                type="text"
+                id="location"
+                name="location"
+                value={formData.location}
+                onChange={handleChange}
+                placeholder="Enter your location"
+                required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="school">School:</label>
+                <input
+                type="text"
+                id="school"
+                name="school"
+                value={formData.school}
+                onChange={handleChange}
+                placeholder="Enter your school"
+                required
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="bio">Bio/Interests:</label>
+                <textarea
+                id="bio"
+                name="bio"
+                value={formData.bio}
+                onChange={handleChange}
+                placeholder="Tell us a little about yourself"
+                required
+                ></textarea>
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="website">Website:</label>
+                <input
+                type="url"
+                id="website"
+                name="website"
+                value={formData.website}
+                onChange={handleChange}
+                placeholder="Enter your website URL"
+                />
+            </div>
+
+            <div className="form-group">
+                <label htmlFor="profilePic">Upload Profile Picture:</label>
+                <input
+                type="file"
+                id="profilePic"
+                name="profilePic"
+                accept="image/*"
+                onChange={handleChange}
+                />
+            </div>
+
+            {/* Display Profile Picture Preview */}
+            {profilePicPreview && (
+                <div className="profile-pic-preview">
+                <img src={profilePicPreview} alt="Profile Preview" style={{ width: '150px', height: '150px', borderRadius: '50%' }} />
+                </div>
+            )}
+
+            <div className="form-group">
+                <label htmlFor="resume">Upload Resume:</label>
+                <input
+                type="file"
+                id="resume"
+                name="resume"
+                onChange={handleChange}
+                required
+                />
+            </div>
+
+            <button type="submit" className="profile-submit-btn">Submit</button>
+            </form>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Profile;

client/src/pages/Profile/profile.css

@@ -0,0 +1,98 @@
+/* * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: 2px solid red;
+    font-family: Arial, sans-serif; 
+} */
+
+/* 
+body {
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    padding: 20px;
+} */
+
+#form-container {
+    margin-left: 150px;
+    font-family: Arial, sans-serif; 
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    padding: 30px;
+
+}
+
+
+
+.profile-form-container {
+    width: 150%;
+
+    max-width: 600px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    }
+
+.profile-h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.profile-form {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+textarea {
+    height: 100px;
+    resize: none;
+}
+
+input[type="file"] {
+    padding: 5px;
+}
+
+.profile-submit-btn {
+    background-color: black;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.profile-submit-btn:hover {
+    background-color: #1B1A1A;
+}
+
+.profile-pic-preview img {
+    border-radius: 50%;
+    width: 150px;
+    height: 150px;
+    object-fit: cover;
+    margin-top: 10px;
+  }
+