diff --git a/package.json b/package.json
index e977283..78b994c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"next": "12.1.1",
"react": "17.0.2",
"react-dom": "17.0.2",
+ "react-fade-in": "^2.0.1",
"react-hot-toast": "^2.2.0",
"react-icons": "^4.3.1",
"sass": "^1.49.9",
diff --git a/pages/index.tsx b/pages/index.tsx
index 1ef5c9e..3dd0651 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,6 @@
import { GetServerSideProps } from 'next'
import Head from 'next/head'
+import FadeIn from 'react-fade-in'
import Body from 'components/Body'
import Footer from 'components/Footer'
import Icon from 'components/Icon'
@@ -19,17 +20,21 @@ const Home = ({data}: any) => {
albert
-
-
- } reference={'https://github.com/skidoodle'} copy={false} />
- } reference={'https://steamcommunity.com/id/_albert'} copy={false} />
- } reference={'hello@albrt.hu'} copy={true} />
- } reference={'https://instagram.com/albertadam_'} copy={false} />
- } reference={'albert#8838'} copy={true} />
-
-
-
-
+
+
+
+
+ } reference={'https://github.com/skidoodle'} copy={false} />
+ } reference={'https://steamcommunity.com/id/_albert'} copy={false} />
+ } reference={'hello@albrt.hu'} copy={true} />
+ } reference={'https://instagram.com/albertadam_'} copy={false} />
+ } reference={'albert#8838'} copy={true} />
+
+
+
+
+
+
>
diff --git a/styles/Home.module.scss b/styles/Home.module.scss
index 1ba6fe7..e64e27b 100644
--- a/styles/Home.module.scss
+++ b/styles/Home.module.scss
@@ -4,8 +4,6 @@
margin-top: 8rem;
margin-left: 10%;
margin-right: 10%;
- animation: fadeIn .4s forwards;
- transition: all .2s ease-in-out;
}
.mainLayout {
@@ -29,31 +27,18 @@
svg {
font-size: 1.4em;
cursor: pointer;
- margin-right: 7%;
+ margin-right: 6%;
margin-bottom: 1em;
}
}
-.time,
-.weather,
-.spotify {
- animation: fadeIn .6s forwards;
- opacity: 0;
- font-size: 1em;
-}
-.time svg,
-.weather svg {
- font-size: .9rem;
-}
-
.time {
- animation-delay: 0.2s;
+ svg {
+ font-size: .9em;
+ }
}
.weather {
- opacity: 0;
- animation-delay: 0.5s;
-
img {
float: left;
}
@@ -70,17 +55,17 @@
text-decoration: none;
color: #C7D2FE;
}
+ svg {
+ font-size: .9em;
+ }
}
.spotify {
- font-size: .9em;
+ font-size: 1em;
margin-top: 5%;
- opacity: 0;
- animation-delay: .7s;
padding: 1rem 1rem 1.8rem 1rem;
border: 1px solid $spotify-box-color;
border-radius: .5rem;
- cursor: pointer;
img {
border-radius: 10px;
@@ -140,13 +125,4 @@
.bodySection {
margin-top: 15rem;
}
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 4ed1d58..1dee28e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -32,39 +32,6 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
-"@fortawesome/fontawesome-common-types@6.1.1":
- version "6.1.1"
- resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
- integrity sha512-wVn5WJPirFTnzN6tR95abCx+ocH+3IFLXAgyavnf9hUmN0CfWoDjPT/BAWsUVwSlYYVBeCLJxaqi7ZGe4uSjBA==
-
-"@fortawesome/fontawesome-svg-core@^6.1.1":
- version "6.1.1"
- resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz#3424ec6182515951816be9b11665d67efdce5b5f"
- integrity sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==
- dependencies:
- "@fortawesome/fontawesome-common-types" "6.1.1"
-
-"@fortawesome/free-brands-svg-icons@^6.1.1":
- version "6.1.1"
- resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.1.1.tgz#3580961d4f42bd51dc171842402f23a18a5480b1"
- integrity sha512-mFbI/czjBZ+paUtw5NPr2IXjun5KAC8eFqh1hnxowjA4mMZxWz4GCIksq6j9ZSa6Uxj9JhjjDVEd77p2LN2Blg==
- dependencies:
- "@fortawesome/fontawesome-common-types" "6.1.1"
-
-"@fortawesome/free-solid-svg-icons@^6.1.1":
- version "6.1.1"
- resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz#3369e673f8fe8be2fba30b1ec274d47490a830a6"
- integrity sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==
- dependencies:
- "@fortawesome/fontawesome-common-types" "6.1.1"
-
-"@fortawesome/react-fontawesome@^0.1.18":
- version "0.1.18"
- resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz#dae37f718a24e14d7a99a5496c873d69af3fbd73"
- integrity sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==
- dependencies:
- prop-types "^15.8.1"
-
"@humanwhocodes/config-array@^0.9.2":
version "0.9.5"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"
@@ -1566,6 +1533,11 @@ react-dom@17.0.2:
object-assign "^4.1.1"
scheduler "^0.20.2"
+react-fade-in@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/react-fade-in/-/react-fade-in-2.0.1.tgz#b4bcd7dac63d6857ebcd68facbff2f5f9616278f"
+ integrity sha512-oqS/WT4znaXEHmL+yo0IDUDY7uC9K4RP35j1SdRUEBspR09B2iIC0i8oJ28tPOr6Ez/L2aktF9p89j+DbsTVNw==
+
react-hot-toast@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9"