Make website more accessible, fix color schemes, update research information, optimize css

Signed-off-by: Filip Wandzio <contact@philw.dev>

4 files changed, 217 insertions, 205 deletions

diff --git a/.gitignore b/.gitignore
index cdc376c..fd6892b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .svelte-kit/
+deploy.sh
 package
 .env
 .env.production
diff --git a/.rsyncignore b/.rsyncignore
new file mode 100644
index 0000000..2479e96
--- /dev/null
+++ b/.rsyncignore
@@ -0,0 +1,9 @@
+
+.git/
+.gitignore
+README.md
+node_modules/
+*.log
+.env
+deploy.sh
+.rsyncignore
diff --git a/index.css b/index.css
index 256e2fc..72f84cf 100644
--- a/index.css
+++ b/index.css
@@ -1,138 +1,129 @@
- * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      background: #fcfdfe; /* base07 - light background */
-      color: #000c18;      /* base00 - dark text */
-      line-height: 1.75;
-      font-size: 1rem;
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-      overflow-x: hidden;
-      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    }
-
-    header, footer {
-      padding: 2em;
-      text-align: center;
-    }
-
-    main {
-      flex-grow: 1;
-      padding: 2em;
-      width: 100%;
-      box-sizing: border-box;
-      max-width: 900px;
-      margin: 0 auto;
-    }
-
-    footer {
-      border-top: 1px solid #000c18; /* base00 */
-      color: #000c18;                /* base00 */
-    }
-
-    h1, h2 {
-      font-weight: normal;
-      margin: 0;
-      font-size: 2.25rem;
-      color: inherit; /* inherit from body */
-    }
-
-    section {
-      margin-bottom: 3em;
-      color: inherit; /* inherit from body */
-      width: 100%;
-      padding: 0 2%;
-    }
-
-    a {
-      color: #22aa44; /* base0B - green */
-      text-decoration: underline;
-      font-weight: 700;
-      transition: color 0.3s ease, text-decoration-color 0.3s ease;
-      text-underline-offset: 3px;
-      text-decoration-thickness: 2px;
-      text-decoration-color: transparent;
-    }
-
-    a:hover,
-    a:focus {
-      color: #9966b8; /* base08 - purple */
-      text-decoration-color: currentColor;
-      outline-offset: 3px;
-      outline: 2px solid #22aa44;
-      outline-radius: 3px;
-    }
-
-    a:focus-visible {
-      outline-offset: 4px;
-      outline: 3px solid #22aa44; /* base0B */
-      outline-radius: 3px;
-    }
-
-    .links a {
-      color: #22aa44; /* base0B */
-    }
-
-    .links a:hover {
-      color: #e6550d; /* base09 */
-    }
-
-    @media (max-width: 768px) {
-      h1 {
-        font-size: 1.8rem;
-      }
-
-      h2 {
-        font-size: 1.6rem;
-      }
-
-      footer {
-        font-size: 0.9em;
-      }
-
-      .privacy {
-        font-size: 0.8em;
-      }
-
-      main {
-        padding: 1.5em;
-      }
-    }
-
-    @media (prefers-color-scheme: dark) {
-      body {
-        background: #000c18; /* base00 */
-        color: #b7b8b9;      /* base05 */
-      }
-
-      footer {
-        border-color: #fcfdfe; /* base07 */
-        color: #fcfdfe;        /* base07 */
-      }
-
-      a {
-        color: #22aa44; /* keep green links in dark mode */
-        text-decoration-color: transparent;
-      }
-
-      a:hover,
-      a:focus {
-        color: #9966b8; /* base08 */
-        text-decoration-color: currentColor;
-      }
-    }
-
-    .high-contrast {
-      background-color: #fcfdfe; /* base07 */
-      color: #000c18;            /* base00 */
-    }
-
-    .highlight {
-      background-color: #9966b8; /* base08 */
-      color: #fcfdfe;            /* base07 */
-    }
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 1.125rem;   /* 18px base */
+  line-height: 1.8;      
+  background: #fcfdfe;
+  color: #000c18;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+header, footer { padding: 2em; }
+
+main {
+  flex-grow: 1;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 2em;
+}
+
+footer {
+  border-top: 1px solid currentColor;
+  text-align: center;
+  font-size: 1.05rem; 
+}
+
+h2 {
+  margin: 0 0 0.75em;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+h1 { font-size: 2.5rem; } 
+h2 { font-size: 2rem; }  
+
+header h1 { font-size: 2rem; }
+section { margin-bottom: 3em; padding: 0 2%; }
+a {
+  color: #22aa44;
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 2px;
+  transition: color .3s, text-decoration-color .3s;
+}
+a:hover,
+a:focus {
+  color: #9966b8;
+  text-decoration-color: currentColor;
+}
+a:focus-visible {
+  outline: 3px solid #22aa44;
+  outline-offset: 4px;
+  border-radius: 3px;
+}
+header { text-align: center; }
+
+.header-top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+nav a { 
+  font-weight: 600; 
+  font-size: 1.125rem; 
+}
+.menu-toggle {
+  display: none;
+  background: none;
+  border: 0;
+  font-size: 1.75rem;
+  cursor: pointer;
+  color: inherit;
+}
+.sr-only {
+  position: absolute;
+  width: 1px; height: 1px;
+  margin: -1px; padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+}
+@media (max-width: 768px) {
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.75rem; }
+  main { padding: 1.5em; }
+
+  .header-top {
+    justify-content: space-between;
+    text-align: left;
+  }
+  nav ul {
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+    display: none;
+  }
+  nav ul.open { display: flex; }
+  .menu-toggle { display: block; }
+  header {
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    background: inherit;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  body { background: #000c18; color: #b7b8b9; }
+  footer { border-color: #fcfdfe; color: #fcfdfe; }
+  a { color: #22aa44; }
+  a:hover, a:focus { color: #9966b8; }
+}
+.highlight { background: #9966b8; color: #fcfdfe; }
diff --git a/index.html b/index.html
index 537c04b..5204048 100644
--- a/index.html
+++ b/index.html
@@ -1,91 +1,102 @@
 <!doctype html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Filip Wandzio</title>
-  <meta name="description" content="Filip Wandzio — Software Engineer specializing in web technologies, mobile apps, and software design. Discover projects, research, presentations, and blog posts." />
-  <meta name="keywords" content="Software Engineer, Web Technologies, Mobile Apps, Presentations, Blog, Filip Wandzio" />
-  <link rel="icon" type="image/x-icon" href="./public/favicon.ico" />
+  <title>Filip Wandzio – Software Engineer | Web & Mobile Development</title>
+  <meta name="description" content="Filip Wandzio — software engineer building web apps, mobile tools, and software with a focus on clarity and usefulness. Explore projects, research, and writing." />
+  <meta name="keywords" content="software engineer, web technologies, mobile apps, projects, research, blog, filip wandzio" />
+  <meta name="robots" content="index, follow" />
+  <link rel="icon" type="image/png" href="./public/favicon.ico" />
+  <link rel="apple-touch-icon" href="./public/favicon.ico" />
   <link rel="stylesheet" href="./index.css">
   <link rel="canonical" href="https://philw.dev" />
-
   <meta property="og:title" content="Filip Wandzio - Software Engineer" />
-  <meta property="og:description" content="Software engineer specializing in web technologies, mobile apps, and software design." />
+  <meta property="og:description" content="Software engineer building web apps, mobile tools, and software with a focus on clarity and usefulness." />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://philw.dev" />
   <meta property="og:image" content="https://philw.dev/preview.webp" />
-
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Filip Wandzio - Software Engineer" />
-  <meta name="twitter:description" content="Software engineer specializing in web technologies, mobile apps, and software design." />
-  <meta name="twitter:image" content="https://philw.dev/public/preview.webp" />
-
-  <meta name="theme-color" content="#22aa44" />
-
-  <!-- <script type="application/ld+json"> -->
-  <!-- { -->
-  <!--   "@context": "https://schema.org", -->
-  <!--   "@type": "Event", -->
-  <!--   "name": "Enter The Matrix", -->
-  <!--   "startDate": "2025-11-11", -->
-  <!--   "location": { -->
-  <!--     "@type": "Place", -->
-  <!--     "name": "MacMeeting" -->
-  <!--   }, -->
-  <!--   "organizer": { -->
-  <!--     "@type": "Person", -->
-  <!--     "name": "Filip Wandzio" -->
-  <!--   } -->
-  <!-- } -->
-  <!-- </script> -->
+  <meta property="og:locale" content="en_US" />
+  <meta name="theme-color" content="#000c18" />
+  <script type="application/ld+json">
+  {
+    "@context": "https://schema.org",
+    "@type": "Person",
+    "name": "Filip Wandzio",
+    "url": "https://philw.dev",
+    "jobTitle": "Software Engineer",
+  }
+  </script>
 </head>
 <body>
-  <header aria-label="Website header">
-    <h1>Filip Wandzio</h1>
+  <header>
+    <div class="header-top">
+      <h1>Filip Wandzio</h1>
+      <button class="menu-toggle" aria-expanded="false" aria-controls="main-nav">
+        ☰ <span class="sr-only">Menu</span>
+      </button>
+    </div>
+    <nav id="main-nav" aria-label="Main navigation">
+      <ul>
+        <li><a href="#about">About</a></li>
+        <li><a href="#projects">Projects</a></li>
+        <li><a href="#research">Research</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
   </header>
+
   <main>
-    <section id="about" aria-labelledby="about">
-      <h2>About Me</h2>
-      <p>Software engineer focused on practical tools and solving real-world problems with minimal overhead. Currently working with web technologies, mobile applications, and software design.</p>
-      <p>In my free time, I enjoy music — both listening and producing my own pieces.</p>
+    <section id="about" aria-labelledby="about-heading">
+      <h2 id="about-heading">💡 About</h2>
+      <p>I’m a software engineer who makes tools that are simple, practical, and useful. Right now I mostly work with web applications, mobile development, and general software design.</p>
+      <p>Outside of programming, I spend time with music — listening, exploring, and creating my own pieces.</p>
     </section>
 
-    <section id="projects" aria-labelledby="projects">
-      <h2>Projects</h2>
-      <p>Personal projects are available <a href="https://git.philw.dev" target="_blank" rel="noopener noreferrer" aria-label="Visit Filip Wandzio's Git repository">here</a>.</p>
+    <section id="projects" aria-labelledby="projects-heading">
+      <h2 id="projects-heading">👨‍💻 Projects</h2>
+      <p>Side projects are hosted on my <a href="https://www.git.philw.dev" target="_blank" rel="noopener noreferrer" aria-label="visit filip wandzio's git repository">git repository</a>. They are experiments, prototypes, and actual working solutions used on my personal machine. Here you can also find materials used on my prelections.</p>
     </section>
 
-    <!-- <section id="presentations" aria-labelledby="presentations"> -->
-    <!--   <h2>Upcoming Presentations</h2> -->
-    <!--   <ul> -->
-    <!--     <li><strong>Enter The Matrix</strong> — <em>MacMeeting</em> — 11.11.2025</li> -->
-    <!--   </ul> -->
-    <!-- </section> -->
+    <section id="research" aria-labelledby="research-heading">
+      <h2 id="research-heading">🔬 Research</h2>
+  <p>
+    Currently I am an undergraduate / master’s student in Computer Science with a interest in 
+    <strong>Cybersecurity, Operating Systems and Network Engineering</strong>. 
+    My academic work has focused on learning core concepts, exploring how technology can be made 
+    more accessible, and experimenting with practical projects that bridge theory and application.
+  </p>
+  <p>
+    I am not yet a professional researcher, but I enjoy reviewing academic papers, 
+    and building prototypes. My long-term goal is to pursue further graduate studies where I can deepen my 
+    expertise.
+  </p>
+  </section>
 
-    <section id="research" aria-labelledby="research">
-      <h2>Research</h2>
-      <ul>
-        <li><a href="#" aria-label="Bachelor's thesis details">Bachelor's thesis</a></li>
-        <li><a href="#" aria-label="Master's thesis details">Master's thesis</a> — work in progress</li>
-      </ul>
+    <section id="contact" aria-labelledby="contact-heading">
+      <h2 id="contact-heading">✉️ Contact</h2>
+      <p>If you’d like to get in touch, send me an email: <a href="mailto:contact@philw.dev" aria-label="email filip wandzio">contact@philw.dev</a>.</p>
     </section>
+  </main>
+  <script>
+    
+const toggleButton = document.querySelector('.menu-toggle');
+const navMenu = document.querySelector('#main-nav ul');
 
-    <!-- <section id="blog" aria-labelledby="blog"> -->
-    <!--   <h2>Blog</h2> -->
-    <!--   <ul> -->
-    <!--     <li><a href="#" aria-label="My approach to web technologies article">Web Technologies</a> — work in progress</li> -->
-    <!--     <li><a href="#" aria-label="My experience with music production article">Music production and GNU/Linux</a> — work in progress</li> -->
-    <!--   </ul> -->
-    <!-- </section> -->
+toggleButton.addEventListener('click', () => {
+  const expanded = toggleButton.getAttribute('aria-expanded') === 'true';
+  toggleButton.setAttribute('aria-expanded', String(!expanded));
+  navMenu.classList.toggle('open');
+});
 
-    <section id="contact" aria-labelledby="contact">
-      <h2>Contact</h2>
-      <p>Reach out via <a href="mailto:contact@philw.dev" aria-label="Email Filip Wandzio">contact@philw.dev</a>.</p>
-    </section>
-  </main>
-  <footer aria-label="Footer with privacy statement">
-    <p class="privacy">This website does not collect any data or track visitors.</p>
-  </footer>
+document.querySelectorAll('#main-nav a').forEach(link => {
+  link.addEventListener('click', () => {
+    if (navMenu.classList.contains('open')) {
+      navMenu.classList.remove('open');
+      toggleButton.setAttribute('aria-expanded', 'false');
+    }
+  });
+});
+  </script>
 </body>
 </html>