aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--src/App.svelte7
-rw-r--r--src/app.css188
-rw-r--r--src/lib/components/Footer.svelte3
-rw-r--r--src/lib/components/Header.svelte38
-rw-r--r--src/lib/components/Main.svelte57
-rw-r--r--src/main.ts9
-rw-r--r--src/setupTests.ts1
-rw-r--r--src/vite-env.d.ts2
8 files changed, 305 insertions, 0 deletions
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 @@
1<script lang="ts">
2 import Main from "./lib/components/Main.svelte";
3 import Header from "./lib/components/Header.svelte";
4</script>
5
6<Header />
7<Main />
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 @@
1* {
2 box-sizing: border-box;
3}
4
5:root {
6 --bg-color: #fcfdfe;
7 --text-color: #000c18;
8 --accent-color: #22aa44;
9 --accent-hover: #9966b8;
10}
11
12@media (prefers-color-scheme: dark) {
13 :root {
14 --bg-color: #000c18;
15 --text-color: #b7b8b9;
16 }
17}
18
19body {
20 margin: 0;
21 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
22 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
23 font-size: 1.125rem;
24 line-height: 1.8;
25 background: var(--bg-color);
26 color: var(--text-color);
27 display: flex;
28 flex-direction: column;
29 min-height: 100vh;
30 overflow-x: hidden;
31}
32
33h1 {
34 font-size: 1.75rem;
35}
36
37h2 {
38 margin: 0 0 0.75em;
39 font-weight: 700;
40 line-height: 1.3;
41 font-size: 2rem;
42}
43
44@media (max-width: 768px) {
45 h1 {
46 font-size: 1.75rem;
47 }
48
49 h2 {
50 font-size: 1.75rem;
51 }
52}
53
54header,
55footer {
56 padding: 0.5em;
57 text-align: center;
58 background: var(--bg-color);
59}
60
61header h1 {
62 font-size: 1.75rem;
63 padding-left: 1rem;
64}
65
66main {
67 flex-grow: 1;
68 max-width: 900px;
69 margin: 0 auto;
70 padding: 2em;
71}
72
73@media (max-width: 768px) {
74 main {
75 padding: 1.5em;
76 }
77}
78
79footer {
80 text-align: center;
81 font-size: 1.05rem;
82 color: var(--text-color);
83}
84
85section {
86 margin-bottom: 3em;
87 padding: 0 2%;
88}
89
90.header-top {
91 display: flex;
92 justify-content: center;
93 align-items: center;
94 gap: 2rem;
95}
96
97@media (max-width: 768px) {
98 .header-top {
99 justify-content: space-between;
100 text-align: left;
101 }
102}
103
104nav ul {
105 list-style: none;
106 margin: 0;
107 padding: 0;
108 display: flex;
109 gap: 2rem;
110 justify-content: center;
111 flex-wrap: wrap;
112}
113
114nav a {
115 font-weight: 600;
116 font-size: 1.125rem;
117}
118
119.menu-toggle {
120 display: none;
121 background: none;
122 border: 0;
123 font-size: 1.75rem;
124 cursor: pointer;
125 color: var(--text-color);
126}
127
128@media (max-width: 768px) {
129 .menu-toggle {
130 display: block;
131 }
132
133 nav ul {
134 flex-direction: column;
135 align-items: center;
136 gap: 1.25rem;
137 display: none;
138 }
139
140 nav ul.open {
141 display: flex;
142 }
143
144 header {
145 position: sticky;
146 top: 0;
147 z-index: 1000;
148 background: var(--bg-color);
149 }
150}
151
152.sr-only {
153 position: absolute;
154 width: 1px;
155 height: 1px;
156 margin: -1px;
157 padding: 0;
158 overflow: hidden;
159 clip: rect(0 0 0 0);
160 border: 0;
161}
162
163a {
164 color: var(--accent-color);
165 font-weight: 700;
166 text-decoration: underline;
167 text-decoration-color: transparent;
168 text-underline-offset: 4px;
169 text-decoration-thickness: 2px;
170 transition: color 0.3s, text-decoration-color 0.3s;
171}
172
173a:hover,
174a:focus {
175 color: var(--accent-hover);
176 text-decoration-color: currentColor;
177}
178
179a:focus-visible {
180 outline: 3px solid var(--accent-color);
181 outline-offset: 4px;
182 border-radius: 3px;
183}
184
185.highlight {
186 background: var(--accent-hover);
187 color: #fcfdfe;
188}
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 @@
1<footer>
2 <p>Made with <a>Vite</a> and <a>Svelte</a></p>
3</footer>
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 @@
1<script>
2 let menuOpen = false;
3
4 function toggleMenu() {
5 menuOpen = !menuOpen;
6 }
7
8 function closeMenu() {
9 menuOpen = false;
10 }
11</script>
12
13<header>
14 <div class="header-top">
15 <h1>Filip Wandzio</h1>
16 <button
17 class="menu-toggle"
18 on:click={toggleMenu}
19 aria-expanded={menuOpen}
20 aria-controls="main-nav"
21 >
22 {#if menuOpen}
23 ✕ <span class="sr-only">Close menu</span>
24 {:else}
25 ☰ <span class="sr-only">Open menu</span>
26 {/if}
27 </button>
28 </div>
29
30 <nav id="main-nav" aria-label="Main navigation">
31 <ul class:open={menuOpen}>
32 <li><a href="#about" on:click={closeMenu}>About</a></li>
33 <li><a href="#projects" on:click={closeMenu}>Projects</a></li>
34 <li><a href="#research" on:click={closeMenu}>Research</a></li>
35 <li><a href="#contact" on:click={closeMenu}>Contact</a></li>
36 </ul>
37 </nav>
38</header>
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 @@
1<main>
2 <section id="about" aria-labelledby="about-heading">
3 <h2 id="about-heading">💡 About</h2>
4 <p>
5 I’m a software engineer who makes tools that are simple, practical,
6 and useful. Right now I mostly work with web applications, mobile
7 development, and general software design.
8 </p>
9 <p>
10 Outside of programming, I spend time with music — listening,
11 exploring, and creating my own pieces.
12 </p>
13 </section>
14
15 <section id="projects" aria-labelledby="projects-heading">
16 <h2 id="projects-heading">👨‍💻 Projects</h2>
17 <p>
18 Side projects are hosted on my <a
19 href="https://www.git.philw.dev"
20 target="_blank"
21 rel="noopener noreferrer"
22 aria-label="visit filip wandzio's git repository"
23 >git repository</a
24 >. They are experiments, prototypes, and actual working solutions
25 used on my personal machine. Here you can also find materials used
26 on my prelections.
27 </p>
28 </section>
29
30 <section id="research" aria-labelledby="research-heading">
31 <h2 id="research-heading">🔬 Research</h2>
32 <p>
33 Currently I am an undergraduate / master’s student in Computer
34 Science with a interest in
35 <strong
36 >Cybersecurity, Operating Systems and Network Engineering</strong
37 >. My academic work has focused on learning core concepts, exploring
38 how technology can be made more accessible, and experimenting with
39 practical projects that bridge theory and application.
40 </p>
41 <p>
42 I am not yet a professional researcher, but I enjoy reviewing
43 academic papers, and building prototypes. My long-term goal is to
44 pursue further graduate studies where I can deepen my expertise.
45 </p>
46 </section>
47
48 <section id="contact" aria-labelledby="contact-heading">
49 <h2 id="contact-heading">✉️ Contact</h2>
50 <p>
51 If you’d like to get in touch, send me an email: <a
52 href="mailto:contact@philw.dev"
53 aria-label="email filip wandzio">contact@philw.dev</a
54 >.
55 </p>
56 </section>
57</main>
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 @@
1import { mount } from 'svelte'
2import './app.css'
3import App from './App.svelte'
4
5const app = mount(App, {
6 target: document.getElementById('app')!,
7})
8
9export 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 @@
1/// <reference types="svelte" />
2/// <reference types="vite/client" />
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-17 20:49:48 +0000