diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/app.css | 137 | ||||
| -rw-r--r-- | src/lib/components/Main.svelte | 35 |
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 | |||
| 30 | a { | ||
| 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 | |||
| 40 | a:hover, | ||
| 41 | a:focus { | ||
| 42 | color: var(--accent-hover); | ||
| 43 | text-decoration-color: currentColor; | ||
| 44 | } | ||
| 45 | |||
| 46 | a: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 | |||
| 19 | body { | 57 | body { |
| 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 { | 88 | section { |
| 50 | font-size: 1.75rem; | 89 | margin-bottom: 3em; |
| 51 | } | 90 | padding: 0 2%; |
| 52 | } | 91 | } |
| 53 | 92 | ||
| 54 | header, | 93 | header { |
| 55 | footer { | ||
| 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 | ||
| 66 | main { | ||
| 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 | |||
| 79 | footer { | ||
| 80 | text-align: center; | ||
| 81 | font-size: 1.05rem; | ||
| 82 | color: var(--text-color); | ||
| 83 | } | ||
| 84 | |||
| 85 | section { | ||
| 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 | ||
| 104 | nav ul { | 125 | nav 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 | ||
| 163 | a { | 166 | main { |
| 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 | |||
| 173 | a:hover, | ||
| 174 | a:focus { | ||
| 175 | color: var(--accent-hover); | ||
| 176 | text-decoration-color: currentColor; | ||
| 177 | } | 171 | } |
| 178 | 172 | ||
| 179 | a: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 { | 179 | footer { |
| 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 | >. |
