Skip to content

feat: build portfolio homepage v1 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
proxynth merged 21 commits into from
Aug 23, 2026
Merged

feat: build portfolio homepage v1 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
1004d9d
feat: build portfolio homepage
proxynth Aug 23, 2026
1e300fd
feat: add portfolio metadata
proxynth Aug 23, 2026
8dabe38
feat: add backend engineer portfolio content
proxynth Aug 23, 2026
ba7d989
fix: mark Session Keeper as private project
proxynth Aug 23, 2026
8f47cc9
fix: remove proprietary Session Keeper from public portfolio
proxynth Aug 23, 2026
7dbfb51
feat: add LaraWebhook case study
proxynth Aug 23, 2026
a3b9384
feat: add Payment Sandbox case study
proxynth Aug 23, 2026
5a521b2
ci: validate pull requests
proxynth Aug 23, 2026
18b6236
feat: link project case studies
proxynth Aug 23, 2026
c7c6e9b
feat: add target role and work preferences
proxynth Aug 23, 2026
0a2c4a5
i18n: translate layout metadata to English
proxynth Aug 23, 2026
78fea9a
i18n: translate homepage metadata to English
proxynth Aug 23, 2026
b5e66de
i18n: translate portfolio homepage to English
proxynth Aug 23, 2026
f86f102
i18n: translate Payment Sandbox case study
proxynth Aug 23, 2026
24856b3
i18n: translate LaraWebhook case study
proxynth Aug 23, 2026
de9304f
refactor: use Proxynth public identity
proxynth Aug 23, 2026
b0a27e2
refactor: use Proxynth public identity
proxynth Aug 23, 2026
6867a35
refactor: use Proxynth public identity
proxynth Aug 23, 2026
043ba5a
refactor: use Proxynth public identity
proxynth Aug 23, 2026
89791e6
refactor: use Proxynth public identity
proxynth Aug 23, 2026
b120f93
Replace personal monogram with Proxynth wordmark
proxynth Aug 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions .github/workflows/validate.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
name: Validate Pull Request

on:
pull_request:
branches:
- main

permissions:
contents: read

jobs:
build:
name: Build Astro site
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v5

- name: Setup pnpm
uses: pnpm/action-setup@v4
with:
version: 10

- name: Setup Node.js
uses: actions/setup-node@v5
with:
node-version: 22
cache: pnpm

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Build
run: pnpm build
337 changes: 130 additions & 207 deletions src/components/Welcome.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,210 +1,133 @@
---
import astroLogo from '../assets/astro.svg';
import background from '../assets/background.svg';
---

<div id="container">
<img id="background" src={background.src} alt="" fetchpriority="high" />
<main>
<section id="hero">
<a href="https://astro.build"
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
>
<h1>
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
</h1>
<section id="links">
<a class="button" href="https://docs.astro.build">Read our docs</a>
<a href="https://astro.build/chat"
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
><path
fill="currentColor"
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
></path></svg
>
</a>
</section>
</section>
</main>

<a href="https://astro.build/blog/astro-7/" id="news" class="box">
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
><path
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
fill="#111827"></path></svg
>
<h2>What's New in Astro 7.0?</h2>
<p>
Rust-powered compiler, advanced routing, AI agent support, and more! Click to explore Astro
7.0's new features.
</p>
</a>
</div>
<main class="page">
<nav class="nav" aria-label="Main navigation">
<a class="brand" href="/">Proxynth<span>.</span></a>
<div class="nav-links">
<a href="#projects">Projects</a>
<a href="#profile">Profile</a>
<a href="#approach">Approach</a>
<a href="https://github.com/proxynth" target="_blank" rel="noreferrer">GitHub ↗</a>
</div>
</nav>

<section class="hero">
<p class="eyebrow">Senior Backend Engineer · PHP/Laravel · Go</p>
<h1>I build backend systems that can be <em>understood, tested and operated with confidence.</em></h1>
<p class="intro">
Ten years of experience building SaaS platforms, payment systems and distributed services.
I enjoy complex problems, explicit boundaries and trade-offs that hold up in production.
</p>
<div class="actions">
<a class="button primary" href="#projects">See the projects</a>
<a class="button secondary" href="https://github.com/proxynth" target="_blank" rel="noreferrer">My GitHub ↗</a>
</div>
</section>

<section class="signal-grid" aria-label="Positioning">
<article><strong>10 years</strong><span>of software development</span></article>
<article><strong>Go + PHP</strong><span>production backend</span></article>
<article><strong>Payments</strong><span>integrations and reliability</span></article>
<article><strong>IC</strong><span>ownership without management</span></article>
</section>

<section id="projects" class="section">
<div class="section-heading">
<p class="eyebrow">Selected work</p>
<h2>Projects that show how I think.</h2>
</div>

<div class="projects">
<article class="project featured">
<div class="project-top"><span>01</span><span>Go · Payments · Open source</span></div>
<h3>Payment Sandbox</h3>
<p>
A payment systems simulator designed to test integrations against retries, lost responses,
duplicated or out-of-order webhooks and concurrent operations.
</p>
<ul><li>Deterministic and reproducible scenarios</li><li>Asynchronous events, idempotency and replay</li><li>Modular monolith, DDD and targeted hexagonal architecture</li></ul>
<a class="project-link" href="/projects/payment-sandbox">Read the case study ↗</a>
</article>

<article class="project">
<div class="project-top"><span>02</span><span>PHP · Laravel · Payments</span></div>
<h3>LaraWebhook</h3>
<p>
A Laravel package built from scratch to process multi-service webhooks with signatures,
idempotency, retries, replay, audit trails and configurable payload storage.
</p>
<ul><li>Unit, functional and architecture tests</li><li>CI, documentation and static analysis</li><li>Built independently in approximately 80 hours</li></ul>
<a class="project-link" href="/projects/larawebhook">Read the case study ↗</a>
</article>
</div>
</section>

<section id="profile" class="section profile">
<div class="section-heading"><p class="eyebrow">What I am looking for</p><h2>An individual contributor backend role in a team that believes in its product.</h2></div>
<div class="profile-grid">
<div><strong>Target</strong><p>Senior Backend Engineer or backend-focused Senior Software Engineer, with real technical ownership.</p></div>
<div><strong>Environment</strong><p>A useful product, B2B SaaS, fintech, security, compliance or critical systems. Genuine remote work from Strasbourg.</p></div>
<div><strong>Not looking for</strong><p>People management, permanent coordination, feature factories or primarily frontend roles.</p></div>
</div>
</section>

<section id="approach" class="approach section">
<div class="section-heading"><p class="eyebrow">How I work</p><h2>Complexity deserves structure. Not ceremony.</h2></div>
<div class="principles">
<div><strong>Understand before abstracting</strong><p>I look for the real problem, invariants and boundaries before choosing an architecture.</p></div>
<div><strong>Make failure testable</strong><p>Retries, timeouts, concurrency and inconsistencies should not remain impossible-to-reproduce accidents.</p></div>
<div><strong>Stay hands-on</strong><p>I take ownership of complex topics, help others become more autonomous and stay close to the code.</p></div>
</div>
</section>

<footer>
<span>Proxynth · Senior Backend Engineer</span>
<a href="https://github.com/proxynth" target="_blank" rel="noreferrer">github.com/proxynth ↗</a>
</footer>
</main>

<style>
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(100px);
}

#container {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
height: 100%;
}

main {
height: 100%;
display: flex;
justify-content: center;
}

#hero {
display: flex;
align-items: start;
flex-direction: column;
justify-content: center;
padding: 16px;
}

h1 {
font-size: 22px;
margin-top: 0.25em;
}

#links {
display: flex;
gap: 16px;
}

#links a {
display: flex;
align-items: center;
padding: 10px 12px;
color: #111827;
text-decoration: none;
transition: color 0.2s;
}

#links a:hover {
color: rgb(78, 80, 86);
}

#links a svg {
height: 1em;
margin-left: 8px;
}

#links a.button {
color: white;
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
border-radius: 10px;
}

#links a.button:hover {
color: rgb(230, 230, 230);
box-shadow: none;
}

pre {
font-family:
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
monospace;
font-weight: normal;
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}

h2 {
margin: 0 0 1em;
font-weight: normal;
color: #111827;
font-size: 20px;
}

p {
color: #4b5563;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.006em;
margin: 0;
}

code {
display: inline-block;
background:
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
border-radius: 8px;
border: 1px solid transparent;
padding: 6px 8px;
}

.box {
padding: 16px;
background: rgba(255, 255, 255, 1);
border-radius: 16px;
border: 1px solid white;
}

#news {
position: absolute;
bottom: 16px;
right: 16px;
max-width: 300px;
text-decoration: none;
transition: background 0.2s;
backdrop-filter: blur(50px);
}

#news:hover {
background: rgba(255, 255, 255, 0.55);
}

@media screen and (max-height: 368px) {
#news {
display: none;
}
}

@media screen and (max-width: 768px) {
#container {
display: flex;
flex-direction: column;
}

#hero {
display: block;
padding-top: 10%;
}

#links {
flex-wrap: wrap;
}

#links a.button {
padding: 14px 18px;
}

#news {
right: 16px;
left: 16px;
bottom: 2.5rem;
max-width: 100%;
}

h1 {
line-height: 1.5;
}
}
.page { max-width: 1120px; margin: auto; padding: 0 28px; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:28px 0; border-bottom:1px solid #202832; }
.brand { font-size:1.05rem; font-weight:800; letter-spacing:-.04em; text-decoration:none; }
.brand span, .eyebrow { color:#63e6be; }
.nav-links { display:flex; gap:24px; color:#9aa7b5; font-size:.9rem; }
.nav-links a, .project-link, footer a { text-decoration:none; }
.nav-links a:hover, .project-link:hover, footer a:hover { color:#63e6be; }
.hero { max-width:860px; padding:112px 0 84px; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; font-weight:700; }
h1 { max-width:900px; margin:20px 0; font-size:clamp(2.8rem, 7vw, 6.4rem); line-height:.98; letter-spacing:-.07em; }
h1 em { color:#9aa7b5; font-style:normal; }
.intro { max-width:680px; color:#aeb8c4; font-size:1.18rem; line-height:1.65; }
.actions { display:flex; gap:12px; margin-top:32px; }
.button { padding:12px 18px; border-radius:7px; text-decoration:none; font-weight:700; font-size:.9rem; }
.primary { color:#08110e; background:#63e6be; }
.secondary { border:1px solid #35414d; color:#d7dee7; }
.signal-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #202832; border-bottom:1px solid #202832; }
.signal-grid article { padding:24px 18px; border-right:1px solid #202832; }
.signal-grid article:last-child { border-right:0; }
.signal-grid strong { display:block; font-size:1.35rem; }
.signal-grid span { display:block; color:#7f8b98; font-size:.85rem; margin-top:6px; }
.section { padding:110px 0 0; }
.section-heading { max-width:620px; margin-bottom:36px; }
h2 { font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; letter-spacing:-.05em; margin:14px 0 0; }
.projects { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.project { padding:28px; border:1px solid #26313c; border-radius:10px; background:#10161d; }
.featured { grid-column:span 2; background:linear-gradient(135deg,#13251f,#10161d 60%); border-color:#315e50; }
.project-top { display:flex; justify-content:space-between; color:#71808f; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
h3 { font-size:1.8rem; margin:28px 0 12px; letter-spacing:-.04em; }
.project p, .principles p, .profile-grid p { color:#aeb8c4; line-height:1.65; }
.project ul { padding-left:20px; color:#c4ccd5; line-height:1.8; }
.project-link { display:inline-block; margin-top:14px; color:#63e6be; font-weight:700; }
.profile-grid, .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.profile-grid > div, .principles > div { padding:24px 0; border-top:1px solid #33404c; }
.profile-grid strong, .principles strong { font-size:1.1rem; }
footer { display:flex; justify-content:space-between; gap:20px; margin:110px 0 28px; padding-top:24px; border-top:1px solid #202832; color:#7f8b98; font-size:.85rem; }
@media (max-width: 700px) {
.page { padding:0 18px; }
.nav-links { gap:12px; font-size:.8rem; }
.hero { padding:76px 0 60px; }
.signal-grid, .projects, .profile-grid, .principles { grid-template-columns:1fr; }
.signal-grid article { border-right:0; border-bottom:1px solid #202832; }
.featured { grid-column:auto; }
footer { flex-direction:column; margin-top:76px; }
}
</style>
Loading
Loading