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.

frontend/src/App.tsx

@@ -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 */}

frontend/src/components/Footer/footer.module.css

@@ -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{
+footer .logo{
-    padding: 1em;
+    font-size: 3em;
-    font-style: normal;
-}
-footer .contacts{
-    font-size: 2em;
 
+    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;
     }
   }

frontend/src/components/Footer/footer.tsx

@@ -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)]">
+    <footer id="contacts" className={styles.footer}>
-      <div className="container py-8 grid gap-6 md:grid-cols-3">
+      <div className={styles.logo}>
-        <div>
+        <h1>vontor.cz</h1>
-          <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>
-        </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>
-
-        <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>
       </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={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>
-  );
-}

frontend/src/pages/donate/DonateShopPage.tsx

@@ -1,4 +0,0 @@
-import DonationShop from "../../components/donate/DonationShop";
-export default function DonateShopPage(){
-  return <DonationShop />;
-}

frontend/src/pages/home/Home.module.css

@@ -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);
-
+    text-decoration: underline;
-    padding-bottom: 10em;
+    font-size: 4em;
-    margin-top: 6em;
-
-    width: 100%;
-    position: relative;
-    top:0;
-
-    /* gap: 4em;*/
 }
 
-.introduction h1{
+.hidden{
-    font-size: 2em;
+    display: none !important;
 }
 
-.introduction article {
+.apps-group{
-    /*background-color: cadetblue;*/
+    display: flex;
-
+    flex-direction: column;
-    padding: 2em;
+    justify-content: space-between;
+}
+.apps-group div{
     border-radius: 1em;
 }
-
+.apps-container{
-.introduction article header {}
+    position: relative;
-
+    display: flex;
-.introduction article:nth-child(1) {
+    gap: 3em;
     width: 100%;
-    /* transform: rotate(5deg); */
+    margin: auto;
-    align-self: center;
+    justify-content: center;
-    text-align: center;
-    font-size: 2em;
 }
-/*
+.apps-container .chat,
-.introduction article:nth-child(2) {
+.apps-container .apps-group{
-    width: 50%;
+
-    transform: rotate(3deg);
-    align-self: flex-end;
 }
 
-.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%;
+    width: 40px;
-    height: 100%;
+    height: 40px;
-    top: 0;
+
-    z-index: -2;
+    transform: translate(-20px, -20px);
+}
+.spark-cursor *{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+
+
 }
 
-.animation-introduction ul{
+.spark-cursor span{
-    position: absolute;
+    position:absolute;
-    top: 0;
+    width: 2px;
-    left: 0;
+    height: 20px;
-    width: 100%;
+    pointer-events: none;
-    height: 100%;
+    transform-origin: bottom;
-    /*overflow: hidden; ZAPNOUT KDYŽ NECHCEŠ ANIMACI PŘECHÁZET DO OSTATNÍCH DIVŮ*/ 
+    overflow: hidden;
-}
 
-.animation-introduction ul li{
+    filter: drop-shadow(0 0 0.5em #0f0) drop-shadow(0 0 1em #0f0);
-    position: absolute;
+}
+.spark-cursor span.animate::before{
     display: block;
-    list-style: none;
+    content: '';
-    width: 20px;
+    position: absolute;
-    height: 20px;
+    width: 100%;
-    background: rgba(255, 255, 255, 35%);
+    height: 100%;
-    animation: animate 4s linear infinite;
+    background: #0f0;
-    bottom: -150px;
+    animation: animate-spark 1s ease-in-out forwards;
-    
 }
-
+@keyframes animate-spark{
-.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);
+        transform: translateY(100%);
-        opacity: 1;
-        border-radius: 0;
     }
-
     100%{
-        transform: translateY(-1000px) rotate(720deg);
+        transform: translateY(-100%);
-        opacity: 0;
-        border-radius: 50%;
     }
-
 }
 
+.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){
+    .apps-container{
-        left: 67%;
+        display: flex;
+        margin: auto;
+        flex-direction: column;
+        width: 90%;
+        gap: 1em;
     }
-    .animation-introduction ul li:nth-child(10) {
+    .nav-drone{
-        left: 60%;
+        display: none;
     }
-    .introduction {
+    .apps-container .apps-group {
-        margin: 0;
+        font-size: 0.9em;
-        top: 0;
+        gap: 1em;
     }
+}
 
-    .introduction article {
+
-        width: auto !important;
+
-        transform: none !important;
+#reconnect{
-        align-self: none !important;
+    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); }
 }

frontend/src/pages/home/introduction.css

@@ -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;
-    }
-}

frontend/src/pages/skills/SkillsPage.tsx

@@ -1,4 +0,0 @@
-import SkillsSection from "../../components/skills/SkillsSection";
-export default function SkillsPage(){
-  return <SkillsSection />;
-}