From 668ff529eab68407bde1ebf7a3abfb333eb97e8d Mon Sep 17 00:00:00 2001 From: Raphtalia Kay Date: Thu, 13 Jul 2023 22:34:34 +0630 Subject: [PATCH] Loading added --- package-lock.json | 25 ++++++++---- package.json | 3 +- src/App.css | 81 +++++++++++++++++++++++++++++++++++++++ src/App.jsx | 28 +++++++++++--- src/components/Cursor.jsx | 2 +- src/components/Layout.jsx | 2 +- 6 files changed, 126 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index cb3c3ec..ab7ea58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,12 +8,13 @@ "name": "portfolio", "version": "0.0.0", "dependencies": { + "animate.css": "^4.1.1", "axios": "^1.3.2", "jquery": "^3.7.0", "react": "^18.2.0", "react-animated-cursor": "^2.7.0", "react-dom": "^18.2.0", - "react-icons": "^4.7.1", + "react-icons": "^4.10.1", "react-router-dom": "^6.8.0" }, "devDependencies": { @@ -649,6 +650,11 @@ "node": ">=0.4.0" } }, + "node_modules/animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "node_modules/ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -1974,9 +1980,9 @@ } }, "node_modules/react-icons": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", - "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", "peerDependencies": { "react": "*" } @@ -2794,6 +2800,11 @@ "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", "dev": true }, + "animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "ansi-styles": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", @@ -3604,9 +3615,9 @@ } }, "react-icons": { - "version": "4.7.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz", - "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==", + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", "requires": {} }, "react-refresh": { diff --git a/package.json b/package.json index 061b9cc..71808ec 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,13 @@ "preview": "vite preview" }, "dependencies": { + "animate.css": "^4.1.1", "axios": "^1.3.2", "jquery": "^3.7.0", "react": "^18.2.0", "react-animated-cursor": "^2.7.0", "react-dom": "^18.2.0", - "react-icons": "^4.7.1", + "react-icons": "^4.10.1", "react-router-dom": "^6.8.0" }, "devDependencies": { diff --git a/src/App.css b/src/App.css index 014a426..5c7004f 100644 --- a/src/App.css +++ b/src/App.css @@ -1,4 +1,9 @@ @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;400;500&display=swap"); +@import "animate.css"; + +:root { + --anidelay: 5; +} body { /* width: 100%; */ @@ -20,6 +25,82 @@ body { color: #c90076; } +.loading-box { + width: 300px; + position: relative; + animation: fadeOut 0.5s 1.1s forwards; +} + +.loading-text-box { + position: relative; + overflow: hidden; +} + +.loading-text { + color: white; + text-align: left; + font-size: 30px; + letter-spacing: 2px; + animation: fadeDown 0.8s 1s forwards; +} + +.loading-underline { + display: block; + position: absolute; + left: 0; + bottom: -15px; + width: 0%; + height: 2px; + background-color: white; + animation: widthChange 0.8s 0.2s forwards; +} + +@keyframes widthChange { + from { + width: 0%; + } + to { + width: 87%; + } +} + +@keyframes fadeDown { + from { + transform: translateY(0); + } + to { + transform: translateY(100%); + } +} + +@keyframes fadeOut { + from { + opacity: 100; + } + to { + opacity: 0; + } +} + +/* .animate__animated.animate__fadeInUp{ + --animate-duration: 7s; +} */ + +/* .line-box .line{ + animation: fullWidth; + animation-duration: 0.3s; + animation-timing-function: ease; + animation-fill-mode: forwards; + color:white; +} */ +/* @keyframes fullWidth { + from { + width: 0%; + } + to { + width: 50%; + } +} */ @tailwind base; @tailwind components; @tailwind utilities; diff --git a/src/App.jsx b/src/App.jsx index 207747c..01fa188 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,30 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import Layout from "./components/Layout"; +import "./App.css"; + const App = () => { - return ( - - - + const [isLoading, setIsLoading] = useState(true); + useEffect( + () => + setTimeout(() => { + setIsLoading(false); + }, 2000), + [] ); + if (isLoading) { + return ( +
+
+
+

Raphtalia Kay

+
+ +
+
+ ); + } + return ; }; export default App; diff --git a/src/components/Cursor.jsx b/src/components/Cursor.jsx index f190b42..f454f3d 100644 --- a/src/components/Cursor.jsx +++ b/src/components/Cursor.jsx @@ -10,7 +10,7 @@ const Cursor = () => { outerScale={2} outerAlpha={0} hasBlendMode={true} - trailingSpeed={3} + trailingSpeed={10} innerStyle={{ backgroundColor: "#c90076", }} diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 539ee1c..b80a54f 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -16,7 +16,7 @@ const Layout = ({ children }) => {
-
+ {/*
*/}