From adf9dcb2396500a4e1bba1ff5a80c40edda46e6a Mon Sep 17 00:00:00 2001 From: Esteban Nahuel Carrizo Date: Tue, 26 Apr 2022 18:52:49 -0300 Subject: [PATCH] Adding loading page and transitions --- package-lock.json | 137 +++++++++++++++++++++++++++++++- package.json | 3 +- public/index.html | 8 ++ src/App.css | 11 +++ src/App.js | 52 +++++++++--- src/components/Contenido.jsx | 24 +++--- src/components/Main/About.jsx | 4 +- src/components/Main/Contact.jsx | 14 ++-- src/components/Main/Project.jsx | 2 +- src/components/Main/Service.jsx | 12 +-- 10 files changed, 224 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index d69f1fb..1f7af6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "portafolio-nahuel61920", - "version": "0.1.4", + "version": "1.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1282,6 +1282,123 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/babel-plugin": { + "version": "11.9.2", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz", + "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==", + "requires": { + "@babel/helper-module-imports": "^7.12.13", + "@babel/plugin-syntax-jsx": "^7.12.13", + "@babel/runtime": "^7.13.10", + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.5", + "@emotion/serialize": "^1.0.2", + "babel-plugin-macros": "^2.6.1", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.0.13" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } + } + }, + "@emotion/cache": { + "version": "11.7.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz", + "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==", + "requires": { + "@emotion/memoize": "^0.7.4", + "@emotion/sheet": "^1.1.0", + "@emotion/utils": "^1.0.0", + "@emotion/weak-memoize": "^0.2.5", + "stylis": "4.0.13" + } + }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@emotion/memoize": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz", + "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==" + }, + "@emotion/react": { + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz", + "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==", + "requires": { + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.7.1", + "@emotion/cache": "^11.7.1", + "@emotion/serialize": "^1.0.3", + "@emotion/utils": "^1.1.0", + "@emotion/weak-memoize": "^0.2.5", + "hoist-non-react-statics": "^3.3.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.17.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", + "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, + "@emotion/serialize": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz", + "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/sheet": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz", + "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "@emotion/utils": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz", + "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==" + }, + "@emotion/weak-memoize": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz", + "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==" + }, "@eslint/eslintrc": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz", @@ -6377,6 +6494,11 @@ "pkg-dir": "^3.0.0" } }, + "find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -11601,6 +11723,14 @@ "resolved": "https://registry.npmjs.org/react-simple-typewriter/-/react-simple-typewriter-3.0.1.tgz", "integrity": "sha512-z+aJugzvYPng9HoggyXNpnp7NjxtusGAb33bRaGRK2pEdirVKX4v3qrwdHqs6zdhCeLAthLGLtxgVX9oGekTLg==" }, + "react-spinners": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.11.0.tgz", + "integrity": "sha512-rDZc0ABWn/M1OryboGsWVmIPg8uYWl0L35jPUhr40+Yg+syVPjeHwvnB7XWaRpaKus3M0cG9BiJA+ZB0dAwWyw==", + "requires": { + "@emotion/react": "^11.1.4" + } + }, "react-tsparticles": { "version": "1.37.5", "resolved": "https://registry.npmjs.org/react-tsparticles/-/react-tsparticles-1.37.5.tgz", @@ -13248,6 +13378,11 @@ } } }, + "stylis": { + "version": "4.0.13", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz", + "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==" + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 9152809..6854f9f 100644 --- 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 index 4fa8ed3..1d4cc27 100644 --- a/public/index.html +++ b/public/index.html @@ -13,10 +13,18 @@ + Portafolio Nahuel61920
+ + diff --git a/src/App.css b/src/App.css index 8f9ade5..c1320a5 100644 --- 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 index 11b7465..10a234c 100644 --- 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 (
-
- - - - - -
- - - -
+ { + loading ? + +
+ +
+ + : + +
+
+ + + + + +
+ + + +
+
+ }
) } diff --git a/src/components/Contenido.jsx b/src/components/Contenido.jsx index fa1823d..7cc4247 100644 --- a/src/components/Contenido.jsx +++ b/src/components/Contenido.jsx @@ -6,20 +6,20 @@ import {FormattedMessage} from 'react-intl'; const Contenido = () => (
-
-

+

+

-

+

-

+

(

- - - - + + + +
- +
Linkedin - +
Github - +
Instagram - +
diff --git a/src/components/Main/About.jsx b/src/components/Main/About.jsx index f206159..ed41cd7 100644 --- a/src/components/Main/About.jsx +++ b/src/components/Main/About.jsx @@ -13,7 +13,7 @@ const About = () => (
- -
+

skills

Front-End

diff --git a/src/components/Main/Contact.jsx b/src/components/Main/Contact.jsx index dd74e96..2093300 100644 --- a/src/components/Main/Contact.jsx +++ b/src/components/Main/Contact.jsx @@ -15,7 +15,7 @@ const Contact = () => ( defaultMessage='Contact' /> -

+

(