From 2df052b42f485a027de62e0e2abfc15773836f11 Mon Sep 17 00:00:00 2001
From: Maciej Kusztal <84096120+mkusztal@users.noreply.github.com>
Date: Wed, 31 Jan 2024 22:19:28 +0200
Subject: [PATCH] Update bugs and design (#89)

---
 client/src/App.module.scss                    |  5 ++--
 .../features/AdminData/AdminData.module.scss  | 24 +++++++--------
 .../TechnologiesCarousel.module.scss          |  4 +--
 .../TechnologiesCarousel.tsx                  |  2 --
 .../layout/NavBar/NavBar.module.scss          |  4 +++
 .../pages/Abilities/Abilities.module.scss     | 29 +++---------------
 .../components/pages/Abilities/Abilities.tsx  |  7 ++---
 .../pages/AboutMe/AboutMe.module.scss         |  9 +++---
 .../src/components/pages/AboutMe/AboutMe.tsx  | 30 ++++++-------------
 src/controllers/technologies.controller.js    |  5 ++--
 src/models/technologies.model.js              |  7 ++---
 11 files changed, 45 insertions(+), 81 deletions(-)

diff --git a/client/src/App.module.scss b/client/src/App.module.scss
index aa10d82..d8c7b6f 100644
--- a/client/src/App.module.scss
+++ b/client/src/App.module.scss
@@ -1,8 +1,7 @@
 .root {
   background-color: #402e32;
   background-size: cover;
-  background-attachment: fixed;
+  // background-attachment: fixed;
   background-position: center;
-  max-width: 100%;
-  overflow-x: hidden;
+  // max-width: 100%;
 }
diff --git a/client/src/components/features/AdminData/AdminData.module.scss b/client/src/components/features/AdminData/AdminData.module.scss
index bd4e334..10cb5b9 100644
--- a/client/src/components/features/AdminData/AdminData.module.scss
+++ b/client/src/components/features/AdminData/AdminData.module.scss
@@ -5,14 +5,15 @@
   justify-content: space-around;
   flex-wrap: wrap;
   align-items: center;
-  height: 100vh;
+  height: 100%;
+  overflow-x: hidden;
 
   .portrait {
     height: 300px;
     width: 300px;
     object-fit: scale-down;
     opacity: 0.8;
-    border-radius: 400px;
+    border-radius: 50%;
     filter: drop-shadow(0 0 0.75rem $text-hover-color);
   }
 
@@ -30,13 +31,12 @@
   }
 }
 
-@media (max-width: 426px) {
+@media (max-width: 768px) {
   .root {
-    height: 80vh;
-    display: block;
-    position: relative;
-    left: 25%;
-    top: 150px;
+    display: flex;
+    flex-direction: column;
+    margin-top: 50px;
+
     .portrait {
       height: 200px;
       width: 200px;
@@ -44,17 +44,15 @@
     }
 
     .rightColumn {
-      .text {
-        margin-right: 150px;
-      }
+      margin-left: 50px;
     }
   }
 }
 
 @media (max-width: 321px) {
   .root {
-    left: 20%;
-    top: 150px;
+    // left: 20%;
+    // top: 150px;
 
     .rightColumn {
       .text {
diff --git a/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.module.scss b/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.module.scss
index bc0b8fd..bbab44e 100644
--- a/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.module.scss
+++ b/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.module.scss
@@ -54,10 +54,10 @@
   }
   @keyframes marquee {
     0% {
-      left: 0;
+      transform: translateX(0%);
     }
     100% {
-      left: -100%;
+      transform: translateX(-100%);
     }
   }
 }
diff --git a/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.tsx b/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.tsx
index beb7ce0..c59a75b 100644
--- a/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.tsx
+++ b/client/src/components/features/TechnologiesCarousel/TechnologiesCarousel.tsx
@@ -23,8 +23,6 @@ export const TechnologiesCarousel: React.FC = () => {
             ) : (
               <div></div>
             )}
-          </span>
-          <span>
             {TechnologyData ? (
               TechnologyData.map((technology, index) => {
                 return (
diff --git a/client/src/components/layout/NavBar/NavBar.module.scss b/client/src/components/layout/NavBar/NavBar.module.scss
index c03b383..8c7a0b7 100644
--- a/client/src/components/layout/NavBar/NavBar.module.scss
+++ b/client/src/components/layout/NavBar/NavBar.module.scss
@@ -112,6 +112,10 @@
         font-size: 10px;
         margin-right: 0;
       }
+
+      .logout {
+        left: -4%;
+      }
     }
   }
 }
diff --git a/client/src/components/pages/Abilities/Abilities.module.scss b/client/src/components/pages/Abilities/Abilities.module.scss
index 3797d5c..0676ec9 100644
--- a/client/src/components/pages/Abilities/Abilities.module.scss
+++ b/client/src/components/pages/Abilities/Abilities.module.scss
@@ -1,34 +1,16 @@
 .root {
   color: white;
-  height: 870px;
+  height: 100%;
+
   .title {
     margin: 50px;
   }
 
   .technologies {
     display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 50px;
-    .cards {
-      position: relative;
-      left: 3%;
-      flex: 1 1 auto;
-      margin: 5px;
-    }
-  }
-
-  .rethinking {
-    display: flex;
-    max-width: 250px;
     justify-content: center;
-    font-size: 7px;
-    margin: 30px auto;
-  }
-
-  .rethinking:hover {
-    scale: 3;
+    flex-wrap: wrap;
+    margin: 0 0 50px 50px;
   }
 }
 
@@ -45,8 +27,5 @@
     .technologies {
       justify-content: center;
     }
-    .rethinking:hover {
-      scale: 1.5;
-    }
   }
 }
diff --git a/client/src/components/pages/Abilities/Abilities.tsx b/client/src/components/pages/Abilities/Abilities.tsx
index 6bd5768..f51798d 100644
--- a/client/src/components/pages/Abilities/Abilities.tsx
+++ b/client/src/components/pages/Abilities/Abilities.tsx
@@ -11,18 +11,17 @@ import { ITechnologies } from "../../../interfaces/ITechnologies";
 
 export const Abilities: React.FC = () => {
   const techData: ITechnologies[] = useSelector(getTechnologies);
+  const validTechData = techData && techData.length > 0;
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(fetchTechnologies());
   }, [dispatch]);
-
-  console.log("tech", techData);
   return (
     <div className={styles.root}>
       <h1 className={styles.title}>My Stack</h1>
       <div className={styles.technologies}>
-        {techData ? (
+        {validTechData ? (
           techData.map((data) => {
             return (
               <div key={data._id} className={styles.cards}>
@@ -32,7 +31,7 @@ export const Abilities: React.FC = () => {
           })
         ) : (
           <div>
-            <h1>No cards</h1>
+            <h1>No abilities</h1>
           </div>
         )}
       </div>
diff --git a/client/src/components/pages/AboutMe/AboutMe.module.scss b/client/src/components/pages/AboutMe/AboutMe.module.scss
index be44fd7..f669c02 100644
--- a/client/src/components/pages/AboutMe/AboutMe.module.scss
+++ b/client/src/components/pages/AboutMe/AboutMe.module.scss
@@ -3,20 +3,21 @@
 .root {
   color: white;
   min-height: 500px;
-  height: 70vh;
+  height: 100%;
   display: flex;
   justify-content: space-around;
   flex-direction: row;
   flex-wrap: wrap;
   margin: 70px;
 
-  img {
+  .portrait {
     height: 300px;
     width: 300px;
     object-fit: scale-down;
     opacity: 0.8;
     border-radius: 50%;
-    margin-bottom: 20px;
+    margin-bottom: 30px;
+    filter: drop-shadow(0 0 0.75rem $text-hover-color);
   }
 
   h3 {
@@ -78,7 +79,7 @@
 
   .documents {
     width: 500px;
-    margin: 150px 0 50px 0;
+    margin: 50px 0 0 0;
 
     .links {
       list-style: none;
diff --git a/client/src/components/pages/AboutMe/AboutMe.tsx b/client/src/components/pages/AboutMe/AboutMe.tsx
index 0483550..640b2d9 100644
--- a/client/src/components/pages/AboutMe/AboutMe.tsx
+++ b/client/src/components/pages/AboutMe/AboutMe.tsx
@@ -11,15 +11,15 @@ export const AboutMe: React.FC = () => {
 
   return (
     <div className={styles.root}>
-      <img src='/images/me.png' alt='me' />
+      <img src='/images/me.png' alt='me' className={styles.portrait} />
       <div className={styles.rightColumn}>
         <div className={styles.text}>
           <h3>
             Hi! I'm<span>Maciej Kusztal</span>
           </h3>
           <p className={styles.description}>
-            I'm Frontend Developer who is working on Software Engineer poistion.
-            <br></br>I am an energetic and responsible person. Through my
+            I'm Web Developer who is working on Software Engineer position.
+            <br />I am an energetic and responsible person. Through my
             determination and commitment to the exact execution of the project,
             I believe that I am able to introduce positive energy to the team.
           </p>
@@ -46,20 +46,20 @@ export const AboutMe: React.FC = () => {
           <ul>
             <li>
               <p>
-                Involvement: I feel responsible for the tasks assigned to me
+                Involvement: I feel responsible for the tasks assigned to me.
               </p>
             </li>
             <li>
               <p>
                 Enthusiasm: I am open to learning and working in a team, these
-                two things combined with goals and a plan motivate me to act
+                two things combined with goals and a plan motivate me to act.
               </p>
             </li>
             <li>
               <p>
-                Ambitious: I would like to become a Senior Backend Developer,
-                it’s a huge goal and has a long way, however, I know myself and
-                one day I will do it
+                Ambitious: I would like to become a Application Security
+                Engineer, it’s a huge goal and has a long way, however, I know
+                myself and one day I will do it.
               </p>
             </li>
           </ul>
@@ -99,7 +99,7 @@ export const AboutMe: React.FC = () => {
             <li>
               <button>
                 <a
-                  href='https://drive.google.com/file/d/1Z0dAkzovj3ZOQebFuXwY2XAwbeTUpQhX/view?usp=share_link'
+                  href='https://drive.google.com/file/d/1xvNm5y61KSuzVeCdCjyEYYoqQyTiBzO_/view?usp=drive_link'
                   className={styles.link}
                   rel='noreferrer'
                   target='_blank'
@@ -108,18 +108,6 @@ export const AboutMe: React.FC = () => {
                 </a>
               </button>
             </li>
-            <li>
-              <button>
-                <a
-                  href='https://drive.google.com/file/d/1X_tqTJ8muXufRJHCo4MymYUR418xP0wT/view?usp=sharing'
-                  className={styles.link}
-                  rel='noreferrer'
-                  target='_blank'
-                >
-                  Cover letter
-                </a>
-              </button>
-            </li>
             <li>
               <button>
                 <a
diff --git a/src/controllers/technologies.controller.js b/src/controllers/technologies.controller.js
index ef80bbe..fa26bd5 100644
--- a/src/controllers/technologies.controller.js
+++ b/src/controllers/technologies.controller.js
@@ -36,15 +36,14 @@ exports.getTechnologyBySearch = async (req, res) => {
 };
 
 exports.addTechnology = async (req, res) => {
-  const { name, level } = sanitize(req.body);
+  const { name } = sanitize(req.body);
 
-  const isDataValid = name && level;
+  const isDataValid = name;
 
   try {
     if (isDataValid) {
       const newTechnology = new Technology({
         name: name,
-        level: level,
       });
       await newTechnology.save();
       res.json(newTechnology);
diff --git a/src/models/technologies.model.js b/src/models/technologies.model.js
index d9381e7..bc26793 100644
--- a/src/models/technologies.model.js
+++ b/src/models/technologies.model.js
@@ -1,9 +1,8 @@
-const mongoose = require('mongoose');
+const mongoose = require("mongoose");
 
 const technologiesSchema = new mongoose.Schema({
   name: { type: String, require: true, minlength: 3, maxlength: 10 },
-  level: { type: Number, require: true },
 });
 
-technologiesSchema.index({ name: 'text' });
-module.exports = mongoose.model('Technology', technologiesSchema);
+technologiesSchema.index({ name: "text" });
+module.exports = mongoose.model("Technology", technologiesSchema);