Created
April 7, 2026 00:41
-
-
Save waltervargas/72e275a069985fc337932021ae0f0119 to your computer and use it in GitHub Desktop.
Kellen Ramos — Backend & Systems Engineer CV
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kellen Ramos — Backend & Systems Engineer</title> | |
| <style> | |
| /* ── Reset & Base ─────────────────────────────── */ | |
| *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --ink: #2e2e3a; | |
| --mid: #6b6b7b; | |
| --light: #9d9daa; | |
| --accent: #9b72b0; | |
| --accent-soft: #c9a7d8; | |
| --pink: #d4829c; | |
| --pink-soft: #f2c6d4; | |
| --lavender: #b8a9d4; | |
| --lavender-soft: #e8e0f0; | |
| --rule: #e4d9ee; | |
| --bg: #fffbfd; | |
| --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; | |
| } | |
| html { font-size: 13.5px; } | |
| body { | |
| font-family: var(--font-main); | |
| color: var(--ink); | |
| background: #f3eef6; | |
| line-height: 1.45; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { color: var(--accent); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| /* ── Page Container ───────────────────────────── */ | |
| .page { | |
| width: 210mm; | |
| min-height: 297mm; | |
| max-height: 297mm; | |
| margin: 20px auto; | |
| padding: 20px 28px 16px; | |
| background: var(--bg); | |
| box-shadow: 0 2px 12px rgba(0,0,0,0.08); | |
| overflow: hidden; | |
| } | |
| /* ── Header ───────────────────────────────────── */ | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| padding-bottom: 7px; | |
| border-bottom: 2px solid var(--accent); | |
| margin-bottom: 8px; | |
| } | |
| .header-left h1 { | |
| font-size: 1.85rem; | |
| font-weight: 700; | |
| letter-spacing: -0.5px; | |
| line-height: 1.1; | |
| } | |
| .header-left .tagline { | |
| font-size: 0.95rem; | |
| color: var(--mid); | |
| margin-top: 3px; | |
| font-weight: 400; | |
| } | |
| .header-right { | |
| text-align: right; | |
| font-size: 0.82rem; | |
| color: var(--mid); | |
| line-height: 1.55; | |
| } | |
| .header-right span { display: block; } | |
| .header-right a { color: var(--accent); } | |
| /* ── Section ──────────────────────────────────── */ | |
| .section { margin-bottom: 7px; } | |
| .section-title { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| color: var(--accent); | |
| border-bottom: 1px solid var(--rule); | |
| padding-bottom: 2px; | |
| margin-bottom: 5px; | |
| } | |
| /* ── Profile Statement ────────────────────────── */ | |
| .profile p { | |
| font-size: 0.84rem; | |
| color: var(--mid); | |
| line-height: 1.45; | |
| } | |
| /* ── Projects ─────────────────────────────────── */ | |
| .project { margin-bottom: 7px; } | |
| .project:last-child { margin-bottom: 0; } | |
| .project-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| margin-bottom: 2px; | |
| } | |
| .project-name { | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| } | |
| .project-tech { | |
| font-size: 0.75rem; | |
| color: var(--light); | |
| font-family: var(--font-mono); | |
| } | |
| .project-desc { | |
| font-size: 0.84rem; | |
| color: var(--mid); | |
| margin-bottom: 3px; | |
| } | |
| .project-bullets { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| .project-bullets li { | |
| font-size: 0.82rem; | |
| color: var(--ink); | |
| padding-left: 12px; | |
| position: relative; | |
| margin-bottom: 1.5px; | |
| line-height: 1.45; | |
| } | |
| .project-bullets li::before { | |
| content: '♦'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--pink); | |
| font-size: 0.55rem; | |
| top: 0.35em; | |
| } | |
| .project-link { | |
| font-size: 0.75rem; | |
| font-family: var(--font-mono); | |
| } | |
| /* ── Contributor Bar ──────────────────────────── */ | |
| .contrib-bar { | |
| margin: 4px 0 3px; | |
| } | |
| .contrib-bar-label { | |
| font-size: 0.68rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--light); | |
| margin-bottom: 3px; | |
| } | |
| .contrib-track { | |
| display: flex; | |
| height: 8px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| background: var(--lavender-soft); | |
| margin-bottom: 4px; | |
| } | |
| .contrib-track span { | |
| display: block; | |
| height: 100%; | |
| transition: width 0.3s ease; | |
| } | |
| .contrib-track .c-kellen { background: var(--accent); } | |
| .contrib-track .c-finn { background: var(--lavender); } | |
| .contrib-track .c-karen { background: var(--pink); } | |
| .contrib-track .c-jadyar { background: var(--pink-soft); } | |
| .contrib-legend { | |
| display: flex; | |
| gap: 12px; | |
| font-size: 0.7rem; | |
| color: var(--mid); | |
| } | |
| .contrib-legend span::before { | |
| content: ''; | |
| display: inline-block; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| margin-right: 3px; | |
| vertical-align: middle; | |
| } | |
| .contrib-legend .l-kellen::before { background: var(--accent); } | |
| .contrib-legend .l-finn::before { background: var(--lavender); } | |
| .contrib-legend .l-karen::before { background: var(--pink); } | |
| .contrib-legend .l-jadyar::before { background: var(--pink-soft); } | |
| .contrib-legend strong { | |
| font-weight: 700; | |
| color: var(--ink); | |
| } | |
| /* ── Skills Grid ──────────────────────────────── */ | |
| .skills-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 4px 20px; | |
| } | |
| .skill-group label { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--accent); | |
| } | |
| .skill-group span { | |
| font-size: 0.82rem; | |
| color: var(--ink); | |
| } | |
| /* ── Education ────────────────────────────────── */ | |
| .edu-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| margin-bottom: 2px; | |
| } | |
| .edu-left { | |
| font-size: 0.88rem; | |
| } | |
| .edu-left strong { | |
| font-weight: 700; | |
| } | |
| .edu-right { | |
| font-size: 0.78rem; | |
| color: var(--light); | |
| white-space: nowrap; | |
| } | |
| .edu-detail { | |
| font-size: 0.8rem; | |
| color: var(--mid); | |
| padding-left: 12px; | |
| margin-bottom: 2px; | |
| } | |
| /* ── Community ────────────────────────────────── */ | |
| .community-items { | |
| font-size: 0.84rem; | |
| color: var(--ink); | |
| line-height: 1.5; | |
| } | |
| .community-items strong { | |
| font-weight: 600; | |
| } | |
| /* ── Footer Row ───────────────────────────────── */ | |
| .footer-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| font-size: 0.82rem; | |
| color: var(--mid); | |
| } | |
| .footer-row .languages span { | |
| margin-right: 14px; | |
| } | |
| .footer-row .languages strong { | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| /* ── Print Styles ─────────────────────────────── */ | |
| @media print { | |
| html { font-size: 12.5px; } | |
| body { | |
| background: none; | |
| -webkit-print-color-adjust: exact; | |
| print-color-adjust: exact; | |
| } | |
| .page { | |
| width: 100%; | |
| min-height: auto; | |
| max-height: none; | |
| margin: 0; | |
| padding: 12px 16px 8px; | |
| box-shadow: none; | |
| } | |
| @page { | |
| size: A4; | |
| margin: 5mm 5mm; | |
| } | |
| a { color: var(--accent) !important; } | |
| a[href]::after { content: none !important; } | |
| } | |
| /* ── Screen < A4 ──────────────────────────────── */ | |
| @media screen and (max-width: 800px) { | |
| .page { | |
| width: 100%; | |
| min-height: auto; | |
| max-height: none; | |
| margin: 0; | |
| padding: 20px 16px; | |
| box-shadow: none; | |
| } | |
| .skills-grid { grid-template-columns: 1fr 1fr; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="page"> | |
| <!-- ── Header ──────────────────────────────── --> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <h1>Kellen Ramos</h1> | |
| <div class="tagline">✨ Backend & Systems Engineer · AI Specialization</div> | |
| </div> | |
| <div class="header-right"> | |
| <span>Berlin, Germany</span> | |
| <span><a href="mailto:kellenramosph@gmail.com">kellenramosph@gmail.com</a></span> | |
| <span><a href="https://github.com/kellenr">github.com/kellenr</a></span> | |
| <span><a href="https://linkedin.com/in/kellenr">linkedin.com/in/kellenr</a></span> | |
| <span><a href="https://pong.kellenr.com">pong.kellenr.com</a></span> | |
| </div> | |
| </header> | |
| <!-- ── Profile ─────────────────────────────── --> | |
| <section class="section profile"> | |
| <p>Designer-turned-systems-engineer who builds software from the metal up — HTTP servers in C++, Unix shells in C, real-time multiplayer apps in SvelteKit. Trained at 42 Berlin's peer-to-peer, zero-lecture program where the only way to learn is to build. Currently pursuing AI specialization while using AI agents daily for prototyping. Brings a designer's eye for clarity: explains complex systems with analogies, not buzzwords.</p> | |
| </section> | |
| <!-- ── Technical Projects ──────────────────── --> | |
| <section class="section"> | |
| <h2 class="section-title">🛠️ Technical Projects</h2> | |
| <div class="project"> | |
| <div class="project-header"> | |
| <span class="project-name">🏓 ft_transcendence — Real-Time Multiplayer Pong</span> | |
| <span class="project-tech">SvelteKit · TypeScript · PostgreSQL · WebSockets · Docker</span> | |
| </div> | |
| <div class="project-desc">Full-stack web app with real-time gameplay, auth, chat, tournaments, and i18n. Team of 4.</div> | |
| <ul class="project-bullets"> | |
| <li>Lead contributor — 43% of commits, 30 PRs merged across auth, real-time chat, tournaments, and CI/CD</li> | |
| <li>Built WebSocket-based notification system, friendship engine, online 1v1 matchmaking, and mobile layout</li> | |
| <li>Set up GitHub Actions deployment pipeline and database migration workflow with Drizzle ORM</li> | |
| <li>Designed UI component system, theme/skin engine, and established logging conventions</li> | |
| </ul> | |
| <div class="contrib-bar"> | |
| <div class="contrib-bar-label">Team contributions (last 3 months · 60 commits · 83 PRs · 46% of her PRs shipped new features)</div> | |
| <div class="contrib-track"> | |
| <span class="c-kellen" style="width:43%"></span> | |
| <span class="c-finn" style="width:25%"></span> | |
| <span class="c-karen" style="width:17%"></span> | |
| <span class="c-jadyar" style="width:15%"></span> | |
| </div> | |
| <div class="contrib-legend"> | |
| <span class="l-kellen"><strong>kellenr 43%</strong></span> | |
| <span class="l-finn">finndark 25%</span> | |
| <span class="l-karen">karenbolon 17%</span> | |
| <span class="l-jadyar">jadyar 15%</span> | |
| </div> | |
| </div> | |
| <span class="project-link"><a href="https://pong.kellenr.com">pong.kellenr.com</a> · <a href="https://github.com/kellenr/Pixie_pong">github.com/kellenr/Pixie_pong</a></span> | |
| </div> | |
| <div class="project"> | |
| <div class="project-header"> | |
| <span class="project-name">🌐 Webserv — HTTP/1.1 Server from Scratch</span> | |
| <span class="project-tech">C++98 · poll() · CGI · NGINX-style config</span> | |
| </div> | |
| <ul class="project-bullets"> | |
| <li>Non-blocking HTTP server supporting GET, POST, DELETE, CGI execution, file uploads, and static hosting</li> | |
| <li>Implemented NGINX-inspired config parser with virtual server blocks and location-based routing</li> | |
| <li>Single poll() event loop handling concurrent connections without threading</li> | |
| </ul> | |
| <span class="project-link"><a href="https://github.com/kellenr/Webserv-karen">github.com/kellenr/Webserv-karen</a></span> | |
| </div> | |
| <div class="project"> | |
| <div class="project-header"> | |
| <span class="project-name">🐚 minishell — Unix Shell in C</span> | |
| <span class="project-tech">C · Process management · Pipes · Signals</span> | |
| </div> | |
| <ul class="project-bullets"> | |
| <li>Reimplemented bash: pipes, redirections, heredocs, env variable expansion, and 7 built-in commands</li> | |
| <li>Signal handling (ctrl-C, ctrl-D, ctrl-\), lexer/parser, and PATH-based binary resolution</li> | |
| </ul> | |
| <span class="project-link"><a href="https://github.com/kellenr/minishell">github.com/kellenr/minishell</a></span> | |
| </div> | |
| <div class="project"> | |
| <div class="project-header"> | |
| <span class="project-name">🐳 Inception — Infrastructure as Code</span> | |
| <span class="project-tech">Docker · Docker Compose · Vagrant · NGINX · MariaDB · WordPress</span> | |
| </div> | |
| <ul class="project-bullets"> | |
| <li>Reproducible multi-container stack: NGINX reverse proxy, WordPress, MariaDB inside a Vagrant-managed VM</li> | |
| <li>One-command provisioning with Makefile automation and environment-based configuration</li> | |
| </ul> | |
| </div> | |
| <div class="project"> | |
| <div class="project-header"> | |
| <span class="project-name">🎮 cub3D — 3D Raycaster</span> | |
| <span class="project-tech">C · Linear algebra · MiniLibX</span> | |
| </div> | |
| <ul class="project-bullets"> | |
| <li>First-person 3D maze renderer using raycasting math — textured walls, floor/ceiling colors, real-time movement</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- ── Technical Skills ────────────────────── --> | |
| <section class="section"> | |
| <h2 class="section-title">💡 Technical Skills</h2> | |
| <div class="skills-grid"> | |
| <div class="skill-group"> | |
| <label>Systems</label><br> | |
| <span>C · C++98 · Process mgmt · Sockets</span> | |
| </div> | |
| <div class="skill-group"> | |
| <label>Web & Backend</label><br> | |
| <span>SvelteKit · TypeScript · PostgreSQL · WebSockets</span> | |
| </div> | |
| <div class="skill-group"> | |
| <label>DevOps</label><br> | |
| <span>Docker · GitHub Actions · Vagrant · Makefile</span> | |
| </div> | |
| <div class="skill-group"> | |
| <label>AI & Tools</label><br> | |
| <span>Claude Code · AI agents · Prompt engineering</span> | |
| </div> | |
| <div class="skill-group"> | |
| <label>Design</label><br> | |
| <span>Illustrator · Photoshop · CSS · UI/UX</span> | |
| </div> | |
| <div class="skill-group"> | |
| <label>Workflow</label><br> | |
| <span>Git · PR-based collab · Drizzle ORM · Linux</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ── Education ───────────────────────────── --> | |
| <section class="section"> | |
| <h2 class="section-title">🎓 Education</h2> | |
| <div class="edu-item"> | |
| <div class="edu-left"><strong>42 Berlin</strong> — Software Engineering (Peer-to-peer, project-based)</div> | |
| <div class="edu-right">2023 – present</div> | |
| </div> | |
| <div class="edu-detail">Core curriculum completed through Transcendence · AI specialization track (in progress)</div> | |
| <div class="edu-item"> | |
| <div class="edu-left"><strong>Freelance Graphic Designer</strong> — Remote via Upwork</div> | |
| <div class="edu-right">2 years</div> | |
| </div> | |
| <div class="edu-detail">Delivered design projects (Illustrator, Photoshop, CSS, Svelte) for international remote clients — <em>"Conscientious, fast, talented, patient and pleasant to communicate with"</em> — Simon-Pierre Vullierme, CEO</div> | |
| </section> | |
| <!-- ── Community ───────────────────────────── --> | |
| <section class="section"> | |
| <h2 class="section-title">🌱 Community</h2> | |
| <div class="community-items"> | |
| <strong>Grizzlies Mentor</strong> — Mentored new students through 42's Piscine, supervised exams | | |
| <strong>Students Council</strong> — Produced and managed the student newsletter | |
| </div> | |
| </section> | |
| <!-- ── Footer ──────────────────────────────── --> | |
| <section class="section"> | |
| <div class="footer-row"> | |
| <div class="languages"> | |
| <strong>Spanish</strong> <span>native</span> | |
| <strong>English</strong> <span>fluent</span> | |
| <strong>German</strong> <span>basic</span> | |
| </div> | |
| <div>🧩 Puzzles · 🎮 Video games | 📍 Berlin · Colombian-Panamanian · Available now</div> | |
| </div> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment