Adding loading page and transitions

Nahuel61920 · Apr 26, 2022 · adf9dcb · adf9dcb
1 parent 7cc8579
commit adf9dcb
Show file tree

Hide file tree

Showing 10 changed files with 224 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "portafolio-nahuel61920",
-  "version": "0.1.4",
+  "version": "1.5.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.11.4",
@@ -16,6 +16,7 @@
     "react-scroll": "^1.8.7",
     "react-scroll-to-top": "^1.0.5",
     "react-simple-typewriter": "^3.0.1",
+    "react-spinners": "^0.11.0",
     "react-tsparticles": "^1.37.5",
     "react-typical": "^0.1.3",
     "swiper": "^8.1.4",

diff --git a/public/index.html b/public/index.html
@@ -13,10 +13,18 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
     <title>Portafolio Nahuel61920</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init({
+        duration: 800,
+        once: true,
+      });
+    </script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
@@ -43,6 +43,17 @@ main {
     overflow: hidden!important;
 }
 
+
+.loading-pag {
+    text-align: center;
+    background: rgb(14, 12, 12);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+}
+
 .heading{
     text-align: center;
     padding-bottom: 3rem;

diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import './App.css';
 
 /* Componet */
@@ -7,23 +7,49 @@ import Footer from './components/Footer/Footer';
 import Main from './components/Main';
 import Contenido from './components/Contenido';
 import ParticleBackground from "./components/ParticlesBg/ParticleBackground";
-
 import ScrollToTop from './components/ScrollToTop/ScrollToTop'
 
+/* Loading spinner */
+import HashLoader from "react-spinners/HashLoader";
+
 function App() {
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        setLoading(true)
+        setTimeout(() => {
+            setLoading(false)
+        }, 4000)
+    }, [])
     return (
         <div className='App'>
-            <Header/>
-
-            <ParticleBackground />
-
-            <Contenido/>
-
-            <Main/>
-
-            <ScrollToTop/>
-
-            <Footer/>
+            {
+                loading ? 
+
+                <div className='loading-pag'>
+                    <HashLoader
+                        color={"#00e5fe"} 
+                        loading={loading}
+                        size={150} 
+                    />
+                </div>
+
+                    :
+
+                <div>
+                    <Header/>
+
+                    <ParticleBackground />
+
+                    <Contenido/>
+
+                    <Main/>
+
+                    <ScrollToTop/>
+
+                    <Footer/>
+                </div>
+            }
         </div>
     )
 }

diff --git a/src/components/Contenido.jsx b/src/components/Contenido.jsx
@@ -6,52 +6,52 @@ import {FormattedMessage} from 'react-intl';
 const Contenido = () => (
     <div className="contenido">
         <section className="inicio" id="inicio">
-            <div className="titulo" >
-                <p>
+            <div className="titulo">
+                <p data-aos="fade-up" data-aos-delay="600">
                     <FormattedMessage
                         id='greeting'
                         defaultMessage='Hellow'
                     />
                 </p>
-                <h1>
+                <h1 data-aos="fade-up" data-aos-delay="800">
                     <FormattedMessage
                         id='name'
                         defaultMessage='I am Nahuel Carrizo'
                     />
                 </h1>
-                <p>
+                <p data-aos="fade-up" data-aos-delay="1000">
                     <FormattedMessage
                         id='rol'
                         defaultMessage='Front-end developer'
                     />
                 </p>
 
                 <div className="redes-sociales">
-                    <a href="https://www.linkedin.com/in/esteban-nahuel-carrizo-69715422b/" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin"></i></a>
-                    <a href="https://github.com/Nahuel61920/" target="_blank" rel="noopener noreferrer"><i className="fab fa-github"></i></a>
-                    <a href="https://www.instagram.com/nahuelcarrizolc/" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram"></i></a>
-                    <a href="https://api.whatsapp.com/send?phone=5493815360966" target="_blank" rel="noopener noreferrer"><i className="fab fa-whatsapp"></i></a>
+                    <a href="https://www.linkedin.com/in/esteban-nahuel-carrizo-69715422b/" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1200"><i className="fab fa-linkedin"></i></a>
+                    <a href="https://github.com/Nahuel61920/" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1400"><i className="fab fa-github"></i></a>
+                    <a href="https://www.instagram.com/nahuelcarrizolc/" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1600"><i className="fab fa-instagram"></i></a>
+                    <a href="https://api.whatsapp.com/send?phone=5493815360966" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1800"><i className="fab fa-whatsapp"></i></a>
                 </div>
                 <div className="wrapper">
-                    <a className="button" href="https://www.linkedin.com/in/esteban-nahuel-carrizo-69715422b/" target="_blank" rel="noopener noreferrer">
+                    <a className="button" href="https://www.linkedin.com/in/esteban-nahuel-carrizo-69715422b/" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1200">
                         <div className="icon">
                             <i className="fab fa-linkedin"></i>
                         </div>
                         <span>Linkedin</span>
                     </a>
-                    <a className="button" href="https://github.com/Nahuel61920/" target="_blank" rel="noopener noreferrer">
+                    <a className="button" href="https://github.com/Nahuel61920/" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1400">
                         <div className="icon">
                             <i className="fab fa-github"></i>
                         </div>
                         <span>Github</span>
                     </a>
-                    <a className="button" href="https://www.instagram.com/nahuelcarrizolc/" target="_blank" rel="noopener noreferrer">
+                    <a className="button" href="https://www.instagram.com/nahuelcarrizolc/" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1600">
                         <div className="icon">
                             <i className="fab fa-instagram"></i>
                         </div>
                         <span>Instagram</span>
                     </a>
-                    <a className="button" href="https://api.whatsapp.com/send?phone=5493815360966" target="_blank" rel="noopener noreferrer">
+                    <a className="button" href="https://api.whatsapp.com/send?phone=5493815360966" target="_blank" rel="noopener noreferrer" data-aos="fade-up" data-aos-delay="1800">
                         <div className="icon">
                             <i className="fab fa-whatsapp"></i>
                         </div>

diff --git a/src/components/Main/About.jsx b/src/components/Main/About.jsx
@@ -13,7 +13,7 @@ const About = () =>  (
         </h2>
 
         <div className="row container">
-            <div className="columns">
+            <div className="columns" data-aos="fade-right" data-aos-delay="300">
                 <h3>
                     <FormattedMessage
                         id='im'
@@ -76,7 +76,7 @@ const About = () =>  (
                     </a>
                 </div>
             </div>
-            <div className="columns col-skill">
+            <div className="columns col-skill" data-aos="fade-left" data-aos-delay="500">
                 <h3>skills</h3>
                 <h4>Front-End</h4>
                 <div className="skill">