{"id":30,"date":"2025-05-27T22:53:20","date_gmt":"2025-05-27T20:53:20","guid":{"rendered":"https:\/\/blazejrusin.pl\/?page_id=30"},"modified":"2025-05-28T08:54:57","modified_gmt":"2025-05-28T06:54:57","slug":"strona-glowna","status":"publish","type":"page","link":"https:\/\/blazejrusin.pl\/","title":{"rendered":"Strona G\u0142\u00f3wna"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30\" class=\"elementor elementor-30\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a1bdae6 e-con-full e-flex e-con e-parent\" data-id=\"a1bdae6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dff094 elementor-widget elementor-widget-text-editor\" data-id=\"8dff094\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<!-- Hero Section CSS -->\n<style>\n  .hero-section {\n    min-height: 100vh;\n    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);\n    padding: 80px 20px 60px;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .hero-container {\n    max-width: 1200px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 60px;\n    align-items: center;\n    min-height: 80vh;\n  }\n  \n  .hero-content {\n    color: white;\n  }\n  \n  .hero-title {\n    font-size: 4rem;\n    font-weight: bold;\n    line-height: 1.1;\n    margin-bottom: 20px;\n  }\n  \n  .hero-title .highlight {\n    color: #7D7DB2;\n  }\n  \n  .hero-description {\n    font-size: 1.25rem;\n    color: #CBD5E1;\n    line-height: 1.6;\n    margin-bottom: 30px;\n  }\n  \n  .hero-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    margin-bottom: 40px;\n  }\n  \n  .badge {\n    background: rgba(125, 125, 178, 0.2);\n    color: #A5B4FC;\n    border: 1px solid rgba(125, 125, 178, 0.3);\n    padding: 8px 16px;\n    border-radius: 20px;\n    font-size: 0.9rem;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  \n  .hero-buttons {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .btn {\n    padding: 12px 32px;\n    font-size: 1.1rem;\n    border-radius: 8px;\n    text-decoration: none;\n    font-weight: 600;\n    transition: all 0.3s ease;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    cursor: pointer;\n  }\n  \n  .btn-primary {\n    background: #7D7DB2;\n    color: white;\n  }\n  \n  .btn-primary:hover {\n    background: #6B6B9D;\n    transform: translateY(-2px);\n  }\n  \n  .btn-outline {\n    background: transparent;\n    color: #7D7DB2;\n    border: 2px solid #7D7DB2;\n  }\n  \n  .btn-outline:hover {\n    background: #7D7DB2;\n    color: #1E293B;\n    transform: translateY(-2px);\n  }\n  \n  .hero-image {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n  }\n  \n  .image-container {\n    position: relative;\n    width: 350px;\n    height: 350px;\n  }\n  \n  .image-border {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #7D7DB2 0%, #9333EA 100%);\n    padding: 8px;\n  }\n  \n  .image-inner {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background: #1E293B;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n  }\n  \n  .profile-image {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 50%;\n  }\n  \n  .image-placeholder {\n    color: #7D7DB2;\n    font-size: 4rem;\n  }\n  \n  .floating-icon {\n    position: absolute;\n    width: 60px;\n    height: 60px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation: float 3s ease-in-out infinite;\n  }\n  \n  .floating-icon.trophy {\n    background: #7D7DB2;\n    color: white;\n    top: -20px;\n    right: -20px;\n    font-size: 1.5rem;\n  }\n  \n  .floating-icon.gamepad {\n    background: #334155;\n    color: #7D7DB2;\n    bottom: -20px;\n    left: -20px;\n    font-size: 1.2rem;\n  }\n  \n  @keyframes float {\n    0%, 100% { transform: translateY(0px); }\n    50% { transform: translateY(-10px); }\n  }\n  \n  \/* Responsive *\/\n  @media (max-width: 1024px) {\n    .hero-container {\n      grid-template-columns: 1fr;\n      gap: 40px;\n      text-align: center;\n    }\n    \n    .hero-title {\n      font-size: 3rem;\n    }\n    \n    .image-container {\n      width: 300px;\n      height: 300px;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .hero-section {\n      padding: 60px 15px 40px;\n    }\n    \n    .hero-title {\n      font-size: 2.5rem;\n    }\n    \n    .hero-description {\n      font-size: 1.1rem;\n    }\n    \n    .hero-buttons {\n      flex-direction: column;\n    }\n    \n    .image-container {\n      width: 250px;\n      height: 250px;\n    }\n    \n    .floating-icon {\n      width: 50px;\n      height: 50px;\n      font-size: 1rem;\n    }\n    \n    .floating-icon.trophy {\n      font-size: 1.2rem;\n    }\n  }\n  \n  @media (min-width: 769px) {\n    .hero-buttons {\n      flex-direction: row;\n    }\n  }\n<\/style>\n\n<!-- Hero Section HTML -->\n<section class=\"hero-section\">\n  <div class=\"hero-container\">\n    <div class=\"hero-content\">\n      <h1 class=\"hero-title\" style=\"color:#A5B4FC\">\n        Cze\u015b\u0107!<br>\n        Jestem <span class=\"highlight\">B\u0142a\u017cej<\/span>\n      <\/h1>\n      \n      <p class=\"hero-description\">\n        Ucze\u0144 szko\u0142y podstawowej z pasj\u0105 do sportu i gier. Trenuje pi\u0142k\u0119 no\u017cn\u0105 i marzy o szkole sportowej.\n      <\/p>\n      \n      <div class=\"hero-badges\">\n        <span class=\"badge\">\n          <i class=\"fas fa-trophy\"><\/i>\n          Pi\u0142ka no\u017cna\n        <\/span>\n        <span class=\"badge\">\n          <i class=\"fas fa-gamepad\"><\/i>\n          Gaming\n        <\/span>\n        <span class=\"badge\">\n          <i class=\"fas fa-graduation-cap\"><\/i>\n          Ucze\u0144\n        <\/span>\n      <\/div>\n      \n      <div class=\"hero-buttons\">\n        <a href=\"#contact\" class=\"btn btn-primary\">\n          Skontaktuj si\u0119\n        <\/a>\n        <a href=\"#skills\" class=\"btn btn-outline\">\n          Zobacz umiej\u0119tno\u015bci\n        <\/a>\n      <\/div>\n    <\/div>\n    \n    <div class=\"hero-image\">\n      <div class=\"image-container\">\n        <div class=\"image-border\">\n          <div class=\"image-inner\">\n           <img decoding=\"async\" src=\"https:\/\/blazejrusin.pl\/wp-content\/uploads\/2025\/05\/blazejeee.jpg\" alt=\"B\u0142a\u017cej Rusin\" class=\"profile-image\"> \n        \n        <div class=\"floating-icon trophy\">\n          <i class=\"fas fa-trophy\"><\/i>\n        <\/div>\n        \n        <div class=\"floating-icon gamepad\">\n          <i class=\"fas fa-gamepad\"><\/i>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- Font Awesome CDN (dodaj to w <head> je\u015bli nie masz) -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<!-- Smooth scroll JavaScript -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Smooth scrolling dla link\u00f3w\n  const links = document.querySelectorAll('a[href^=\"#\"]');\n  \n  links.forEach(link => {\n    link.addEventListener('click', function(e) {\n      e.preventDefault();\n      \n      const targetId = this.getAttribute('href');\n      const targetElement = document.querySelector(targetId);\n      \n      if (targetElement) {\n        targetElement.scrollIntoView({\n          behavior: 'smooth',\n          block: 'start'\n        });\n      }\n    });\n  });\n});\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2560db9 e-con-full e-flex e-con e-parent\" data-id=\"2560db9\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb0a06d elementor-widget elementor-widget-text-editor\" data-id=\"bb0a06d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<!-- Skills Section CSS -->\n<style>\n  .skills-section {\n    padding: 80px 20px;\n    background: rgba(30, 41, 59, 0.5);\n    position: relative;\n  }\n  \n  .skills-container {\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n  \n  .skills-header {\n    text-align: center;\n    margin-bottom: 60px;\n  }\n  \n  .skills-title {\n    font-size: 3rem;\n    font-weight: bold;\n    color: white;\n    margin-bottom: 16px;\n  }\n  \n  .skills-title .highlight {\n    color: #7D7DB2;\n  }\n  \n  .skills-subtitle {\n    font-size: 1.25rem;\n    color: #CBD5E1;\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.6;\n  }\n  \n  .skills-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n    gap: 30px;\n    margin-bottom: 60px;\n  }\n  \n  .skill-card {\n    background: rgba(15, 23, 42, 0.8);\n    border: 1px solid rgba(125, 125, 178, 0.3);\n    border-radius: 12px;\n    padding: 30px;\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .skill-card:hover {\n    border-color: rgba(125, 125, 178, 0.6);\n    transform: translateY(-5px);\n    box-shadow: 0 10px 30px rgba(125, 125, 178, 0.2);\n  }\n  \n  .skill-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background: linear-gradient(90deg, #7D7DB2, #9333EA);\n    opacity: 0;\n    transition: opacity 0.3s ease;\n  }\n  \n  .skill-card:hover::before {\n    opacity: 1;\n  }\n  \n  .skill-header {\n    text-align: center;\n    margin-bottom: 25px;\n  }\n  \n  .skill-icon {\n    width: 64px;\n    height: 64px;\n    background: rgba(125, 125, 178, 0.2);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 16px;\n    font-size: 2rem;\n    color: #7D7DB2;\n    transition: all 0.3s ease;\n  }\n  \n  .skill-card:hover .skill-icon {\n    background: rgba(125, 125, 178, 0.3);\n    transform: scale(1.1);\n  }\n  \n  .skill-name {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: white;\n    margin-bottom: 8px;\n  }\n  \n  .skill-description {\n    color: #94A3B8;\n    font-size: 0.9rem;\n  }\n  \n  .skill-bars {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n  \n  .skill-bar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  \n  .skill-label {\n    color: #CBD5E1;\n    font-size: 0.9rem;\n    min-width: 100px;\n  }\n  \n  .progress-container {\n    width: 120px;\n    height: 8px;\n    background: #334155;\n    border-radius: 4px;\n    overflow: hidden;\n    position: relative;\n  }\n  \n  .progress-bar {\n    height: 100%;\n    background: linear-gradient(90deg, #7D7DB2, #9333EA);\n    border-radius: 4px;\n    transition: width 1s ease-in-out;\n    position: relative;\n  }\n  \n  .progress-bar::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n    animation: shimmer 2s infinite;\n  }\n  \n  @keyframes shimmer {\n    0% { transform: translateX(-100%); }\n    100% { transform: translateX(100%); }\n  }\n  \n  \/* Progress widths *\/\n  .progress-80 { width: 80%; }\n  .progress-75 { width: 75%; }\n  .progress-85 { width: 85%; }\n  .progress-100 { width: 100%; }\n  .progress-90 { width: 90%; }\n  \n  .goals-section {\n    margin-top: 60px;\n  }\n  \n  .goals-title {\n    font-size: 2rem;\n    font-weight: bold;\n    color: white;\n    text-align: center;\n    margin-bottom: 40px;\n  }\n  \n  .goals-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 24px;\n  }\n  \n  .goal-card {\n    text-align: center;\n    padding: 30px 20px;\n    background: rgba(15, 23, 42, 0.5);\n    border-radius: 12px;\n    border: 1px solid rgba(125, 125, 178, 0.2);\n    transition: all 0.3s ease;\n  }\n  \n  .goal-card:hover {\n    border-color: rgba(125, 125, 178, 0.4);\n    transform: translateY(-3px);\n  }\n  \n  .goal-icon {\n    width: 48px;\n    height: 48px;\n    color: #7D7DB2;\n    font-size: 1.5rem;\n    margin: 0 auto 16px;\n  }\n  \n  .goal-name {\n    color: white;\n    font-weight: 600;\n    font-size: 1.1rem;\n    margin-bottom: 8px;\n  }\n  \n  .goal-description {\n    color: #94A3B8;\n    font-size: 0.9rem;\n    line-height: 1.4;\n  }\n  \n  \/* Responsive *\/\n  @media (max-width: 768px) {\n    .skills-section {\n      padding: 60px 15px;\n    }\n    \n    .skills-title {\n      font-size: 2.5rem;\n    }\n    \n    .skills-subtitle {\n      font-size: 1.1rem;\n    }\n    \n    .skills-grid {\n      grid-template-columns: 1fr;\n      gap: 20px;\n    }\n    \n    .skill-card {\n      padding: 25px 20px;\n    }\n    \n    .goals-grid {\n      grid-template-columns: 1fr;\n      gap: 20px;\n    }\n    \n    .goal-card {\n      padding: 25px 15px;\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .skills-title {\n      font-size: 2rem;\n    }\n    \n    .progress-container {\n      width: 100px;\n    }\n    \n    .skill-label {\n      min-width: 80px;\n      font-size: 0.8rem;\n    }\n  }\n<\/style>\n\n<!-- Skills Section HTML -->\n<section class=\"skills-section\" id=\"skills\">\n  <div class=\"skills-container\">\n    <!-- Header -->\n    <div class=\"skills-header\">\n      <h2 class=\"skills-title\">\n        Moje <span class=\"highlight\">Umiej\u0119tno\u015bci<\/span>\n      <\/h2>\n      <p class=\"skills-subtitle\">\n        Rozwijam swoje pasje w r\u00f3\u017cnych dziedzinach &#8211; od sportu po technologie\n      <\/p>\n    <\/div>\n    \n    <!-- Skills Grid -->\n    <div class=\"skills-grid\">\n      <!-- Sport Card -->\n      <div class=\"skill-card\">\n        <div class=\"skill-header\">\n          <div class=\"skill-icon\">\n            <i class=\"fas fa-trophy\"><\/i>\n          <\/div>\n          <h3 class=\"skill-name\">Pi\u0142ka No\u017cna<\/h3>\n          <p class=\"skill-description\">Aktywny trening i rozw\u00f3j umiej\u0119tno\u015bci<\/p>\n        <\/div>\n        \n        <div class=\"skill-bars\">\n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Technika<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-80\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Kondycja<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-75\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Praca zespo\u0142owa<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-85\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- Gaming Card -->\n      <div class=\"skill-card\">\n        <div class=\"skill-header\">\n          <div class=\"skill-icon\">\n            <i class=\"fas fa-gamepad\"><\/i>\n          <\/div>\n          <h3 class=\"skill-name\">Gaming<\/h3>\n          <p class=\"skill-description\">Minecraft i inne gry strategiczne<\/p>\n        <\/div>\n        \n        <div class=\"skill-bars\">\n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Minecraft<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-100\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Strategia<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-80\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Kreatywno\u015b\u0107<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-85\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- Education Card -->\n      <div class=\"skill-card\">\n        <div class=\"skill-header\">\n          <div class=\"skill-icon\">\n            <i class=\"fas fa-graduation-cap\"><\/i>\n          <\/div>\n          <h3 class=\"skill-name\">Edukacja<\/h3>\n          <p class=\"skill-description\">Szko\u0142a podstawowa i plany na przysz\u0142o\u015b\u0107<\/p>\n        <\/div>\n        \n        <div class=\"skill-bars\">\n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">Matematyka<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-80\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">J\u0119zyk polski<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-75\"><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"skill-bar\">\n            <span class=\"skill-label\">WF<\/span>\n            <div class=\"progress-container\">\n              <div class=\"progress-bar progress-100\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <!-- Goals Section -->\n    <div class=\"goals-section\">\n      <h3 class=\"goals-title\">Moje Cele<\/h3>\n      \n      <div class=\"goals-grid\">\n        <div class=\"goal-card\">\n          <div class=\"goal-icon\">\n            <i class=\"fas fa-bullseye\"><\/i>\n          <\/div>\n          <h4 class=\"goal-name\">Szko\u0142a Sportowa<\/h4>\n          <p class=\"goal-description\">Dostanie si\u0119 do renomowanej szko\u0142y sportowej<\/p>\n        <\/div>\n        \n        <div class=\"goal-card\">\n          <div class=\"goal-icon\">\n            <i class=\"fas fa-users\"><\/i>\n          <\/div>\n          <h4 class=\"goal-name\">Dru\u017cyna<\/h4>\n          <p class=\"goal-description\">Gra w profesjonalnej dru\u017cynie m\u0142odzie\u017cowej<\/p>\n        <\/div>\n        \n        <div class=\"goal-card\">\n          <div class=\"goal-icon\">\n            <i class=\"fas fa-bolt\"><\/i>\n          <\/div>\n          <h4 class=\"goal-name\">Rozw\u00f3j<\/h4>\n          <p class=\"goal-description\">Ci\u0105g\u0142y rozw\u00f3j umiej\u0119tno\u015bci sportowych<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- JavaScript for animations -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ Intersection Observer for progress bars animation\n  const progressBars = document.querySelectorAll('.progress-bar');\n  \n  const observerOptions = {\n    threshold: 0.5,\n    rootMargin: '0px 0px -100px 0px'\n  };\n  \n  const observer = new IntersectionObserver(function(entries) {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        const progressBar = entry.target;\n        const width = progressBar.classList.contains('progress-100') ? '100%' :\n                     progressBar.classList.contains('progress-90') ? '90%' :\n                     progressBar.classList.contains('progress-85') ? '85%' :\n                     progressBar.classList.contains('progress-80') ? '80%' :\n                     progressBar.classList.contains('progress-75') ? '75%' : '0%';\n        \n        \/\/ Reset width first\n        progressBar.style.width = '0%';\n        \n        \/\/ Animate to target width\n        setTimeout(() => {\n          progressBar.style.width = width;\n        }, 200);\n        \n        \/\/ Stop observing this element\n        observer.unobserve(progressBar);\n      }\n    });\n  }, observerOptions);\n  \n  \/\/ Start observing all progress bars\n  progressBars.forEach(bar => {\n    observer.observe(bar);\n  });\n  \n  \/\/ Card hover effects\n  const skillCards = document.querySelectorAll('.skill-card');\n  \n  skillCards.forEach(card => {\n    card.addEventListener('mouseenter', function() {\n      this.style.transform = 'translateY(-5px)';\n    });\n    \n    card.addEventListener('mouseleave', function() {\n      this.style.transform = 'translateY(0)';\n    });\n  });\n});\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c8393f0 e-con-full e-flex e-con e-parent\" data-id=\"c8393f0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e4568ce elementor-widget elementor-widget-text-editor\" data-id=\"e4568ce\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<!-- Contact Section CSS -->\n<style>\n  .contact-section {\n    padding: 80px 20px;\n    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);\n    position: relative;\n  }\n  \n  .contact-container {\n    max-width: 1000px;\n    margin: 0 auto;\n  }\n  \n  .contact-header {\n    text-align: center;\n    margin-bottom: 60px;\n  }\n  \n  .contact-title {\n    font-size: 3rem;\n    font-weight: bold;\n    color: white;\n    margin-bottom: 16px;\n  }\n  \n  .contact-title .highlight {\n    color: #7D7DB2;\n  }\n  \n  .contact-subtitle {\n    font-size: 1.25rem;\n    color: #CBD5E1;\n    max-width: 600px;\n    margin: 0 auto;\n    line-height: 1.6;\n  }\n  \n  .contact-content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 60px;\n    align-items: start;\n  }\n  \n  .contact-info {\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n  }\n  \n  .contact-item {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px;\n    background: rgba(15, 23, 42, 0.5);\n    border-radius: 12px;\n    border: 1px solid rgba(125, 125, 178, 0.2);\n    transition: all 0.3s ease;\n  }\n  \n  .contact-item:hover {\n    border-color: rgba(125, 125, 178, 0.4);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(125, 125, 178, 0.15);\n  }\n  \n  .contact-icon {\n    width: 48px;\n    height: 48px;\n    background: rgba(125, 125, 178, 0.2);\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.2rem;\n    color: #7D7DB2;\n    flex-shrink: 0;\n  }\n  \n  .contact-details h4 {\n    color: white;\n    font-weight: 600;\n    font-size: 1.1rem;\n    margin-bottom: 4px;\n  }\n  \n  .contact-details p {\n    color: #94A3B8;\n    font-size: 0.95rem;\n    margin: 0;\n  }\n  \n  .social-section {\n    margin-top: 30px;\n  }\n  \n  .social-title {\n    color: white;\n    font-weight: 600;\n    font-size: 1.1rem;\n    margin-bottom: 16px;\n  }\n  \n  .social-links {\n    display: flex;\n    gap: 12px;\n  }\n  \n  .social-btn {\n    width: 48px;\n    height: 48px;\n    border: 2px solid #7D7DB2;\n    background: transparent;\n    color: #7D7DB2;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-decoration: none;\n    font-size: 1.2rem;\n    transition: all 0.3s ease;\n  }\n  \n  .social-btn:hover {\n    background: #7D7DB2;\n    color: #1E293B;\n    transform: translateY(-2px);\n  }\n  \n  .contact-form {\n    background: rgba(15, 23, 42, 0.8);\n    border: 1px solid rgba(125, 125, 178, 0.3);\n    border-radius: 12px;\n    padding: 30px;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .contact-form::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 3px;\n    background: linear-gradient(90deg, #7D7DB2, #9333EA);\n  }\n  \n  .form-header {\n    margin-bottom: 25px;\n  }\n  \n  .form-title {\n    color: white;\n    font-size: 1.5rem;\n    font-weight: 600;\n    margin-bottom: 8px;\n  }\n  \n  .form-description {\n    color: #94A3B8;\n    font-size: 0.95rem;\n  }\n  \n  .form-group {\n    margin-bottom: 20px;\n  }\n  \n  .form-label {\n    display: block;\n    color: #CBD5E1;\n    font-size: 0.9rem;\n    font-weight: 500;\n    margin-bottom: 8px;\n  }\n  \n  .form-input,\n  .form-textarea {\n    width: 100%;\n    padding: 12px 16px;\n    background: #1E293B;\n    border: 1px solid rgba(125, 125, 178, 0.3);\n    border-radius: 8px;\n    color: white;\n    font-size: 0.95rem;\n    transition: all 0.3s ease;\n    box-sizing: border-box;\n  }\n  \n  .form-input:focus,\n  .form-textarea:focus {\n    outline: none;\n    border-color: #7D7DB2;\n    box-shadow: 0 0 0 3px rgba(125, 125, 178, 0.1);\n  }\n  \n  .form-input::placeholder,\n  .form-textarea::placeholder {\n    color: #64748B;\n  }\n  \n  .form-textarea {\n    resize: vertical;\n    min-height: 120px;\n  }\n  \n  .submit-btn {\n    width: 100%;\n    padding: 14px 24px;\n    background: #7D7DB2;\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 1rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  .submit-btn:hover {\n    background: #6B6B9D;\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(125, 125, 178, 0.3);\n  }\n  \n  .submit-btn:active {\n    transform: translateY(0);\n  }\n  \n  .submit-btn:disabled {\n    background: #4B5563;\n    cursor: not-allowed;\n    transform: none;\n  }\n  \n  .form-status {\n    margin-top: 15px;\n    padding: 12px;\n    border-radius: 8px;\n    font-size: 0.9rem;\n    text-align: center;\n    display: none;\n  }\n  \n  .form-status.success {\n    background: rgba(34, 197, 94, 0.1);\n    border: 1px solid rgba(34, 197, 94, 0.3);\n    color: #22C55E;\n  }\n  \n  .form-status.error {\n    background: rgba(239, 68, 68, 0.1);\n    border: 1px solid rgba(239, 68, 68, 0.3);\n    color: #EF4444;\n  }\n  \n  .footer {\n    margin-top: 60px;\n    padding-top: 30px;\n    border-top: 1px solid rgba(125, 125, 178, 0.2);\n    text-align: center;\n  }\n  \n  .footer-text {\n    color: #94A3B8;\n    font-size: 0.9rem;\n  }\n  \n  \/* Loading animation *\/\n  .loading {\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n    border: 2px solid rgba(255,255,255,0.3);\n    border-radius: 50%;\n    border-top-color: white;\n    animation: spin 1s ease-in-out infinite;\n  }\n  \n  @keyframes spin {\n    to { transform: rotate(360deg); }\n  }\n  \n  \/* Responsive *\/\n  @media (max-width: 768px) {\n    .contact-section {\n      padding: 60px 15px;\n    }\n    \n    .contact-title {\n      font-size: 2.5rem;\n    }\n    \n    .contact-subtitle {\n      font-size: 1.1rem;\n    }\n    \n    .contact-content {\n      grid-template-columns: 1fr;\n      gap: 40px;\n    }\n    \n    .contact-form {\n      padding: 25px 20px;\n    }\n    \n    .social-links {\n      justify-content: center;\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .contact-title {\n      font-size: 2rem;\n    }\n    \n    .contact-item {\n      padding: 16px;\n    }\n    \n    .contact-icon {\n      width: 40px;\n      height: 40px;\n      font-size: 1rem;\n    }\n    \n    .social-btn {\n      width: 44px;\n      height: 44px;\n      font-size: 1.1rem;\n    }\n  }\n<\/style>\n\n<!-- Contact Section HTML -->\n<section class=\"contact-section\" id=\"contact\">\n  <div class=\"contact-container\">\n    <!-- Header -->\n    <div class=\"contact-header\">\n      <h2 class=\"contact-title\">\n        <span class=\"highlight\">Skontaktuj<\/span> si\u0119 ze mn\u0105\n      <\/h2>\n      <p class=\"contact-subtitle\">\n        Chcesz porozmawia\u0107 o sporcie, grach lub masz pytania? Napisz do mnie!\n      <\/p>\n    <\/div>\n    \n    <!-- Content -->\n    <div class=\"contact-content\">\n      <!-- Contact Info -->\n      <div class=\"contact-info\">\n        <div class=\"contact-item\">\n          <div class=\"contact-icon\">\n            <i class=\"fas fa-envelope\"><\/i>\n          <\/div>\n          <div class=\"contact-details\">\n            <h4>Email<\/h4>\n            <p>blazej.rusin@example.com<\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"contact-item\">\n          <div class=\"contact-icon\">\n            <i class=\"fas fa-phone\"><\/i>\n          <\/div>\n          <div class=\"contact-details\">\n            <h4>Telefon<\/h4>\n            <p>+48 578 689 898<\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"contact-item\">\n          <div class=\"contact-icon\">\n            <i class=\"fas fa-map-marker-alt\"><\/i>\n          <\/div>\n          <div class=\"contact-details\">\n            <h4>Lokalizacja<\/h4>\n            <p>Polska<\/p>\n          <\/div>\n        <\/div>\n        \n        <!-- Social Links -->\n        <div class=\"social-section\">\n          <h4 class=\"social-title\">Znajd\u017a mnie online<\/h4>\n          <div class=\"social-links\">\n            <a href=\"https:\/\/www.instagram.com\/_.rus1n_\/\" class=\"social-btn\" title=\"Instagram\">\n              <i class=\"fab fa-instagram\"><\/i>\n            <\/a>\n            <a href=\"#\" class=\"social-btn\" title=\"Discord\">\n              <i class=\"fab fa-discord\"><\/i>\n            <\/a>\n            <a href=\"https:\/\/steamcommunity.com\/profiles\/76561199055637009\/\" class=\"social-btn\" title=\"Steam\">\n              <i class=\"fab fa-steam\"><\/i>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <!-- Contact Form -->\n      <div class=\"contact-form\">\n        <div class=\"form-header\">\n          <h3 class=\"form-title\">Wy\u015blij wiadomo\u015b\u0107<\/h3>\n          <p class=\"form-description\">\n            Wype\u0142nij formularz, a odezw\u0119 si\u0119 jak najszybciej\n          <\/p>\n        <\/div>\n        \n        <form id=\"contactForm\" action=\"https:\/\/formspree.io\/f\/xqaqrplb\" method=\"POST\">\n          <div class=\"form-group\">\n            <label for=\"name\" class=\"form-label\">Imi\u0119 *<\/label>\n            <input \n              type=\"text\" \n              id=\"name\" \n              name=\"name\" \n              class=\"form-input\" \n              placeholder=\"Twoje imi\u0119\"\n              required\n            >\n          <\/div>\n          \n          <div class=\"form-group\">\n            <label for=\"email\" class=\"form-label\">Email *<\/label>\n            <input \n              type=\"email\" \n              id=\"email\" \n              name=\"email\" \n              class=\"form-input\" \n              placeholder=\"twoj@email.com\"\n              required\n            >\n          <\/div>\n          \n          <div class=\"form-group\">\n            <label for=\"subject\" class=\"form-label\">Temat<\/label>\n            <input \n              type=\"text\" \n              id=\"subject\" \n              name=\"subject\" \n              class=\"form-input\" \n              placeholder=\"Temat wiadomo\u015bci\"\n            >\n          <\/div>\n          \n          <div class=\"form-group\">\n            <label for=\"message\" class=\"form-label\">Wiadomo\u015b\u0107 *<\/label>\n            <textarea \n              id=\"message\" \n              name=\"message\" \n              class=\"form-textarea\" \n              placeholder=\"Twoja wiadomo\u015b\u0107...\"\n              required\n            ><\/textarea>\n          <\/div>\n          \n          <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\n            <span id=\"btnText\">Wy\u015blij wiadomo\u015b\u0107<\/span>\n            <span id=\"btnLoading\" class=\"loading\" style=\"display: none;\"><\/span>\n          <\/button>\n          \n          <div id=\"formStatus\" class=\"form-status\"><\/div>\n        <\/form>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- JavaScript for form handling -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const form = document.getElementById('contactForm');\n  const submitBtn = document.getElementById('submitBtn');\n  const btnText = document.getElementById('btnText');\n  const btnLoading = document.getElementById('btnLoading');\n  const formStatus = document.getElementById('formStatus');\n  \n  form.addEventListener('submit', async function(e) {\n    e.preventDefault();\n    \n    \/\/ Show loading state\n    submitBtn.disabled = true;\n    btnText.style.display = 'none';\n    btnLoading.style.display = 'inline-block';\n    formStatus.style.display = 'none';\n    \n    try {\n      const formData = new FormData(form);\n      \n      const response = await fetch(form.action, {\n        method: 'POST',\n        body: formData,\n        headers: {\n          'Accept': 'application\/json'\n        }\n      });\n      \n      if (response.ok) {\n        \/\/ Success\n        showStatus('success', 'Dzi\u0119kuj\u0119! Wiadomo\u015b\u0107 zosta\u0142a wys\u0142ana pomy\u015blnie. Odezw\u0119 si\u0119 wkr\u00f3tce!');\n        form.reset();\n      } else {\n        \/\/ Error\n        const data = await response.json();\n        if (data.errors) {\n          showStatus('error', 'Wyst\u0105pi\u0142 b\u0142\u0105d podczas wysy\u0142ania. Sprawd\u017a poprawno\u015b\u0107 danych.');\n        } else {\n          showStatus('error', 'Wyst\u0105pi\u0142 b\u0142\u0105d podczas wysy\u0142ania wiadomo\u015bci. Spr\u00f3buj ponownie.');\n        }\n      }\n    } catch (error) {\n      showStatus('error', 'Wyst\u0105pi\u0142 b\u0142\u0105d po\u0142\u0105czenia. Sprawd\u017a po\u0142\u0105czenie internetowe i spr\u00f3buj ponownie.');\n    }\n    \n    \/\/ Reset button state\n    submitBtn.disabled = false;\n    btnText.style.display = 'inline';\n    btnLoading.style.display = 'none';\n  });\n  \n  function showStatus(type, message) {\n    formStatus.className = `form-status ${type}`;\n    formStatus.textContent = message;\n    formStatus.style.display = 'block';\n    \n    \/\/ Auto hide after 5 seconds\n    setTimeout(() => {\n      formStatus.style.display = 'none';\n    }, 5000);\n  }\n  \n  \/\/ Form validation\n  const inputs = form.querySelectorAll('input[required], textarea[required]');\n  \n  inputs.forEach(input => {\n    input.addEventListener('blur', function() {\n      validateField(this);\n    });\n    \n    input.addEventListener('input', function() {\n      if (this.classList.contains('error')) {\n        validateField(this);\n      }\n    });\n  });\n  \n  function validateField(field) {\n    const isValid = field.checkValidity();\n    \n    if (!isValid) {\n      field.style.borderColor = '#EF4444';\n      field.classList.add('error');\n    } else {\n      field.style.borderColor = 'rgba(125, 125, 178, 0.3)';\n      field.classList.remove('error');\n    }\n    \n    return isValid;\n  }\n  \n  \/\/ Contact item hover effects\n  const contactItems = document.querySelectorAll('.contact-item');\n  \n  contactItems.forEach(item => {\n    item.addEventListener('mouseenter', function() {\n      this.style.transform = 'translateY(-2px)';\n    });\n    \n    item.addEventListener('mouseleave', function() {\n      this.style.transform = 'translateY(0)';\n    });\n  });\n});\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\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>Cze\u015b\u0107! Jestem B\u0142a\u017cej Ucze\u0144 szko\u0142y podstawowej z pasj\u0105 do sportu i gier. Trenuje pi\u0142k\u0119 no\u017cn\u0105 i marzy o szkole sportowej. [&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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","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-30","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=\/wp\/v2\/pages\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30"}],"version-history":[{"count":33,"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions"}],"predecessor-version":[{"id":81,"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=\/wp\/v2\/pages\/30\/revisions\/81"}],"wp:attachment":[{"href":"https:\/\/blazejrusin.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}