Files
is-a-dev/index.html
T
2026-03-01 22:46:18 +01:00

870 lines
45 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Marina — Software Engineer</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', sans-serif;
background-color: #030712;
color: #e5e7eb;
min-height: 100vh;
}
.bg-gradient {
position: fixed; inset: 0; z-index: -10;
min-height: 100vh; width: 100%;
background-color: #030712;
background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(245,158,11,0.18), rgba(0,0,0,0));
}
/* ── NAV ── */
header {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
display: flex; align-items: center; justify-content: center;
width: 100%; margin-top: 0.5rem;
}
nav {
display: flex; padding: 0.4rem 0.75rem;
font-size: 0.8rem; font-weight: 500;
border-radius: 9999px; color: #d1d5db;
justify-content: center; align-items: center;
background: rgba(15,15,20,0.75);
backdrop-filter: blur(12px);
border: 1px solid rgba(245,158,11,0.15);
gap: 0.1rem; flex-wrap: wrap;
}
nav a {
position: relative; display: block;
padding: 0.4rem 0.6rem;
transition: color 0.2s; text-decoration: none; color: inherit;
border-radius: 9999px;
}
nav a:hover, nav a.active { color: #f59e0b; }
/* ── LAYOUT ── */
main { padding: 0 1rem; }
.container {
scroll-margin-top: 5rem; width: 100%;
margin-left: auto; margin-right: auto;
}
@media (min-width: 768px) { .container { max-width: 42rem; } }
@media (min-width: 1024px) { .container { max-width: 56rem; } }
/* ── HERO ── */
#top { padding-top: 9rem; padding-bottom: 6rem; }
.hero-avatar {
width: 5rem; height: 5rem; border-radius: 9999px;
margin-bottom: 1rem;
background: linear-gradient(135deg, #f59e0b 0%, #92400e 100%);
display: flex; align-items: center; justify-content: center;
font-size: 2rem; font-weight: 700; color: #030712;
box-shadow: 0 0 0 3px rgba(245,158,11,0.3); flex-shrink: 0;
}
h1 {
color: white; font-size: 2.25rem; font-weight: 700;
display: flex; flex-direction: row; gap: 1rem;
padding-bottom: 1.5rem; line-height: 1.2;
}
@media (min-width: 768px) { h1 { font-size: 3rem; } }
.hero-desc { font-size: 1rem; color: #d1d5db; line-height: 1.75; }
@media (min-width: 768px) { .hero-desc { font-size: 1.25rem; } }
.hero-desc strong { color: #fcd34d; font-weight: 600; }
.hero-socials { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.social-btn {
border-radius: 9999px; border: 1px solid rgba(255,255,255,0.4);
display: inline-flex; justify-content: center; align-items: center;
gap: 0.4rem; padding: 0.5rem 0.75rem; font-size: 0.75rem;
background: rgba(255,255,255,0.05); color: white; text-decoration: none;
transition: all 0.2s;
}
@media (min-width: 768px) { .social-btn { font-size: 1rem; padding: 0.5rem 1rem; } }
.social-btn:hover { transform: scale(1.1); background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.5); }
.social-btn svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) { .social-btn svg { width: 1.5rem; height: 1.5rem; } }
/* ── SECTION SPACING ── */
.sections-wrap { display: flex; flex-direction: column; gap: 9rem; }
/* ── SECTION TITLES ── */
.sec-title {
display: flex; align-items: center; margin-bottom: 1.5rem;
font-size: 1.875rem; font-weight: 600; gap: 0.75rem; color: white;
}
.sec-title svg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
@media (min-width: 768px) { .sec-title svg { width: 2rem; height: 2rem; } }
/* ── ABOUT ── */
.about-article {
display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2rem; color: #d1d5db;
}
@media (min-width: 768px) { .about-article { flex-direction: row; } }
.about-text { order: 2; }
@media (min-width: 768px) { .about-text { order: 1; } }
.about-text p { margin-bottom: 1rem; line-height: 1.75; }
.about-text strong { color: #fef3c7; font-weight: 400; font-family: monospace; }
.about-photo {
order: 1; width: 16rem; height: 16rem;
padding: 0.25rem; border-radius: 1rem;
background: rgba(245,158,11,0.05);
box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
transform: rotate(3deg);
display: flex; align-items: center; justify-content: center;
font-size: 5rem; flex-shrink: 0;
}
@media (min-width: 768px) { .about-photo { order: 2; } }
/* ── SKILLS ── */
.skills-badges-wrap { display: flex; flex-wrap: wrap; gap: 1rem; width: 100%; }
.skills-badges-wrap img { height: 30px; border-radius: 20px; }
/* ── SUB SECTION TITLES ── */
.sub-sec-title {
font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem;
display: flex; gap: 0.75rem; align-items: center; color: white;
}
.sub-sec-title svg { width: 1.5rem; height: 1.5rem; }
/* ── TIMELINE (experience, education, achievements) ── */
.timeline { position: relative; border-left: 1px solid #374151; margin-left: 0.75rem; }
.timeline-item { position: relative; margin-bottom: 2.5rem; padding-left: 1rem; }
.timeline-dot {
position: absolute; width: 0.75rem; height: 0.75rem;
border-radius: 9999px; top: 0.375rem; left: -1.375rem;
border: 1px solid #374151; background: #6b7280;
}
.timeline-date { font-size: 0.9rem; font-weight: 400; color: #bae6fd; line-height: 1; margin-bottom: 0.75rem; }
.timeline-title { font-size: 1.125rem; font-weight: 600; color: #f59e0b; margin-top: 0.75rem; margin-bottom: 0.35rem; }
.timeline-subtitle { font-size: 0.9rem; font-weight: 600; color: #e5e7eb; margin-bottom: 0.75rem; }
.timeline-body { color: #d1d5db; font-size: 0.9rem; line-height: 1.7; }
.timeline-body ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.timeline-body ul li { margin-bottom: 0.35rem; }
.timeline-tag-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.timeline-tag {
font-size: 0.72rem; font-family: monospace;
background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25);
color: #fcd34d; padding: 0.15rem 0.55rem; border-radius: 9999px;
}
/* Achievement images */
.achievement-imgs { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.achievement-imgs img {
border-radius: 0.75rem; width: 20rem; max-width: 100%; height: auto;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
border: 1px solid #374151;
}
.achievement-label {
display: inline-flex; align-items: center; gap: 0.4rem;
font-size: 0.75rem; font-family: monospace;
color: #9ca3af; margin-top: 0.5rem;
}
.achievement-imgs-placeholder {
display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem;
margin-top: 1.25rem;
}
.img-placeholder {
width: 20rem; max-width: 100%; height: 10rem;
border-radius: 0.75rem; border: 1px dashed #374151;
background: rgba(245,158,11,0.04);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.5rem; color: #4b5563; font-size: 0.8rem; font-family: monospace;
}
/* ── PROJECTS ── */
.projects-list { display: flex; flex-direction: column; gap: 4rem; }
.project-article { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) {
.project-article { flex-direction: row; align-items: flex-start; }
.project-article .proj-img-wrap { width: 50%; }
.project-article .proj-body { width: 50%; max-width: 32rem; }
}
.proj-img-wrap {
position: relative; display: flex; flex-direction: column;
align-items: center; border-radius: 0.75rem; overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);
border: 1px solid #1f2937; transition: border-color 0.2s, background 0.2s;
aspect-ratio: 16/10; min-height: 180px;
}
.proj-img-wrap:hover { border-color: #374151; background: rgba(31,41,55,0.5); }
.proj-placeholder {
width: 100%; height: 100%; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 0.5rem; padding: 2rem; min-height: 180px;
}
.proj-placeholder-icon { font-size: 3.5rem; opacity: 0.6; }
.proj-placeholder-label { font-size: 0.75rem; color: #6b7280; font-family: monospace; }
.bg-chat { background: linear-gradient(135deg,#1a1a2e,#16213e); }
.bg-film { background: linear-gradient(135deg,#1a0a0a,#2d1515); }
.bg-skins { background: linear-gradient(135deg,#0a1a0a,#152d15); }
.bg-geo { background: linear-gradient(135deg,#0a0a1a,#15152d); }
.bg-rpc { background: linear-gradient(135deg,#1a1500,#2d2500); }
.bg-ttt { background: linear-gradient(135deg,#1a0a15,#2d1525); }
.proj-body h3 { font-size: 1.5rem; font-weight: 700; color: #f3f4f6; margin-bottom: 0.5rem; }
.proj-tags-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0.5rem; margin-bottom: 0.5rem;
}
.ptag {
display: flex; align-items: center; justify-content: center;
gap: 0.25rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600;
padding: 0.25rem 0.5rem; width: 100%; overflow: hidden;
}
.ptag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-python { color: #306998; background: #FFE873; }
.t-java { color: #fff; background: #5382a1; }
.t-kotlin { color: #fff; background: #7f52ff; }
.t-fastapi { color: #004941; background: #009688; }
.t-flask { color: #fff; background: #2a2a2a; }
.t-android { color: #fff; background: #3ddc84; }
.t-tcp { color: #fff; background: #0f4c81; }
.t-tmdb { color: #fff; background: #01d277; }
.t-spring { color: #fff; background: #6db33f; }
.t-hibernate { color: #fff; background: #59666c; }
.t-junit { color: #fff; background: #dc524a; }
.t-sqlite { color: #fff; background: #003b57; }
.t-firebase { color: #1c1c1c; background: #ffca28; }
.t-maps { color: #fff; background: #4285f4; }
.t-rabbit { color: #fff; background: #ff6600; }
.proj-desc { color: #d1d5db; font-size: 0.9rem; line-height: 1.75; margin-bottom: 0.5rem; }
.proj-private { font-size: 0.8rem; color: #6b7280; margin-bottom: 1rem; font-family: monospace; }
.wip-banner {
background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25);
border-left: 3px solid #f59e0b; border-radius: 0.5rem;
padding: 0.75rem 1rem; font-family: monospace; font-size: 0.8rem;
color: #9ca3af; margin-bottom: 3rem;
}
.show-more-wrap { display: flex; justify-content: center; margin-top: 2rem; }
.show-more-btn {
background: rgba(245,158,11,0.7); color: white;
padding: 0.5rem 1rem; border-radius: 0.5rem; border: none;
cursor: pointer; font-size: 0.9rem; font-family: inherit; transition: background 0.2s;
}
.show-more-btn:hover { background: #f59e0b; }
.project-hidden { display: none; }
/* ── CONTACT ── */
.contact-intro { color: #d1d5db; margin-bottom: 0; }
.contact-form {
background: #1f2937; padding: 1.5rem; border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5); margin-top: 2rem;
display: flex; flex-direction: column; gap: 1rem;
}
.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group label { color: #d1d5db; font-weight: 500; }
.form-group input, .form-group textarea {
width: 100%; margin-top: 0.25rem; padding: 0.5rem;
border: 1px solid #374151; border-radius: 0.5rem;
background: #111827; color: #d1d5db; font-family: inherit;
font-size: 0.95rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.2);
}
.form-group textarea { resize: none; min-height: 8rem; }
.form-submit {
width: 100%; background: rgba(245,158,11,0.75); color: white;
padding: 0.5rem; border-radius: 0.5rem; border: none;
cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 500;
transition: background 0.2s;
}
.form-submit:hover { background: #f59e0b; }
/* ── FOOTER ── */
footer { width: 100%; max-width: 80rem; margin: 2rem auto 0; padding: 1rem; display: flex; align-items: center; justify-content: center; }
.footer-inner { width: 100%; padding: 1rem; display: flex; align-items: center; justify-content: center; }
.footer-inner span { font-size: 0.875rem; color: rgba(255,255,255,0.4); text-align: center; }
.footer-inner a:hover { text-decoration: underline; }
.footer-inner a { color: inherit; }
/* ── UTILS ── */
.mt-20 { margin-top: 5rem; }
.space-y-24 > * + * { margin-top: 6rem; }
@media (max-width: 640px) {
.proj-tags-grid { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<div class="bg-gradient"></div>
<!-- NAV -->
<header>
<nav>
<!--<a href="#top" aria-label="top">Home</a>-->
<a href="#about" aria-label="about">About</a>
<!--<a href="#experience" aria-label="experience">Experience</a>-->
<!--<a href="#education" aria-label="education">Education</a>-->
<!--<a href="#skills" aria-label="skills">Skills</a>-->
<a href="#projects" aria-label="projects">Projects</a>
<!--<a href="#achievements" aria-label="achievements">Achievements</a>-->
<a href="#contact" aria-label="contact">Contact</a>
</nav>
</header>
<main>
<!-- ═══════════════ HERO ═══════════════ -->
<section id="top" class="container" style="padding-top:9rem; padding-bottom:6rem;">
<div class="hero-avatar">M</div>
<h1>Hey, I'm Marina</h1>
<p class="hero-desc">
<strong>Solution-driven software engineer</strong> — curious mindset, always eager to learn.<br />
From Barcelona 🇪🇸 · Native Spanish &amp; Catalan · Fluent English (C1)
</p>
<nav class="hero-socials">
<a class="social-btn" href="https://www.linkedin.com/in/marinucs" target="_blank" rel="noopener noreferrer">
<svg viewBox="0 0 256 256" fill="white" preserveAspectRatio="xMidYMid"><path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"/></svg>
LinkedIn
</a>
<a class="social-btn" href="https://github.com/marinucs" target="_blank" rel="noopener noreferrer">
<svg viewBox="0 0 256 250" fill="white" preserveAspectRatio="xMidYMid"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0z"/></svg>
GitHub
</a>
<a class="social-btn" href="mailto:ismiatesting@gmail.com">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/><path d="M3 7l9 6 9-6"/></svg>
Gmail
</a>
</nav>
</section>
<div class="sections-wrap">
<!-- ═══════════════ ABOUT ═══════════════ -->
<section id="about" class="container">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
About Me
</h2>
<article class="about-article">
<div class="about-text">
<p>Hi! I'm <strong>Marina</strong>, a solution-driven and service-oriented software engineer with a curious mindset, always eager to learn. I care deeply about product quality — through best coding practices, design patterns, and <strong>SOLID principles</strong>.</p>
<p>Proficient in <strong>agile methodologies</strong> and PM tools, familiar with the ALM and the SDLC. I enjoy working across the stack, from data pipelines to backend APIs and mobile apps.</p>
<p>From <strong>Barcelona</strong> 🇪🇸 — native in Spanish and Catalan, fluent in English (C1).</p>
</div>
<div class="about-photo">👩‍💻</div>
</article>
</section>
<!-- ═══════════════ EXPERIENCE ═══════════════ -->
<section id="experience" class="container">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
Experience
</h2>
<ol class="timeline">
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">Jan 2026 – Present · 3 mos</time>
<h3 class="timeline-title">Data Engineer · Full-time</h3>
<p class="timeline-subtitle">Sanofi · Barcelona, Spain · Hybrid</p>
<div class="timeline-body">
<ul>
<li>Build and maintain data engineering solutions and pipelines based on requirements and designs</li>
<li>Optimize ETL/data pipelines for performance, cost, and operational needs</li>
<li>Collaborate with business/product stakeholders in an Agile team to turn requirements into technical implementations</li>
<li>Develop automated tests to support CI/CD pipelines</li>
<li>Create design/development documentation for knowledge sharing and long-term maintenance</li>
<li>Support and troubleshoot production Data Objects as needed</li>
</ul>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Python</span>
<span class="timeline-tag">ETL</span>
<span class="timeline-tag">Snowflake</span>
<span class="timeline-tag">CI/CD</span>
<span class="timeline-tag">Agile</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">Jan 2025 – Dec 2025 · 1 yr</time>
<h3 class="timeline-title">ITS Architect – ERP Technical Integration Graduate · Apprenticeship</h3>
<p class="timeline-subtitle">Sanofi · Barcelona, Spain · Hybrid</p>
<div class="timeline-body">
<ul>
<li>Assessed and tested technical solutions, supporting scoping, integration, and QA during implementation</li>
<li>Scripting and process automation with Python and Power Automate</li>
<li>Monitored tools, processes, and governance meetings to ensure integration standards</li>
<li>Maintained documentation and updated the knowledge base for transparency and alignment</li>
<li>Prepared reports on project status, risks, and action plans for leadership</li>
</ul>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Python</span>
<span class="timeline-tag">Power Automate</span>
<span class="timeline-tag">SAP</span>
<span class="timeline-tag">Confluence</span>
<span class="timeline-tag">ERP</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2024 · Less than a year</time>
<h3 class="timeline-title">B2B Backend Developer Intern</h3>
<p class="timeline-subtitle">bookline.ai · Barcelona, Spain · Hybrid</p>
<div class="timeline-body">
<p>Developed conversational AI bots across voice and WhatsApp, contributing to handling over <strong style="color:#fef3c7;font-weight:500;">3 million calls annually</strong> across 350+ client locations.</p>
<ul style="margin-top:0.5rem;">
<li>Wrote, tested, and reviewed code for various projects; contributed to design ideas</li>
<li>Led code migrations and integration projects, including backend APIs</li>
<li>Collaborated with technical leads and sales managers to ensure product delivery</li>
<li>Contributed to the development of the platform and infrastructure</li>
</ul>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Python</span>
<span class="timeline-tag">Docker</span>
<span class="timeline-tag">FastAPI</span>
<span class="timeline-tag">Conversational AI</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2017 – 2024 · 7 yrs</time>
<h3 class="timeline-title">Transport Booking Unit Customer Advisor</h3>
<p class="timeline-subtitle">Booking.com · Greater Barcelona Metropolitan Area · Remote</p>
<div class="timeline-body">
<ul>
<li>Provided customer support via phone, chat, and email</li>
<li>Troubleshot App/Website issues and supplier problem solving</li>
<li>Handled car rental reservations</li>
</ul>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Problem Solving</span>
<span class="timeline-tag">Customer Support</span>
<span class="timeline-tag">Attention to Detail</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2016 – 2017 · 1 yr</time>
<h3 class="timeline-title">Google Android Tech Support</h3>
<p class="timeline-subtitle">SELLBYTEL Group · Barcelona, Spain · On-site</p>
<div class="timeline-body">
<ul>
<li>Provided technical advice via phone, email, and chat for Android devices and Google Play Store</li>
<li>Empathy and connecting with customers was the key to delivering great customer service</li>
</ul>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Android</span>
<span class="timeline-tag">Technical Support</span>
<span class="timeline-tag">Problem Solving</span>
</div>
</li>
</ol>
</section>
<!-- ═══════════════ EDUCATION ═══════════════ -->
<section id="education" class="container">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 4v16h-12a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2h12z"/><path d="M19 16h-12a2 2 0 0 0-2 2"/><path d="M9 8h6"/></svg>
Education
</h2>
<ol class="timeline">
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2025 · Grade: 10/10</time>
<h3 class="timeline-title">SAP ABAP Programming Certificate</h3>
<p class="timeline-subtitle">ESNECA Business School · Vendor/Product Certification</p>
<div class="timeline-body">
<p>300-hour specialized training in ABAP programming, covering installation, database management, and custom program development to enhance and optimize SAP systems for businesses.</p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">SAP ABAP</span>
<span class="timeline-tag">GxP</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2024</time>
<h3 class="timeline-title">Higher Technician Certificate in Multi-platform Application Development</h3>
<p class="timeline-subtitle">Institut TIC de Barcelona</p>
<div class="timeline-body">
<p>Developing, installing, documenting, and maintaining multi-platform applications, ensuring secure data access and compliance with usability and quality standards.</p>
<p style="margin-top:0.5rem;">🤖 Mobile development project recognition for Geocaching app.</p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Java</span><span class="timeline-tag">Kotlin</span>
<span class="timeline-tag">Spring Boot</span><span class="timeline-tag">Docker</span>
<span class="timeline-tag">Firebase</span><span class="timeline-tag">Kotlin</span>
<span class="timeline-tag">RabbitMQ</span><span class="timeline-tag">Flutter</span>
<span class="timeline-tag">Android</span><span class="timeline-tag">JUnit</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2023 · Grade: 9.7/10</time>
<h3 class="timeline-title">College Extension Certificate in Artificial Intelligence</h3>
<p class="timeline-subtitle">Universidad de Málaga · SAMSUNG Innovation Campus</p>
<div class="timeline-body">
<p>358 hours covering Python, Statistics, Machine Learning I–III, Deep Learning I–II, and a final AI project.</p>
<p style="margin-top:0.5rem;">🧠 Final project: <em>Deep Learning Approach for Screening Autism Spectrum Disorder in Children with Facial Images.</em></p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Python</span><span class="timeline-tag">TensorFlow</span>
<span class="timeline-tag">Keras</span><span class="timeline-tag">Scikit-learn</span>
<span class="timeline-tag">Deep Learning</span><span class="timeline-tag">OpenCV</span>
<span class="timeline-tag">NumPy</span><span class="timeline-tag">Pandas</span>
</div>
</li>
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">2019</time>
<h3 class="timeline-title">Back-End Development Bootcamp</h3>
<p class="timeline-subtitle">IT Academy de Barcelona Activa</p>
<div class="timeline-body">
<p>300-hour mentoring model covering Java, Spring, MySQL, and version control through online self-learning platforms and real-project simulation teams.</p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Java</span><span class="timeline-tag">Spring Boot</span>
<span class="timeline-tag">Hibernate</span><span class="timeline-tag">MySQL</span>
<span class="timeline-tag">React</span>
</div>
</li>
</ol>
</section>
<!-- ═══════════════ SKILLS ═══════════════ -->
<section id="skills" class="container">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 19l18 0"/><path d="M5 6m0 1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1z"/></svg>
Skills
</h2>
<div class="skills-badges-wrap">
<img src="https://img.shields.io/badge/FastAPI-009688?style=for-the-badge&logo=fastapi&logoColor=white" alt="FastAPI" />
<img src="https://img.shields.io/badge/Flask-000000?style=for-the-badge&logo=flask&logoColor=white" alt="Flask" />
<img src="https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=FFE873" alt="Python" />
<img src="https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=openjdk&logoColor=white" alt="Java" />
<img src="https://img.shields.io/badge/Kotlin-7F52FF?style=for-the-badge&logo=kotlin&logoColor=white" alt="Kotlin" />
<img src="https://img.shields.io/badge/Snowflake-29B5E8?style=for-the-badge&logo=snowflake&logoColor=white" alt="Snowflake" />
<img src="https://img.shields.io/badge/Firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=1C1C1C" alt="Firebase" />
<img src="https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black" alt="Linux" />
<img src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white" alt="Git" />
<img src="https://img.shields.io/badge/Docker-2496ED?style=for-the-badge&logo=docker&logoColor=white" alt="Docker" />
<img src="https://img.shields.io/badge/Kubernetes-326CE5?style=for-the-badge&logo=kubernetes&logoColor=white" alt="Kubernetes" />
<img src="https://img.shields.io/badge/SAP-0FAAFF?style=for-the-badge&logo=sap&logoColor=white" alt="SAP" />
<img src="https://img.shields.io/badge/Spring_Boot-6DB33F?style=for-the-badge&logo=spring-boot&logoColor=white" alt="Spring Boot" />
<img src="https://img.shields.io/badge/RabbitMQ-FF6600?style=for-the-badge&logo=rabbitmq&logoColor=white" alt="RabbitMQ" />
<img src="https://img.shields.io/badge/TensorFlow-FF6F00?style=for-the-badge&logo=tensorflow&logoColor=white" alt="TensorFlow" />
<img src="https://img.shields.io/badge/Android-3DDC84?style=for-the-badge&logo=android&logoColor=white" alt="Android" />
<img src="https://img.shields.io/badge/PostgreSQL-4169E1?style=for-the-badge&logo=postgresql&logoColor=white" alt="PostgreSQL" />
<img src="https://img.shields.io/badge/Power_Automate-0066FF?style=for-the-badge&logo=power-automate&logoColor=white" alt="Power Automate" />
</div>
</section>
<!-- ═══════════════ PROJECTS ═══════════════ -->
<section id="projects" class="container">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8l-4 4 4 4"/><path d="M17 8l4 4-4 4"/><path d="M14 4l-4 16"/></svg>
Projects
</h2>
<div class="wip-banner">
⚠️ This section currently showcases academic projects — professional projects will be added soon.
</div>
<div class="projects-list">
<article class="project-article">
<div class="proj-img-wrap bg-chat">
<div class="proj-placeholder">
<div class="proj-placeholder-icon">💬</div>
<div class="proj-placeholder-label">Android Chat</div>
</div>
</div>
<div class="proj-body">
<h3>Android Chat</h3>
<div class="proj-tags-grid">
<span class="ptag t-java"><span>Java</span></span>
<span class="ptag t-android"><span>Android</span></span>
<span class="ptag t-tcp"><span>TCP Sockets</span></span>
</div>
<p class="proj-desc">A client-server Android chat application using TCP sockets for bidirectional communication. Features asynchronous task handling and multithreading for network operations.</p>
</div>
</article>
<article class="project-article">
<div class="proj-img-wrap bg-film">
<div class="proj-placeholder">
<div class="proj-placeholder-icon">🎬</div>
<div class="proj-placeholder-label">FilmApp</div>
</div>
</div>
<div class="proj-body">
<h3>FilmApp</h3>
<div class="proj-tags-grid">
<span class="ptag t-kotlin"><span>Kotlin</span></span>
<span class="ptag t-android"><span>Android</span></span>
<span class="ptag t-tmdb"><span>TMDB API</span></span>
</div>
<p class="proj-desc">An Android app for tracking movies and TV shows — mark them as seen or pending. Integrates with The Internet Movie Database (TMDB) API.</p>
<p class="proj-private">🔒 Available as a private project upon request</p>
</div>
</article>
<article class="project-article">
<div class="proj-img-wrap bg-skins">
<div class="proj-placeholder">
<div class="proj-placeholder-icon">🎮</div>
<div class="proj-placeholder-label">Gameskins</div>
</div>
</div>
<div class="proj-body">
<h3>Gameskins</h3>
<div class="proj-tags-grid">
<span class="ptag t-java"><span>Java</span></span>
<span class="ptag t-spring"><span>Spring Boot</span></span>
<span class="ptag t-hibernate"><span>Hibernate</span></span>
<span class="ptag t-junit"><span>JUnit</span></span>
<span class="ptag t-sqlite"><span>SQLite</span></span>
</div>
<p class="proj-desc">A RESTful API for querying, acquiring, modifying, and deleting video game skins. Uses JSON for loading skins and SQLite for storing user data. Includes OpenAPI/Swagger documentation.</p>
<p class="proj-private">🔒 Available as a private project upon request</p>
</div>
</article>
<article class="project-article project-hidden">
<div class="proj-img-wrap bg-geo">
<div class="proj-placeholder">
<div class="proj-placeholder-icon">🗺️</div>
<div class="proj-placeholder-label">Geocatchdis</div>
</div>
</div>
<div class="proj-body">
<h3>Geocatchdis</h3>
<div class="proj-tags-grid">
<span class="ptag t-kotlin"><span>Kotlin</span></span>
<span class="ptag t-firebase"><span>Firebase</span></span>
<span class="ptag t-android"><span>Android</span></span>
<span class="ptag t-maps"><span>Google Maps</span></span>
</div>
<p class="proj-desc">An Android app for exploring geocaches and logging finds. Features interactive Google Maps integration, user accounts, personalized reports, and customizable settings.</p>
<p class="proj-private">🔒 Available as a private project upon request</p>
</div>
</article>
<article class="project-article project-hidden">
<div class="proj-img-wrap bg-rpc">
<div class="proj-placeholder">
<div class="proj-placeholder-icon">✅</div>
<div class="proj-placeholder-label">RPC To-Do List</div>
</div>
</div>
<div class="proj-body">
<h3>RPC To-Do List</h3>
<div class="proj-tags-grid">
<span class="ptag t-python"><span>Python</span></span>
<span class="ptag t-flask"><span>Flask</span></span>
<span class="ptag t-rabbit"><span>RabbitMQ</span></span>
<span class="ptag t-sqlite"><span>SQLite</span></span>
</div>
<p class="proj-desc">A modular Python application with a component-based architecture and RESTful API. Uses SQLite for persistence and RabbitMQ for asynchronous messaging and RPC communication.</p>
</div>
</article>
<article class="project-article project-hidden">
<div class="proj-img-wrap bg-ttt">
<div class="proj-placeholder">
<div class="proj-placeholder-icon">⭕</div>
<div class="proj-placeholder-label">Tic Tac Toe</div>
</div>
</div>
<div class="proj-body">
<h3>Tic Tac Toe</h3>
<div class="proj-tags-grid">
<span class="ptag t-java"><span>Java</span></span>
<span class="ptag t-android"><span>Android</span></span>
<span class="ptag t-tcp"><span>TCP Sockets</span></span>
</div>
<p class="proj-desc">A multiplayer game with an Android client and Java backend server. Implements turn-based logic, board management, winner validation, and multithreading for concurrent players.</p>
</div>
</article>
</div>
<div class="show-more-wrap">
<button id="showMoreBtn" class="show-more-btn" onclick="toggleProjects()">Show more</button>
</div>
</section>
<!-- ═══════════════ ACHIEVEMENTS ═══════════════ -->
<section id="achievements" class="container">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 21l8 0"/><path d="M12 17l0 4"/><path d="M7 4l10 0"/><path d="M17 4v8a5 5 0 0 1-10 0v-8"/><path d="M5 9m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/><path d="M19 9m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/></svg>
Achievements
</h2>
<ol class="timeline">
<!-- Schneider Electric Hackathon -->
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">Apr 2025 · Issued by Schneider Electric</time>
<h3 class="timeline-title">🥇 1st place — IT Challenge · Schneider Electric Hackathon 2025</h3>
<div class="timeline-body">
<p>Modernized an ERP system using Python. Built a data pipeline, developed a Flask API for legacy systems integration, solved algorithmic challenges, crafted SQL queries for data insights, and optimized business operations.</p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Python</span>
<span class="timeline-tag">Flask</span>
<span class="timeline-tag">SQL</span>
<span class="timeline-tag">ETL</span>
<span class="timeline-tag">ERP</span>
</div>
<!-- Replace the src values below with your actual images when ready -->
<div class="achievement-imgs-placeholder">
<div class="img-placeholder">
<span style="font-size:2rem;">🏆</span>
<span>Leaderboard image</span>
<span style="font-size:0.65rem;color:#374151;">(to be replaced)</span>
</div>
<div class="img-placeholder">
<span style="font-size:2rem;">📣</span>
<span>Winner announcement</span>
<span style="font-size:0.65rem;color:#374151;">(to be replaced)</span>
</div>
</div>
</li>
<!-- CaixaBank Tech -->
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">Dec 2024 · Issued by CaixaBank Tech</time>
<h3 class="timeline-title">🏅 4th place — Python Backend · Coding Challenges Round 1</h3>
<div class="timeline-body">
<p>Developed a Python backend API for a financial app, focusing on account management, transaction security, and personalized financial tools.</p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Python</span>
<span class="timeline-tag">Backend API</span>
<span class="timeline-tag">Fintech</span>
</div>
<div class="achievement-imgs-placeholder">
<div class="img-placeholder">
<span style="font-size:2rem;">📊</span>
<span>Leaderboard image</span>
<span style="font-size:0.65rem;color:#374151;">(to be replaced)</span>
</div>
</div>
</li>
<!-- ITIC Geocaching -->
<li class="timeline-item">
<div class="timeline-dot"></div>
<time class="timeline-date">Jun 2023 · Issued by Institut TIC de Barcelona</time>
<h3 class="timeline-title">📱 Mobile Programming Recognition — Android App «Geocaching»</h3>
<div class="timeline-body">
<p>Mobile Programming Certification for the Android app 'Geocaching', developed in Kotlin, issued by ITIC Barcelona (formerly Institut Joan d'Austria).</p>
</div>
<div class="timeline-tag-wrap">
<span class="timeline-tag">Kotlin</span>
<span class="timeline-tag">Android</span>
<span class="timeline-tag">Firebase</span>
<span class="timeline-tag">Google Maps</span>
</div>
<div class="achievement-imgs-placeholder">
<div class="img-placeholder">
<span style="font-size:2rem;">📜</span>
<span>Certificate</span>
<span style="font-size:0.65rem;color:#374151;">(to be replaced)</span>
</div>
</div>
</li>
</ol>
</section>
<!-- ═══════════════ CONTACT ═══════════════ -->
<section id="contact" class="container" style="padding-bottom:6rem;">
<h2 class="sec-title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/><path d="M3 7l9 6 9-6"/></svg>
Contact
</h2>
<p class="contact-intro">Not working yet</p>
<!--<p class="contact-intro">Did you like what you saw? Don't hesitate to reach out — I'd love to hear from you!</p>-->
<form class="contact-form" onsubmit="handleSubmit(event)">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="your@email.com" required />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Your message..." required></textarea>
</div>
<button type="submit" class="form-submit">Send</button>
</form>
</section>
</div>
</main>
<footer>
<div class="footer-inner">
<span>© 2026 <a href="https://github.com/marinucs">Marina.</a> Built with care from Barcelona.</span>
</div>
</footer>
<script>
// Show more / less projects
let projectsVisible = false;
function toggleProjects() {
projectsVisible = !projectsVisible;
document.querySelectorAll('.project-hidden').forEach(el => {
el.style.display = projectsVisible ? 'flex' : 'none';
});
document.getElementById('showMoreBtn').textContent = projectsVisible ? 'Show less' : 'Show more';
}
// Active nav highlight on scroll
document.addEventListener('DOMContentLoaded', () => {
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('header nav a');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
navLinks.forEach(link => {
link.classList.toggle('active', link.getAttribute('aria-label') === entry.target.id);
});
}
});
}, { root: null, rootMargin: '0px', threshold: 0.25 });
sections.forEach(s => observer.observe(s));
});
// Contact form
function handleSubmit(e) {
e.preventDefault();
const btn = e.target.querySelector('.form-submit');
btn.textContent = '✓ Sent!';
btn.style.background = '#10b981';
setTimeout(() => { btn.textContent = 'Send'; btn.style.background = ''; e.target.reset(); }, 3000);
}
</script>
</body>
</html>