Refactor footer and remove unused pages
Updated the footer component and its styles for improved layout and clarity, including new contact and service sections. Removed unused pages: DonateShopPage, SkillsPage, and related CSS/JS files, and cleaned up routing in App.tsx. Also streamlined Home.module.css by merging introduction styles and removing redundant imports.
This commit is contained in:
@@ -7,9 +7,7 @@ import { UserContextProvider } from "./context/UserContext";
|
||||
|
||||
// Pages
|
||||
import PortfolioPage from "./pages/portfolio/PortfolioPage";
|
||||
import SkillsPage from "./pages/skills/SkillsPage";
|
||||
import HostingSecurityPage from "./pages/hosting/HostingSecurityPage";
|
||||
import DonateShopPage from "./pages/donate/DonateShopPage";
|
||||
import ContactPage from "./pages/contact/ContactPage";
|
||||
import ScrollToTop from "./components/common/ScrollToTop";
|
||||
|
||||
@@ -23,9 +21,7 @@ export default function App() {
|
||||
<Route path="/" element={<HomeLayout />}>
|
||||
<Route index element={<Home />} />
|
||||
<Route path="portfolio" element={<PortfolioPage />} />
|
||||
<Route path="skills" element={<SkillsPage />} />
|
||||
<Route path="hosting-security" element={<HostingSecurityPage />} />
|
||||
<Route path="donate" element={<DonateShopPage />} />
|
||||
<Route path="contact" element={<ContactPage />} />
|
||||
|
||||
{/* Utilities */}
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
footer a{
|
||||
color: var(--c-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a i{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
footer a:hover i{
|
||||
color: var(--c-text);
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
footer{
|
||||
padding: 2em;
|
||||
|
||||
font-family: "Roboto Mono", monospace;
|
||||
|
||||
background-color: var(--c-boxes);
|
||||
@@ -19,16 +15,85 @@ footer{
|
||||
display: flex;
|
||||
|
||||
color: white;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
footer address{
|
||||
padding: 1em;
|
||||
font-style: normal;
|
||||
}
|
||||
footer .contacts{
|
||||
font-size: 2em;
|
||||
footer .logo{
|
||||
font-size: 3em;
|
||||
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover{
|
||||
text-shadow: 0.25em 0.25em 0.2em var(--c-text);
|
||||
}
|
||||
}
|
||||
footer address{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-style: normal;
|
||||
gap: 0.2em;
|
||||
}
|
||||
footer address h2{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
footer address p{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
footer address p > svg{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
footer address a{
|
||||
display: inline-block;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
|
||||
footer .services{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
font-size: 1.2em;
|
||||
font-style: normal;
|
||||
gap: 0.2em;
|
||||
}
|
||||
footer .services h2{
|
||||
font-size: 1.5em;
|
||||
}
|
||||
footer .services p{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
footer .services p > svg{
|
||||
font-size: 1.2em;
|
||||
}
|
||||
footer .services a{
|
||||
display: inline-block;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
footer .links{
|
||||
margin-top: 0.5em;
|
||||
font-size: 2em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
gap: 0.8em;
|
||||
|
||||
}
|
||||
footer .links a{
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover{
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 990px){
|
||||
@@ -36,5 +101,6 @@ footer .contacts{
|
||||
flex-direction: column;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
gap: 2em;
|
||||
}
|
||||
}
|
||||
@@ -1,44 +1,55 @@
|
||||
import { FaGithub, FaInstagram, FaYoutube, FaLinkedin, FaSteam, FaXTwitter } from "react-icons/fa6";
|
||||
import { FaGitAlt , FaInstagram, FaYoutube, FaLinkedin, FaSteam, FaXTwitter, FaClapperboard } from "react-icons/fa6";
|
||||
import { FaPhoneAlt, FaEnvelope, FaTeamspeak, FaGlobe } from "react-icons/fa";
|
||||
import { GiAutoRepair } from "react-icons/gi";
|
||||
|
||||
import styles from "./footer.module.css";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer id="contacts" className="mt-12 bg-[var(--c-background-light)]">
|
||||
<div className="container py-8 grid gap-6 md:grid-cols-3">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-rainbow">vontor.cz</h3>
|
||||
<p className="text-sm text-[var(--c-lines)] mt-2">© 2025 Vontor.cz</p>
|
||||
<footer id="contacts" className={styles.footer}>
|
||||
<div className={styles.logo}>
|
||||
<h1>vontor.cz</h1>
|
||||
</div>
|
||||
|
||||
<address className="not-italic text-sm">
|
||||
<div><b>David Bruno Vontor</b></div>
|
||||
<div className="mt-2">Tel.: <a className="hover:text-[var(--c-other)]" href="tel:+420605512624">+420 605 512 624</a></div>
|
||||
<div>E-mail: <a className="hover:text-[var(--c-other)]" href="mailto:brunovontor@gmail.com">brunovontor@gmail.com</a></div>
|
||||
<div className="mt-1">IČO: <a className="hover:text-[var(--c-other)]" href="https://www.rzp.cz/verejne-udaje/cs/udaje/vyber-subjektu;ico=21613109;" target="_blank" rel="noopener noreferrer">21613109</a></div>
|
||||
<address>
|
||||
<h2><b>Kontakty</b></h2>
|
||||
<p><FaPhoneAlt /><a href="tel:+420 605 512 624"><u>+420 605 512 624</u></a></p>
|
||||
<p><FaEnvelope /> <a href="mailto:brunovontor@gmail.com"><u>brunovontor@gmail.com</u></a></p>
|
||||
<p><FaTeamspeak /> teamspeak.vontor.cz:4926</p>
|
||||
<p>IČO: <a href="https://www.rzp.cz/verejne-udaje/cs/udaje/vyber-subjektu;ico=21613109;"><u>21613109</u></a></p>
|
||||
|
||||
</address>
|
||||
|
||||
<div className="flex items-center gap-4 text-2xl justify-start md:justify-end">
|
||||
<Social href="https://github.com/Brunobrno" label="GitHub"><FaGithub /></Social>
|
||||
<Social href="https://www.instagram.com/brunovontor/" label="Instagram"><FaInstagram /></Social>
|
||||
<Social href="https://twitter.com/BVontor" label="X / Twitter"><FaXTwitter /></Social>
|
||||
<Social href="https://www.youtube.com/@brunovontor" label="YouTube"><FaYoutube /></Social>
|
||||
<Social href="https://www.linkedin.com/in/brunovontor/" label="LinkedIn"><FaLinkedin /></Social>
|
||||
<Social href="https://steamcommunity.com/id/Brunobrno/" label="Steam"><FaSteam /></Social>
|
||||
<div className={styles.services}>
|
||||
<h2><b>Služby</b></h2>
|
||||
|
||||
<p><FaGlobe /><a href="/services/web"><u>Weby</u></a></p>
|
||||
<p><FaClapperboard /> <a href="/services/film"><u>Filmařina</u></a></p>
|
||||
<p><GiAutoRepair /> <a href="/services/drone-service"><u>Servis dronu</u></a></p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div className={styles.links}>
|
||||
<a href="https://git.vontor.cz/Brunobrno">
|
||||
<FaGitAlt />
|
||||
</a>
|
||||
<a href="https://www.instagram.com/brunovontor/">
|
||||
<FaInstagram />
|
||||
</a>
|
||||
<a href="https://twitter.com/BVontor">
|
||||
<FaXTwitter />
|
||||
</a>
|
||||
<a href="https://steamcommunity.com/id/Brunobrno/">
|
||||
<FaSteam />
|
||||
</a>
|
||||
<a href="www.youtube.com/@brunovontor">
|
||||
<FaYoutube />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/brunobrno/?skipRedirect=true">
|
||||
<FaLinkedin />
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function Social({ href, label, children }: { href: string; label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={label}
|
||||
className="group relative inline-flex items-center justify-center w-12 h-12 rounded-xl bg-brandGradient text-white shadow-glow transition-transform duration-200 hover:scale-110"
|
||||
>
|
||||
<span className="text-xl group-hover:scale-110 transition-transform">{children}</span>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
import DonationShop from "../../components/donate/DonationShop";
|
||||
export default function DonateShopPage(){
|
||||
return <DonationShop />;
|
||||
}
|
||||
@@ -1,9 +1,3 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Doto:wght@300&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
|
||||
|
||||
:root{
|
||||
--c-background: #031D44; /*background*/
|
||||
--c-background-light: #04395E; /*background-highlight*/
|
||||
@@ -13,228 +7,190 @@
|
||||
--c-other: #70A288; /*other*/
|
||||
}
|
||||
|
||||
html{
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
||||
body{
|
||||
font-family: "Exo", serif;
|
||||
overflow-x: hidden;
|
||||
|
||||
background: rgb(0,0,0);
|
||||
background: -moz-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
||||
background: -webkit-linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
||||
background: linear-gradient(145deg, var(--c-background) 0%, var(--c-background-light) 100%);
|
||||
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.doto-font{
|
||||
font-family: "Doto", serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-variation-settings: "ROND" 0;
|
||||
}
|
||||
.bebas-neue-regular {
|
||||
font-family: "Bebas Neue", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
.introduction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
body .between h1{
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
color: var(--c-text);
|
||||
|
||||
padding-bottom: 10em;
|
||||
margin-top: 6em;
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top:0;
|
||||
|
||||
/* gap: 4em;*/
|
||||
text-decoration: underline;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.introduction h1{
|
||||
font-size: 2em;
|
||||
.hidden{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.introduction article {
|
||||
/*background-color: cadetblue;*/
|
||||
|
||||
padding: 2em;
|
||||
.apps-group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.apps-group div{
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.introduction article header {}
|
||||
|
||||
.introduction article:nth-child(1) {
|
||||
.apps-container{
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 3em;
|
||||
width: 100%;
|
||||
/* transform: rotate(5deg); */
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
/*
|
||||
.introduction article:nth-child(2) {
|
||||
width: 50%;
|
||||
transform: rotate(3deg);
|
||||
align-self: flex-end;
|
||||
.apps-container .chat,
|
||||
.apps-container .apps-group{
|
||||
|
||||
}
|
||||
|
||||
.introduction article:nth-child(3) {
|
||||
width: 50%;
|
||||
transform: rotate(-2deg);
|
||||
align-self: flex-start;
|
||||
}*/
|
||||
|
||||
.nav-drone{
|
||||
margin-top: 0em !important;
|
||||
margin-bottom: -9em;
|
||||
height: 20em;
|
||||
position: relative;
|
||||
}
|
||||
.nav-drone .video-background{
|
||||
height: 55vh;
|
||||
clip-path: polygon(0 0%, 15% 0, 30% 0%, 42% 0%, 61% 0%, 82% 0%, 100% 0%, 100% 94%, 82% 100%, 65% 96%, 47% 99%, 30% 90%, 14% 98%, 0 94%) !important;
|
||||
}
|
||||
#nav-drone-background-css:has(nav) nav{ /*TOHLE PATŘÍ NAVIGACI VYŘEŠIT*/
|
||||
margin-bottom: 8em;
|
||||
}
|
||||
|
||||
.spark-cursor{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
.animation-introduction{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: -2;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
.spark-cursor *{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.animation-introduction ul{
|
||||
.spark-cursor span{
|
||||
position:absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*overflow: hidden; ZAPNOUT KDYŽ NECHCEŠ ANIMACI PŘECHÁZET DO OSTATNÍCH DIVŮ*/
|
||||
}
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
pointer-events: none;
|
||||
transform-origin: bottom;
|
||||
overflow: hidden;
|
||||
|
||||
.animation-introduction ul li{
|
||||
position: absolute;
|
||||
filter: drop-shadow(0 0 0.5em #0f0) drop-shadow(0 0 1em #0f0);
|
||||
}
|
||||
.spark-cursor span.animate::before{
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 35%);
|
||||
animation: animate 4s linear infinite;
|
||||
bottom: -150px;
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0f0;
|
||||
animation: animate-spark 1s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(1){
|
||||
left: 25%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
.animation-introduction ul li:nth-child(2){
|
||||
left: 10%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(3){
|
||||
left: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(4){
|
||||
left: 40%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(5){
|
||||
left: 65%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(6){
|
||||
left: 75%;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(7){
|
||||
left: 35%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(8){
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(9){
|
||||
left: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(10){
|
||||
left: 85%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes animate {
|
||||
|
||||
@keyframes animate-spark{
|
||||
0%{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.success-form-alert{
|
||||
display: none;
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
padding: 10px;
|
||||
border: 1px solid #c3e6cb;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.success-form-alert .close{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.animation-introduction ul li:nth-child(6){
|
||||
left: 67%;
|
||||
.apps-container{
|
||||
display: flex;
|
||||
margin: auto;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
gap: 1em;
|
||||
}
|
||||
.animation-introduction ul li:nth-child(10) {
|
||||
left: 60%;
|
||||
.nav-drone{
|
||||
display: none;
|
||||
}
|
||||
.apps-container .apps-group {
|
||||
font-size: 0.9em;
|
||||
gap: 1em;
|
||||
}
|
||||
.introduction {
|
||||
margin: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.introduction article {
|
||||
width: auto !important;
|
||||
transform: none !important;
|
||||
align-self: none !important;
|
||||
|
||||
|
||||
#reconnect{
|
||||
border-radius: 1em;
|
||||
color: white;
|
||||
padding: 4em;
|
||||
background-color: rgb(195 20 20);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border: #7b0000 dashed 0.5em;
|
||||
}
|
||||
#reconnect img{
|
||||
width: 10em;
|
||||
}
|
||||
#reconnect button{
|
||||
position: relative;
|
||||
color: white;
|
||||
margin: auto 1em;
|
||||
padding: 1em;
|
||||
font: initial;
|
||||
font-size: 2em;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover{
|
||||
animation: shake 0.4s ease-in-out infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
25% { transform: translateX(-2px) rotate(-8deg); }
|
||||
50% { transform: translateX(2px) rotate(4deg); }
|
||||
75% { transform: translateX(-1px) rotate(-2deg); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
.introduction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: var(--c-text);
|
||||
|
||||
padding-bottom: 10em;
|
||||
margin-top: 6em;
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top:0;
|
||||
|
||||
/* gap: 4em;*/
|
||||
}
|
||||
.introduction h1{
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.introduction article {
|
||||
/*background-color: cadetblue;*/
|
||||
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
/* header rules intentionally left out; keep markup clean */
|
||||
|
||||
.introduction article:nth-child(1) {
|
||||
width: 100%;
|
||||
/* transform: rotate(5deg); */
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
/*
|
||||
.introduction article:nth-child(2) {
|
||||
width: 50%;
|
||||
transform: rotate(3deg);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.introduction article:nth-child(3) {
|
||||
width: 50%;
|
||||
transform: rotate(-2deg);
|
||||
align-self: flex-start;
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
|
||||
.animation-introduction{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.animation-introduction ul{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*overflow: hidden; ZAPNOUT KDYŽ NECHCEŠ ANIMACI PŘECHÁZET DO OSTATNÍCH DIVŮ*/
|
||||
}
|
||||
|
||||
.animation-introduction ul li{
|
||||
position: absolute;
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
/* use design palette for animated dots */
|
||||
background: var(--c-boxes);
|
||||
opacity: 0.35;
|
||||
animation: animate 4s linear infinite;
|
||||
bottom: -150px;
|
||||
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(1){
|
||||
left: 25%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
|
||||
.animation-introduction ul li:nth-child(2){
|
||||
left: 10%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(3){
|
||||
left: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(4){
|
||||
left: 40%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(5){
|
||||
left: 65%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(6){
|
||||
left: 75%;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(7){
|
||||
left: 35%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(8){
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(9){
|
||||
left: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
|
||||
.animation-introduction ul li:nth-child(10){
|
||||
left: 85%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes animate {
|
||||
|
||||
0%{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
100%{
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 990px) {
|
||||
.animation-introduction ul li:nth-child(6){
|
||||
left: 67%;
|
||||
}
|
||||
.animation-introduction ul li:nth-child(10) {
|
||||
left: 60%;
|
||||
}
|
||||
.introduction {
|
||||
margin: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.introduction article {
|
||||
width: auto !important;
|
||||
transform: none !important;
|
||||
align-self: none !important;
|
||||
}
|
||||
}
|
||||
2
frontend/src/pages/home/jquery-3.7.1.js
vendored
2
frontend/src/pages/home/jquery-3.7.1.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,4 +0,0 @@
|
||||
import SkillsSection from "../../components/skills/SkillsSection";
|
||||
export default function SkillsPage(){
|
||||
return <SkillsSection />;
|
||||
}
|
||||
Reference in New Issue
Block a user