{"id":89,"date":"2026-06-09T19:44:30","date_gmt":"2026-06-09T17:44:30","guid":{"rendered":"https:\/\/x.sspu-opava.eu\/?page_id=89"},"modified":"2026-06-09T20:02:39","modified_gmt":"2026-06-09T18:02:39","slug":"o-mne-kontakt","status":"publish","type":"page","link":"https:\/\/x.sspu-opava.eu\/?page_id=89","title":{"rendered":"O mne"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"89\" class=\"elementor elementor-89\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2d27f0 e-con-full e-flex e-con e-parent\" data-id=\"f2d27f0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-10f5b4a elementor-widget elementor-widget-html\" data-id=\"10f5b4a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<header class=\"uni-header\">\r\n  <div class=\"uni-header__inner\">\r\n    <a class=\"uni-brand\" href=\"\/\">\r\n      <span class=\"uni-brand__mark\">\u2318<\/span>\r\n      <span class=\"uni-brand__text\">Anatomie notebooku<\/span>\r\n    <\/a>\r\n\r\n    <nav class=\"uni-nav\" aria-label=\"Hlavn\u00ed navigace\">\r\n      <a href=\"\/\" class=\"uni-nav__link\">Dom\u016f<\/a>\r\n      <a href=\"\/o-mne-kontakt\/\" class=\"uni-nav__link\">O mn\u011b \/ Kontakt<\/a>\r\n      <a href=\"\/#komponenty\" class=\"uni-nav__link\">Komponenty<\/a>\r\n      <a href=\"\/#faq\" class=\"uni-nav__link\">FAQ<\/a>\r\n    <\/nav>\r\n\r\n    <a class=\"uni-cta\" href=\"\/o-mne-kontakt\/\">\r\n      Kontakt\r\n      <span>\u2726<\/span>\r\n    <\/a>\r\n\r\n    <button class=\"uni-menu-btn\" type=\"button\" aria-label=\"Otev\u0159\u00edt menu\" id=\"uniMenuBtn\">\r\n      <span><\/span>\r\n      <span><\/span>\r\n      <span><\/span>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <div class=\"uni-mobile-nav\" id=\"uniMobileNav\">\r\n    <a href=\"\/\" class=\"uni-mobile-nav__link\">Dom\u016f<\/a>\r\n    <a href=\"\/o-mne-kontakt\/\" class=\"uni-mobile-nav__link\">O mn\u011b \/ Kontakt<\/a>\r\n    <a href=\"\/#komponenty\" class=\"uni-mobile-nav__link\">Komponenty<\/a>\r\n    <a href=\"\/#faq\" class=\"uni-mobile-nav__link\">FAQ<\/a>\r\n  <\/div>\r\n<\/header>\r\n\r\n<script>\r\n(function () {\r\n  const btn = document.getElementById('uniMenuBtn');\r\n  const nav = document.getElementById('uniMobileNav');\r\n\r\n  if (btn && nav) {\r\n    btn.addEventListener('click', function () {\r\n      nav.classList.toggle('is-open');\r\n    });\r\n\r\n    nav.querySelectorAll('a').forEach(function (link) {\r\n      link.addEventListener('click', function () {\r\n        nav.classList.remove('is-open');\r\n      });\r\n    });\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3b0d919 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"3b0d919\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n.about-page,\r\n.about-page * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.about-page {\r\n  width: 100vw;\r\n  margin-left: calc(50% - 50vw);\r\n  overflow-x: hidden;\r\n  background:\r\n    radial-gradient(circle at top, rgba(0,229,255,0.10), transparent 34%),\r\n    linear-gradient(180deg, #070b10 0%, #0b0f14 100%);\r\n  color: #fff;\r\n  font-family: 'Inter', sans-serif;\r\n  position: relative;\r\n}\r\n\r\n.about-page a {\r\n  color: inherit;\r\n  text-decoration: none;\r\n}\r\n\r\n.about-page .wrap {\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n  padding: 0 20px;\r\n}\r\n\r\n.about-page .topbar {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 1000;\r\n  backdrop-filter: blur(16px);\r\n  background: rgba(8, 12, 18, 0.66);\r\n  border-bottom: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n.about-page .topbar-inner {\r\n  height: 74px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 20px;\r\n}\r\n\r\n.about-page .brand {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 12px;\r\n  font-weight: 800;\r\n  letter-spacing: 1px;\r\n  white-space: nowrap;\r\n}\r\n\r\n.about-page .brand-mark {\r\n  width: 38px;\r\n  height: 38px;\r\n  border-radius: 12px;\r\n  display: grid;\r\n  place-items: center;\r\n  background: linear-gradient(135deg, rgba(0,229,255,0.22), rgba(255,255,255,0.06));\r\n  border: 1px solid rgba(0,229,255,0.28);\r\n  box-shadow: 0 0 22px rgba(0,229,255,0.12);\r\n}\r\n\r\n.about-page .nav {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 28px;\r\n}\r\n\r\n.about-page .nav a {\r\n  position: relative;\r\n  font-size: 14px;\r\n  color: rgba(255,255,255,0.78);\r\n  transition: 0.25s ease;\r\n}\r\n\r\n.about-page .nav a::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  bottom: -8px;\r\n  width: 0%;\r\n  height: 2px;\r\n  border-radius: 99px;\r\n  background: linear-gradient(90deg, transparent, #00e5ff, transparent);\r\n  transition: 0.25s ease;\r\n}\r\n\r\n.about-page .nav a:hover {\r\n  color: #fff;\r\n}\r\n\r\n.about-page .nav a:hover::after {\r\n  width: 100%;\r\n}\r\n\r\n.about-page .cta {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 12px 18px;\r\n  border-radius: 999px;\r\n  background: linear-gradient(135deg, #ffffff, #dffcff);\r\n  color: #061018;\r\n  font-weight: 700;\r\n  box-shadow: 0 10px 30px rgba(0,229,255,0.12);\r\n  transition: 0.25s ease;\r\n  white-space: nowrap;\r\n}\r\n\r\n.about-page .cta:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 12px 36px rgba(0,229,255,0.22);\r\n}\r\n\r\n.about-page .menu-btn {\r\n  display: none;\r\n  width: 46px;\r\n  height: 46px;\r\n  border: 1px solid rgba(255,255,255,0.12);\r\n  background: rgba(255,255,255,0.04);\r\n  color: #fff;\r\n  border-radius: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.about-page .menu-btn span {\r\n  display: block;\r\n  width: 18px;\r\n  height: 2px;\r\n  background: #fff;\r\n  margin: 4px auto;\r\n  border-radius: 999px;\r\n}\r\n\r\n.about-page .mobile-nav {\r\n  display: none;\r\n  padding: 12px 20px 20px;\r\n}\r\n\r\n.about-page .mobile-nav.open {\r\n  display: block;\r\n}\r\n\r\n.about-page .mobile-nav a {\r\n  display: block;\r\n  padding: 12px 14px;\r\n  margin-top: 8px;\r\n  border-radius: 14px;\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  color: rgba(255,255,255,0.88);\r\n}\r\n\r\n.about-page .hero {\r\n  min-height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  padding-top: 110px;\r\n  padding-bottom: 80px;\r\n  background:\r\n    linear-gradient(180deg, rgba(7,11,16,0.24), rgba(7,11,16,0.72)),\r\n    url('https:\/\/images.unsplash.com\/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1600&q=80') center\/cover no-repeat;\r\n}\r\n\r\n.about-page .hero::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: radial-gradient(circle at 50% 35%, rgba(0,229,255,0.18), transparent 45%);\r\n  pointer-events: none;\r\n}\r\n\r\n.about-page .hero-grid {\r\n  position: relative;\r\n  z-index: 2;\r\n  display: grid;\r\n  grid-template-columns: 1.05fr 0.95fr;\r\n  gap: 36px;\r\n  align-items: center;\r\n}\r\n\r\n.about-page .eyebrow {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 10px 14px;\r\n  margin-bottom: 18px;\r\n  border-radius: 999px;\r\n  background: rgba(255,255,255,0.08);\r\n  border: 1px solid rgba(255,255,255,0.10);\r\n  color: rgba(255,255,255,0.82);\r\n  font-size: 13px;\r\n}\r\n\r\n.about-page .eyebrow i {\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 999px;\r\n  background: #00e5ff;\r\n  box-shadow: 0 0 14px rgba(0,229,255,0.9);\r\n  display: inline-block;\r\n}\r\n\r\n.about-page h1,\r\n.about-page h2,\r\n.about-page h3 {\r\n  margin: 0;\r\n  line-height: 1.08;\r\n  color: #fff;\r\n}\r\n\r\n.about-page .hero h1 {\r\n  font-size: clamp(42px, 7vw, 76px);\r\n  letter-spacing: -0.04em;\r\n  text-shadow: 0 0 24px rgba(0,229,255,0.12);\r\n}\r\n\r\n.about-page .hero p.lead {\r\n  max-width: 650px;\r\n  font-size: 18px;\r\n  line-height: 1.7;\r\n  color: rgba(255,255,255,0.84);\r\n  margin: 20px 0 0;\r\n}\r\n\r\n.about-page .hero-actions {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 14px;\r\n  margin-top: 28px;\r\n}\r\n\r\n.about-page .btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 10px;\r\n  min-height: 48px;\r\n  padding: 0 20px;\r\n  border-radius: 999px;\r\n  font-weight: 700;\r\n  transition: 0.25s ease;\r\n  border: 1px solid transparent;\r\n}\r\n\r\n.about-page .btn-primary {\r\n  background: linear-gradient(135deg, #ffffff, #dffcff);\r\n  color: #061018;\r\n  box-shadow: 0 10px 30px rgba(0,229,255,0.10);\r\n}\r\n\r\n.about-page .btn-primary:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 14px 34px rgba(0,229,255,0.22);\r\n}\r\n\r\n.about-page .btn-secondary {\r\n  background: rgba(255,255,255,0.06);\r\n  color: #fff;\r\n  border-color: rgba(255,255,255,0.12);\r\n}\r\n\r\n.about-page .btn-secondary:hover {\r\n  transform: translateY(-2px);\r\n  border-color: rgba(0,229,255,0.34);\r\n  box-shadow: 0 0 0 4px rgba(0,229,255,0.08);\r\n}\r\n\r\n.about-page .hero-card {\r\n  border-radius: 28px;\r\n  overflow: hidden;\r\n  background: rgba(255,255,255,0.05);\r\n  border: 1px solid rgba(255,255,255,0.10);\r\n  box-shadow: 0 20px 60px rgba(0,0,0,0.28);\r\n  backdrop-filter: blur(12px);\r\n}\r\n\r\n.about-page .avatar-box {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 18px;\r\n  padding: 22px;\r\n  border-bottom: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n.about-page .avatar {\r\n  width: 92px;\r\n  height: 92px;\r\n  border-radius: 26px;\r\n  display: grid;\r\n  place-items: center;\r\n  font-size: 34px;\r\n  font-weight: 800;\r\n  background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(255,255,255,0.06));\r\n  border: 1px solid rgba(0,229,255,0.25);\r\n  box-shadow: 0 0 30px rgba(0,229,255,0.12);\r\n  flex: 0 0 auto;\r\n}\r\n\r\n.about-page .avatar-meta strong {\r\n  display: block;\r\n  font-size: 24px;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.about-page .avatar-meta span {\r\n  display: block;\r\n  color: rgba(255,255,255,0.72);\r\n  line-height: 1.6;\r\n  font-size: 14px;\r\n}\r\n\r\n.about-page .hero-card-content {\r\n  padding: 20px 22px 22px;\r\n}\r\n\r\n.about-page .hero-card-content p {\r\n  color: rgba(255,255,255,0.76);\r\n  line-height: 1.75;\r\n  margin: 0 0 14px;\r\n}\r\n\r\n.about-page .stats {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 16px;\r\n  margin-top: 28px;\r\n}\r\n\r\n.about-page .stat {\r\n  padding: 16px 18px;\r\n  border-radius: 20px;\r\n  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));\r\n  border: 1px solid rgba(255,255,255,0.09);\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n.about-page .stat strong {\r\n  display: block;\r\n  font-size: 22px;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.about-page .stat span {\r\n  font-size: 13px;\r\n  color: rgba(255,255,255,0.72);\r\n  line-height: 1.5;\r\n}\r\n\r\n.about-page section {\r\n  padding: 90px 0;\r\n}\r\n\r\n.about-page .section-title {\r\n  max-width: 820px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.about-page .section-title .kicker {\r\n  display: inline-block;\r\n  margin-bottom: 12px;\r\n  color: #00e5ff;\r\n  font-size: 13px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.12em;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.about-page .section-title h2 {\r\n  font-size: clamp(30px, 4vw, 48px);\r\n  margin-bottom: 12px;\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n.about-page .section-title p {\r\n  color: rgba(255,255,255,0.76);\r\n  line-height: 1.7;\r\n  margin: 0;\r\n  max-width: 760px;\r\n}\r\n\r\n.about-page .two-col {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 28px;\r\n  align-items: stretch;\r\n}\r\n\r\n.about-page .glass {\r\n  background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));\r\n  border: 1px solid rgba(255,255,255,0.09);\r\n  border-radius: 28px;\r\n  backdrop-filter: blur(12px);\r\n  box-shadow: 0 20px 50px rgba(0,0,0,0.20);\r\n}\r\n\r\n.about-page .about-box {\r\n  padding: 28px;\r\n}\r\n\r\n.about-page .about-box p {\r\n  color: rgba(255,255,255,0.76);\r\n  line-height: 1.8;\r\n  margin: 0 0 16px;\r\n}\r\n\r\n.about-page .bullets {\r\n  display: grid;\r\n  gap: 12px;\r\n  margin-top: 20px;\r\n}\r\n\r\n.about-page .bullet {\r\n  display: flex;\r\n  gap: 12px;\r\n  align-items: flex-start;\r\n  padding: 14px 16px;\r\n  border-radius: 18px;\r\n  background: rgba(255,255,255,0.04);\r\n  border: 1px solid rgba(255,255,255,0.07);\r\n}\r\n\r\n.about-page .bullet .dot {\r\n  width: 12px;\r\n  height: 12px;\r\n  border-radius: 999px;\r\n  margin-top: 5px;\r\n  background: #00e5ff;\r\n  box-shadow: 0 0 14px rgba(0,229,255,0.8);\r\n  flex: 0 0 auto;\r\n}\r\n\r\n.about-page .bullet strong {\r\n  display: block;\r\n  margin-bottom: 3px;\r\n}\r\n\r\n.about-page .bullet span {\r\n  color: rgba(255,255,255,0.72);\r\n  font-size: 14px;\r\n  line-height: 1.55;\r\n}\r\n\r\n.about-page .contact-card {\r\n  padding: 28px;\r\n}\r\n\r\n.about-page .contact-line {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 14px;\r\n  padding: 16px 0;\r\n  border-bottom: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n.about-page .contact-line:last-child {\r\n  border-bottom: 0;\r\n}\r\n\r\n.about-page .contact-ico {\r\n  width: 44px;\r\n  height: 44px;\r\n  border-radius: 16px;\r\n  display: grid;\r\n  place-items: center;\r\n  background: rgba(255,255,255,0.06);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  font-size: 20px;\r\n  flex: 0 0 auto;\r\n}\r\n\r\n.about-page .contact-line strong {\r\n  display: block;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.about-page .contact-line span,\r\n.about-page .contact-line a {\r\n  color: rgba(255,255,255,0.72);\r\n  font-size: 14px;\r\n  line-height: 1.6;\r\n}\r\n\r\n.about-page .contact-line a:hover {\r\n  color: #00e5ff;\r\n}\r\n\r\n.about-page .mini-note {\r\n  margin-top: 18px;\r\n  color: rgba(255,255,255,0.68);\r\n  font-size: 14px;\r\n  line-height: 1.7;\r\n}\r\n\r\n.about-page .skills {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 18px;\r\n}\r\n\r\n.about-page .skill {\r\n  padding: 22px;\r\n  border-radius: 24px;\r\n  background: rgba(255,255,255,0.05);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n.about-page .skill h3 {\r\n  margin-bottom: 10px;\r\n  font-size: 18px;\r\n}\r\n\r\n.about-page .skill p {\r\n  margin: 0;\r\n  color: rgba(255,255,255,0.74);\r\n  line-height: 1.7;\r\n  font-size: 14px;\r\n}\r\n\r\n.about-page .quote {\r\n  margin-top: 18px;\r\n  padding: 18px 20px;\r\n  border-radius: 20px;\r\n  background: rgba(0,229,255,0.08);\r\n  border: 1px solid rgba(0,229,255,0.15);\r\n  color: rgba(255,255,255,0.88);\r\n  line-height: 1.7;\r\n}\r\n\r\n.about-page .footer {\r\n  padding: 70px 0 40px;\r\n  border-top: 1px solid rgba(255,255,255,0.08);\r\n  background:\r\n    radial-gradient(circle at bottom, rgba(0,229,255,0.12), transparent 42%),\r\n    rgba(6, 10, 15, 0.95);\r\n}\r\n\r\n.about-page .footer-grid {\r\n  display: grid;\r\n  grid-template-columns: 1.2fr 0.8fr 0.8fr;\r\n  gap: 24px;\r\n}\r\n\r\n.about-page .footer h3 {\r\n  margin-bottom: 14px;\r\n  font-size: 18px;\r\n}\r\n\r\n.about-page .footer p,\r\n.about-page .footer a {\r\n  color: rgba(255,255,255,0.72);\r\n  line-height: 1.7;\r\n  font-size: 14px;\r\n}\r\n\r\n.about-page .footer a:hover {\r\n  color: #00e5ff;\r\n}\r\n\r\n.about-page .footer-links {\r\n  display: grid;\r\n  gap: 8px;\r\n}\r\n\r\n.about-page .socials {\r\n  display: flex;\r\n  gap: 10px;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.about-page .socials a {\r\n  width: 42px;\r\n  height: 42px;\r\n  border-radius: 14px;\r\n  display: grid;\r\n  place-items: center;\r\n  background: rgba(255,255,255,0.05);\r\n  border: 1px solid rgba(255,255,255,0.08);\r\n  transition: 0.25s ease;\r\n}\r\n\r\n.about-page .socials a:hover {\r\n  transform: translateY(-2px);\r\n  border-color: rgba(0,229,255,0.35);\r\n  box-shadow: 0 0 24px rgba(0,229,255,0.12);\r\n}\r\n\r\n.about-page .copyright {\r\n  margin-top: 26px;\r\n  padding-top: 18px;\r\n  border-top: 1px solid rgba(255,255,255,0.08);\r\n  color: rgba(255,255,255,0.52);\r\n  font-size: 13px;\r\n  text-align: center;\r\n}\r\n\r\n.about-page .spacer-top {\r\n  height: 74px;\r\n}\r\n\r\n.about-page .reveal {\r\n  opacity: 0;\r\n  transform: translateY(24px);\r\n  transition: opacity 0.7s ease, transform 0.7s ease;\r\n}\r\n\r\n.about-page .reveal.visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n@keyframes floaty {\r\n  0%, 100% { transform: translateY(0px); }\r\n  50% { transform: translateY(-8px); }\r\n}\r\n\r\n@media (max-width: 1100px) {\r\n  .about-page .hero-grid,\r\n  .about-page .two-col {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .about-page .footer-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .about-page .skills {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .about-page .stats {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n\r\n@media (max-width: 820px) {\r\n  .about-page .nav,\r\n  .about-page .cta {\r\n    display: none;\r\n  }\r\n\r\n  .about-page .menu-btn {\r\n    display: inline-grid;\r\n    place-items: center;\r\n  }\r\n\r\n  .about-page .topbar-inner {\r\n    height: 68px;\r\n  }\r\n\r\n  .about-page .hero {\r\n    padding-top: 96px;\r\n  }\r\n\r\n  .about-page .hero-actions {\r\n    display: grid;\r\n  }\r\n\r\n  .about-page .btn {\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n@media (max-width: 520px) {\r\n  .about-page .wrap {\r\n    padding: 0 16px;\r\n  }\r\n\r\n  .about-page .hero p.lead,\r\n  .about-page .section-title p,\r\n  .about-page .about-box p {\r\n    font-size: 15px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"about-page\" id=\"top\">\r\n  <header class=\"topbar\">\r\n    <div class=\"wrap topbar-inner\">\r\n      <a class=\"brand\" href=\"#top\">\r\n        <span class=\"brand-mark\">\u2318<\/span>\r\n        <span>O mn\u011b \/ Kontakt<\/span>\r\n      <\/a>\r\n\r\n      <nav class=\"nav\" aria-label=\"Hlavn\u00ed menu\">\r\n        <a href=\"#top\" class=\"active\">Dom\u016f<\/a>\r\n        <a href=\"#o-mne\">O mn\u011b<\/a>\r\n        <a href=\"#kontakt\">Kontakt<\/a>\r\n        <a href=\"#zajmy\">Z\u00e1jmy<\/a>\r\n      <\/nav>\r\n\r\n      <a class=\"cta\" href=\"mailto:it2506@sspu-opava.cz\">Napsat email<\/a>\r\n\r\n      <button class=\"menu-btn\" type=\"button\" aria-label=\"Otev\u0159\u00edt menu\" id=\"menuBtn\">\r\n        <span><\/span>\r\n        <span><\/span>\r\n        <span><\/span>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <div class=\"mobile-nav\" id=\"mobileNav\">\r\n      <a href=\"#top\">Dom\u016f<\/a>\r\n      <a href=\"#o-mne\">O mn\u011b<\/a>\r\n      <a href=\"#kontakt\">Kontakt<\/a>\r\n      <a href=\"#zajmy\">Z\u00e1jmy<\/a>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <div class=\"spacer-top\"><\/div>\r\n\r\n  <section class=\"hero\">\r\n    <div class=\"wrap hero-grid\">\r\n      <div class=\"reveal\">\r\n        <div class=\"eyebrow\"><i><\/i> osobn\u00ed str\u00e1nka a kontakt<\/div>\r\n        <h1>Nathan Halfar<\/h1>\r\n        <p class=\"lead\">\r\n          Jsem student IT, kter\u00fd se zaj\u00edm\u00e1 o technologie, notebooky a modern\u00ed webov\u00fd design.\r\n          Tato str\u00e1nka stru\u010dn\u011b p\u0159edstavuje, kdo jsem, co m\u011b bav\u00ed a jak m\u011b m\u016f\u017eete kontaktovat.\r\n        <\/p>\r\n\r\n        <div class=\"hero-actions\">\r\n          <a class=\"btn btn-primary\" href=\"#kontakt\">Kontaktovat<\/a>\r\n          <a class=\"btn btn-secondary\" href=\"#o-mne\">V\u00edce o mn\u011b<\/a>\r\n        <\/div>\r\n\r\n        <div class=\"stats\">\r\n          <div class=\"stat\">\r\n            <strong>IT student<\/strong>\r\n            <span>zam\u011b\u0159en\u00ed na technologie, web a hardware<\/span>\r\n          <\/div>\r\n          <div class=\"stat\">\r\n            <strong>Gamer<\/strong>\r\n            <span>hry jsou pro m\u011b i relax i z\u00e1bava<\/span>\r\n          <\/div>\r\n          <div class=\"stat\">\r\n            <strong>Webov\u00fd projekt<\/strong>\r\n            <span>str\u00e1nka vytvo\u0159en\u00e1 jako \u0161koln\u00ed prezentace<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"hero-card reveal\">\r\n        <div class=\"avatar-box\">\r\n          <div class=\"avatar\">NH<\/div>\r\n          <div class=\"avatar-meta\">\r\n            <strong>Nathan Halfar<\/strong>\r\n            <span>Student IT \u2022 z\u00e1jem o po\u010d\u00edta\u010de, hry a modern\u00ed technologie<\/span>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"hero-card-content\">\r\n          <p>\r\n            Bav\u00ed m\u011b technika, v\u00fdvoj web\u016f a v\u0161echno kolem po\u010d\u00edta\u010d\u016f. Nejv\u00edc m\u011b zaj\u00edm\u00e1,\r\n            jak v\u011bci funguj\u00ed uvnit\u0159, a proto se mi l\u00edb\u00ed i t\u00e9ma notebook\u016f a jejich komponent.\r\n          <\/p>\r\n          <p>\r\n            Krom\u011b toho r\u00e1d hraju hry, sleduji technologick\u00e9 novinky a zkou\u0161\u00edm tvo\u0159it str\u00e1nky,\r\n            kter\u00e9 vypadaj\u00ed modern\u011b, p\u0159ehledn\u011b a dob\u0159e funguj\u00ed i na mobilu.\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section id=\"o-mne\">\r\n    <div class=\"wrap\">\r\n      <div class=\"section-title reveal\">\r\n        <div class=\"kicker\">O mn\u011b<\/div>\r\n        <h2>Kr\u00e1tce o tom, kdo jsem a co m\u011b bav\u00ed.<\/h2>\r\n        <p>\r\n          Jsem student IT a zaj\u00edm\u00e1m se hlavn\u011b o technologie, po\u010d\u00edta\u010de a web. L\u00edb\u00ed se mi,\r\n          kdy\u017e str\u00e1nka nejen dob\u0159e vypad\u00e1, ale z\u00e1rove\u0148 d\u00e1v\u00e1 smysl a funguje p\u0159ehledn\u011b.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"two-col\">\r\n        <div class=\"glass about-box reveal\">\r\n          <p>\r\n            Na podobn\u00fdch projektech m\u011b bav\u00ed hlavn\u011b kombinace designu a techniky.\r\n            Je zaj\u00edmav\u00e9 vz\u00edt t\u00e9ma, kter\u00e9 m\u016f\u017ee b\u00fdt na prvn\u00ed pohled odborn\u00e9, a ud\u011blat z n\u011bj str\u00e1nku,\r\n            kter\u00e1 je jednoduch\u00e1, modern\u00ed a snadno \u010diteln\u00e1.\r\n          <\/p>\r\n          <p>\r\n            Ve voln\u00e9m \u010dase se v\u011bnuji hran\u00ed her, sledov\u00e1n\u00ed novinek ze sv\u011bta technologi\u00ed\r\n            a ob\u010das si r\u00e1d zkou\u0161\u00edm vlastn\u00ed men\u0161\u00ed webov\u00e9 projekty. D\u00edky tomu m\u011b bav\u00ed i pr\u00e1ce\r\n            s WordPressem a elementorem.\r\n          <\/p>\r\n\r\n          <div class=\"quote\">\r\n            \u201eM\u00e1m r\u00e1d technologie, kter\u00e9 nejsou jen funk\u010dn\u00ed, ale i dob\u0159e zpracovan\u00e9 po vizu\u00e1ln\u00ed str\u00e1nce.\u201c\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"glass about-box reveal\">\r\n          <p>\r\n            Tahle str\u00e1nka slou\u017e\u00ed jako jednoduch\u00e9 p\u0159edstaven\u00ed autora webu.\r\n            Je tu v\u0161echno d\u016fle\u017eit\u00e9 na jednom m\u00edst\u011b: kdo jsem, co m\u011b bav\u00ed a jak se na m\u011b obr\u00e1tit.\r\n          <\/p>\r\n\r\n          <div class=\"bullets\">\r\n            <div class=\"bullet\">\r\n              <span class=\"dot\"><\/span>\r\n              <div>\r\n                <strong>Student IT<\/strong>\r\n                <span>Zam\u011b\u0159uji se na po\u010d\u00edta\u010de, technologie a pr\u00e1ci s webem.<\/span>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"bullet\">\r\n              <span class=\"dot\"><\/span>\r\n              <div>\r\n                <strong>Hry a technologie<\/strong>\r\n                <span>R\u00e1d hraju hry a sleduji novinky ze sv\u011bta hardwaru.<\/span>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"bullet\">\r\n              <span class=\"dot\"><\/span>\r\n              <div>\r\n                <strong>Webdesign<\/strong>\r\n                <span>Bav\u00ed m\u011b vytv\u00e1\u0159et str\u00e1nky, kter\u00e9 vypadaj\u00ed modern\u011b a p\u0159ehledn\u011b.<\/span>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section id=\"zajmy\">\r\n    <div class=\"wrap\">\r\n      <div class=\"section-title reveal\">\r\n        <div class=\"kicker\">Z\u00e1jmy<\/div>\r\n        <h2>Co m\u011b bav\u00ed mimo \u0161kolu.<\/h2>\r\n        <p>\r\n          Krom\u011b IT m\u011b bav\u00ed i v\u011bci, kter\u00e9 s n\u00edm souvis\u00ed \u2013 hlavn\u011b hry, technologie a sledov\u00e1n\u00ed toho,\r\n          co je nov\u00e9ho ve sv\u011bt\u011b po\u010d\u00edta\u010d\u016f a notebook\u016f.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"skills\">\r\n        <div class=\"skill reveal\">\r\n          <h3>Hran\u00ed her<\/h3>\r\n          <p>Hry jsou pro m\u011b hlavn\u011b z\u00e1bava a odpo\u010dinek. Z\u00e1rove\u0148 m\u011b \u010dasto zaj\u00edm\u00e1 i v\u00fdkon, grafika a technick\u00e1 str\u00e1nka hern\u00edch za\u0159\u00edzen\u00ed.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"skill reveal\">\r\n          <h3>Technologie<\/h3>\r\n          <p>R\u00e1d sleduji novinky z IT sv\u011bta, nov\u00e9 notebooky, procesory, grafick\u00e9 karty a v\u0161e kolem po\u010d\u00edta\u010dov\u00e9ho hardwaru.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"skill reveal\">\r\n          <h3>Weby a design<\/h3>\r\n          <p>Bav\u00ed m\u011b vytv\u00e1\u0159et weby, kter\u00e9 jsou p\u0159ehledn\u00e9, modern\u00ed a dob\u0159e vypadaj\u00ed na po\u010d\u00edta\u010di i na mobilu.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section id=\"kontakt\">\r\n    <div class=\"wrap\">\r\n      <div class=\"section-title reveal\">\r\n        <div class=\"kicker\">Kontakt<\/div>\r\n        <h2>Kdy\u017e bude\u0161 n\u011bco pot\u0159ebovat, m\u016f\u017ee\u0161 mi napsat.<\/h2>\r\n        <p>\r\n          Tady je m\u016fj kontakt, kdyby bylo pot\u0159eba se ozvat kv\u016fli webu, \u0161kole nebo n\u011b\u010demu dal\u0161\u00edmu.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"two-col\">\r\n        <div class=\"glass contact-card reveal\">\r\n          <div class=\"contact-line\">\r\n            <div class=\"contact-ico\">\u2709<\/div>\r\n            <div>\r\n              <strong>Email<\/strong>\r\n              <a href=\"mailto:it2506@sspu-opava.cz\">it2506@sspu-opava.cz<\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"contact-line\">\r\n            <div class=\"contact-ico\">\ud83d\udc64<\/div>\r\n            <div>\r\n              <strong>Jm\u00e9no<\/strong>\r\n              <span>Nathan Halfar<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"contact-line\">\r\n            <div class=\"contact-ico\">\ud83c\udf93<\/div>\r\n            <div>\r\n              <strong>Studium<\/strong>\r\n              <span>Student IT<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"mini-note\">\r\n            Email je p\u0159ipraven\u00fd tak, aby \u0161el kliknout rovnou z webu. Na dal\u0161\u00ed str\u00e1nce m\u016f\u017ee\u0161 klidn\u011b p\u0159idat i kontaktn\u00ed formul\u00e1\u0159 nebo dal\u0161\u00ed informace.\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"glass about-box reveal\">\r\n          <p>\r\n            Tohle m\u00edsto m\u016f\u017ee slou\u017eit i jako kr\u00e1tk\u00fd kontaktn\u00ed panel. M\u016f\u017ee\u0161 sem pozd\u011bji p\u0159idat\r\n            i telefon, \u0161kolu, soci\u00e1ln\u00ed s\u00edt\u011b nebo jednoduch\u00fd formul\u00e1\u0159.\r\n          <\/p>\r\n          <p>\r\n            Na \u0161koln\u00ed web je ale tenhle jednoduch\u00fd styl \u010dasto \u00fapln\u011b ide\u00e1ln\u00ed,\r\n            proto\u017ee je p\u0159ehledn\u00fd, \u010dist\u00fd a dob\u0159e se prezentuje.\r\n          <\/p>\r\n\r\n          <div class=\"hero-actions\" style=\"margin-top:20px;\">\r\n            <a class=\"btn btn-primary\" href=\"mailto:it2506@sspu-opava.cz\">Napsat email<\/a>\r\n            <a class=\"btn btn-secondary\" href=\"#top\">Zp\u011bt nahoru<\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <footer class=\"footer\">\r\n    <div class=\"wrap\">\r\n      <div class=\"footer-grid\">\r\n        <div class=\"reveal\">\r\n          <h3>O mn\u011b \/ Kontakt<\/h3>\r\n          <p>Osobn\u00ed str\u00e1nka se stru\u010dn\u00fdm p\u0159edstaven\u00edm, kontaktem a p\u0159ehledem z\u00e1jm\u016f. Stylov\u011b navazuje na hlavn\u00ed str\u00e1nku webu.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"reveal\">\r\n          <h3>Menu<\/h3>\r\n          <div class=\"footer-links\">\r\n            <a href=\"#top\">Dom\u016f<\/a>\r\n            <a href=\"#o-mne\">O mn\u011b<\/a>\r\n            <a href=\"#zajmy\">Z\u00e1jmy<\/a>\r\n            <a href=\"#kontakt\">Kontakt<\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"reveal\">\r\n          <h3>Kontakt<\/h3>\r\n          <p>Nathan Halfar<\/p>\r\n          <p><a href=\"mailto:it2506@sspu-opava.cz\">it2506@sspu-opava.cz<\/a><\/p>\r\n          <div class=\"socials\" aria-label=\"Soci\u00e1ln\u00ed odkazy\">\r\n            <a href=\"mailto:it2506@sspu-opava.cz\" aria-label=\"Email\">\u2709<\/a>\r\n            <a href=\"#top\" aria-label=\"Profil\">\u2318<\/a>\r\n            <a href=\"#kontakt\" aria-label=\"Kontakt\">\u25ce<\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"copyright\">\r\n        \u00a9 2026 Nathan Halfar. Str\u00e1nka je pln\u011b responzivn\u00ed a p\u0159ipraven\u00e1 pro dal\u0161\u00ed roz\u0161\u00ed\u0159en\u00ed.\r\n      <\/div>\r\n    <\/div>\r\n  <\/footer>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  const menuBtn = document.getElementById('menuBtn');\r\n  const mobileNav = document.getElementById('mobileNav');\r\n  const navLinks = document.querySelectorAll('.about-page .nav a, .about-page .mobile-nav a');\r\n  const revealEls = document.querySelectorAll('.about-page .reveal');\r\n\r\n  if (menuBtn && mobileNav) {\r\n    menuBtn.addEventListener('click', () => {\r\n      mobileNav.classList.toggle('open');\r\n    });\r\n\r\n    mobileNav.querySelectorAll('a').forEach(link => {\r\n      link.addEventListener('click', () => mobileNav.classList.remove('open'));\r\n    });\r\n  }\r\n\r\n  const observer = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry) => {\r\n      if (entry.isIntersecting) {\r\n        entry.target.classList.add('visible');\r\n      }\r\n    });\r\n  }, { threshold: 0.15 });\r\n\r\n  revealEls.forEach(el => observer.observe(el));\r\n\r\n  const sections = ['top', 'o-mne', 'zajmy', 'kontakt']\r\n    .map(id => document.getElementById(id))\r\n    .filter(Boolean);\r\n\r\n  const navObserver = new IntersectionObserver((entries) => {\r\n    entries.forEach((entry) => {\r\n      if (!entry.isIntersecting) return;\r\n      const id = entry.target.id;\r\n      navLinks.forEach(a => a.classList.toggle('active', a.getAttribute('href') === '#' + id));\r\n    });\r\n  }, { threshold: 0.5 });\r\n\r\n  sections.forEach(sec => navObserver.observe(sec));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2318 Anatomie notebooku Dom\u016f O mn\u011b \/ Kontakt Komponenty FAQ Kontakt \u2726 Dom\u016f O mn\u011b \/ Kontakt Komponenty FAQ \u2318 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-89","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=89"}],"version-history":[{"count":15,"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/89\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/x.sspu-opava.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}