bronku/personal-page
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new website

Browse source
This commit is contained in:
bronkuu 2026-06-14 23:16:01 +02:00
parent 98ecf63687
commit 4fe44f4a9e
4 changed files with 629 additions and 207 deletions
Download patch file Download diff file Expand all files Collapse all files

4
favicon.svg
View file

@ -1,4 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#000080"/> <rect width="100" height="100" rx="22" fill="#1a6b3c"/>
<path d="M30 30 L70 50 L30 70" stroke="white" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/> <text x="50" y="66" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="44" font-weight="700" fill="white" text-anchor="middle">JB</text>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 255 B

After

Width:  |  Height:  |  Size: 285 B

Before After
Before After

454
index.html
View file

@ -1,174 +1,308 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./style.css" rel="stylesheet" /> <link href="./style.css" rel="stylesheet" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" /> <link rel="icon" type="image/svg+xml" href="favicon.svg" />
<title>Jakub Bronk | Portfolio</title> <title>Jakub Bronk | Portfolio</title>
</head> </head>
<body> <body>
<header> <header>
<h1>Jakub Bronk</h1> <div>
<div> <h1>Jakub Bronk</h1>
<a href="mailto:bronk.jakub@proton.me">Email</a> <p>
<a href="https://github.com/Bronku">GitHub</a> Computer Science student @ Gdańsk University of Technology
<span> Somonino, Poland </span> </p>
</div> </div>
</header> <nav>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
<a href="#availability">Availability</a>
</nav>
</header>
<section> <section id="about">
<p> <p>
Computer Science student at Gdańsk University of Technology with strong Computer Science student at Gdańsk University of Technology with
foundations in algorithms, systems programming, and Linux environments. strong foundations in algorithms, systems programming, and Linux
Experienced in Go, C/C++, and C# as well as familiar with Java, Python, environments. Experienced in Go, C/C++, and Python, as well as
Ruby, Rust, and TypeScript, through academic and personal projects, familiar with Java, Ruby, Rust, and TypeScript - through
including self-hosted infrastructure and low-level development. academic, personal, and professional projects including
</p> full-stack web development, compiler design, and self-hosted
infrastructure.
</p>
<div class="contact-bar">
<a href="mailto:bronk.jakub@proton.me">bronk.jakub@proton.me</a>
<a href="https://git.bronku.xyz">git.bronku.xyz</a>
<span>Somonino, Poland</span>
</div>
</section>
<h2>AVAILABILITY & COMMITMENT</h2> <section id="experience">
<p> <h2>Experience</h2>
I am looking for a long-term professional relationship rather than a <div class="entry">
short-term placement. My intended availability is as follows: <div class="entry-head">
</p> <h3>Software Engineering Intern</h3>
<ul> <span class="entry-meta"
<li> >Vention Teams · February 2026 – April 2026</span
<b>Current Semester:</b> Part-time internship (approx. 20h/week). >
</li> </div>
<li><b>Summer 2026:</b> Transition to full-time engineering.</li> <p>
<li> Contributed to a full-stack web application. Worked with
<b>Academic Year 2026/27:</b> Return to part-time until graduation. Ruby on Rails, React, TypeScript, and RTK Query in a team -
</li> delivering features, reviewing code, and participating in
<li><b>Post-Graduation:</b> Transition to permanent full-time role.</li> the full development lifecycle.
</ul> </p>
</section> <div class="tags">
<span>Ruby on Rails</span>
<span>React</span>
<span>TypeScript</span>
<span>RTK Query</span>
<span>PostgreSQL</span>
</div>
</div>
</section>
<section> <section id="projects">
<h2>SELECTED PROJECTS</h2> <h2>Selected Projects</h2>
<section> <div class="project-grid">
<h3>B+ Tree Implementation <span>Rust</span></h3> <article class="card">
<p> <a
A disk-friendly B+ tree implementation focusing on memory-efficient href="https://new.piekarnikgosi.pl"
data structures and safety. class="card-img"
</p> target="_blank"
</section> >
<img
src="screenshots/piekarnikgosi-hero.avif"
alt="piekarnikgosi.pl screenshot"
loading="lazy"
/>
</a>
<div class="card-body">
<h3>piekarnikgosi.pl</h3>
<p>
A multi-page business website for a local cake shop
and café, built for a real client. Features include
a categorized product catalog, photo gallery with
lightbox, café landing page, and contact information
- all server-rendered with HTMX-powered navigation
for instant page transitions.
</p>
<div class="tags">
<span>HTML/CSS</span>
<span>HTMX</span>
<span>Go</span>
<span>JavaScript</span>
</div>
<div class="card-links">
<a href="https://new.piekarnikgosi.pl"
>&#8594; Live site</a
>
<a
href="https://git.bronku.xyz/bronku/piekarnikgosipl"
>&#8594; Source</a
>
</div>
</div>
</article>
<section> <article class="card">
<h3> <div class="card-body">
Python-to-Ruby Transpiler <h3>Cake Order Tracker</h3>
<span>Flex / Bison / C++ / Make</span> <p>
</h3> Production-ready order management system for the
<p> same cake shop. Single-binary Go application with
A compiler-front-end project focused on lexer/parser design. This SQLite persistence, and a dynamic HTMX frontend.
project allowed me to familiarize myself with lexer and parser design, Features real-time order filtering, transactional
engineer a lexing solution for significant indentation in Python, integrity, and zero-dependency deployment.
while effectively modeling real-world objects through class design. </p>
Solved complex build challenges involving circular dependencies. <div class="tags">
</p> <span>Go</span>
</section> <span>SQLite</span>
<span>HTMX</span>
<span>SQL</span>
</div>
<div class="card-links">
<a
href="https://git.bronku.xyz/bronku/cake-order-tracker"
>&#8594; Source</a
>
</div>
</div>
</article>
<section> <article class="card">
<h3>External Sorting Implementation <span>C++</span></h3> <div class="card-body">
<p> <h3>Python-to-Ruby Transpiler</h3>
High-performance implementation for sorting datasets exceeding RAM <p>
capacity. Utilized min-heaps and optimized disk I/O buffers to manage A compiler front-end built with Flex, Bison, and
large-scale data processing efficiently. C++. Handles Python's significant indentation
</p> through custom lexer logic, produces Ruby AST
</section> output, and solves complex build challenges
including circular dependency resolution in
generated code.
</p>
<div class="code-compare">
<span class="code-label">Input (Python)</span>
<pre>
class Counter:
def increment(self):
self.count = self.count + 1</pre
>
</div>
<div class="arrow-mid">&#8595;</div>
<div class="code-compare">
<span class="code-label">Output (Ruby)</span>
<pre>
class Counter
def increment
@count = @count + 1
end
end</pre
>
</div>
<div class="tags">
<span>Flex</span>
<span>Bison</span>
<span>C++</span>
<span>Make</span>
</div>
<div class="card-links">
<a href="https://git.bronku.xyz/bronku/python2ruby"
>&#8594; Source</a
>
</div>
</div>
</article>
<section> <article class="card">
<h3>Order Tracker for Cake Shop <span>Go / SQLite / HTMX</span></h3> <div class="card-body">
<p> <h3>Minesweeper</h3>
A production-ready logistics system for a local business. Features <p>
transactional integrity, secure session-based auth, and a dynamic UI A fully-playable Minesweeper clone built with C and
using HTMX. The entire stack is compiled into a single binary using SDL3. Demonstrates comfort with low-level graphics
Go's embed system for zero-dependency deployment. programming and C memory management.
</p> </p>
</section> <div class="tags">
<span>C</span>
<span>SDL3</span>
<span>CMake</span>
</div>
<div class="card-links">
<a href="https://git.bronku.xyz/bronku/minesweeper"
>&#8594; Source</a
>
</div>
</div>
</article>
<section> <article class="card">
<h3> <div class="card-body">
Self-Hosted Infrastructure <h3>Disk-Friendly B+ Tree</h3>
<span>Debian / Docker / NixOS</span> <p>
</h3> A B+ tree implementation focused on memory-efficient
<p> data structures and disk-aware storage.
Management of a production environment for media, backups, and small </p>
business order-tracking. Running in Docker, secured behind an overlay <div class="tags">
VPN, and exposed via Cloudflare tunnels when required. <span>Rust</span>
</p> <span>Data Structures</span>
</section> </div>
</section> <div class="card-links">
<a href="https://git.bronku.xyz/bronku/B-tree"
>&#8594; Source</a
>
</div>
</div>
</article>
<section> <article class="card">
<h2>DEVELOPMENT PHILOSOPHY</h2> <div class="card-body">
<p> <h3>Self-Hosted Infrastructure</h3>
I believe in <b>Deep Ownership</b>. Beyond writing code, I strive to <p>
understand the entire delivery chain—from database commit logs and Production server running Debian with Docker
memory management to final binary deployment. I am guided by: containers and systemd-managed services. Hosts
</p> media, backups, and the cake shop's order-tracking
<ul> system. Secured behind an overlay VPN, exposed
<li> through Cloudflare tunnels where needed, with
<b>Intentional Tooling:</b> I choose stacks based on problem-solving automated backups and monitoring.
efficiency rather than industry trends. This pragmatic approach </p>
ensures the right tool is used for the specific performance <div class="tags">
requirements of the task. <span>Docker</span>
</li> <span>Debian</span>
<li> <span>systemd</span>
<b>Minimalism:</b> I prioritize low dependency counts to reduce attack <span>Cloudflare</span>
surfaces, minimize maintenance debt, and ensure lightning-fast <span>VPN</span>
execution—whether in a systems binary or a browser-based UI. </div>
</li> </div>
<li> </article>
<b>Transparency:</b> I value understanding the abstractions I use. My
experience with systems-level languages (C, Go, Rust) provides me with
a unique perspective on optimizing high-level applications and
debugging complex performance bottlenecks.
</li>
</ul>
</section>
<section> <article class="card">
<h2>OTHER INTERESTS</h2> <div class="card-body">
<section> <h3>External Sorting</h3>
<h3>Literary</h3> <p>
<p> High-performance external sort for datasets
I primarily read Science Fiction but also enjoy classic murder exceeding RAM capacity. Uses min-heaps and optimized
mysteries. Some of my favorite books include: disk I/O buffers.
</p> </p>
<ul> <div class="tags">
<li><i>Foundation</i> (Isaac Asimov)</li> <span>C++</span>
<li><i>God Emperor of Dune</i> (Frank Herbert)</li> <span>Algorithms</span>
<li><i>The Three-Body Problem</i> (Cixin Liu)</li> </div>
<li><i>The Murder of Roger Ackroyd</i> (Agatha Christie)</li> <div class="card-links">
</ul> <a href="https://git.bronku.xyz/bronku/file_sorting"
>&#8594; Source</a
>
</div>
</div>
</article>
</div>
</section>
<h3>Gaming</h3> <section id="availability">
<p>I mostly play automation games but also enjoy other indie titles:</p> <h2>Availability &amp; Commitment</h2>
<ul> <p>
<li>Factorio</li> I am looking for a paid internship or junior developer position
<li>Satisfactory</li> - full-time for summer 2026, then part-time during the academic
<li>Celeste</li> year.
<li>Outer Wilds</li> </p>
</ul> <ul>
<li>
<b>Summer 2026 (Jul–Sep):</b> Full-time internship / junior
role.
</li>
<li>
<b>Academic Year 2026/27:</b> Part-time (approx. 20h/week).
</li>
<li><b>Post-Graduation (2027+):</b> Full-time, permanent.</li>
</ul>
</section>
<h3>Other</h3> <section id="philosophy">
<ul> <h2>Development Philosophy</h2>
<li>Bouldering</li> <p>
<li>Motorcycling</li> I believe in <b>Deep Ownership</b> — understanding the full
<li>Cubing (Rubik's Cube)</li> delivery chain from memory management to deployment. I am guided
<li> by:
Tinkering with hardware and building custom, hand-wired keyboards </p>
</li> <ul>
</ul> <li>
</section> <b>Intentional Tooling:</b> Choosing stacks for
</section> problem-solving efficiency over trends. The right tool for
the constraints at hand.
<footer> </li>
<p> <li>
Built with plain HTML/CSS. Hosted on github due to home bandwidth <b>Minimalism:</b> Low dependency counts reduce attack
limitations. Text on this site has been proofread with AI assistance. surfaces, maintenance debt, and keep execution fast —
</p> whether in a systems binary or a browser UI.
</footer> </li>
</body> <li>
<b>Transparency:</b> Understanding the abstractions I use.
Systems-level experience (C, Go, Rust) informs better
decisions in high-level code and debugging.
</li>
</ul>
</section>
</body>
</html> </html>

BIN
screenshots/piekarnikgosi-hero.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

378
style.css
View file

@ -1,65 +1,353 @@
:root { :root {
--bg: #ffffff; --bg: #fafafa;
--text: #1a1a1a; --bg-card: #ffffff;
--accent: #000080; --text: #1a1a1a;
--dim: #666; --text-dim: #666666;
--code-bg: #f4f4f4; --accent: #1a6b3c;
--accent-dim: #2d8a4e;
--border: #e0e0e0;
--tag-bg: #f0f0f4;
--tag-text: #333;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--radius: 8px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111113;
--bg-card: #1a1a1e;
--text: #e4e4e7;
--text-dim: #a1a1aa;
--accent: #4ade80;
--accent-dim: #22c55e;
--border: #27272a;
--tag-bg: #27272a;
--tag-text: #d4d4d8;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} }
body { body {
font-family: "Liberation Sans", sans-serif; font-family:
line-height: 1.6; -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
color: var(--text); sans-serif;
max-width: 800px; line-height: 1.65;
margin: 0 auto; color: var(--text);
padding: 2rem 1.5rem; background: var(--bg);
max-width: 900px;
margin: 0 auto;
padding: 2.5rem 1.5rem;
transition:
color 0.2s,
background 0.2s;
} }
header { section {
border-bottom: 2px solid var(--text); margin-top: 3rem;
padding-bottom: 1rem;
margin-bottom: 2rem;
} }
a { h1 {
color: var(--accent); font-size: 1.75rem;
text-decoration: none; font-weight: 700;
font-weight: bold; letter-spacing: -0.02em;
margin-right: 15px;
}
a:hover {
text-decoration: underline;
} }
h2 { h2 {
font-size: 1.1rem; font-size: 1rem;
text-transform: uppercase; font-weight: 600;
letter-spacing: 2px; text-transform: uppercase;
border-bottom: 1px solid #ddd; letter-spacing: 0.08em;
padding-bottom: 0.3rem; color: var(--accent);
margin-top: 2.5rem; margin-bottom: 1.25rem;
} }
h3 { h3 {
margin-bottom: 0.5rem; font-size: 1.1rem;
font-size: 1.1rem; font-weight: 600;
margin-bottom: 0.4rem;
} }
h3 span { p {
font-family: monospace; margin-bottom: 0.75rem;
font-size: 0.85rem; }
background: var(--code-bg);
padding: 2px 6px; a {
border-radius: 4px; color: var(--accent);
font-weight: normal; text-decoration: none;
margin-left: 10px; }
color: var(--text);
a:hover {
text-decoration: underline;
}
header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
header p {
color: var(--text-dim);
font-size: 0.95rem;
margin-top: 0.2rem;
margin-bottom: 0;
}
header nav {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
header nav a {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-dim);
}
header nav a:hover {
color: var(--accent);
text-decoration: none;
}
.contact-bar {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
font-size: 0.9rem;
color: var(--text-dim);
margin-top: 0.5rem;
}
.contact-bar a {
font-weight: 500;
}
.entry {
padding: 1.25rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.entry-head {
margin-bottom: 0.75rem;
}
.entry-head h3 {
font-size: 1rem;
margin-bottom: 0.15rem;
}
.entry-meta {
font-size: 0.85rem;
color: var(--text-dim);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.75rem;
}
.tags span {
font-size: 0.75rem;
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;
background: var(--tag-bg);
color: var(--tag-text);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
.tag-desc {
font-size: 0.85rem;
font-weight: 400;
color: var(--text-dim);
margin-left: 0.3rem;
}
.project-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.project-grid {
grid-template-columns: 1fr 1fr;
}
}
.card {
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.card:hover {
border-color: var(--accent);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.04);
}
.card-img {
display: block;
line-height: 0;
overflow: hidden;
}
.card-img:hover {
text-decoration: none;
}
.card-img img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform 0.3s ease;
}
.card-img img[src$=".svg"] {
height: auto;
max-height: 200px;
object-fit: contain;
background: var(--bg);
padding: 0.5rem 0;
}
.card-img:hover img {
transform: scale(1.03);
}
.card-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.card-body h3 {
font-size: 1rem;
margin-bottom: 0.4rem;
}
.card-body p {
font-size: 0.9rem;
color: var(--text-dim);
line-height: 1.55;
flex: 1;
}
.code-compare {
margin: 0.75rem 0 0;
font-size: 0.8rem;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border);
}
.code-compare .code-label {
display: block;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.3rem 0.6rem;
background: var(--tag-bg);
color: var(--text-dim);
border-bottom: 1px solid var(--border);
}
.code-compare pre {
margin: 0;
padding: 0.6rem;
overflow-x: auto;
font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, monospace;
font-size: 0.75rem;
line-height: 1.45;
color: var(--text);
background: var(--bg);
}
.code-compare + .code-compare {
border-top: 0;
border-radius: 0 0 6px 6px;
}
.arrow-mid {
text-align: center;
font-size: 0.8rem;
color: var(--text-dim);
padding: 0.25rem 0;
line-height: 1;
}
.card-links {
margin-top: 0.75rem;
font-size: 0.875rem;
display: flex;
gap: 1.25rem;
}
.card-links a {
font-weight: 500;
}
#availability ul {
list-style: none;
padding: 0;
}
#availability li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
}
#availability li:last-child {
border-bottom: none;
}
#philosophy ul {
padding-left: 1.2rem;
}
#philosophy li {
margin-bottom: 0.6rem;
font-size: 0.95rem;
line-height: 1.55;
} }
footer { footer {
margin-top: 4rem; margin-top: 4rem;
border-top: 1px solid #eee; padding-top: 1.5rem;
font-size: 0.85rem; border-top: 1px solid var(--border);
color: var(--dim); font-size: 0.85rem;
color: var(--text-dim);
text-align: center;
}
footer p {
margin-bottom: 0;
} }