Website v1.0

Develop
pedroacamargo · Jul 3, 2023 · b46ff5b · b46ff5b
2 parents d2139b6 + faae2e4
commit b46ff5b
Show file tree

Hide file tree

Showing 17 changed files with 247 additions and 51 deletions.
diff --git a/public/index.html b/public/index.html
@@ -31,7 +31,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" style="overflow: hidden;"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,12 +2,13 @@ import './Styles/App.scss'
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Navbar from './routes/Navbar.component';
 import Projects from './routes/Projects.component';
+import ProjectsDetailed from './routes/ProjectsDetailed.component';
 import About from './routes/About.component';
 import Contact from './routes/Contact.component';
 import Home from './routes/Home.component';
 import Landing from './routes/Landing.component';
 import { Spacer } from './components/global/Spacer.component';
-import { Footer } from './components/global/Footer.component';
+import { Footer } from './routes/Footer.component';
 import particlesOptions from './configs/particles.json';
 import type { Engine } from 'tsparticles-engine';
 import Particles from 'react-particles';
@@ -43,9 +44,10 @@ function App() {
         <Route path='/' element={<Landing viewportSize={viewportSize()}/>} ></Route>
         <Route path='/home' element={<Home/>}></Route>
         <Route path='/about' element={<About />} ></Route>
-        <Route path='/projects' element={<Projects />} ></Route>
+        <Route path='/projects' element={<ProjectsDetailed />} ></Route>
         <Route path='/contact' element={<Contact />} ></Route>
       </Routes>
+      <Footer />
     </Router>
   );
 }

diff --git a/src/Styles/App.scss b/src/Styles/App.scss
@@ -1,5 +1,5 @@
 /* Define the styles for the scrollbar */
-$scrollbar-width: 10px;
+$scrollbar-width: 4px;
 $scrollbar-track-color: #000000;
 $scrollbar-thumb-color: #741515af;
 

diff --git a/src/Styles/Footer.scss b/src/Styles/Footer.scss
@@ -1,5 +1,74 @@
+@import "VariablesGlobal.scss";
+
 footer {
-    height: 200px;
-    width: 100%;
-    background-color: black;
+    background-color: rgb(0, 0, 0);
+    color: white;
+    padding: 30px 50px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    overflow: hidden;
+    z-index: 2;
+    position: relative;
+    box-shadow: 0 -2px 10px rgba(255, 255, 255, 0.24);
+
+    .copyright-container {
+
+        img {
+            width: 30px;
+            height: 30px;
+        }
+
+        h3 {
+            font-family: $fontOpenSans;
+        }
+    }
+
+    .footer-socials {
+        position: relative;
+        z-index: 10;
+
+        .footer-social-btn {
+            color: white;
+            padding: 10px;
+            margin: 5px;
+            border-radius: 10px;
+            border: 1px solid white;
+            font-size: 1em;
+            transition: .5s;
+            z-index: 99;
+
+            &:hover {
+                color: black;
+                background-color: white;
+            }
+        }
+
+    }
+
+}
+
+@media screen and (max-width: 600px) {
+    footer {
+        flex-direction: column-reverse;
+
+        .copyright-container {
+            margin-top: 50px;
+
+            img {
+                height: 20px;
+                width: 20px;
+            }
+
+            h3 {
+                font-size: .8em;
+                margin-left: -15px;
+            }
+
+        }
+
+        .footer-social-btn {
+            margin-top: 30px;
+        }
+    }
 }
diff --git a/src/Styles/contact/ContactForms.styles.scss b/src/Styles/contact/ContactForms.styles.scss
@@ -2,7 +2,7 @@
 
 .forms-container {
     padding-top: 70px;
-    //overflow: hidden;
+    padding-bottom: 100px;
 
     @include flexcenter();
     flex-direction: column;
@@ -23,6 +23,7 @@
 
         padding: 20px;
         width: 80%;
+        z-index: 20;
 
         .form-section {
 
@@ -102,7 +103,7 @@
                 .textarea {
                     width: 700px;
                     height: 300px;
-                    background-color: #3002022a;
+                    background-color: #0000002a;
                     padding: 20px;
 
                     &:focus + .input-label {
@@ -151,6 +152,7 @@
                 margin: 10px;
                 cursor: pointer;
                 z-index: 1;
+                box-shadow: 0px 0px 20px white;
 
                 &:hover {
                     background-color: white;
@@ -159,15 +161,83 @@
             }
 
             .light-blink {
-                width: 70px;
+                width: 100px;
                 height: 50px;
                 position: absolute;
-                bottom: 30px;
-                background-color: white;
-                filter: blur(10px);
-                z-index: 0;
+                bottom: -20px;
+                background-image: linear-gradient(to bottom, rgb(255, 255, 255), transparent 80%);
+                transform: perspective(1.1em) rotateX(35deg) scale(1);
+                filter: blur(18px);
+                z-index: -10;
             }
     }
+
+    .loader {
+        width: 30px;
+        height: 30px;
+        border: 4px solid #d41c1c50;
+        border-top-color: #d41c1c;
+        animation: spin013151 1s linear infinite;
+        border-radius: 100%;
+        position: fixed;
+        left: 10px;
+        z-index: 99;
+        top: calc(100% - 40px);
+    }
+
+    @keyframes spin013151 {
+        to {
+            transform: rotate(360deg);
+        }
+    }   
+
+    .notification-emailer {
+        position: fixed;
+        width: 250px;
+        background-color: rgb(47, 255, 82);
+        right: 20px;
+        top: 100px;
+        border-radius: 10px;
+        z-index: 99;
+        transition: .5s;
+
+        &:hover {
+            transform: scale(1.1);
+        }
+
+        .close-btn {
+            position: absolute;
+            right: 0;
+            padding: 4px;
+            margin: 5px;
+            border-radius: 10px;
+            color: black;
+            font-family: $fontABout;
+            font-weight: bold;
+            cursor: pointer;
+
+            &:hover {
+                color: red;
+            }
+
+        }
+
+        h4 {
+            color: black;
+            font-size: 1em;
+            font-family: $fontRaleway;
+            padding: 10px;
+        }
+
+        p {
+            text-align: justify;
+            font-family: $fontRaleway;
+            font-size: .8em;
+            padding: 10px;
+            margin-top: -15px;
+        }
+
+    }
 }
 
 @media screen and (max-width: 1000px) {
@@ -189,34 +259,41 @@
 
         &:last-child {
             margin-left: 50px;
+        }
+
+
+        .form-section {
+            flex-direction: column;
+            margin: 20px;
+
+
             .input-container .textarea {
                 width: 200px;
                 margin: 10px 10px;
-
+    
                 & + .input-label + .input-icon + .linebot {
                     margin-left: 2px;
                 }
-
-
+    
+    
                 &:focus + .input-label + .input-icon + .linebot {
-                    width: 200px;
+                    width: 190px;
                     margin-left: 2px;
                 }
             }
-        }
-
-        .form-section {
-            flex-direction: column;
-            margin: 20px;
+
+
         }    
 
         .btn-submit {
-            margin-left: -30px;
-
+            margin: 0px;
+            margin-bottom: 10px;
         }
 
         .light-blink{
-            margin-left: -40px;
+            margin-left: 0px;
+            transform: perspective(1.1em) rotateX(31deg) scale(1.1);
+            filter: blur(15px);
         }
 
     } 

diff --git a/src/components/contacts/ContactForms.component.tsx b/src/components/contacts/ContactForms.component.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import "../../Styles/contact/ContactForms.styles.scss"
 import emailjs from '@emailjs/browser';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -9,6 +9,8 @@ export const ContactForms = () => {
     const username = useRef<any>();
     const email = useRef<any>();
     const textarea = useRef<any>();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [notificationIsOpened, setNotificationIsOpened] = useState<boolean>(false)
 
     const clearForms = () => {
         username.current.value = "";
@@ -19,9 +21,12 @@ export const ContactForms = () => {
     const sendEmail = (e: any) => {
         e.preventDefault();
 
-        emailjs.sendForm('service_qhoywu6','template_vs1p5gw',form.current,'xLPFLTtIufxxG0Vqn').then((result) => {
+        setIsLoading(true);
+
+        emailjs.sendForm('service_qhoywu6','template_vs1p5gw',form.current,'xLPFLTtIufxxG0Vqn').then(() => {
             clearForms();
-            alert("Message was sent successfully")
+            setIsLoading(false);
+            setNotificationIsOpened(true);
         })
     }
 
@@ -52,10 +57,16 @@ export const ContactForms = () => {
                         <span className='linebot'></span>
                     </div>
                 </div>
-                <button className='btn-submit' type="submit" value="Send" >Send</button>
+                <button className='btn-submit' type="submit" value="Send" disabled={isLoading} >Send</button>
                 <div className='light-blink'></div>
             </form>
 
+            <div style={{display: `${isLoading ? "block" : "none"}`}} className="loader"></div>
+            <div className='notification-emailer' style={{right: `${notificationIsOpened ? "20px" : "-300px"}`}}>
+                <div className='close-btn' onClick={() => setNotificationIsOpened(!notificationIsOpened)}>X</div>
+                <h4>Success</h4>
+                <p>The message was sent successfully, thanks for your submit! You received an email in the respective email you input.</p>
+            </div>
         </div>
     )
 }
diff --git a/src/components/global/Footer.component.tsx b/src/components/global/Footer.component.tsx
diff --git a/src/components/projects/Project.component.tsx b/src/components/projects/Project.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import '../../Styles/projects/Project.styles.scss'
-import projectsDB from '../../projectsDB.json';
+import projectsDB from '../../data/projectsDB.json';
 
 export const Project = () => {
 

diff --git a/src/components/skills/Skills.component.tsx b/src/components/skills/Skills.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import '../../Styles/skills/Skills.scss';
-import techs from '../../skills.json'
+import techs from '../../data/skills.json'
 import { Siren } from './Siren.component';
 
 export const Skills = () => {

diff --git a/src/projectsDB.json → src/data/projectsDB.json b/src/projectsDB.json → src/data/projectsDB.json
diff --git a/src/skills.json → src/data/skills.json b/src/skills.json → src/data/skills.json
diff --git a/src/routes/About.component.tsx b/src/routes/About.component.tsx
@@ -4,11 +4,12 @@ import { Decorations } from '../components/about/Decorations.component';
 import { AboutMeDesktop } from '../components/about/AboutMeDesktop.component';
 import { AboutMeMobile } from '../components/about/AboutMeMobile.component';
 import { TransitionAbout } from '../components/about/TransitionAbout.component';
+import { Footer } from './Footer.component';
 
 const About = () => {
     return (
         <>
-            <section className='about-container'>
+            <section style={{backgroundColor: "black"}} className='about-container'>
                 <Decorations />
                 <AboutMeDesktop />
                 <AboutMeMobile/>