From fcc7a9157c2c63e86bb6e93558a3a228ff8faa3f Mon Sep 17 00:00:00 2001 From: Filip Wandzio Date: Mon, 8 Sep 2025 19:20:16 +0200 Subject: Rewrite whole project in svelte for better accessibility Signed-off-by: Filip Wandzio --- src/App.svelte | 7 ++ src/app.css | 188 +++++++++++++++++++++++++++++++++++++++ src/lib/components/Footer.svelte | 3 + src/lib/components/Header.svelte | 38 ++++++++ src/lib/components/Main.svelte | 57 ++++++++++++ src/main.ts | 9 ++ src/setupTests.ts | 1 + src/vite-env.d.ts | 2 + 8 files changed, 305 insertions(+) create mode 100644 src/App.svelte create mode 100644 src/app.css create mode 100644 src/lib/components/Footer.svelte create mode 100644 src/lib/components/Header.svelte create mode 100644 src/lib/components/Main.svelte create mode 100644 src/main.ts create mode 100644 src/setupTests.ts create mode 100644 src/vite-env.d.ts (limited to 'src') diff --git a/src/App.svelte b/src/App.svelte new file mode 100644 index 0000000..6df64ea --- /dev/null +++ b/src/App.svelte @@ -0,0 +1,7 @@ + + +
+
diff --git a/src/app.css b/src/app.css new file mode 100644 index 0000000..829967c --- /dev/null +++ b/src/app.css @@ -0,0 +1,188 @@ +* { + box-sizing: border-box; +} + +:root { + --bg-color: #fcfdfe; + --text-color: #000c18; + --accent-color: #22aa44; + --accent-hover: #9966b8; +} + +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #000c18; + --text-color: #b7b8b9; + } +} + +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; + line-height: 1.8; + background: var(--bg-color); + color: var(--text-color); + display: flex; + flex-direction: column; + min-height: 100vh; + overflow-x: hidden; +} + +h1 { + font-size: 1.75rem; +} + +h2 { + margin: 0 0 0.75em; + font-weight: 700; + line-height: 1.3; + font-size: 2rem; +} + +@media (max-width: 768px) { + h1 { + font-size: 1.75rem; + } + + h2 { + font-size: 1.75rem; + } +} + +header, +footer { + padding: 0.5em; + text-align: center; + background: var(--bg-color); +} + +header h1 { + font-size: 1.75rem; + padding-left: 1rem; +} + +main { + flex-grow: 1; + max-width: 900px; + margin: 0 auto; + padding: 2em; +} + +@media (max-width: 768px) { + main { + padding: 1.5em; + } +} + +footer { + text-align: center; + font-size: 1.05rem; + color: var(--text-color); +} + +section { + margin-bottom: 3em; + padding: 0 2%; +} + +.header-top { + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; +} + +@media (max-width: 768px) { + .header-top { + justify-content: space-between; + text-align: left; + } +} + +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: var(--text-color); +} + +@media (max-width: 768px) { + .menu-toggle { + display: block; + } + + nav ul { + flex-direction: column; + align-items: center; + gap: 1.25rem; + display: none; + } + + nav ul.open { + display: flex; + } + + header { + position: sticky; + top: 0; + z-index: 1000; + background: var(--bg-color); + } +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} + +a { + color: var(--accent-color); + font-weight: 700; + text-decoration: underline; + text-decoration-color: transparent; + text-underline-offset: 4px; + text-decoration-thickness: 2px; + transition: color 0.3s, text-decoration-color 0.3s; +} + +a:hover, +a:focus { + color: var(--accent-hover); + text-decoration-color: currentColor; +} + +a:focus-visible { + outline: 3px solid var(--accent-color); + outline-offset: 4px; + border-radius: 3px; +} + +.highlight { + background: var(--accent-hover); + color: #fcfdfe; +} diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte new file mode 100644 index 0000000..a39dc8c --- /dev/null +++ b/src/lib/components/Footer.svelte @@ -0,0 +1,3 @@ + diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte new file mode 100644 index 0000000..eeeb78d --- /dev/null +++ b/src/lib/components/Header.svelte @@ -0,0 +1,38 @@ + + +
+
+

Filip Wandzio

+ +
+ + +
diff --git a/src/lib/components/Main.svelte b/src/lib/components/Main.svelte new file mode 100644 index 0000000..5c9ade9 --- /dev/null +++ b/src/lib/components/Main.svelte @@ -0,0 +1,57 @@ +
+
+

💡 About

+

+ 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. +

+

+ Outside of programming, I spend time with music — listening, + exploring, and creating my own pieces. +

+
+ +
+

👨‍💻 Projects

+

+ Side projects are hosted on my git repository. They are experiments, prototypes, and actual working solutions + used on my personal machine. Here you can also find materials used + on my prelections. +

+
+ +
+

🔬 Research

+

+ Currently I am an undergraduate / master’s student in Computer + Science with a interest in + Cybersecurity, Operating Systems and Network Engineering. 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. +

+

+ 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. +

+
+ +
+

✉️ Contact

+

+ If you’d like to get in touch, send me an email: contact@philw.dev. +

+
+
diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..e60cebf --- /dev/null +++ b/src/main.ts @@ -0,0 +1,9 @@ +import { mount } from 'svelte' +import './app.css' +import App from './App.svelte' + +const app = mount(App, { + target: document.getElementById('app')!, +}) + +export default app diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 0000000..c44951a --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom' diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..4078e74 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// -- cgit v1.2.3