Merge pull request #19 from LeleDallas/refactor/Projects

refactor: projects page

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Navbar from './navigator/Navbar'
 import About from './screens/About'
 import Aside from './navigator/Aside'
@@ -12,6 +12,10 @@ function App() {
 
   const [active, setActive] = useState<ActiveNav>("About")
 
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [active])
+
   return (
     <main>
       <Aside />

src/navigator/Aside.tsx

@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconFont from "../components/iconfont";
 import { birthday, email, fullName, location, phone, role, socialListIcons } from "../utils";
 
 
 const Aside = () => {
 
     const [over, setOver] = useState(-1)
+    const [width, setWidth] = useState(0);
 
     const elementToggleFunc = function (elem: Element) {
         elem.classList.toggle("active");
@@ -17,6 +18,12 @@ const Aside = () => {
             elementToggleFunc(sidebar);
     };
 
+
+    useEffect(() => {
+        window.addEventListener("resize", () => setWidth(window.innerWidth))
+        return () => window.removeEventListener("resize", () => setWidth(window.innerWidth))
+    }, []);
+
     return (
         <aside className="sidebar" data-sidebar>
 
@@ -30,8 +37,9 @@ const Aside = () => {
                     <p className="title">{role}</p>
                 </div>
 
-                <button onClick={sidebarToggle} className="info_more-btn" data-sidebar-btn>
+                <button onClick={sidebarToggle} className="info_more-btn" >
                     <span>Show Contacts</span>
+                    {width < 580 && <IconFont name="see" color={"#006df0"} />}
                 </button>
 
             </div>

src/screens/ModalProjects.tsx

@@ -15,7 +15,7 @@ const ModalProjects = ({ visible, setVisible, data }: ModalProjectProps) => {
                 </button>
                 <div className="modal-img-wrapper">
                     <figure className="modal-avatar-box" >
-                        <img style={{ padding: 10, width: 250 }} src={data.image} alt={data.title} />
+                        <img style={{ padding: 10, width: 350 }} src={data.image} alt={data.title} />
                     </figure>
                     <a style={{ marginTop: 22 }} href={data.url} target="_blank" className="social-link">
                         <IconFont
@@ -25,10 +25,15 @@ const ModalProjects = ({ visible, setVisible, data }: ModalProjectProps) => {
                             onMouseOver={() => setOver(true)}
                             onMouseLeave={() => setOver(false)} />
                     </a>
+                    {/* <div style={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
+                        {data.tech?.map((tecnology, key) =>
+                            <img style={{ width: 35, height: 35, objectFit: "scale-down" }} key={key} src={tecnology} />
+                        )}
+                    </div> */}
                 </div>
                 <div className="modal-content">
                     <h4 className="h3 modal-title" >{data.title}</h4>
-                    <time>{data.tech}</time>
+                    <time>{data.type}</time>
                     {/* <time>{data?.url2}</time>
                     <time>{data?.description2}</time> */}
                     <div data-modal-text>

src/screens/Projects.tsx

@@ -4,7 +4,7 @@ import IconFont from "../components/iconfont"
 import { projects } from "../utils"
 import ModalProjects from "./ModalProjects"
 
-type Categories = "All" | "Mobile development" | "Applications" | "Web development"
+type Categories = "All" | "Mobile" | "Software" | "Web"
 
 const Projects = ({ active }: ScreenProps) => {
 
@@ -14,7 +14,7 @@ const Projects = ({ active }: ScreenProps) => {
 
     const checkActive = (category: Categories, currentStatus: Categories) => category === currentStatus ? "active" : ""
 
-    const items = ["All", "Mobile development", "Applications", "Web development"]
+    const items = ["All", "Mobile", "Software", "Web"]
 
     return (
         <article
@@ -39,8 +39,6 @@ const Projects = ({ active }: ScreenProps) => {
                             </button>
                         </li>)}
                 </ul>
-
-
                 <div className="filter-select-box">
                     <button className="filter-select" >
                         <div className="select-value" >Select category</div>
@@ -61,7 +59,7 @@ const Projects = ({ active }: ScreenProps) => {
                 </div>
 
                 <ul className="project-list">
-                    {projects.map(project =>
+                    {projects.filter(project => selectedCategory === "All" ? true : project.type.includes(selectedCategory)).map(project =>
                         <li
                             onClick={() => {
                                 setData(project)
@@ -73,17 +71,16 @@ const Projects = ({ active }: ScreenProps) => {
                                     <div className="project-item-icon-box">
                                         <IconFont name="see" size={24} color={"#006df0"} />
                                     </div>
-                                    <img src="./assets/project-1.jpg" alt="finance" loading="lazy" />
+                                    <img src={project.image} alt="finance" loading="lazy" />
                                 </figure>
 
                                 <h3 className="project-title">{project.title}</h3>
-                                <p className="project-category">{project.tech}</p>
+                                <p className="project-category">{project.type}</p>
                             </a>
                         </li>
                     )}
                 </ul>
                 <ModalProjects visible={visible} setVisible={setVisible} data={data} />
-
             </section>
         </article>
     )

src/types.ts

@@ -26,13 +26,13 @@ export interface ModalProps {
 
 export interface DataProjectModel {
     title: string
-    tech: string
+    type: string
     description: string
     url: string
     image: string
     description2?: string
     url2?: string
-
+    tech?: Array<string>
 }
 
 export interface ModalProjectProps {

src/utils.tsx

@@ -100,7 +100,7 @@ export const socialListIcons: Array<SocialObject> = [
 export const bookList: Array<BookObject> = [
     {
         title: "So good they can't ignore you",
-        description: " So Good They Can’t Ignore You sheds some much needed light on the “follow your passion” myth and shows you that the true path to work you love lies in becoming a craftsman of the work you already have, collecting rare skills and taking control of your hours in the process.",
+        description: "So Good They Can’t Ignore You sheds some much needed light on the “follow your passion” myth and shows you that the true path to work you love lies in becoming a craftsman of the work you already have, collecting rare skills and taking control of your hours in the process.",
         category: "Personal Growth",
         author: "Cal Newport",
         image: "./assets/calNewport.png",
@@ -211,47 +211,70 @@ export const experiencesItem: Array<ResumeObject> = [
 export const projects: Array<DataProjectModel> = [
     {
         title: "Cards Against Humanity",
-        image: "./assets/project-1.jpg",
-        tech: "Web Development",
+        image: "./assets/CAH.png",
+        type: "Web Development",
         description: "Cards Against Humanity: Fill in the Blank Edition - Unleash your dark humor! Hilarious party game where players fill in outrageous black card prompts with white cards. Create inside jokes, compete for the funniest combinations, and laugh uncontrollably. Get ready for twisted fun!",
         url: "https://github.com/LeleDallas/Cards-Against-Humanity",
+        tech: [
+            "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png",
+            "https://vitejs.dev/logo-with-shadow.png",
+            "https://vitest.dev/logo.svg",
+        ]
     },
     {
         title: "Uptune",
-        image: "./assets/project-1.jpg",
-        tech: "Android Application",
+        image: "./assets/uptune.png",
+        type: "Mobile (Android) Application",
         description: "",
         url: "https://github.com/LeleDallas/UpTune",
+        tech: [
+            "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png",
+            "https://vitejs.dev/logo-with-shadow.png",
+            "https://vitest.dev/logo.svg",
+            "https://cdn-icons-png.flaticon.com/512/5968/5968282.png",
+        ]
     },
     {
         title: "TrackER",
-        image: "./assets/project-1.jpg",
-        tech: "Web Development",
+        image: "./assets/tracker.png",
+        type: "Web Development",
         description: "",
         description2: "",
         url: "https://github.com/TrackER-Corporation",
         url2: "https://github.com/DallasCorporation/TrackER",
+        tech: [
+            "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png",
+            "https://vitejs.dev/logo-with-shadow.png",
+            "https://vitest.dev/logo.svg",
+        ]
     },
     {
         title: "BomberMan",
-        image: "./assets/project-1.jpg",
-        tech: "Software Development",
+        image: "./assets/bomber.png",
+        type: "Software Development",
         description: "",
         url: "https://github.com/LeleDallas/BomberMan",
+        tech: ["https://cdn-icons-png.flaticon.com/512/5968/5968282.png"]
     },
     {
         title: "WarVerse",
-        image: "./assets/project-1.jpg",
-        tech: "Software Development",
+        image: "./assets/warverse.png",
+        type: "Software Development",
         description: "",
         url: "https://github.com/GZaccaroni/pps-warverse",
+        tech: ["https://cdn-icons-png.flaticon.com/512/6132/6132220.png"]
     },
     {
         title: "skillsfolio",
-        image: "./assets/project-1.jpg",
-        tech: "Software Development",
+        image: "./assets/skills.png",
+        type: "Software Development",
         description: "Vite portfolio application deployed within Github Actions",
         url: "https://github.com/LeleDallas/skillsfolio",
+        tech: [
+            "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1150px-React-icon.svg.png",
+            "https://vitejs.dev/logo-with-shadow.png",
+            "https://vitest.dev/logo.svg",
+        ]
     },
 
 ]