projects and assets refactor

package.json

@@ -13,6 +13,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
+    "axios": "^1.4.0",
     "babel-plugin-macros": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/App.tsx

@@ -45,7 +45,6 @@ function App() {
         <Route path='/about' element={<About />} ></Route>
         <Route path='/projects' element={<Projects />} ></Route>
         <Route path='/contact' element={<Contact />} ></Route>
-        <Route path='*' element={<Landing viewportSize={viewportSize()}/>}></Route>
       </Routes>
     </Router>
   );

src/Styles/VariablesGlobal.scss

@@ -0,0 +1,4 @@
+$fontABout: 'Share Tech Mono', monospace;
+$fontCourier: 'Courier New', Courier, monospace;
+$fontRaleway: 'Raleway', sans-serif;
+$fontOpenSans: 'Open Sans', sans-serif;

src/Styles/about/AboutMeDesktop.styles.scss

@@ -108,6 +108,7 @@
 
                 &::after {
                     content: '';
+                    border-radius: 10px;
                     width: 98%;
                     height: 98%;
                     background-color: rgba(0, 0, 0, 0.918);
@@ -149,7 +150,7 @@
             margin: 10px;
             z-index: 2;
             margin-left: 30px;
-            background-image: url(../../assets/trajado.png);
+            background-image: url(../../../public/assets/trajado.png);
             background-position: center;
             background-size: cover;
             background-repeat: no-repeat;

src/Styles/about/AboutMeMobile.styles.scss

@@ -158,7 +158,7 @@
         animation-delay: 100ms;
         width: 200px;
         height: 200px;
-        background-image: url(../../assets/trajado.png);
+        background-image: url(../../../public/assets/trajado.png);
         background-position: center;
         background-size: cover;
         background-repeat: no-repeat;

src/Styles/about/TransitionAbout.styles.scss

@@ -0,0 +1,8 @@
+.transition-about {
+    width: 100vw;
+    height: 100px;
+    background-image: linear-gradient(to bottom, transparent, rgb(0, 0, 0));
+    position: absolute;
+    z-index: 99;
+    bottom: 0%;
+}

src/Styles/landing/ImageDecoration.styles.scss

@@ -35,7 +35,7 @@
     border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
     animation: morph 7s ease-in-out infinite;
 
-    background-image: url(../../assets/OHOMEM.png);
+    background-image: url(../../../public/assets/OHOMEM.png);
     background-size: cover;
     background-repeat: no-repeat;
 }

src/Styles/landing/WhoAmI.styles.scss

@@ -186,7 +186,7 @@
         background-color: transparent;
         padding: 10px 20px;
         color: white;
-        border: 1px solid black;
+        border: 1px solid red;
         background-color: black;
         border-radius: 10px;
         position: absolute;

src/Styles/projects/Project.styles.scss

@@ -0,0 +1,102 @@
+@import '../VariablesGlobal.scss';
+
+.project {
+    height: 250px;
+    width: 400px;
+    margin: 10px;
+    border-radius: 10px;
+    border: 2px solid rgba(128, 128, 128, 0.26);
+    background-size: contain;
+
+    &:hover {
+        border: 2px solid red;
+    }
+
+    .project-image-container {
+        width: 100%;
+        height: 100%;        
+        position: relative;
+        cursor: pointer;
+
+        &:hover {
+            .hover-container {
+                opacity: 1;
+            }
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 10px;
+        }
+
+        .hover-container {
+            padding-top: 20px;
+            padding-left: 5px;
+            transition: 1s;
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            border-radius: 10px;
+            top: 0;
+            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.438), black 70%);
+            opacity: 0;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            h1,span {
+                color: white;
+                padding-left: 10px;
+                padding-top: 1px;
+                font-family: $fontABout;
+            }
+
+            .project-title {
+                background-color: white;
+                background-image: linear-gradient(45deg, rgb(255, 1, 1), yellow);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent; 
+                -moz-background-clip: text;
+                -moz-text-fill-color: transparent;
+                background-size: 100%;
+                background-position: left;
+                background-repeat: repeat;
+                font-family: $fontABout;
+                font-size: 3em;
+                padding: 0px 10px;
+                font-weight: bold;
+                animation: textGradient 1s ease-in alternate infinite;
+            }
+
+            .project-subtitle {
+                color: rgba(245, 220, 0, 0.959);
+                font-family: $fontRaleway;
+                font-weight: 600;
+                margin-left: 5px;
+            }
+
+            .tech-container {
+                background-color: transparent;
+                display: flex;
+                height: 50px;
+                width: 50px;
+
+                .tech-img {
+                    margin-top: 20px;
+                    margin-left: 5px;
+                    height: 50px;
+                    width: 50px;
+
+                    &:first-child {
+                        margin-left: 10px;
+                    }
+                }
+            }
+
+        }
+
+    }
+
+}

src/Styles/projects/Projects.styles.scss

@@ -0,0 +1,51 @@
+@import '../VariablesGlobal.scss';
+
+.projects-container {
+    width: 100%;
+    padding: 50px;
+    background-color: black;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+
+    .main-title-projects {
+
+        @keyframes warning {
+            0% {
+                color: rgba(196, 17, 17, 0.123);
+            }
+
+            50% {
+                color: rgba(196, 17, 17, 0.123);
+            }
+
+            100% {
+                color: rgba(206, 112, 5, 0.637);
+            }
+        }
+
+        color: yellow;
+        font-weight: normal;
+        font-size: 3em;
+        margin-top: 30px;
+        padding: 70px;
+        font-family: $fontABout;
+        position: relative;
+        z-index: 2;
+
+        &::after {
+            content: '⚠ PROJECTS ⚠';
+            width: 230%;
+            position: absolute;
+            color: rgba(196, 17, 17, 0.123);
+            z-index: -1;
+            top: 0px;
+            left: -56%;
+            font-size: 2em;
+            animation: warning 2s infinite alternate linear;
+        }
+    }
+
+}

src/Styles/projects/ProjectsContainer.styles.scss

@@ -0,0 +1,9 @@
+@import '../VariablesGlobal.scss';
+
+.projects-main-container {
+    max-width: 1500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}

src/components/about/TransitionAbout.component.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import '../../Styles/about/TransitionAbout.styles.scss';
+
+export const TransitionAbout = () => {
+    return (
+        <div className='transition-about'></div>
+    )
+}

src/components/landing/WhoAmI.component.tsx

@@ -2,6 +2,7 @@ import '../../Styles/landing/WhoAmI.styles.scss'
 import { useState, useEffect } from 'react'
 import { Socials } from '../Socials.component'
 import { Link } from 'react-router-dom'
+import { DangerousButton } from '../global/DangerousButton.component'
 
 const WhoAmI = () => {
     let word = "Front-end Developer."

src/components/projects/Project.component.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import '../../Styles/projects/Project.styles.scss'
+import projectsDB from '../../projectsDB.json';
+
+export const Project = () => {
+
+    return (
+        <>
+            {projectsDB.projects.map((project) => (
+                <div className='project'>
+                    <div className='project-image-container'>
+                        <img src={`${project.background}`} alt="" />
+                        <div className='hover-container'>
+                            <h1 className='project-title'>{`${project.title}`}</h1>
+                            <span className='project-subtitle'>{`${project.subtitle}`}</span>
+                            <div className='tech-container'>
+                                {project.technologies.map((img) => (
+                                    <img className='tech-img' src={`${img.value}`} alt="" />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </>
+    )
+}

src/components/projects/ProjectsContainer.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Project } from './Project.component'
+import '../../Styles/projects/ProjectsContainer.styles.scss'
+
+export const ProjectsContainer = () => {
+    return (
+        <div className='projects-main-container'>
+            <Project />
+        </div>
+    )
+}