mirror of
https://github.com/tiennm99/is-a-dev.git
synced 2026-10-07 16:16:31 +00:00
870 lines
45 KiB
HTML
870 lines
45 KiB
HTML
<!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 & 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>
|