From 4bedc1f16da2ced738c4ecea240a4b8d8d6b4a49 Mon Sep 17 00:00:00 2001 From: gisa chris Date: Tue, 14 Nov 2023 10:59:52 +0200 Subject: [PATCH 1/3] Add Container Transitions --- package-lock.json | 75 +++++++++++++++ package.json | 1 + src/components/home.jsx | 5 +- src/components/shared/animatedText.jsx | 49 ++++++++++ src/styles/css/aniText.css | 1 + src/styles/css/aniText.css.map | 1 + src/styles/css/app.css | 2 +- src/styles/css/app.css.map | 2 +- src/styles/css/home.css | 2 +- src/styles/css/home.css.map | 2 +- src/styles/scss/aniText.scss | 127 +++++++++++++++++++++++++ src/styles/scss/app.scss | 4 + src/styles/scss/home.scss | 36 ++++++- src/styles/scss/partials/_config.scss | 8 ++ 14 files changed, 308 insertions(+), 7 deletions(-) create mode 100644 src/components/shared/animatedText.jsx create mode 100644 src/styles/css/aniText.css create mode 100644 src/styles/css/aniText.css.map create mode 100644 src/styles/scss/aniText.scss diff --git a/package-lock.json b/package-lock.json index 3eefb7f..94f5803 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "@emailjs/browser": "^3.11.0", + "framer-motion": "^10.16.4", "nuka-carousel": "^6.0.3", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -2622,6 +2623,44 @@ "is-callable": "^1.1.3" } }, + "node_modules/framer-motion": { + "version": "10.16.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", + "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, + "node_modules/framer-motion/node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/framer-motion/node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -5990,6 +6029,11 @@ "json5": "lib/cli.js" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -8423,6 +8467,32 @@ "is-callable": "^1.1.3" } }, + "framer-motion": { + "version": "10.16.4", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.16.4.tgz", + "integrity": "sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==", + "requires": { + "@emotion/is-prop-valid": "^0.8.2", + "tslib": "^2.4.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "requires": { + "@emotion/memoize": "0.7.4" + } + }, + "@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + } + } + }, "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -10865,6 +10935,11 @@ } } }, + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 9f7d5c7..5726d02 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@emailjs/browser": "^3.11.0", + "framer-motion": "^10.16.4", "nuka-carousel": "^6.0.3", "prop-types": "^15.8.1", "react": "^18.2.0", diff --git a/src/components/home.jsx b/src/components/home.jsx index 5a007f5..87b3c4d 100644 --- a/src/components/home.jsx +++ b/src/components/home.jsx @@ -1,4 +1,5 @@ import { Link } from 'react-scroll'; +import AnimatedText from './shared/animatedText'; import emblemOne from '/icons/emblem-one.png'; import emblemTwo from '/icons/emblem-two.png'; import emblemThree from '/icons/emblem-three.png'; @@ -47,7 +48,9 @@ const HomePage = () => {
Creative Designer & - FullStack Developer +
+ +
diff --git a/src/components/shared/animatedText.jsx b/src/components/shared/animatedText.jsx new file mode 100644 index 0000000..933cf12 --- /dev/null +++ b/src/components/shared/animatedText.jsx @@ -0,0 +1,49 @@ +import { useState, useRef, useEffect } from 'react'; +import '../../styles/css/aniText.css'; + +const AnimatedText = () => { + const titles = ['FullStack Developer', 'Backend Engineer', 'FrontEnd Developer', 'Rails Enthusiast']; + const counter = useRef(0); + const textHolderRef = useRef(); + const textRef = useRef(); + const currentBorder = useRef('top'); + const textLocation = useRef('top'); + const [text1, setText1] = useState(titles[counter.current]); + + const changeText = () => { + // classes : drop-text-from-${textLocation} + const locations = ['top', 'right', 'bottom', 'left']; + const locationId = Math.floor(Math.random() * 4); + const currentLocation = locations[locationId]; + textHolderRef.current.classList.add(`style-border-${currentLocation}`); + + setTimeout(() => { + textHolderRef.current.classList.remove(`style-border-${currentLocation}`); + if(counter.current === titles.length - 1){ + counter.current = 0; + setText1(titles[counter.current]); + }else { + counter.current++; + setText1(titles[counter.current]); + } + }, 5000); + }; + + useEffect(() => { + const intervalId = setInterval(changeText, 5000); + + return () => { + clearInterval(intervalId); + }; + }, []); + + return ( +
+ + {text1} + +
+ ); +}; + +export default AnimatedText; diff --git a/src/styles/css/aniText.css b/src/styles/css/aniText.css new file mode 100644 index 0000000..a1c1e94 --- /dev/null +++ b/src/styles/css/aniText.css @@ -0,0 +1 @@ +@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";.animatedTextHolder{overflow:hidden;position:relative;width:fit-content;border-left:0px;opacity:0}.animatedTextHolder .textFirst{position:relative;left:0px;top:0px;bottom:0px;right:0px}@keyframes animateTop{4%{border-top-width:3px}50%{opacity:1}80%{opacity:1}100%{border-top-width:3px;opacity:0}}.style-border-top{border-top-width:0px;border-top-style:solid;border-top-color:#ffb742;opacity:0;animation:animateTop 5s linear forwards}@keyframes animateBottom{8%{border-bottom-width:3px}50%{opacity:1}80%{opacity:1}100%{border-bottom-width:3px;opacity:0}}.style-border-bottom{border-bottom-color:#ffb742;border-bottom-style:solid;border-bottom-width:0px;opacity:0;animation:animateBottom 5s linear forwards}@keyframes animateRight{8%{border-right-width:3px}50%{opacity:1}80%{opacity:1}100%{border-right-width:3px;opacity:0}}.style-border-right{border-right-style:solid;border-right-color:#ffb742;border-right-width:0px;opacity:0;animation:animateRight 5s linear forwards}@keyframes animateLeft{8%{border-left-width:3px}50%{opacity:1}80%{opacity:1}100%{border-left-width:3px;opacity:0}}.style-border-left{border-left-style:solid;border-left-color:#ffb742;border-left-width:0px;opacity:0;animation:animateLeft 5s linear forwards}/*# sourceMappingURL=aniText.css.map */ \ No newline at end of file diff --git a/src/styles/css/aniText.css.map b/src/styles/css/aniText.css.map new file mode 100644 index 0000000..e2e952f --- /dev/null +++ b/src/styles/css/aniText.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/aniText.scss"],"names":[],"mappings":"AAAQ,+JCER,oBACE,gBACA,kBACA,kBACA,gBACA,UAGA,+BACE,kBACA,SACA,QACA,WACA,UAKJ,sBACE,GACE,qBAGF,IACE,UAGF,IACE,UAGF,KACE,qBACA,WAIJ,kBACE,qBACA,uBACA,iBDnCmB,QCoCnB,UACA,wCAGF,yBACE,GACE,wBAGF,IACE,UAGF,IACE,UAGF,KACE,wBACA,WAIJ,qBACE,oBD5DmB,QC6DnB,0BACA,wBACA,UACA,2CAGF,wBACE,GACE,uBAGF,IACE,UAGF,IACE,UAGF,KACE,uBACA,WAIJ,oBACE,yBACA,mBDxFmB,QCyFnB,uBACA,UACA,0CAGF,uBACE,GACE,sBAGF,IACE,UAGF,IACE,UAGF,KACE,sBACA,WAIJ,mBACE,wBACA,kBDnHmB,QCoHnB,sBACA,UACA","file":"aniText.css"} \ No newline at end of file diff --git a/src/styles/css/app.css b/src/styles/css/app.css index 664eb69..9b3f406 100644 --- a/src/styles/css/app.css +++ b/src/styles/css/app.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:#212529;overflow-x:hidden}#root{width:100%;height:100%;overflow-x:hidden}@media screen and (max-width: 767px){.App{width:100%;height:100%;position:relative;overflow-x:hidden}}@media screen and (min-width: 767px){.App{max-width:100%;overflow-x:hidden;display:flex;flex-direction:column;position:relative}.navHolder{width:100%;height:70px;position:fixed;z-index:999;background-color:#292b2e;box-shadow:2px 2px 5px rgba(0,0,0,.39)}}/*# sourceMappingURL=app.css.map */ \ No newline at end of file +@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html,body{background-color:#212529;overflow-x:hidden}#root{width:100%;height:100%;overflow-x:hidden}@media screen and (max-width: 767px){.App{width:100%;height:100%;position:relative;overflow-x:hidden}}@media screen and (min-width: 767px){.App{max-width:100%;overflow-x:hidden;display:flex;flex-direction:column;position:relative}.navHolder{width:100%;height:70px;position:fixed;z-index:999;background-color:#292b2e;box-shadow:2px 2px 5px rgba(0,0,0,.39)}}/*# sourceMappingURL=app.css.map */ \ No newline at end of file diff --git a/src/styles/css/app.css.map b/src/styles/css/app.css.map index 9abc7ba..91c3d3e 100644 --- a/src/styles/css/app.css.map +++ b/src/styles/css/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/app.scss"],"names":[],"mappings":"AAAQ,+JCGR,qBAGE,sBACA,SACA,UAGF,UAEE,iBDTiB,QCUjB,kBAGF,MACE,WACA,YACA,kBAGF,qCACE,KACE,WACA,YACA,kBACA,mBAIJ,qCACE,KACE,eACA,kBACA,aACA,sBACA,kBAGF,WACE,WACA,YACA,eACA,YACA,iBDpCU,QCqCV","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/app.scss"],"names":[],"mappings":"AAAQ,+JCGR,qBAGE,sBACA,SACA,UAGF,KACE,uBAGF,UAEE,iBDbiB,QCcjB,kBAGF,MACE,WACA,YACA,kBAGF,qCACE,KACE,WACA,YACA,kBACA,mBAIJ,qCACE,KACE,eACA,kBACA,aACA,sBACA,kBAGF,WACE,WACA,YACA,eACA,YACA,iBDxCU,QCyCV","file":"app.css"} \ No newline at end of file diff --git a/src/styles/css/home.css b/src/styles/css/home.css index ed17b1a..22ee110 100644 --- a/src/styles/css/home.css +++ b/src/styles/css/home.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";@media(max-width: 440px){#Home{width:100%;margin-bottom:100px;margin-top:60px}#Home .introHeader{width:100%;padding:15px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:15px}#Home .introHeader .headerpart1{width:100%;display:inline-flex;align-items:center;justify-content:center}#Home .introHeader .headerpart1 .introductionText{word-spacing:.2rem;font-size:1.5rem;font-family:"Inter",sans-serif;color:#fff}#Home .introHeader .headerpart1 .introductionText a{color:#ffb742;word-spacing:.05rem;text-decoration:underline}#Home .introHeader .headerpart1 img{margin-left:5px;width:25px}#Home .introHeader .headerpart2{width:100%;margin-top:10px;margin-bottom:40px}#Home .introHeader .headerpart2 .textHolder{width:100%;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;margin-top:15px;font-size:1rem;line-height:20px;color:#fff;font-family:"Inter",sans-serif;font-weight:700;text-align:center}#Home .introHeader .headerpart2 .textHolder .creative{width:fit-content}#Home .introHeader .headerpart2 .textHolder .and{width:fit-content;font-size:.8rem;font-weight:500;background-color:rgba(0,0,0,.4);padding:2px 5px;margin:2px 0px;border-radius:10px}#Home .introHeader .headerpart2 .textHolder .stack{width:fit-content}#Home .introHeader .headerpart3{margin-top:10px;width:100%}#Home .introHeader .headerpart3 .desc{width:100%;text-align:center;line-height:25px;margin:0 auto;font-size:.8rem;font-weight:500;color:#fff;font-family:"Inter",sans-serif}#Home .headPieceSection{width:100%;margin-top:5px}#Home .headPieceSection .headPieceContainer{position:relative;display:flex;justify-content:center;align-items:flex-end;width:170px;margin:0 auto;height:200px;border-radius:50%;border-top-right-radius:0%;border-top-left-radius:0%;overflow:hidden}#Home .headPieceSection .headPieceContainer .background{position:absolute;bottom:0;width:165px;height:160px;border-radius:50%;background-color:#ffb742;border:2px solid #1c1c1c}#Home .headPieceSection .headPieceContainer img{position:absolute;bottom:0;object-fit:contain;width:200px}#Home .achievementSection{width:100%;margin-top:25px}#Home .achievementSection .cardHolder{width:85%;min-width:200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:10px}#Home .achievementSection .cardHolder .arch{width:100%;max-width:500px;background-color:#292b2e;border-radius:15px;padding:10px 10px;display:flex;justify-content:center;align-items:center;column-gap:10px}#Home .achievementSection .cardHolder .arch img{width:45px;padding:5px;border-radius:50%;background-color:#fff;object-fit:contain}#Home .achievementSection .cardHolder .arch .text{width:100%;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:10px;background-color:rgba(0,0,0,0)}#Home .achievementSection .cardHolder .arch .text .upperText{color:#ffb742;font-size:1.2rem;font-family:"Inter",sans-serif;font-weight:900}#Home .achievementSection .cardHolder .arch .text .subText{color:#fff;font-size:1rem;font-family:"Inter",sans-serif;text-align:center;font-weight:500}#Home .achievementSection .cardHolder .arch a{width:20%;font-size:1.3rem;color:#d3d3d3;font-family:"Poppins",sans-serif;font-weight:900;text-decoration:none;transform:rotate(90deg);text-align:center;vertical-align:middle}}@media(min-width: 441px)and (max-width: 767px){#Home{width:100%;margin-bottom:100px;margin-top:100px}#Home .introHeader{width:100%;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:15px}#Home .introHeader .headerpart1{display:inline-flex;align-items:center;justify-content:center}#Home .introHeader .headerpart1 .introductionText{word-spacing:.2rem;font-size:1.5rem;font-family:"Inter",sans-serif;color:#fff}#Home .introHeader .headerpart1 .introductionText a{color:#ffb742;word-spacing:.05rem;text-decoration:underline}#Home .introHeader .headerpart1 img{margin-left:5px;width:25px}#Home .introHeader .headerpart2{width:100%;padding:10px 5px}#Home .introHeader .headerpart2 .textHolder{width:100%;display:inline-flex;justify-content:center;align-items:center;column-gap:7px;margin-top:15px;font-size:1.09rem;color:#fff;font-family:"Inter",sans-serif;font-weight:700;text-align:center}#Home .introHeader .headerpart2 .textHolder .creative{width:fit-content}#Home .introHeader .headerpart2 .textHolder .and{width:fit-content}#Home .introHeader .headerpart2 .textHolder .stack{width:fit-content}#Home .introHeader .headerpart3{margin-top:10px;width:100%}#Home .introHeader .headerpart3 .desc{width:fit-content;margin:0 auto;font-size:.8rem;font-weight:500;color:#fff;font-family:"Inter",sans-serif}#Home .headPieceSection{width:100%;margin-top:5px}#Home .headPieceSection .headPieceContainer{position:relative;display:flex;justify-content:center;align-items:flex-end;width:170px;margin:0 auto;height:200px;border-radius:50%;border-top-right-radius:0%;border-top-left-radius:0%;overflow:hidden}#Home .headPieceSection .headPieceContainer .background{position:absolute;bottom:0;width:165px;height:160px;border-radius:50%;background-color:#ffb742;border:2px solid #1c1c1c}#Home .headPieceSection .headPieceContainer img{position:absolute;bottom:0;object-fit:contain;width:200px}#Home .achievementSection{width:100%;margin-top:25px}#Home .achievementSection .cardHolder{width:85%;min-width:200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:10px}#Home .achievementSection .cardHolder .arch{width:100%;max-width:500px;background-color:#292b2e;border-radius:15px;padding:10px 10px;display:flex;justify-content:center;align-items:center;column-gap:10px}#Home .achievementSection .cardHolder .arch img{width:45px;padding:5px;border-radius:50%;background-color:#fff;object-fit:contain}#Home .achievementSection .cardHolder .arch .text{width:100%;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:10px;background-color:rgba(0,0,0,0)}#Home .achievementSection .cardHolder .arch .text .upperText{color:#ffb742;font-size:1.2rem;font-family:"Inter",sans-serif;font-weight:900}#Home .achievementSection .cardHolder .arch .text .subText{color:#fff;font-size:1rem;font-family:"Inter",sans-serif;text-align:center;font-weight:500}#Home .achievementSection .cardHolder .arch a{width:20%;font-size:1.3rem;color:#d3d3d3;font-family:"Poppins",sans-serif;font-weight:900;text-decoration:none;transform:rotate(90deg);text-align:center;vertical-align:middle}}@media(min-width: 768px){#Home{width:100%;margin-bottom:70px}#Home .introHeader{width:100%;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:15px}#Home .introHeader .headerpart1{display:inline-flex;align-items:center;justify-content:center}#Home .introHeader .headerpart1 .introductionText{word-spacing:.2rem;font-size:1.5rem;font-family:"Inter",sans-serif;color:#fff}#Home .introHeader .headerpart1 .introductionText a{color:#ffb742;word-spacing:.05rem;text-decoration:underline}#Home .introHeader .headerpart1 img{margin-left:10px;width:35px}#Home .introHeader .headerpart2{max-width:700px;margin:0 auto;font-size:2rem;color:#fff;font-family:"Inter",sans-serif;font-weight:bold;display:inline-flex;align-items:center;justify-content:center;column-gap:15px;margin-top:15px}#Home .introHeader .headerpart2 .textHolder{width:100%;display:flex;column-gap:15px}#Home .introHeader .headerpart3{margin-top:25px;width:100%}#Home .introHeader .headerpart3 .desc{width:fit-content;margin:0 auto;font-size:.8rem;font-weight:500;color:#fff;font-family:"Inter",sans-serif}#Home .headPieceSection{width:100%;margin-top:15px}#Home .headPieceSection .headPieceContainer{position:relative;display:flex;justify-content:center;align-items:flex-end;width:170px;margin:0 auto;height:200px;border-radius:50%;border-top-right-radius:0%;border-top-left-radius:0%;overflow:hidden}#Home .headPieceSection .headPieceContainer .background{position:absolute;bottom:0;width:165px;height:160px;border-radius:50%;background-color:#ffb742;border:2px solid #1c1c1c}#Home .headPieceSection .headPieceContainer img{position:absolute;bottom:0;object-fit:contain;width:200px}#Home .achievementSection{width:100%;margin-top:50px}#Home .achievementSection .cardHolder{width:75%;margin:0 auto;display:flex;justify-content:center;column-gap:25px}#Home .achievementSection .cardHolder .arch{width:33.5%;max-width:410px;background-color:#292b2e;border-radius:15px;padding:10px 15px;display:flex;justify-content:center;align-items:center;column-gap:20px}#Home .achievementSection .cardHolder .arch img{width:45px;padding:5px;border-radius:50%;background-color:#fff;object-fit:contain}#Home .achievementSection .cardHolder .arch .text{width:85%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:10px}#Home .achievementSection .cardHolder .arch .text .upperText{color:#ffb742;font-size:1.2rem;font-family:"Inter",sans-serif;font-weight:900;height:35%}#Home .achievementSection .cardHolder .arch .text .subText{color:#fff;font-size:1rem;font-family:"Inter",sans-serif;text-align:center;font-weight:500;height:65%}#Home .achievementSection .cardHolder .arch a{width:10%;font-size:1.2rem;color:#d3d3d3;font-family:"Poppins",sans-serif;font-weight:900;text-decoration:none}}/*# sourceMappingURL=home.css.map */ \ No newline at end of file +@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";@media(max-width: 440px){#Home{width:100%;margin-bottom:100px;margin-top:60px}#Home .introHeader{width:100%;padding:15px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:15px}#Home .introHeader .headerpart1{width:100%;display:inline-flex;align-items:center;justify-content:center}#Home .introHeader .headerpart1 .introductionText{word-spacing:.2rem;font-size:1.5rem;font-family:"Inter",sans-serif;color:#fff}#Home .introHeader .headerpart1 .introductionText a{color:#ffb742;word-spacing:.05rem;text-decoration:underline;cursor:pointer}#Home .introHeader .headerpart1 img{margin-left:5px;width:25px}#Home .introHeader .headerpart2{width:100%;margin-top:10px;margin-bottom:40px}#Home .introHeader .headerpart2 .textHolder{width:100%;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;margin-top:15px;font-size:1rem;line-height:20px;color:#fff;font-family:"Inter",sans-serif;font-weight:700;text-align:center}#Home .introHeader .headerpart2 .textHolder .creative{width:fit-content}#Home .introHeader .headerpart2 .textHolder .and{width:fit-content;font-size:.8rem;font-weight:500;background-color:rgba(0,0,0,.4);padding:2px 5px;margin:2px 0;border-radius:10px}#Home .introHeader .headerpart2 .textHolder .stack{width:fit-content}#Home .introHeader .headerpart3{margin-top:10px;width:100%}#Home .introHeader .headerpart3 .desc{width:100%;text-align:center;line-height:25px;margin:0 auto;font-size:.8rem;font-weight:500;color:#fff;font-family:"Inter",sans-serif}#Home .headPieceSection{width:100%;margin-top:5px}#Home .headPieceSection .headPieceContainer{position:relative;display:flex;justify-content:center;align-items:flex-end;width:170px;margin:0 auto;height:200px;border-radius:50%;border-top-right-radius:0%;border-top-left-radius:0%;overflow:hidden}#Home .headPieceSection .headPieceContainer .background{position:absolute;bottom:0;width:165px;height:160px;border-radius:50%;background-color:#ffb742;border:2px solid #1c1c1c}#Home .headPieceSection .headPieceContainer img{position:absolute;bottom:0;object-fit:contain;width:200px}#Home .achievementSection{width:100%;margin-top:25px}#Home .achievementSection .cardHolder{width:85%;min-width:200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:10px}#Home .achievementSection .cardHolder .arch{width:100%;max-width:500px;background-color:#292b2e;border-radius:15px;padding:10px 10px;display:flex;justify-content:center;align-items:center;column-gap:10px}#Home .achievementSection .cardHolder .arch img{width:45px;padding:5px;border-radius:50%;background-color:#fff;object-fit:contain}#Home .achievementSection .cardHolder .arch .text{width:100%;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:10px;background-color:rgba(0,0,0,0)}#Home .achievementSection .cardHolder .arch .text .upperText{color:#ffb742;font-size:1.2rem;font-family:"Inter",sans-serif;font-weight:900}#Home .achievementSection .cardHolder .arch .text .subText{color:#fff;font-size:1rem;font-family:"Inter",sans-serif;text-align:center;font-weight:500}#Home .achievementSection .cardHolder .arch a{width:20%;font-size:1.3rem;color:#d3d3d3;font-family:"Poppins",sans-serif;font-weight:900;text-decoration:none;transform:rotate(90deg);text-align:center;vertical-align:middle;cursor:pointer}}@media(min-width: 441px)and (max-width: 767px){#Home{width:100%;margin-bottom:100px;margin-top:100px}#Home .introHeader{width:100%;padding:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:15px}#Home .introHeader .headerpart1{display:inline-flex;align-items:center;justify-content:center}#Home .introHeader .headerpart1 .introductionText{word-spacing:.2rem;font-size:1.5rem;font-family:"Inter",sans-serif;color:#fff}#Home .introHeader .headerpart1 .introductionText a{color:#ffb742;word-spacing:.05rem;text-decoration:underline;cursor:pointer}#Home .introHeader .headerpart1 img{margin-left:5px;width:25px}#Home .introHeader .headerpart2{width:100%;padding:10px 5px}#Home .introHeader .headerpart2 .textHolder{width:100%;display:inline-flex;justify-content:center;align-items:center;column-gap:7px;margin-top:15px;font-size:1.09rem;color:#fff;font-family:"Inter",sans-serif;font-weight:700;text-align:center}#Home .introHeader .headerpart2 .textHolder .creative{width:fit-content;max-width:45%}#Home .introHeader .headerpart2 .textHolder .and{width:fit-content;max-width:5%}#Home .introHeader .headerpart2 .textHolder .stack{width:200px;height:50px;display:flex;align-items:center;justify-content:start}#Home .introHeader .headerpart3{margin-top:10px;width:100%}#Home .introHeader .headerpart3 .desc{width:fit-content;margin:0 auto;font-size:.8rem;font-weight:500;color:#fff;font-family:"Inter",sans-serif}#Home .headPieceSection{width:100%;margin-top:5px}#Home .headPieceSection .headPieceContainer{position:relative;display:flex;justify-content:center;align-items:flex-end;width:170px;margin:0 auto;height:200px;border-radius:50%;border-top-right-radius:0%;border-top-left-radius:0%;overflow:hidden}#Home .headPieceSection .headPieceContainer .background{position:absolute;bottom:0;width:165px;height:160px;border-radius:50%;background-color:#ffb742;border:2px solid #1c1c1c}#Home .headPieceSection .headPieceContainer img{position:absolute;bottom:0;object-fit:contain;width:200px}#Home .achievementSection{width:100%;margin-top:25px}#Home .achievementSection .cardHolder{width:85%;min-width:200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:10px}#Home .achievementSection .cardHolder .arch{width:100%;max-width:500px;background-color:#292b2e;border-radius:15px;padding:10px 10px;display:flex;justify-content:center;align-items:center;column-gap:10px}#Home .achievementSection .cardHolder .arch img{width:45px;padding:5px;border-radius:50%;background-color:#fff;object-fit:contain}#Home .achievementSection .cardHolder .arch .text{width:100%;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:10px;background-color:rgba(0,0,0,0)}#Home .achievementSection .cardHolder .arch .text .upperText{color:#ffb742;font-size:1.2rem;font-family:"Inter",sans-serif;font-weight:900}#Home .achievementSection .cardHolder .arch .text .subText{color:#fff;font-size:1rem;font-family:"Inter",sans-serif;text-align:center;font-weight:500}#Home .achievementSection .cardHolder .arch a{width:20%;font-size:1.3rem;color:#d3d3d3;font-family:"Poppins",sans-serif;font-weight:900;text-decoration:none;transform:rotate(90deg);text-align:center;vertical-align:middle;cursor:pointer}}@media(min-width: 768px){#Home{width:100%;margin-bottom:70px}#Home .introHeader{width:100%;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:15px}#Home .introHeader .headerpart1{display:inline-flex;align-items:center;justify-content:center}#Home .introHeader .headerpart1 .introductionText{word-spacing:.2rem;font-size:1.5rem;font-family:"Inter",sans-serif;color:#fff}#Home .introHeader .headerpart1 .introductionText a{color:#ffb742;word-spacing:.05rem;text-decoration:underline;cursor:pointer}#Home .introHeader .headerpart1 img{margin-left:10px;width:35px}#Home .introHeader .headerpart2{max-width:700px;margin:0 auto;font-size:2rem;color:#fff;font-family:"Inter",sans-serif;font-weight:bold;display:inline-flex;align-items:center;justify-content:center;column-gap:15px;margin-top:15px}#Home .introHeader .headerpart2 .textHolder{width:100%;display:flex;column-gap:15px}#Home .introHeader .headerpart2 .textHolder .creative{width:fit-content;overflow:hidden}#Home .introHeader .headerpart2 .textHolder .and{width:fit-content;overflow:hidden}#Home .introHeader .headerpart2 .textHolder .stack{width:350px;height:40px;display:flex;align-items:center;justify-content:start}#Home .introHeader .headerpart3{margin-top:25px;width:100%}#Home .introHeader .headerpart3 .desc{width:fit-content;margin:0 auto;font-size:.8rem;font-weight:500;color:#fff;font-family:"Inter",sans-serif}#Home .headPieceSection{width:100%;margin-top:15px}#Home .headPieceSection .headPieceContainer{position:relative;display:flex;justify-content:center;align-items:flex-end;width:170px;margin:0 auto;height:200px;border-radius:50%;border-top-right-radius:0%;border-top-left-radius:0%;overflow:hidden}#Home .headPieceSection .headPieceContainer .background{position:absolute;bottom:0;width:165px;height:160px;border-radius:50%;background-color:#ffb742;border:2px solid #1c1c1c}#Home .headPieceSection .headPieceContainer img{position:absolute;bottom:0;object-fit:contain;width:200px}#Home .achievementSection{width:100%;margin-top:50px}#Home .achievementSection .cardHolder{width:75%;margin:0 auto;display:flex;justify-content:center;column-gap:25px}#Home .achievementSection .cardHolder .arch{width:33.5%;max-width:410px;background-color:#292b2e;border-radius:15px;padding:10px 15px;display:flex;justify-content:center;align-items:center;column-gap:20px}#Home .achievementSection .cardHolder .arch img{width:45px;padding:5px;border-radius:50%;background-color:#fff;object-fit:contain}#Home .achievementSection .cardHolder .arch .text{width:85%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;row-gap:10px}#Home .achievementSection .cardHolder .arch .text .upperText{color:#ffb742;font-size:1.2rem;font-family:"Inter",sans-serif;font-weight:900;height:35%}#Home .achievementSection .cardHolder .arch .text .subText{color:#fff;font-size:1rem;font-family:"Inter",sans-serif;text-align:center;font-weight:500;height:65%}#Home .achievementSection .cardHolder .arch a{width:10%;font-size:1.2rem;color:#d3d3d3;font-family:"Poppins",sans-serif;font-weight:900;text-decoration:none;cursor:pointer}}/*# sourceMappingURL=home.css.map */ \ No newline at end of file diff --git a/src/styles/css/home.css.map b/src/styles/css/home.css.map index fc34c35..66f7ea1 100644 --- a/src/styles/css/home.css.map +++ b/src/styles/css/home.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/home.scss"],"names":[],"mappings":"AAAQ,+JCER,yBACE,MACE,WACA,oBACA,gBAEA,mBACE,WACA,kBACA,aACA,sBACA,mBACA,uBACA,gBAEA,gCACE,WACA,oBACA,mBACA,uBAEA,kDACE,mBACA,iBACA,YDEG,mBCDH,MDhBM,KCkBN,oDACE,MDvBS,QCwBT,oBACA,0BAIJ,oCACE,gBACA,WAIJ,gCACE,WACA,gBACA,mBAEA,4CACE,WACA,oBACA,sBACA,uBACA,mBACA,gBACA,eACA,iBACA,MD7CM,KC8CN,YD7BG,mBC8BH,gBACA,kBAEA,sDACE,kBAGF,iDACE,kBACA,gBACA,gBACA,gCACA,gBACA,eACA,mBAGF,mDACE,kBAKN,gCACE,gBACA,WAEA,sCACE,WACA,kBACA,iBACA,cACA,gBACA,gBACA,MDjFM,KCkFN,YDjEG,mBCsET,wBACE,WACA,eAEA,4CACE,kBACA,aACA,uBACA,qBACA,YACA,cACA,aACA,kBACA,2BACA,0BACA,gBAEA,wDACE,kBACA,SACA,YACA,aACA,kBACA,iBDlHW,QCmHX,yBAGF,gDACE,kBACA,SACA,mBACA,YAKN,0BACE,WACA,gBAEA,sCACE,UACA,gBACA,cACA,aACA,sBACA,mBACA,uBACA,aAEA,4CACE,WACA,gBACA,iBD7II,QC8IJ,mBACA,kBACA,aACA,uBACA,mBACA,gBAEA,gDACE,WACA,YACA,kBACA,iBDxJI,KCyJJ,mBAGF,kDACE,WACA,iBACA,aACA,mBACA,uBACA,sBACA,aACA,+BAEA,6DACE,MD3KO,QC4KP,iBACA,YDxJD,mBCyJC,gBAGF,2DACE,MD9KE,KC+KF,eACA,YD/JD,mBCgKC,kBACA,gBAIJ,8CACE,UACA,iBACA,cACA,YD5KG,qBC6KH,gBACA,qBACA,wBACA,kBACA,uBAQZ,+CACE,MACE,WACA,oBACA,iBAEA,mBACE,WACA,aACA,aACA,sBACA,mBACA,uBACA,gBAEA,gCACE,oBACA,mBACA,uBAEA,kDACE,mBACA,iBACA,YD7MG,mBC8MH,MD/NM,KCiON,oDACE,MDtOS,QCuOT,oBACA,0BAIJ,oCACE,gBACA,WAIJ,gCACE,WACA,iBAEA,4CACE,WACA,oBAEA,uBACA,mBACA,eACA,gBACA,kBACA,MD3PM,KC4PN,YD3OG,mBC4OH,gBACA,kBAEA,sDACE,kBAGF,iDACE,kBAGF,mDACE,kBAKN,gCACE,gBACA,WAEA,sCACE,kBACA,cACA,gBACA,gBACA,MDvRM,KCwRN,YDvQG,mBC4QT,wBACE,WACA,eAEA,4CACE,kBACA,aACA,uBACA,qBACA,YACA,cACA,aACA,kBACA,2BACA,0BACA,gBAEA,wDACE,kBACA,SACA,YACA,aACA,kBACA,iBDxTW,QCyTX,yBAGF,gDACE,kBACA,SACA,mBACA,YAKN,0BACE,WACA,gBAEA,sCACE,UACA,gBACA,cACA,aACA,sBACA,mBACA,uBACA,aAEA,4CACE,WACA,gBACA,iBDnVI,QCoVJ,mBACA,kBACA,aACA,uBACA,mBACA,gBAEA,gDACE,WACA,YACA,kBACA,iBD9VI,KC+VJ,mBAGF,kDACE,WACA,iBACA,aACA,mBACA,uBACA,sBACA,aACA,+BAEA,6DACE,MDjXO,QCkXP,iBACA,YD9VD,mBC+VC,gBAGF,2DACE,MDpXE,KCqXF,eACA,YDrWD,mBCsWC,kBACA,gBAIJ,8CACE,UACA,iBACA,cACA,YDlXG,qBCmXH,gBACA,qBACA,wBACA,kBACA,uBAQZ,yBACE,MACE,WACA,mBAEA,mBACE,WACA,aACA,aACA,sBACA,mBACA,uBACA,gBAEA,gCACE,oBACA,mBACA,uBAEA,kDACE,mBACA,iBACA,YDlZG,mBCmZH,MDpaM,KCsaN,oDACE,MD3aS,QC4aT,oBACA,0BAIJ,oCACE,iBACA,WAIJ,gCAEE,gBACA,cACA,eACA,MDxbQ,KCybR,YDxaK,mBCyaL,iBACA,oBACA,mBACA,uBACA,gBACA,gBAEA,4CACE,WACA,aACA,gBAIJ,gCACE,gBACA,WAEA,sCACE,kBACA,cACA,gBACA,gBACA,MDjdM,KCkdN,YDjcG,mBCscT,wBACE,WACA,gBAEA,4CACE,kBACA,aACA,uBACA,qBAEA,YACA,cACA,aACA,kBACA,2BACA,0BAEA,gBAEA,wDACE,kBACA,SACA,YACA,aACA,kBACA,iBDpfW,QCqfX,yBAGF,gDACE,kBACA,SACA,mBACA,YAKN,0BACE,WACA,gBAEA,sCACE,UACA,cACA,aACA,uBACA,gBAEA,4CACE,YACA,gBACA,iBD5gBI,QC6gBJ,mBACA,kBACA,aACA,uBACA,mBACA,gBAEA,gDACE,WACA,YACA,kBACA,iBDvhBI,KCwhBJ,mBAGF,kDACE,UACA,YACA,aACA,mBACA,uBACA,sBACA,aAEA,6DACE,MDziBO,QC0iBP,iBACA,YDthBD,mBCuhBC,gBACA,WAGF,2DACE,MD7iBE,KC8iBF,eACA,YD9hBD,mBC+hBC,kBACA,gBACA,WAIJ,8CACE,UACA,iBACA,cACA,YD5iBG,qBC6iBH,gBACA","file":"home.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/home.scss"],"names":[],"mappings":"AAAQ,+JCER,yBACE,MACE,WACA,oBACA,gBAEA,mBACE,WACA,kBACA,aACA,sBACA,mBACA,uBACA,gBAEA,gCACE,WACA,oBACA,mBACA,uBAEA,kDACE,mBACA,iBACA,YDEG,mBCDH,MDhBM,KCkBN,oDACE,MDvBS,QCwBT,oBACA,0BACA,eAIJ,oCACE,gBACA,WAIJ,gCACE,WACA,gBACA,mBAEA,4CACE,WACA,oBACA,sBACA,uBACA,mBACA,gBACA,eACA,iBACA,MD9CM,KC+CN,YD9BG,mBC+BH,gBACA,kBAEA,sDACE,kBAGF,iDACE,kBACA,gBACA,gBACA,gCACA,gBACA,aACA,mBAGF,mDACE,kBAKN,gCACE,gBACA,WAEA,sCACE,WACA,kBACA,iBACA,cACA,gBACA,gBACA,MDlFM,KCmFN,YDlEG,mBCuET,wBACE,WACA,eAEA,4CACE,kBACA,aACA,uBACA,qBACA,YACA,cACA,aACA,kBACA,2BACA,0BACA,gBAEA,wDACE,kBACA,SACA,YACA,aACA,kBACA,iBDnHW,QCoHX,yBAGF,gDACE,kBACA,SACA,mBACA,YAKN,0BACE,WACA,gBAEA,sCACE,UACA,gBACA,cACA,aACA,sBACA,mBACA,uBACA,aAEA,4CACE,WACA,gBACA,iBD9II,QC+IJ,mBACA,kBACA,aACA,uBACA,mBACA,gBAEA,gDACE,WACA,YACA,kBACA,iBDzJI,KC0JJ,mBAGF,kDACE,WACA,iBACA,aACA,mBACA,uBACA,sBACA,aACA,+BAEA,6DACE,MD5KO,QC6KP,iBACA,YDzJD,mBC0JC,gBAGF,2DACE,MD/KE,KCgLF,eACA,YDhKD,mBCiKC,kBACA,gBAIJ,8CACE,UACA,iBACA,cACA,YD7KG,qBC8KH,gBACA,qBACA,wBACA,kBACA,sBACA,gBAQZ,+CACE,MACE,WACA,oBACA,iBAEA,mBACE,WACA,aACA,aACA,sBACA,mBACA,uBACA,gBAEA,gCACE,oBACA,mBACA,uBAEA,kDACE,mBACA,iBACA,YD/MG,mBCgNH,MDjOM,KCmON,oDACE,MDxOS,QCyOT,oBACA,0BACA,eAIJ,oCACE,gBACA,WAIJ,gCACE,WACA,iBAEA,4CACE,WACA,oBAEA,uBACA,mBACA,eACA,gBACA,kBACA,MD9PM,KC+PN,YD9OG,mBC+OH,gBACA,kBAEA,sDACE,kBACA,cAGF,iDACE,kBACA,aAGF,mDACE,YACA,YAEA,aACA,mBACA,sBAKN,gCACE,gBACA,WAEA,sCACE,kBACA,cACA,gBACA,gBACA,MDjSM,KCkSN,YDjRG,mBCsRT,wBACE,WACA,eAEA,4CACE,kBACA,aACA,uBACA,qBACA,YACA,cACA,aACA,kBACA,2BACA,0BACA,gBAEA,wDACE,kBACA,SACA,YACA,aACA,kBACA,iBDlUW,QCmUX,yBAGF,gDACE,kBACA,SACA,mBACA,YAKN,0BACE,WACA,gBAEA,sCACE,UACA,gBACA,cACA,aACA,sBACA,mBACA,uBACA,aAEA,4CACE,WACA,gBACA,iBD7VI,QC8VJ,mBACA,kBACA,aACA,uBACA,mBACA,gBAEA,gDACE,WACA,YACA,kBACA,iBDxWI,KCyWJ,mBAGF,kDACE,WACA,iBACA,aACA,mBACA,uBACA,sBACA,aACA,+BAEA,6DACE,MD3XO,QC4XP,iBACA,YDxWD,mBCyWC,gBAGF,2DACE,MD9XE,KC+XF,eACA,YD/WD,mBCgXC,kBACA,gBAIJ,8CACE,UACA,iBACA,cACA,YD5XG,qBC6XH,gBACA,qBACA,wBACA,kBACA,sBACA,gBAQZ,yBACE,MACE,WACA,mBAEA,mBACE,WACA,aACA,aACA,sBACA,mBACA,uBACA,gBAEA,gCACE,oBACA,mBACA,uBAEA,kDACE,mBACA,iBACA,YD7ZG,mBC8ZH,MD/aM,KCibN,oDACE,MDtbS,QCubT,oBACA,0BACA,eAIJ,oCACE,iBACA,WAIJ,gCACE,gBACA,cACA,eACA,MDncQ,KCocR,YDnbK,mBCobL,iBACA,oBACA,mBACA,uBACA,gBACA,gBAEA,4CACE,WACA,aACA,gBAEA,sDACE,kBACA,gBAGF,iDACE,kBACA,gBAGF,mDACE,YACA,YAEA,aACA,mBACA,sBAMN,gCACE,gBACA,WAEA,sCACE,kBACA,cACA,gBACA,gBACA,MDhfM,KCifN,YDheG,mBCqeT,wBACE,WACA,gBAEA,4CACE,kBACA,aACA,uBACA,qBAEA,YACA,cACA,aACA,kBACA,2BACA,0BAEA,gBAEA,wDACE,kBACA,SACA,YACA,aACA,kBACA,iBDnhBW,QCohBX,yBAGF,gDACE,kBACA,SACA,mBACA,YAKN,0BACE,WACA,gBAEA,sCACE,UACA,cACA,aACA,uBACA,gBAEA,4CACE,YACA,gBACA,iBD3iBI,QC4iBJ,mBACA,kBACA,aACA,uBACA,mBACA,gBAEA,gDACE,WACA,YACA,kBACA,iBDtjBI,KCujBJ,mBAGF,kDACE,UACA,YACA,aACA,mBACA,uBACA,sBACA,aAEA,6DACE,MDxkBO,QCykBP,iBACA,YDrjBD,mBCsjBC,gBACA,WAGF,2DACE,MD5kBE,KC6kBF,eACA,YD7jBD,mBC8jBC,kBACA,gBACA,WAIJ,8CACE,UACA,iBACA,cACA,YD3kBG,qBC4kBH,gBACA,qBACA","file":"home.css"} \ No newline at end of file diff --git a/src/styles/scss/aniText.scss b/src/styles/scss/aniText.scss new file mode 100644 index 0000000..125ba1c --- /dev/null +++ b/src/styles/scss/aniText.scss @@ -0,0 +1,127 @@ +@import './partials/config'; + +.animatedTextHolder { + overflow: hidden; + position: relative; + width: fit-content; + border-left: 0px; + opacity: 0; + + + .textFirst { + position: relative; + left: 0px; + top: 0px; + bottom: 0px; + right: 0px; + } +} + +// animation classes +@keyframes animateTop { + 4% { + border-top-width: 3px; + } + + 50% { + opacity: 1; + } + + 80% { + opacity: 1; + } + + 100% { + border-top-width: 3px; + opacity: 0; + } +} + +.style-border-top { + border-top-width: 0px; + border-top-style: solid; + border-top-color: $primary-color-dark; + opacity: 0; + animation: animateTop 5s linear forwards; +} + +@keyframes animateBottom { + 8% { + border-bottom-width: 3px; + } + + 50% { + opacity: 1; + } + + 80% { + opacity: 1; + } + + 100% { + border-bottom-width: 3px; + opacity: 0; + } +} + +.style-border-bottom { + border-bottom-color: $primary-color-dark; + border-bottom-style: solid; + border-bottom-width: 0px; + opacity: 0; + animation: animateBottom 5s linear forwards; +} + +@keyframes animateRight { + 8% { + border-right-width: 3px; + } + + 50% { + opacity: 1; + } + + 80% { + opacity: 1; + } + + 100% { + border-right-width: 3px; + opacity: 0; + } +} + +.style-border-right { + border-right-style: solid; + border-right-color: $primary-color-dark; + border-right-width: 0px; + opacity: 0; + animation: animateRight 5s linear forwards; +} + +@keyframes animateLeft { + 8% { + border-left-width: 3px; + } + + 50% { + opacity: 1; + } + + 80% { + opacity: 1; + } + + 100% { + border-left-width: 3px; + opacity: 0; + } +} + +.style-border-left { + border-left-style: solid; + border-left-color: $primary-color-dark; + border-left-width: 0px; + opacity: 0; + animation: animateLeft 5s linear forwards; +} diff --git a/src/styles/scss/app.scss b/src/styles/scss/app.scss index 91e6fb9..cd79c9f 100644 --- a/src/styles/scss/app.scss +++ b/src/styles/scss/app.scss @@ -9,6 +9,10 @@ padding: 0; } +html { + scroll-behavior: smooth; +} + html, body { background-color: $background-color; diff --git a/src/styles/scss/home.scss b/src/styles/scss/home.scss index a885add..6ea66ee 100644 --- a/src/styles/scss/home.scss +++ b/src/styles/scss/home.scss @@ -31,6 +31,7 @@ color: $primary-color-dark; word-spacing: 0.05rem; text-decoration: underline; + cursor: pointer; } } @@ -201,6 +202,7 @@ transform: rotate(90deg); text-align: center; vertical-align: middle; + cursor: pointer; } } } @@ -238,6 +240,7 @@ color: $primary-color-dark; word-spacing: 0.05rem; text-decoration: underline; + cursor: pointer; } } @@ -267,14 +270,21 @@ .creative { width: fit-content; + max-width: 45%; } .and { width: fit-content; + max-width: 5%; } .stack { - width: fit-content; + width: 200px; + height: 50px; + // border: 2px solid red; + display: flex; + align-items: center; + justify-content: start; } } } @@ -399,6 +409,7 @@ transform: rotate(90deg); text-align: center; vertical-align: middle; + cursor: pointer; } } } @@ -435,6 +446,7 @@ color: $primary-color-dark; word-spacing: 0.05rem; text-decoration: underline; + cursor: pointer; } } @@ -445,7 +457,6 @@ } .headerpart2 { - // width: 75%; max-width: 700px; margin: 0 auto; font-size: 2rem; @@ -462,6 +473,26 @@ width: 100%; display: flex; column-gap: 15px; + + .creative { + width: fit-content; + overflow: hidden; + } + + .and { + width: fit-content; + overflow: hidden; + } + + .stack { + width: 350px; + height: 40px; + // border: 2px solid red; + display: flex; + align-items: center; + justify-content: start; + } + } } @@ -582,6 +613,7 @@ font-family: $primary-font; font-weight: 900; text-decoration: none; + cursor: pointer; } } } diff --git a/src/styles/scss/partials/_config.scss b/src/styles/scss/partials/_config.scss index 7cc017a..96e83c6 100644 --- a/src/styles/scss/partials/_config.scss +++ b/src/styles/scss/partials/_config.scss @@ -53,3 +53,11 @@ $inter-font: 'Inter', sans-serif; color: $neutral-light; text-align: center; } + +@mixin animatedTextAttributes($fontSize) { + display: inline-flex; + position: relative; + flex-direction: column; + width: fit-content; + justify-content: center; +} \ No newline at end of file From 276af7921af1e48d6de16821e74cbfa3e9c94b5c Mon Sep 17 00:00:00 2001 From: gisa chris Date: Tue, 14 Nov 2023 17:29:10 +0200 Subject: [PATCH 2/3] add movement to animation with titles --- src/components/shared/animatedText.jsx | 47 +++--- src/styles/css/aniText.css | 2 +- src/styles/css/aniText.css.map | 2 +- src/styles/scss/aniText.scss | 207 +++++++++++++++++++++++-- 4 files changed, 220 insertions(+), 38 deletions(-) diff --git a/src/components/shared/animatedText.jsx b/src/components/shared/animatedText.jsx index 933cf12..13e3d73 100644 --- a/src/components/shared/animatedText.jsx +++ b/src/components/shared/animatedText.jsx @@ -2,40 +2,35 @@ import { useState, useRef, useEffect } from 'react'; import '../../styles/css/aniText.css'; const AnimatedText = () => { - const titles = ['FullStack Developer', 'Backend Engineer', 'FrontEnd Developer', 'Rails Enthusiast']; - const counter = useRef(0); + const titles = ['Web Developer', 'Backend Engineer', 'FrontEnd Developer', 'Rails Enthusiast', 'Rails Developer', 'Web Enthusiast', 'FullStack Developer']; const textHolderRef = useRef(); const textRef = useRef(); - const currentBorder = useRef('top'); - const textLocation = useRef('top'); - const [text1, setText1] = useState(titles[counter.current]); + const [index, setIndex] = useState(0); + const [text1, setText1] = useState(titles[0]); - const changeText = () => { - // classes : drop-text-from-${textLocation} + useEffect(() => { const locations = ['top', 'right', 'bottom', 'left']; - const locationId = Math.floor(Math.random() * 4); - const currentLocation = locations[locationId]; - textHolderRef.current.classList.add(`style-border-${currentLocation}`); + const currentLocation = locations[Math.floor(Math.random() * 4)]; - setTimeout(() => { - textHolderRef.current.classList.remove(`style-border-${currentLocation}`); - if(counter.current === titles.length - 1){ - counter.current = 0; - setText1(titles[counter.current]); - }else { - counter.current++; - setText1(titles[counter.current]); - } - }, 5000); - }; + if (index < titles.length) { + setText1(titles[index]); + textHolderRef.current.classList.add(`style-border-${currentLocation}`); + textRef.current.classList.add(`drop-text-from-${currentLocation}`); - useEffect(() => { - const intervalId = setInterval(changeText, 5000); + setTimeout(() => { + textHolderRef.current.classList.remove(`style-border-${currentLocation}`); + textRef.current.classList.remove(`drop-text-from-${currentLocation}`); + console.log(index); + setIndex((prevIndex) => prevIndex + 1); + }, 3500); + } - return () => { - clearInterval(intervalId); + if(index === titles.length - 1){ + setText1(titles[index]); + textHolderRef.current.classList.add('holderStay'); + textRef.current.classList.add('textStay'); }; - }, []); + }, [index]); return (
diff --git a/src/styles/css/aniText.css b/src/styles/css/aniText.css index a1c1e94..74cc8aa 100644 --- a/src/styles/css/aniText.css +++ b/src/styles/css/aniText.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";.animatedTextHolder{overflow:hidden;position:relative;width:fit-content;border-left:0px;opacity:0}.animatedTextHolder .textFirst{position:relative;left:0px;top:0px;bottom:0px;right:0px}@keyframes animateTop{4%{border-top-width:3px}50%{opacity:1}80%{opacity:1}100%{border-top-width:3px;opacity:0}}.style-border-top{border-top-width:0px;border-top-style:solid;border-top-color:#ffb742;opacity:0;animation:animateTop 5s linear forwards}@keyframes animateBottom{8%{border-bottom-width:3px}50%{opacity:1}80%{opacity:1}100%{border-bottom-width:3px;opacity:0}}.style-border-bottom{border-bottom-color:#ffb742;border-bottom-style:solid;border-bottom-width:0px;opacity:0;animation:animateBottom 5s linear forwards}@keyframes animateRight{8%{border-right-width:3px}50%{opacity:1}80%{opacity:1}100%{border-right-width:3px;opacity:0}}.style-border-right{border-right-style:solid;border-right-color:#ffb742;border-right-width:0px;opacity:0;animation:animateRight 5s linear forwards}@keyframes animateLeft{8%{border-left-width:3px}50%{opacity:1}80%{opacity:1}100%{border-left-width:3px;opacity:0}}.style-border-left{border-left-style:solid;border-left-color:#ffb742;border-left-width:0px;opacity:0;animation:animateLeft 5s linear forwards}/*# sourceMappingURL=aniText.css.map */ \ No newline at end of file +@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";.animatedTextHolder{overflow:hidden;position:relative;width:fit-content;border-left:0px;opacity:0;transition:border .5s ease-in-out}.animatedTextHolder .textFirst{position:relative;left:0px;top:0px;bottom:0px;right:0px;transition:position .5s ease-in-out}@keyframes animateBorderTop{4%{border-top-width:3px}50%{opacity:1}80%{opacity:1}100%{border-top-width:3px;opacity:0}}.style-border-top{border-top-width:0px;border-top-style:solid;border-top-color:#ffb742;opacity:0;animation:animateBorderTop 3.5s linear forwards}@keyframes animateBorderBottom{8%{border-bottom-width:3px}50%{opacity:1}80%{opacity:1}100%{border-bottom-width:3px;opacity:0}}.style-border-bottom{border-bottom-color:#ffb742;border-bottom-style:solid;border-bottom-width:0px;opacity:0;animation:animateBorderBottom 3.5s linear forwards}@keyframes animateBorderRight{8%{border-right-width:3px}50%{opacity:1}80%{opacity:1}100%{border-right-width:3px;opacity:0}}.style-border-right{border-right-style:solid;border-right-color:#ffb742;border-right-width:0px;opacity:0;animation:animateBorderRight 3.5s linear forwards}@keyframes animateBorderLeft{8%{border-left-width:3px}50%{opacity:1}80%{opacity:1}100%{border-left-width:3px;opacity:0}}.style-border-left{border-left-style:solid;border-left-color:#ffb742;border-left-width:0px;opacity:0;animation:animateBorderLeft 3.5s linear forwards}@keyframes animateTextTop{0%{opacity:0px;top:-25px}5%{opacity:1;top:0px}80%{top:0px;opacity:1}85%{top:-25px;opacity:0}100%{top:-25px;opacity:0}}.drop-text-from-top{top:-25px;opacity:0;animation:animateTextTop 3.5s linear forwards}@keyframes animateTextBottom{0%{opacity:0px;top:25px}5%{opacity:1;top:0px}80%{top:0px;opacity:1}85%{top:25px;opacity:0}100%{top:25px;opacity:0}}.drop-text-from-bottom{top:25px;opacity:0;animation:animateTextBottom 3.5s linear forwards}@keyframes animateTextLeft{0%{opacity:0;left:-40px}5%{opacity:1;left:0px}90%{left:0px;opacity:1}100%{left:-40px;opacity:0}}.drop-text-from-left{left:-40px;opacity:0;animation:animateTextLeft 3.5s linear forwards}@keyframes animateTextRight{0%{opacity:0;left:40px}5%{opacity:1;left:0px}90%{left:0px;opacity:1}100%{left:40px;opacity:0}}.drop-text-from-right{left:40px;opacity:0;animation:animateTextRight 3.5s linear forwards}@keyframes animateStayText{0%{opacity:0}100%{opacity:1}}@keyframes holderStayAnimation{8%{border-left-width:3px}50%{opacity:1}97%{border-left-width:3px}100%{opacity:1;border-left-width:0px}}@keyframes textStayAnimation{0%{opacity:0;left:-40px}5%{opacity:1;left:0px}100%{left:0px;opacity:1}}.holderStay{border-left-style:solid;border-left-color:#ffb742;border-left-width:0px;opacity:0;animation:holderStayAnimation 3.5s linear forwards}.textStay{left:-40px;opacity:0;animation:textStayAnimation 3.5s linear forwards}/*# sourceMappingURL=aniText.css.map */ \ No newline at end of file diff --git a/src/styles/css/aniText.css.map b/src/styles/css/aniText.css.map index e2e952f..5b69fb3 100644 --- a/src/styles/css/aniText.css.map +++ b/src/styles/css/aniText.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/aniText.scss"],"names":[],"mappings":"AAAQ,+JCER,oBACE,gBACA,kBACA,kBACA,gBACA,UAGA,+BACE,kBACA,SACA,QACA,WACA,UAKJ,sBACE,GACE,qBAGF,IACE,UAGF,IACE,UAGF,KACE,qBACA,WAIJ,kBACE,qBACA,uBACA,iBDnCmB,QCoCnB,UACA,wCAGF,yBACE,GACE,wBAGF,IACE,UAGF,IACE,UAGF,KACE,wBACA,WAIJ,qBACE,oBD5DmB,QC6DnB,0BACA,wBACA,UACA,2CAGF,wBACE,GACE,uBAGF,IACE,UAGF,IACE,UAGF,KACE,uBACA,WAIJ,oBACE,yBACA,mBDxFmB,QCyFnB,uBACA,UACA,0CAGF,uBACE,GACE,sBAGF,IACE,UAGF,IACE,UAGF,KACE,sBACA,WAIJ,mBACE,wBACA,kBDnHmB,QCoHnB,sBACA,UACA","file":"aniText.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/aniText.scss"],"names":[],"mappings":"AAAQ,+JCER,oBACE,gBACA,kBACA,kBACA,gBACA,UACA,kCAEA,+BACE,kBACA,SACA,QACA,WACA,UACA,oCAKJ,4BACE,GACE,qBAGF,IACE,UAGF,IACE,UAGF,KACE,qBACA,WAIJ,kBACE,qBACA,uBACA,iBDpCmB,QCqCnB,UACA,gDAGF,+BACE,GACE,wBAGF,IACE,UAGF,IACE,UAGF,KACE,wBACA,WAIJ,qBACE,oBD7DmB,QC8DnB,0BACA,wBACA,UACA,mDAGF,8BACE,GACE,uBAGF,IACE,UAGF,IACE,UAGF,KACE,uBACA,WAIJ,oBACE,yBACA,mBDzFmB,QC0FnB,uBACA,UACA,kDAGF,6BACE,GACE,sBAGF,IACE,UAGF,IACE,UAGF,KACE,sBACA,WAIJ,mBACE,wBACA,kBDpHmB,QCqHnB,sBACA,UACA,iDAKF,0BACE,GACE,YACA,UAGF,GACE,UACA,QAGF,IACE,QACA,UAGF,IACE,UACA,UAGF,KACE,UACA,WAIJ,oBACE,UACA,UACA,8CAGF,6BACE,GACE,YACA,SAGF,GACE,UACA,QAGF,IACE,QACA,UAGF,IACE,SACA,UAGF,KACE,SACA,WAIJ,uBACE,SACA,UACA,iDAGF,2BACE,GACE,UACA,WAGF,GACE,UACA,SAGF,IACE,SACA,UAGF,KACE,WACA,WAIJ,qBACE,WACA,UACA,+CAGF,4BACE,GACE,UACA,UAGF,GACE,UACA,SAGF,IACE,SACA,UAGF,KACE,UACA,WAIJ,sBACE,UACA,UACA,gDAGF,2BACE,GACE,UAGF,KACE,WAMJ,+BACE,GACE,sBAGF,IACE,UAGF,IACE,sBAGF,KACE,UACA,uBAIJ,6BACE,GACE,UACA,WAGF,GACE,UACA,SAGF,KACE,SACA,WAIJ,YACE,wBACA,kBDxSmB,QCySnB,sBACA,UACA,mDAGF,UACE,WACA,UACA","file":"aniText.css"} \ No newline at end of file diff --git a/src/styles/scss/aniText.scss b/src/styles/scss/aniText.scss index 125ba1c..41b046f 100644 --- a/src/styles/scss/aniText.scss +++ b/src/styles/scss/aniText.scss @@ -6,7 +6,7 @@ width: fit-content; border-left: 0px; opacity: 0; - + transition: border 0.5s ease-in-out; .textFirst { position: relative; @@ -14,11 +14,12 @@ top: 0px; bottom: 0px; right: 0px; + transition: position 0.5s ease-in-out; } } -// animation classes -@keyframes animateTop { +// container animation classes +@keyframes animateBorderTop { 4% { border-top-width: 3px; } @@ -42,10 +43,10 @@ border-top-style: solid; border-top-color: $primary-color-dark; opacity: 0; - animation: animateTop 5s linear forwards; + animation: animateBorderTop 3.5s linear forwards; } -@keyframes animateBottom { +@keyframes animateBorderBottom { 8% { border-bottom-width: 3px; } @@ -69,10 +70,10 @@ border-bottom-style: solid; border-bottom-width: 0px; opacity: 0; - animation: animateBottom 5s linear forwards; + animation: animateBorderBottom 3.5s linear forwards; } -@keyframes animateRight { +@keyframes animateBorderRight { 8% { border-right-width: 3px; } @@ -96,10 +97,10 @@ border-right-color: $primary-color-dark; border-right-width: 0px; opacity: 0; - animation: animateRight 5s linear forwards; + animation: animateBorderRight 3.5s linear forwards; } -@keyframes animateLeft { +@keyframes animateBorderLeft { 8% { border-left-width: 3px; } @@ -123,5 +124,191 @@ border-left-color: $primary-color-dark; border-left-width: 0px; opacity: 0; - animation: animateLeft 5s linear forwards; + animation: animateBorderLeft 3.5s linear forwards; +} + +// text child animation classes + +@keyframes animateTextTop { + 0% { + opacity: 0px; + top: -25px; + } + + 5% { + opacity: 1; + top: 0px; + } + + 80% { + top: 0px; + opacity: 1; + } + + 85% { + top: -25px; + opacity: 0; + } + + 100% { + top: -25px; + opacity: 0; + } +} + +.drop-text-from-top { + top: -25px; + opacity: 0; + animation: animateTextTop 3.5s linear forwards; +} + +@keyframes animateTextBottom { + 0% { + opacity: 0px; + top: 25px; + } + + 5% { + opacity: 1; + top: 0px; + } + + 80% { + top: 0px; + opacity: 1; + } + + 85% { + top: 25px; + opacity: 0; + } + + 100% { + top: 25px; + opacity: 0; + } +} + +.drop-text-from-bottom { + top: 25px; + opacity: 0; + animation: animateTextBottom 3.5s linear forwards; +} + +@keyframes animateTextLeft { + 0% { + opacity: 0; + left: -40px; + } + + 5% { + opacity: 1; + left: 0px; + } + + 90% { + left: 0px; + opacity: 1; + } + + 100% { + left: -40px; + opacity: 0; + } +} + +.drop-text-from-left { + left: -40px; + opacity: 0; + animation: animateTextLeft 3.5s linear forwards; +} + +@keyframes animateTextRight { + 0% { + opacity: 0; + left: 40px; + } + + 5% { + opacity: 1; + left: 0px; + } + + 90% { + left: 0px; + opacity: 1; + } + + 100% { + left: 40px; + opacity: 0; + } +} + +.drop-text-from-right { + left: 40px; + opacity: 0; + animation: animateTextRight 3.5s linear forwards; +} + +@keyframes animateStayText { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +//last titles + +@keyframes holderStayAnimation { + 8% { + border-left-width: 3px; + } + + 50% { + opacity: 1; + } + + 97% { + border-left-width: 3px; + } + + 100% { + opacity: 1; + border-left-width: 0px; + } +} + +@keyframes textStayAnimation { + 0% { + opacity: 0; + left: -40px; + } + + 5% { + opacity: 1; + left: 0px; + } + + 100% { + left: 0px; + opacity: 1; + } +} + +.holderStay { + border-left-style: solid; + border-left-color: $primary-color-dark; + border-left-width: 0px; + opacity: 0; + animation: holderStayAnimation 3.5s linear forwards; +} + +.textStay { + left: -40px; + opacity: 0; + animation: textStayAnimation 3.5s linear forwards; } From 26c0d03de499e97f38e441abca73d72bf31701e6 Mon Sep 17 00:00:00 2001 From: gisa chris Date: Tue, 14 Nov 2023 17:39:21 +0200 Subject: [PATCH 3/3] fix linter errors --- src/components/shared/animatedText.jsx | 5 +-- src/styles/css/aniText.css | 2 +- src/styles/css/aniText.css.map | 2 +- src/styles/scss/aniText.scss | 58 +++++++++++++------------- src/styles/scss/home.scss | 1 - src/styles/scss/partials/_config.scss | 2 +- 6 files changed, 34 insertions(+), 36 deletions(-) diff --git a/src/components/shared/animatedText.jsx b/src/components/shared/animatedText.jsx index 13e3d73..9a7e227 100644 --- a/src/components/shared/animatedText.jsx +++ b/src/components/shared/animatedText.jsx @@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react'; import '../../styles/css/aniText.css'; const AnimatedText = () => { - const titles = ['Web Developer', 'Backend Engineer', 'FrontEnd Developer', 'Rails Enthusiast', 'Rails Developer', 'Web Enthusiast', 'FullStack Developer']; + const titles = ['Web Developer', 'Api Developer', 'Backend Engineer', 'FrontEnd Developer', 'Rails Enthusiast', 'Rails Developer', 'Web Enthusiast', 'FullStack Developer']; const textHolderRef = useRef(); const textRef = useRef(); const [index, setIndex] = useState(0); @@ -20,7 +20,6 @@ const AnimatedText = () => { setTimeout(() => { textHolderRef.current.classList.remove(`style-border-${currentLocation}`); textRef.current.classList.remove(`drop-text-from-${currentLocation}`); - console.log(index); setIndex((prevIndex) => prevIndex + 1); }, 3500); } @@ -29,7 +28,7 @@ const AnimatedText = () => { setText1(titles[index]); textHolderRef.current.classList.add('holderStay'); textRef.current.classList.add('textStay'); - }; + } }, [index]); return ( diff --git a/src/styles/css/aniText.css b/src/styles/css/aniText.css index 74cc8aa..2a7ac7f 100644 --- a/src/styles/css/aniText.css +++ b/src/styles/css/aniText.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";.animatedTextHolder{overflow:hidden;position:relative;width:fit-content;border-left:0px;opacity:0;transition:border .5s ease-in-out}.animatedTextHolder .textFirst{position:relative;left:0px;top:0px;bottom:0px;right:0px;transition:position .5s ease-in-out}@keyframes animateBorderTop{4%{border-top-width:3px}50%{opacity:1}80%{opacity:1}100%{border-top-width:3px;opacity:0}}.style-border-top{border-top-width:0px;border-top-style:solid;border-top-color:#ffb742;opacity:0;animation:animateBorderTop 3.5s linear forwards}@keyframes animateBorderBottom{8%{border-bottom-width:3px}50%{opacity:1}80%{opacity:1}100%{border-bottom-width:3px;opacity:0}}.style-border-bottom{border-bottom-color:#ffb742;border-bottom-style:solid;border-bottom-width:0px;opacity:0;animation:animateBorderBottom 3.5s linear forwards}@keyframes animateBorderRight{8%{border-right-width:3px}50%{opacity:1}80%{opacity:1}100%{border-right-width:3px;opacity:0}}.style-border-right{border-right-style:solid;border-right-color:#ffb742;border-right-width:0px;opacity:0;animation:animateBorderRight 3.5s linear forwards}@keyframes animateBorderLeft{8%{border-left-width:3px}50%{opacity:1}80%{opacity:1}100%{border-left-width:3px;opacity:0}}.style-border-left{border-left-style:solid;border-left-color:#ffb742;border-left-width:0px;opacity:0;animation:animateBorderLeft 3.5s linear forwards}@keyframes animateTextTop{0%{opacity:0px;top:-25px}5%{opacity:1;top:0px}80%{top:0px;opacity:1}85%{top:-25px;opacity:0}100%{top:-25px;opacity:0}}.drop-text-from-top{top:-25px;opacity:0;animation:animateTextTop 3.5s linear forwards}@keyframes animateTextBottom{0%{opacity:0px;top:25px}5%{opacity:1;top:0px}80%{top:0px;opacity:1}85%{top:25px;opacity:0}100%{top:25px;opacity:0}}.drop-text-from-bottom{top:25px;opacity:0;animation:animateTextBottom 3.5s linear forwards}@keyframes animateTextLeft{0%{opacity:0;left:-40px}5%{opacity:1;left:0px}90%{left:0px;opacity:1}100%{left:-40px;opacity:0}}.drop-text-from-left{left:-40px;opacity:0;animation:animateTextLeft 3.5s linear forwards}@keyframes animateTextRight{0%{opacity:0;left:40px}5%{opacity:1;left:0px}90%{left:0px;opacity:1}100%{left:40px;opacity:0}}.drop-text-from-right{left:40px;opacity:0;animation:animateTextRight 3.5s linear forwards}@keyframes animateStayText{0%{opacity:0}100%{opacity:1}}@keyframes holderStayAnimation{8%{border-left-width:3px}50%{opacity:1}97%{border-left-width:3px}100%{opacity:1;border-left-width:0px}}@keyframes textStayAnimation{0%{opacity:0;left:-40px}5%{opacity:1;left:0px}100%{left:0px;opacity:1}}.holderStay{border-left-style:solid;border-left-color:#ffb742;border-left-width:0px;opacity:0;animation:holderStayAnimation 3.5s linear forwards}.textStay{left:-40px;opacity:0;animation:textStayAnimation 3.5s linear forwards}/*# sourceMappingURL=aniText.css.map */ \ No newline at end of file +@import"https://fonts.googleapis.com/css2?family=Inter:wght@100;900&family=Poppins:wght@500;600&family=Roboto:wght@700&family=Work+Sans:wght@500&display=swap";.animatedTextHolder{overflow:hidden;position:relative;width:fit-content;border-left:0;opacity:0;transition:border .5s ease-in-out}.animatedTextHolder .textFirst{position:relative;left:0;top:0;bottom:0;right:0;transition:position .5s ease-in-out}@keyframes animateBorderTop{4%{border-top-width:3px}50%{opacity:1}80%{opacity:1}100%{border-top-width:3px;opacity:0}}.style-border-top{border-top-width:0;border-top-style:solid;border-top-color:#ffb742;opacity:0;animation:animateBorderTop 3.5s linear forwards}@keyframes animateBorderBottom{8%{border-bottom-width:3px}50%{opacity:1}80%{opacity:1}100%{border-bottom-width:3px;opacity:0}}.style-border-bottom{border-bottom-color:#ffb742;border-bottom-style:solid;border-bottom-width:0;opacity:0;animation:animateBorderBottom 3.5s linear forwards}@keyframes animateBorderRight{8%{border-right-width:3px}50%{opacity:1}80%{opacity:1}100%{border-right-width:3px;opacity:0}}.style-border-right{border-right-style:solid;border-right-color:#ffb742;border-right-width:0;opacity:0;animation:animateBorderRight 3.5s linear forwards}@keyframes animateBorderLeft{8%{border-left-width:3px}50%{opacity:1}80%{opacity:1}100%{border-left-width:3px;opacity:0}}.style-border-left{border-left-style:solid;border-left-color:#ffb742;border-left-width:0;opacity:0;animation:animateBorderLeft 3.5s linear forwards}@keyframes animateTextTop{0%{top:-25px}5%{opacity:1;top:0}80%{top:0;opacity:1}85%{top:-25px;opacity:0}100%{top:-25px;opacity:0}}.drop-text-from-top{top:-25px;opacity:0;animation:animateTextTop 3.5s linear forwards}@keyframes animateTextBottom{0%{top:25px}5%{opacity:1;top:0}80%{top:0;opacity:1}85%{top:25px;opacity:0}100%{top:25px;opacity:0}}.drop-text-from-bottom{top:25px;opacity:0;animation:animateTextBottom 3.5s linear forwards}@keyframes animateTextLeft{0%{opacity:0;left:-40px}5%{opacity:1;left:0}90%{left:0;opacity:1}100%{left:-40px;opacity:0}}.drop-text-from-left{left:-40px;opacity:0;animation:animateTextLeft 3.5s linear forwards}@keyframes animateTextRight{0%{opacity:0;left:40px}5%{opacity:1;left:0}90%{left:0;opacity:1}100%{left:40px;opacity:0}}.drop-text-from-right{left:40px;opacity:0;animation:animateTextRight 3.5s linear forwards}@keyframes animateStayText{0%{opacity:0}100%{opacity:1}}@keyframes holderStayAnimation{8%{border-left-width:3px}50%{opacity:1}97%{border-left-width:3px}100%{opacity:1;border-left-width:0}}@keyframes textStayAnimation{0%{opacity:0;left:-40px}5%{opacity:1;left:0}100%{left:0;opacity:1}}.holderStay{border-left-style:solid;border-left-color:#ffb742;border-left-width:0;opacity:0;animation:holderStayAnimation 3.5s linear forwards}.textStay{left:-40px;opacity:0;animation:textStayAnimation 3.5s linear forwards}/*# sourceMappingURL=aniText.css.map */ \ No newline at end of file diff --git a/src/styles/css/aniText.css.map b/src/styles/css/aniText.css.map index 5b69fb3..5cc5aa0 100644 --- a/src/styles/css/aniText.css.map +++ b/src/styles/css/aniText.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/aniText.scss"],"names":[],"mappings":"AAAQ,+JCER,oBACE,gBACA,kBACA,kBACA,gBACA,UACA,kCAEA,+BACE,kBACA,SACA,QACA,WACA,UACA,oCAKJ,4BACE,GACE,qBAGF,IACE,UAGF,IACE,UAGF,KACE,qBACA,WAIJ,kBACE,qBACA,uBACA,iBDpCmB,QCqCnB,UACA,gDAGF,+BACE,GACE,wBAGF,IACE,UAGF,IACE,UAGF,KACE,wBACA,WAIJ,qBACE,oBD7DmB,QC8DnB,0BACA,wBACA,UACA,mDAGF,8BACE,GACE,uBAGF,IACE,UAGF,IACE,UAGF,KACE,uBACA,WAIJ,oBACE,yBACA,mBDzFmB,QC0FnB,uBACA,UACA,kDAGF,6BACE,GACE,sBAGF,IACE,UAGF,IACE,UAGF,KACE,sBACA,WAIJ,mBACE,wBACA,kBDpHmB,QCqHnB,sBACA,UACA,iDAKF,0BACE,GACE,YACA,UAGF,GACE,UACA,QAGF,IACE,QACA,UAGF,IACE,UACA,UAGF,KACE,UACA,WAIJ,oBACE,UACA,UACA,8CAGF,6BACE,GACE,YACA,SAGF,GACE,UACA,QAGF,IACE,QACA,UAGF,IACE,SACA,UAGF,KACE,SACA,WAIJ,uBACE,SACA,UACA,iDAGF,2BACE,GACE,UACA,WAGF,GACE,UACA,SAGF,IACE,SACA,UAGF,KACE,WACA,WAIJ,qBACE,WACA,UACA,+CAGF,4BACE,GACE,UACA,UAGF,GACE,UACA,SAGF,IACE,SACA,UAGF,KACE,UACA,WAIJ,sBACE,UACA,UACA,gDAGF,2BACE,GACE,UAGF,KACE,WAMJ,+BACE,GACE,sBAGF,IACE,UAGF,IACE,sBAGF,KACE,UACA,uBAIJ,6BACE,GACE,UACA,WAGF,GACE,UACA,SAGF,KACE,SACA,WAIJ,YACE,wBACA,kBDxSmB,QCySnB,sBACA,UACA,mDAGF,UACE,WACA,UACA","file":"aniText.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/partials/_config.scss","../scss/aniText.scss"],"names":[],"mappings":"AAAQ,+JCER,oBACE,gBACA,kBACA,kBACA,cACA,UACA,kCAEA,+BACE,kBACA,OACA,MACA,SACA,QACA,oCAKJ,4BACE,GACE,qBAGF,IACE,UAGF,IACE,UAGF,KACE,qBACA,WAIJ,kBACE,mBACA,uBACA,iBDpCmB,QCqCnB,UACA,gDAGF,+BACE,GACE,wBAGF,IACE,UAGF,IACE,UAGF,KACE,wBACA,WAIJ,qBACE,oBD7DmB,QC8DnB,0BACA,sBACA,UACA,mDAGF,8BACE,GACE,uBAGF,IACE,UAGF,IACE,UAGF,KACE,uBACA,WAIJ,oBACE,yBACA,mBDzFmB,QC0FnB,qBACA,UACA,kDAGF,6BACE,GACE,sBAGF,IACE,UAGF,IACE,UAGF,KACE,sBACA,WAIJ,mBACE,wBACA,kBDpHmB,QCqHnB,oBACA,UACA,iDAKF,0BACE,GAEE,UAGF,GACE,UACA,MAGF,IACE,MACA,UAGF,IACE,UACA,UAGF,KACE,UACA,WAIJ,oBACE,UACA,UACA,8CAGF,6BACE,GAEE,SAGF,GACE,UACA,MAGF,IACE,MACA,UAGF,IACE,SACA,UAGF,KACE,SACA,WAIJ,uBACE,SACA,UACA,iDAGF,2BACE,GACE,UACA,WAGF,GACE,UACA,OAGF,IACE,OACA,UAGF,KACE,WACA,WAIJ,qBACE,WACA,UACA,+CAGF,4BACE,GACE,UACA,UAGF,GACE,UACA,OAGF,IACE,OACA,UAGF,KACE,UACA,WAIJ,sBACE,UACA,UACA,gDAGF,2BACE,GACE,UAGF,KACE,WAMJ,+BACE,GACE,sBAGF,IACE,UAGF,IACE,sBAGF,KACE,UACA,qBAIJ,6BACE,GACE,UACA,WAGF,GACE,UACA,OAGF,KACE,OACA,WAIJ,YACE,wBACA,kBDxSmB,QCySnB,oBACA,UACA,mDAGF,UACE,WACA,UACA","file":"aniText.css"} \ No newline at end of file diff --git a/src/styles/scss/aniText.scss b/src/styles/scss/aniText.scss index 41b046f..7657e56 100644 --- a/src/styles/scss/aniText.scss +++ b/src/styles/scss/aniText.scss @@ -4,16 +4,16 @@ overflow: hidden; position: relative; width: fit-content; - border-left: 0px; + border-left: 0; opacity: 0; transition: border 0.5s ease-in-out; .textFirst { position: relative; - left: 0px; - top: 0px; - bottom: 0px; - right: 0px; + left: 0; + top: 0; + bottom: 0; + right: 0; transition: position 0.5s ease-in-out; } } @@ -39,7 +39,7 @@ } .style-border-top { - border-top-width: 0px; + border-top-width: 0; border-top-style: solid; border-top-color: $primary-color-dark; opacity: 0; @@ -68,7 +68,7 @@ .style-border-bottom { border-bottom-color: $primary-color-dark; border-bottom-style: solid; - border-bottom-width: 0px; + border-bottom-width: 0; opacity: 0; animation: animateBorderBottom 3.5s linear forwards; } @@ -95,7 +95,7 @@ .style-border-right { border-right-style: solid; border-right-color: $primary-color-dark; - border-right-width: 0px; + border-right-width: 0; opacity: 0; animation: animateBorderRight 3.5s linear forwards; } @@ -122,7 +122,7 @@ .style-border-left { border-left-style: solid; border-left-color: $primary-color-dark; - border-left-width: 0px; + border-left-width: 0; opacity: 0; animation: animateBorderLeft 3.5s linear forwards; } @@ -131,20 +131,20 @@ @keyframes animateTextTop { 0% { - opacity: 0px; + // opacity: 0; top: -25px; } 5% { opacity: 1; - top: 0px; + top: 0; } 80% { - top: 0px; + top: 0; opacity: 1; - } - + } + 85% { top: -25px; opacity: 0; @@ -164,20 +164,20 @@ @keyframes animateTextBottom { 0% { - opacity: 0px; + // opacity: 0; top: 25px; } 5% { opacity: 1; - top: 0px; + top: 0; } 80% { - top: 0px; + top: 0; opacity: 1; - } - + } + 85% { top: 25px; opacity: 0; @@ -203,13 +203,13 @@ 5% { opacity: 1; - left: 0px; + left: 0; } 90% { - left: 0px; + left: 0; opacity: 1; - } + } 100% { left: -40px; @@ -231,13 +231,13 @@ 5% { opacity: 1; - left: 0px; + left: 0; } 90% { - left: 0px; + left: 0; opacity: 1; - } + } 100% { left: 40px; @@ -278,7 +278,7 @@ 100% { opacity: 1; - border-left-width: 0px; + border-left-width: 0; } } @@ -290,11 +290,11 @@ 5% { opacity: 1; - left: 0px; + left: 0; } 100% { - left: 0px; + left: 0; opacity: 1; } } @@ -302,7 +302,7 @@ .holderStay { border-left-style: solid; border-left-color: $primary-color-dark; - border-left-width: 0px; + border-left-width: 0; opacity: 0; animation: holderStayAnimation 3.5s linear forwards; } diff --git a/src/styles/scss/home.scss b/src/styles/scss/home.scss index 6ea66ee..58c5fc9 100644 --- a/src/styles/scss/home.scss +++ b/src/styles/scss/home.scss @@ -492,7 +492,6 @@ align-items: center; justify-content: start; } - } } diff --git a/src/styles/scss/partials/_config.scss b/src/styles/scss/partials/_config.scss index 96e83c6..97550dc 100644 --- a/src/styles/scss/partials/_config.scss +++ b/src/styles/scss/partials/_config.scss @@ -60,4 +60,4 @@ $inter-font: 'Inter', sans-serif; flex-direction: column; width: fit-content; justify-content: center; -} \ No newline at end of file +}