aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/app.css137
-rw-r--r--src/lib/components/Main.svelte35
2 files changed, 77 insertions, 95 deletions
diff --git a/src/app.css b/src/app.css
index 829967c..f99121b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,11 +11,49 @@
11 11
12@media (prefers-color-scheme: dark) { 12@media (prefers-color-scheme: dark) {
13 :root { 13 :root {
14 --bg-color: #000c18; 14 --bg-color: #100c08;
15 --text-color: #b7b8b9; 15 --text-color: #b7b8b9;
16 } 16 }
17} 17}
18 18
19.sr-only {
20 position: absolute;
21 width: 1px;
22 height: 1px;
23 margin: -1px;
24 padding: 0;
25 overflow: hidden;
26 clip: rect(0 0 0 0);
27 border: 0;
28}
29
30a {
31 color: var(--accent-color);
32 font-weight: 700;
33 text-decoration: underline;
34 text-decoration-color: transparent;
35 text-underline-offset: 4px;
36 text-decoration-thickness: 2px;
37 transition: color 0.3s, text-decoration-color 0.3s;
38}
39
40a:hover,
41a:focus {
42 color: var(--accent-hover);
43 text-decoration-color: currentColor;
44}
45
46a:focus-visible {
47 outline: 3px solid var(--accent-color);
48 outline-offset: 4px;
49 border-radius: 3px;
50}
51
52.highlight {
53 background: var(--accent-hover);
54 color: #fcfdfe;
55}
56
19body { 57body {
20 margin: 0; 58 margin: 0;
21 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 59 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
@@ -42,17 +80,17 @@ h2 {
42} 80}
43 81
44@media (max-width: 768px) { 82@media (max-width: 768px) {
45 h1 { 83 h1, h2 {
46 font-size: 1.75rem; 84 font-size: 1.75rem;
47 } 85 }
86}
48 87
49 h2 { 88section {
50 font-size: 1.75rem; 89 margin-bottom: 3em;
51 } 90 padding: 0 2%;
52} 91}
53 92
54header, 93header {
55footer {
56 padding: 0.5em; 94 padding: 0.5em;
57 text-align: center; 95 text-align: center;
58 background: var(--bg-color); 96 background: var(--bg-color);
@@ -63,30 +101,6 @@ header h1 {
63 padding-left: 1rem; 101 padding-left: 1rem;
64} 102}
65 103
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 { 104.header-top {
91 display: flex; 105 display: flex;
92 justify-content: center; 106 justify-content: center;
@@ -99,6 +113,13 @@ section {
99 justify-content: space-between; 113 justify-content: space-between;
100 text-align: left; 114 text-align: left;
101 } 115 }
116
117 header {
118 position: sticky;
119 top: 0;
120 z-index: 1000;
121 background: var(--bg-color);
122 }
102} 123}
103 124
104nav ul { 125nav ul {
@@ -140,49 +161,25 @@ nav a {
140 nav ul.open { 161 nav ul.open {
141 display: flex; 162 display: flex;
142 } 163 }
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} 164}
162 165
163a { 166main {
164 color: var(--accent-color); 167 flex-grow: 1;
165 font-weight: 700; 168 max-width: 900px;
166 text-decoration: underline; 169 margin: 0 auto;
167 text-decoration-color: transparent; 170 padding: 2em;
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} 171}
178 172
179a:focus-visible { 173@media (max-width: 768px) {
180 outline: 3px solid var(--accent-color); 174 main {
181 outline-offset: 4px; 175 padding: 1.5em;
182 border-radius: 3px; 176 }
183} 177}
184 178
185.highlight { 179footer {
186 background: var(--accent-hover); 180 padding: 0.5em;
187 color: #fcfdfe; 181 text-align: center;
182 font-size: 1.05rem;
183 color: var(--text-color);
184 background: var(--bg-color);
188} 185}
diff --git a/src/lib/components/Main.svelte b/src/lib/components/Main.svelte
index d5c6269..d5861c6 100644
--- a/src/lib/components/Main.svelte
+++ b/src/lib/components/Main.svelte
@@ -1,53 +1,38 @@
1<main> 1<main>
2 <section id="about" aria-labelledby="about-heading"> 2 <section id="about" aria-labelledby="about-heading">
3 <h2 id="about-heading">đź’ˇ About</h2> 3 <h2 id="about-heading">About</h2>
4 <p> 4 <p>
5 I’m a software engineer who makes tools that are simple, practical, 5 I’m a software engineer who builds practical tools. I mostly work on web and mobile apps, and general software development.
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.
11 </p> 6 </p>
12 </section> 7 </section>
13 8
14 <section id="projects" aria-labelledby="projects-heading"> 9 <section id="projects" aria-labelledby="projects-heading">
15 <h2 id="projects-heading">👨‍💻 Projects</h2> 10 <h2 id="projects-heading">Projects</h2>
16 <p> 11 <p>
17 Side projects are hosted on my <a 12 My side projects are on my <a
18 href="https://git.philw.dev" 13 href="https://git.philw.dev"
19 target="_blank" 14 target="_blank"
20 rel="noopener noreferrer" 15 rel="noopener noreferrer"
21 aria-label="visit filip wandzio's git repository" 16 aria-label="visit filip wandzio's git repository"
22 >git repository</a 17 >git repository</a
23 >. They are experiments, prototypes, and actual working solutions 18 >. They include experiments, prototypes, and working tools I use personally. You can also find materials from my talks and presentations.
24 used on my personal machine. Here you can also find materials used
25 on my prelections.
26 </p> 19 </p>
27 </section> 20 </section>
28 21
29 <section id="research" aria-labelledby="research-heading"> 22 <section id="research" aria-labelledby="research-heading">
30 <h2 id="research-heading">🔬 Research</h2> 23 <h2 id="research-heading">Research</h2>
31 <p> 24 <p>
32 Currently I am an undergraduate / master’s student in Computer 25 I am an undergraduate / master’s student in Computer Science, interested in <strong>Cybersecurity, Operating Systems, and Networks</strong>. I focus on learning core concepts and building practical projects that connect theory to practice.
33 Science with a interest in
34 <strong
35 >Cybersecurity, Operating Systems and Network Engineering</strong
36 >. My academic work has focused on learning core concepts, exploring
37 how technology can be made more accessible, and experimenting with
38 practical projects that bridge theory and application.
39 </p> 26 </p>
40 <p> 27 <p>
41 I am not yet a professional researcher, but I enjoy reviewing 28 I enjoy reviewing papers and creating prototypes. I plan to continue my studies to deepen my expertise.
42 academic papers, and building prototypes. My long-term goal is to
43 pursue further graduate studies where I can deepen my expertise.
44 </p> 29 </p>
45 </section> 30 </section>
46 31
47 <section id="contact" aria-labelledby="contact-heading"> 32 <section id="contact" aria-labelledby="contact-heading">
48 <h2 id="contact-heading">✉️ Contact</h2> 33 <h2 id="contact-heading">Contact</h2>
49 <p> 34 <p>
50 If you’d like to get in touch, send me an email: <a 35 To get in touch, send me an email: <a
51 href="mailto:contact@philw.dev" 36 href="mailto:contact@philw.dev"
52 aria-label="email filip wandzio">contact@philw.dev</a 37 aria-label="email filip wandzio">contact@philw.dev</a
53 >. 38 >.