revert change in gitignore and removed index.html

This commit is contained in:
Marina Ferrer committed 2026-03-02 11:54:16 +01:00
1 parent fe6bc97aa9
commit 5b8e5b5177
2 files changed
-878

No files matched your search

-3
View File
@@ -122,9 +122,6 @@ dist
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# Other IDES
.idea/
# yarn v2
.yarn/cache
.yarn/unplugged
-875
View File
@@ -1,875 +0,0 @@
<!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:not(.hero-socials) {
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;
justify-content: center;
align-items: center;
}
.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>
<!-- ═══════════════ 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>
<!-- ═══════════════ 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>
<!-- ═══════════════ 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>
<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>