Skip to content

Commit 1d1da92

Browse files
cfusterotcfusterot
committed
Unify font
1 parent 66e977b commit 1d1da92

3 files changed

Lines changed: 98 additions & 110 deletions

File tree

‎cv.html‎

Lines changed: 5 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>CV | Coral Fustero-Torre</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9-
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Pixelify+Sans:[email protected]&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
1010
<style>
1111
:root {
1212
--text-color: #1a1a1a;
@@ -35,7 +35,7 @@
3535
.logo {
3636
text-decoration: none;
3737
color: #000;
38-
font-family: 'Pixelify Sans', sans-serif;
38+
font-weight: 700;
3939
font-size: 1.2rem;
4040
}
4141

@@ -70,8 +70,8 @@
7070
section { margin-bottom: 3.5rem; }
7171

7272
h2 {
73-
font-family: 'Pixelify Sans', sans-serif;
7473
font-size: 1.1rem;
74+
font-weight: 700;
7575
text-transform: uppercase;
7676
border-bottom: 1px solid var(--border-color);
7777
padding-bottom: 5px;
@@ -98,13 +98,6 @@
9898
.cv-description { font-size: 0.9rem; margin: 0; padding: 0; }
9999
.cv-description li { list-style: none; margin-bottom: 3px; }
100100

101-
.tools-grid {
102-
display: grid;
103-
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
104-
gap: 10px;
105-
font-size: 0.9rem;
106-
}
107-
108101
footer {
109102
padding: 3rem 2rem;
110103
max-width: 800px;
@@ -128,86 +121,12 @@
128121
</header>
129122

130123
<main>
131-
<a href="Coral_Fustero_CV2025.pdf" class="download-btn" target="_blank">Download PDF Version</a>
124+
<a href="Coral_Fustero_CV2025.pdf" class="download-btn" target="_blank">Download Full CV (PDF)</a>
132125

133126
<section>
134127
<h2>Experience</h2>
135128

136129
<div class="cv-item">
137130
<div class="cv-content">
138131
<span class="cv-title">Postdoctoral Researcher</span>
139-
<span class="cv-subtitle">Berlin Institute for Medical Systems Biology | Berlin Institute of Health</span>
140-
<ul class="cv-description">
141-
<li>• Integrated single cell multi-omic characterization and clonal tracing in clonal hematopoiesis</li>
142-
</ul>
143-
</div>
144-
<div class="cv-date">2022 — 2025</div>
145-
</div>
146-
147-
<div class="cv-item">
148-
<div class="cv-content">
149-
<span class="cv-title">Computational Biologist</span>
150-
<span class="cv-subtitle">Spanish National Cancer Research Center (CNIO)</span>
151-
<ul class="cv-description">
152-
<li>• Analysis, quality control and functional characterization of NGS data</li>
153-
<li>• Pipeline automation via Snakemake</li>
154-
<li>• Script programming in R and bioinformatic support</li>
155-
</ul>
156-
</div>
157-
<div class="cv-date">2015 — 2022</div>
158-
</div>
159-
160-
<div class="cv-item">
161-
<div class="cv-content">
162-
<span class="cv-title">Lecturer</span>
163-
<span class="cv-subtitle">Charité Universitätsmedizin Berlin</span>
164-
<ul class="cv-description">
165-
<li>• International Master's Program in Molecular Medicine</li>
166-
</ul>
167-
</div>
168-
<div class="cv-date">2023</div>
169-
</div>
170-
</section>
171-
172-
<section>
173-
<h2>Education</h2>
174-
<div class="cv-item">
175-
<div class="cv-content">
176-
<span class="cv-title">PhD in Molecular Biosciences</span>
177-
<span class="cv-subtitle">Universidad Autónoma de Madrid</span>
178-
</div>
179-
<div class="cv-date">2018 — 2022</div>
180-
</div>
181-
<div class="cv-item">
182-
<div class="cv-content">
183-
<span class="cv-title">MSc in Bioinformatics and Computational Biology</span>
184-
<span class="cv-subtitle">Universidad Autónoma de Madrid</span>
185-
</div>
186-
<div class="cv-date">2016 — 2018</div>
187-
</div>
188-
<div class="cv-item">
189-
<div class="cv-content">
190-
<span class="cv-title">BSc in Biotechnology</span>
191-
<span class="cv-subtitle">Universitat de Barcelona</span>
192-
</div>
193-
<div class="cv-date">2008 — 2013</div>
194-
</div>
195-
</section>
196-
197-
<section>
198-
<h2>Technical Tools</h2>
199-
<div class="tools-grid">
200-
<div>• R </div>
201-
<div>• Snakemake </div>
202-
<div>• Python </div>
203-
<div>• Linux/Shell </div>
204-
</div>
205-
</section>
206-
</main>
207-
208-
<footer>
209-
&copy; 2025 Coral Fustero-Torre | Computational Biologist
210-
</footer>
211-
212-
</body>
213-
</html>
132+
<span class="cv-subtitle">Berlin Institute for Medical Systems

‎index.html‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
¡Entendido perfectamente! 🤝 Aplicaré los cambios de inmediato para que todo el sitio (index, visuals y cv) use exclusivamente la fuente Courier Prime ⌨️. Olvidaremos por completo la Pixelify Sans.
2+
3+
Como estamos trabajando con tres archivos diferentes, vamos a centrarnos primero en dejar el index.html impecable. He mantenido tu biografía completa y todos tus enlaces originales a PubMed exactamente como los tenías.
4+
5+
Aquí tienes el código completo para tu index.html:
6+
HTML
7+
18
<!DOCTYPE html>
29
<html lang="en">
310
<head>
@@ -6,7 +13,7 @@
613
<title>Coral Fustero-Torre, PhD</title>
714
<link rel="preconnect" href="https://fonts.googleapis.com">
815
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9-
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Pixelify+Sans:[email protected]&display=swap" rel="stylesheet">
16+
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
1017
<style>
1118
:root {
1219
--text-color: #1a1a1a;
@@ -30,17 +37,16 @@
3037
}
3138

3239
h1 {
33-
font-family: 'Pixelify Sans', sans-serif;
34-
font-weight: 600;
35-
font-size: 2.2rem;
40+
font-weight: 700;
41+
font-size: 1.8rem;
3642
margin: 0;
37-
letter-spacing: -1px;
43+
letter-spacing: -0.5px;
3844
}
3945

4046
.subtitle {
41-
font-size: 0.9rem;
47+
font-size: 0.95rem;
4248
color: var(--light-grey);
43-
margin-top: 0.3rem;
49+
margin-top: 0.5rem;
4450
}
4551

4652
nav {
@@ -53,7 +59,7 @@
5359
text-decoration: none;
5460
color: var(--text-color);
5561
margin-right: 30px;
56-
font-size: 0.9rem;
62+
font-size: 0.95rem;
5763
font-weight: 400;
5864
transition: opacity 0.3s;
5965
}
@@ -69,11 +75,12 @@
6975
section { margin-bottom: 4rem; }
7076

7177
h2 {
72-
font-family: 'Pixelify Sans', sans-serif;
7378
font-size: 1.1rem;
79+
font-weight: 700;
7480
text-transform: uppercase;
75-
letter-spacing: 1px;
7681
margin-bottom: 1.5rem;
82+
border-bottom: 1px solid var(--border-color);
83+
padding-bottom: 5px;
7784
color: var(--text-color);
7885
margin-top: 0;
7986
}

‎visuals.html‎

Lines changed: 76 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Visuals | Coral Fustero-Torre</title>
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9-
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Pixelify+Sans:[email protected]&display=swap" rel="stylesheet">
9+
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
1010
<style>
1111
:root {
1212
--text-color: #1a1a1a;
@@ -21,10 +21,11 @@
2121
padding: 0;
2222
background-color: var(--bg-color);
2323
color: var(--text-color);
24+
-webkit-font-smoothing: antialiased;
2425
}
2526

2627
header {
27-
padding: 3rem 2rem;
28+
padding: 4rem 2rem 1rem 2rem;
2829
max-width: 1400px;
2930
margin: 0 auto;
3031
display: flex;
@@ -35,29 +36,33 @@
3536
.logo {
3637
text-decoration: none;
3738
color: #000;
38-
font-family: 'Pixelify Sans', sans-serif;
39-
font-size: 1.2rem;
39+
font-weight: 700;
40+
font-size: 1.2rem;
41+
letter-spacing: -0.5px;
4042
}
4143

4244
nav a {
4345
text-decoration: none;
44-
color: var(--light-grey);
45-
font-size: 0.9rem;
46+
color: var(--text-color);
47+
font-size: 0.95rem;
48+
font-weight: 400;
4649
}
4750

48-
main { padding: 0 2rem 5rem 2rem; max-width: 1400px; margin: 0 auto; }
51+
nav a:hover { opacity: 0.5; }
52+
53+
main { padding: 2rem 2rem 5rem 2rem; max-width: 1400px; margin: 0 auto; }
4954

5055
.section-title {
51-
font-family: 'Pixelify Sans', sans-serif;
52-
font-size: 1rem;
56+
font-size: 1.1rem;
57+
font-weight: 700;
5358
text-transform: uppercase;
54-
letter-spacing: 2px;
5559
color: var(--text-color);
5660
margin: 4rem 0 2rem 0;
5761
border-bottom: 1px solid var(--border);
58-
padding-bottom: 10px;
62+
padding-bottom: 5px;
5963
}
6064

65+
/* Masonry Layout */
6166
.masonry-gallery {
6267
column-count: 4;
6368
column-gap: 20px;
@@ -67,6 +72,7 @@
6772
break-inside: avoid;
6873
margin-bottom: 20px;
6974
cursor: pointer;
75+
overflow: hidden;
7076
border: 1px solid var(--border);
7177
}
7278

@@ -76,8 +82,11 @@
7682
transition: opacity 0.3s ease;
7783
}
7884

79-
.gallery-item:hover img { opacity: 0.7; }
85+
.gallery-item:hover img {
86+
opacity: 0.7;
87+
}
8088

89+
/* Lightbox */
8190
.lightbox {
8291
position: fixed;
8392
top: 0; left: 0;
@@ -96,6 +105,7 @@
96105
box-shadow: 0 5px 25px rgba(0,0,0,0.05);
97106
}
98107

108+
/* Responsive */
99109
@media (max-width: 1100px) { .masonry-gallery { column-count: 3; } }
100110
@media (max-width: 800px) { .masonry-gallery { column-count: 2; } }
101111
@media (max-width: 500px) { .masonry-gallery { column-count: 1; } }
@@ -109,15 +119,65 @@
109119
</header>
110120

111121
<main>
122+
112123
<h2 class="section-title">01. Photography</h2>
113124
<div class="masonry-gallery">
114125
<div class="gallery-item"><img src="img/photography/R1-04013-0007.jpg" alt=""></div>
115-
</div>
126+
<div class="gallery-item"><img src="img/photography/R1-04013-0010.jpg" alt=""></div>
127+
<div class="gallery-item"><img src="img/photography/R1-04013-0012.jpg" alt=""></div>
128+
<div class="gallery-item"><img src="img/photography/R1-04415-002A.jpg" alt=""></div>
129+
<div class="gallery-item"><img src="img/photography/R1-04415-023A.jpg" alt=""></div>
130+
<div class="gallery-item"><img src="img/photography/R1-04415-024A.jpg" alt=""></div>
131+
<div class="gallery-item"><img src="img/photography/R1-04726-0003.jpg" alt=""></div>
132+
<div class="gallery-item"><img src="img/photography/R1-04726-0008.jpg" alt=""></div>
133+
<div class="gallery-item"><img src="img/photography/R1-04726-0014.jpg" alt=""></div>
134+
<div class="gallery-item"><img src="img/photography/R1-04726-0016.jpg" alt=""></div>
135+
<div class="gallery-item"><img src="img/photography/R1-04726-0026.jpg" alt=""></div>
136+
<div class="gallery-item"><img src="img/photography/R1-04874-0005.jpg" alt=""></div>
137+
<div class="gallery-item"><img src="img/photography/R1-04874-0008.jpg" alt=""></div>
138+
<div class="gallery-item"><img src="img/photography/R1-04874-0012.jpg" alt=""></div>
139+
<div class="gallery-item"><img src="img/photography/R1-04874-0023.jpg" alt=""></div>
140+
<div class="gallery-item"><img src="img/photography/R1-04874-0024.jpg" alt=""></div>
141+
<div class="gallery-item"><img src="img/photography/R1-04874-0026.jpg" alt=""></div>
142+
<div class="gallery-item"><img src="img/photography/R1-05053-0004.jpg" alt=""></div>
143+
<div class="gallery-item"><img src="img/photography/R1-05053-0027.jpg" alt=""></div>
144+
<div class="gallery-item"><img src="img/photography/R1-05053-0028.jpg" alt=""></div>
145+
<div class="gallery-item"><img src="img/photography/R1-05053-0036.jpg" alt=""></div>
146+
<div class="gallery-item"><img src="img/photography/R1-05053-0037.jpg" alt=""></div>
147+
<div class="gallery-item"><img src="img/photography/R1-05190-0009.jpg" alt=""></div>
148+
<div class="gallery-item"><img src="img/photography/R1-05190-0015.jpg" alt=""></div>
149+
<div class="gallery-item"><img src="img/photography/R1-04415-243A.jpg" alt=""></div>
150+
<div class="gallery-item"><img src="img/photography/R1-05053-3387.jpg" alt=""></div>
151+
<div class="gallery-item"><img src="img/photography/R1-04723-0004.jpg" alt=""></div>
152+
<div class="gallery-item"><img src="img/photography/R1-04724-0024.jpg" alt=""></div>
153+
<div class="gallery-item"><img src="img/photography/R1-05190-0004.jpg" alt=""></div>
154+
<div class="gallery-item"><img src="img/photography/R1-05190-0008.jpg" alt=""></div>
155+
<div class="gallery-item"><img src="img/photography/R1-04726-0024.jpg" alt=""></div>
156+
<div class="gallery-item"><img src="img/photography/R1-04726-0028.jpg" alt=""></div>
157+
</div>
116158

117159
<h2 class="section-title">02. Collage</h2>
118160
<div class="masonry-gallery">
119161
<div class="gallery-item"><img src="img/collage/1.png" alt=""></div>
120-
</div>
162+
<div class="gallery-item"><img src="img/collage/2.png" alt=""></div>
163+
<div class="gallery-item"><img src="img/collage/3.png" alt=""></div>
164+
<div class="gallery-item"><img src="img/collage/4.png" alt=""></div>
165+
<div class="gallery-item"><img src="img/collage/5.png" alt=""></div>
166+
<div class="gallery-item"><img src="img/collage/6.png" alt=""></div>
167+
<div class="gallery-item"><img src="img/collage/7.png" alt=""></div>
168+
<div class="gallery-item"><img src="img/collage/8.png" alt=""></div>
169+
<div class="gallery-item"><img src="img/collage/9.png" alt=""></div>
170+
<div class="gallery-item"><img src="img/collage/10.png" alt=""></div>
171+
<div class="gallery-item"><img src="img/collage/11.png" alt=""></div>
172+
<div class="gallery-item"><img src="img/collage/12.png" alt=""></div>
173+
<div class="gallery-item"><img src="img/collage/13.png" alt=""></div>
174+
<div class="gallery-item"><img src="img/collage/14.png" alt=""></div>
175+
</div>
176+
177+
<h2 class="section-title">03. Memory</h2>
178+
<div class="masonry-gallery">
179+
</div>
180+
121181
</main>
122182

123183
<div id="lightbox" class="lightbox" onclick="this.style.display='none'">
@@ -127,6 +187,7 @@ <h2 class="section-title">02. Collage</h2>
127187
<script>
128188
const lightbox = document.getElementById('lightbox');
129189
const lightboxImg = document.getElementById('lightbox-img');
190+
130191
document.querySelectorAll('.gallery-item img').forEach(img => {
131192
img.onclick = (e) => {
132193
e.stopPropagation();
@@ -135,5 +196,6 @@ <h2 class="section-title">02. Collage</h2>
135196
};
136197
});
137198
</script>
199+
138200
</body>
139201
</html>

0 commit comments

Comments
 (0)