okay

2025-10-29 00:58:37 +01:00
parent 73da41b514
commit dd9d076bd2
33 changed files with 1172 additions and 385 deletions
--- a/frontend/src/components/Footer/footer.module.css
+++ b/frontend/src/components/Footer/footer.module.css
@@ -6,6 +6,10 @@ footer a i{
    color: white;
    text-decoration: none;
 }
+footer a:hover i{
+    color: var(--c-text);
+    text-decoration: none;
+}
 footer{
    font-family: "Roboto Mono", monospace;

--- a/frontend/src/components/ads/Drone/Drone.tsx
+++ b/frontend/src/components/ads/Drone/Drone.tsx
@@ -61,46 +61,28 @@ export default function Drone() {

      <article>
        <header>
-          <h1>Letecké snímky dronem</h1>
+          <h1>Letecké záběry, co zaujmou</h1>
        </header>

        <main>
          <section>
            <h2>Oprávnění</h2>
-            <p>
-              A1, A2, A3 a průkaz na vysílačku!
-              <br />
-              Mohu garantovat bezpečný provoz dronu i ve složitějších podmínkách. 
-              Mám také možnost žádat o povolení k letu v blízkosti letišť!
-            </p>
+            <p>Oprávnění A1/A2/A3 + radiostanice. Bezpečný provoz i v omezených zónách, povolení zajistím.</p>
          </section>

          <section>
            <h2>Cena</h2>
-            <p>
-              Nabízím letecké záběry dronem <br />
-              za cenu <u>3 000 Kč</u>.
-            </p>
-            <p>
-              Pokud se nacházíte v Ostravě, doprava je zdarma. Pro oblasti mimo Ostravu účtuji 10 Kč/km.
-            </p>
-            <p>
-              Cena se může odvíjet ještě podle složitosti získaní povolení.*
-            </p>
+            <p>Paušál 3 000 Kč. Ostrava zdarma; mimo 10 Kč/km. Cena se může lišit dle povolení.</p>
          </section>

          <section>
            <h2>Výstup</h2>
-            <p>
-              Rád Vám připravím jednoduchý sestřih videa, který můžete rychle použít, 
-              nebo Vám mohu poskytnout samotné záběry k vlastní editaci.
-            </p>
+            <p>Krátký sestřih nebo surové záběry — podle potřeby.</p>
          </section>
        </main>

        <div>
-          V případě zájmu mě neváhejte <br />
-          <a href="#contacts">kontaktovat!</a>
+          <a href="#contacts">Zájem?</a>
        </div>
      </article>
    </div>
--- a/frontend/src/components/ads/Portfolio/Portfolio.module.css
+++ b/frontend/src/components/ads/Portfolio/Portfolio.module.css
@@ -27,8 +27,11 @@
    transform-origin: bottom;
    transition: transform 0.5s ease-in-out;

+    transform: skew(-5deg);
    z-index: 3;

+    box-shadow: #000000 5px 5px 15px;
+
 }
 .portfolio div span svg{
    font-size: 5em;
@@ -56,7 +59,7 @@
 }

 .portfolio .door-open{
-    transform: rotateX(180deg);
+    transform: rotateX(90deg) skew(-2deg) !important;
 }

 .portfolio>header {
@@ -131,6 +134,8 @@

    border-radius: 1em;
    border-top-left-radius: 0;
+
+    aspect-ratio: 16 / 9;
 }

 .portfolio div article {
@@ -145,7 +150,6 @@
 }

 .portfolio div article header a img {
-    padding: 2em 0;
    width: 80%;
    margin: auto;
 }
--- a/frontend/src/components/ads/Portfolio/Portfolio.tsx
+++ b/frontend/src/components/ads/Portfolio/Portfolio.tsx
@@ -6,23 +6,34 @@ interface PortfolioItem {
  href: string
  src: string
  alt: string
+  // Optional per-item styling (prefer Tailwind utility classes in className/imgClassName)
+  className?: string
+  imgClassName?: string
+  style?: React.CSSProperties
+  imgStyle?: React.CSSProperties
 }

 const portfolioItems: PortfolioItem[] = [
  {
    href: "https://davo1.cz",
-    src: "/home/img/portfolio/DAVO_logo_2024_bile.png",
+    src: "/portfolio/davo1.png",
    alt: "davo1.cz logo",
+    imgClassName: "bg-black rounded-lg p-4",
+    //className: "bg-white/5 rounded-lg p-4",
  },
  {
    href: "https://perlica.cz",
-    src: "/home/img/portfolio/perlica-3.webp",
+    src: "/portfolio/perlica.png",
    alt: "Perlica logo",
+    imgClassName: "rounded-lg", 
+    // imgClassName: "max-h-12",
  },
  {
    href: "http://epinger2.cz",
-    src: "/home/img/portfolio/logo_epinger.svg",
+    src: "/portfolio/epinger.png",
    alt: "Epinger2 logo",
+    imgClassName: "bg-white rounded-lg",
+    // imgClassName: "max-h-12",
  },
 ]

@@ -51,10 +62,19 @@ export default function Portfolio() {
        </span>

        {portfolioItems.map((item, index) => (
-          <article key={index} className={styles.article}>
+          <article
+            key={index}
+            className={`${styles.article} ${item.className ?? ""}`}
+            style={item.style}
+          >
            <header>
              <a href={item.href} target="_blank" rel="noopener noreferrer">
-                <img src={item.src} alt={item.alt} />
+                <img
+                  src={item.src}
+                  alt={item.alt}
+                  className={item.imgClassName}
+                  style={item.imgStyle}
+                />
              </a>
            </header>
            <main></main>
--- a/frontend/src/components/navbar/HomeNav.module.css
+++ b/frontend/src/components/navbar/HomeNav.module.css
@@ -36,6 +36,10 @@ nav.isSticky-nav{
 nav ul #nav-logo{
    border-right: 0.2em solid var(--c-lines);
 }
+/* Add class alias for logo used in TSX */
+.logo {
+    border-right: 0.2em solid var(--c-lines);
+}
 nav ul #nav-logo span{
    line-height: 0.75;
    font-size: 1.5em;
@@ -47,10 +51,21 @@ nav a{
    position: relative;
    text-decoration: none;
 }
-
 nav a:hover{
    color: #fff;
 }
+/* Unify link/summary layout to prevent distortion */
+nav a,
+nav summary {
+    color: #fff;
+    transition: color 1s;
+    position: relative;
+    text-decoration: none;
+    cursor: pointer;
+    display: inline-block;            /* ensure consistent inline sizing */
+    vertical-align: middle;           /* align with neighbors */
+    padding: 0;                       /* keep padding controlled by li */
+}

 nav a::before {
    content: "";
@@ -67,7 +82,125 @@ nav a::before {
 nav a:hover::before {
    transform: scaleX(1);
 }
+nav summary:hover {
+    color: #fff;
+}

+/* underline effect shared for links and summary */
+nav a::before,
+nav summary::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+nav a:hover::before,
+nav summary:hover::before {
+    transform: scaleX(1);
+}
+
+/* Submenu support */
+.hasSubmenu {
+    position: relative;
+    vertical-align: middle;           /* align with other inline items */
+}
+
+/* Keep details inline to avoid breaking the first row flow */
+.hasSubmenu details {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+}
+
+/* Ensure "Services" and caret stay on the same line */
+.hasSubmenu details > summary {
+    display: inline-flex;       /* horizontal layout */
+    align-items: center;        /* vertical alignment */
+    gap: 0.5em;                 /* space between text and icon */
+    white-space: nowrap;        /* prevent wrapping */
+}
+
+/* Hide native disclosure icon/marker on summary */
+.hasSubmenu details > summary {
+    list-style: none;
+    outline: none;
+}
+.hasSubmenu details > summary::-webkit-details-marker {
+    display: none;
+}
+.hasSubmenu details > summary::marker {
+    content: "";
+}
+
+/* Reusable caret for submenu triggers */
+.caret {
+    transition: transform 0.2s ease-in-out;
+}
+
+/* Rotate caret when submenu is open */
+.hasSubmenu details[open] .caret {
+    transform: rotate(180deg);
+}
+
+/* Submenu box: place directly under nav with a tiny gap (no overlap) */
+.submenu {
+    list-style: none;
+    margin: 1em 0;
+    padding: 0.5em 0;
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.25em);
+    display: none;
+    background: var(--c-background-light);
+    border: 1px solid var(--c-lines);
+    border-radius: 0.75em;
+    min-width: max-content;
+    text-align: left;
+    z-index: 10;
+}
+.submenu li {
+    display: block;
+    padding: 0;
+}
+.submenu a {
+    display: inline-block;
+    padding: 0;             /* remove padding so underline equals text width */
+    margin: 0.35em 0;  /* spacing without affecting underline width */
+}
+
+/* Show submenu when open */
+.hasSubmenu details[open] .submenu {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Hamburger toggle class (used by TSX) */
+.toggle {
+    display: none;
+    transition: transform 0.5s ease;
+}
+.toggleRotated {
+    transform: rotate(180deg);
+}
+
+/* Bridge TSX classnames to existing rules */
+.navList {
+    list-style: none;
+    padding: 0;
+}
+.navList li {
+    display: inline;
+    padding: 0 3em;
+}
+.navList li a {
+    text-decoration: none;
+}

 nav ul {
    list-style: none;
@@ -129,6 +262,11 @@ nav ul li a {

        max-height: 2em;
    }
+    /* When TSX adds styles.open to the UL, expand it */
+    .open {
+        max-height: 20em;
+    }
+
    nav ul:last-child{
        padding-bottom: 1em;
    }
@@ -139,4 +277,28 @@ nav ul li a {
        border-bottom: 0.2em solid var(--c-lines);
        border-right: none;
    }
-  }
+    /* Show hamburger on mobile */
+    .toggle {
+        margin-top: 0.25em;
+        margin-left: 0.75em;
+        position: absolute;
+        left: 0;
+        display: block;
+        font-size: 2em;
+    }
+
+    /* Submenu stacks inline under the parent item on mobile */
+    .submenu {
+        position: static;
+        border: none;
+        border-radius: 0;
+        background: transparent;
+        padding: 0 0 0.5em 0.5em;
+        min-width: unset;
+    }
+    .submenu a {
+        display: inline-block;
+        padding: 0;            /* keep no padding on mobile too */
+        margin: 0.25em 0.5em;  /* spacing via margin */
+    }
+}
--- a/frontend/src/components/navbar/HomeNav.tsx
+++ b/frontend/src/components/navbar/HomeNav.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import styles from "./HomeNav.module.css"
-import { FaBars } from "react-icons/fa";
+import { FaBars, FaChevronDown } from "react-icons/fa";

 export default function HomeNav() {
  const [navOpen, setNavOpen] = useState(false)
@@ -9,7 +9,12 @@ export default function HomeNav() {

  return (
    <nav className={styles.nav}>
-      <FaBars className={styles.toggle} onClick={toggleNav} />
+      <FaBars
+        className={`${styles.toggle} ${navOpen ? styles.toggleRotated : ""}`}
+        onClick={toggleNav}
+        aria-label="Toggle navigation"
+        aria-expanded={navOpen}
+      />

      <ul className={`${styles.navList} ${navOpen ? styles.open : ""}`}>
        <li id="nav-logo" className={styles.logo}>
@@ -21,8 +26,18 @@ export default function HomeNav() {
        <li>
          <a href="#portfolio">Portfolio</a>
        </li>
-        <li>
-          <a href="#services">Services</a>
+        <li className={styles.hasSubmenu}>
+          <details>
+            <summary>
+              Services
+              <FaChevronDown className={`${styles.caret} ml-2 inline-block`} aria-hidden="true" />
+            </summary>
+            <ul className={styles.submenu}>
+              <li><a href="#web">Web development</a></li>
+              <li><a href="#integration">Integrations</a></li>
+              <li><a href="#support">Support</a></li>
+            </ul>
+          </details>
        </li>
        <li>
          <a href="#contactme-form">Contact me</a>