fix(*): update profile page

HoseaCodes · Jul 9, 2024 · 9534664 · 9534664
1 parent 5c6fc0f
commit 9534664
Show file tree

Hide file tree

Showing 2 changed files with 230 additions and 0 deletions.
diff --git a/src/Pages/User/profile1.css b/src/Pages/User/profile1.css
@@ -0,0 +1,124 @@
+.profile {
+  background-color: #f5f5f5; /* Replace with the actual soft background color */
+}
+
+.profile .images {
+  width: 100%;
+  height: 300px;
+  position: relative;
+}
+
+.profile .images .cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.profile .images .profilePic {
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  object-fit: cover;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  top: 200px;
+}
+
+.profile .profileContainer {
+  padding: 20px 70px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .profile .profileContainer {
+    padding: 10px;
+  }
+
+  .profile .profileContainer .uInfo {
+    flex-direction: column;
+    height: 30vh;
+    padding: 20px;
+    margin-top: 100px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .profile .profileContainer {
+    padding: 20px;
+  }
+
+  .profile .profileContainer .uInfo .left {
+    flex-wrap: wrap;
+  }
+}
+
+.profile .profileContainer .uInfo {
+  height: 300px;
+  box-shadow: 0px 0px 25px -10px rgba(0, 0, 0, 0.38);
+  border-radius: 20px;
+  background-color: #ffffff; /* Replace with the actual background color */
+  color: #333333; /* Replace with the actual text color */
+  padding: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  max-width: 80rem;
+  font-size: x-large;
+  width: inherit;
+}
+
+.profile .profileContainer .uInfo .left {
+  flex: 1;
+  display: flex;
+  gap: 10px;
+}
+
+.profile .profileContainer .uInfo .left a {
+  color: #777777; /* Replace with the actual soft text color */
+}
+
+.profile .profileContainer .uInfo .center {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.profile .profileContainer .uInfo .center span {
+  font-size: 30px;
+  font-weight: 500;
+}
+
+.profile .profileContainer .uInfo .center .info {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  text-wrap: nowrap;
+  gap: inherit;
+}
+
+.profile .profileContainer .uInfo .center .info .item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: #777777; /* Replace with the actual soft text color */
+}
+
+.profile .profileContainer .uInfo .center .info .item span {
+  font-size: 12px;
+}
+
+.profile .profileContainer .uInfo .right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
diff --git a/src/Pages/User/profile1.jsx b/src/Pages/User/profile1.jsx
@@ -0,0 +1,106 @@
+import React, { useState, useContext } from "react";
+import Update from "./update";
+import "./profile1.css";
+import { GlobalState } from "../../GlobalState";
+import {
+  FaFacebook,
+  FaInstagram,
+  FaTwitter,
+  FaLinkedin,
+  FaPinterest,
+  FaGlobe,
+} from "react-icons/fa";
+import { IoMdMore, IoIosMail } from "react-icons/io";
+import { IoLocationOutline } from "react-icons/io5";
+import { Button } from "../../Components/Button/Button";
+import Projects from "./projects";
+import Skills from "./skills";
+
+const Profile = () => {
+  const state = useContext(GlobalState);
+  const [user] = state.userAPI.user;
+  const [openUpdate, setOpenUpdate] = useState(false);
+
+  return (
+    <div className="profile">
+      <div className="images">
+        <img
+          src={
+            user.cover
+              ? user.cover
+              : "https://images.unsplash.com/photo-1542640244-7e672d6cef4e?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          }
+          alt=""
+          className="cover"
+        />
+        <img
+          src={
+            user.avatar
+              ? user.avatar
+              : "https://images.unsplash.com/photo-1519689373023-dd07c7988603?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          }
+          alt=""
+          className="profilePic"
+        />
+      </div>
+      <div className="profileContainer">
+        <div className="uInfo">
+          <div className="left">
+            <a href="http://facebook.com">
+              <FaFacebook />
+            </a>
+            <a href="http://instagram.com">
+              <FaInstagram />
+            </a>
+            <a href="http://twitter.com">
+              <FaTwitter />
+            </a>
+            <a href="http://linkedin.com">
+              <FaLinkedin />
+            </a>
+            <a href="http://pinterest.com">
+              <FaPinterest />
+            </a>
+          </div>
+          <div className="center">
+            <span>{user.name ? user.name : "Demo User"}</span>
+            <div className="info">
+              <div className="item">
+                <IoLocationOutline />
+                <span>{user.city ? user.city : "Houston, TX"}</span>
+              </div>
+              <div className="item">
+                <FaGlobe />
+                <span>
+                  {user.website ? user.website : "www.hoseacodes.com"}
+                </span>
+              </div>
+            </div>
+            <Button
+              primary
+              label="Update Profile"
+              onClick={() => setOpenUpdate(true)}
+            />
+          </div>
+          <div className="right">
+            <IoIosMail />
+            <IoMdMore />
+          </div>
+        </div>
+      </div>
+      {openUpdate && <Update setOpenUpdate={setOpenUpdate} user={user} />}
+      {/* <div style={{
+        display: "flex",
+        justifyContent: "center",
+        padding: "20px 70px",
+        width: "100%",
+        flexWrap: "wrap"
+      }}>
+        <Skills />
+        <Projects />
+      </div> */}
+    </div>
+  );
+};
+
+export default Profile;