Skip to content

CV site - Add picture and tags #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mrivar wants to merge 2 commits into
base: main
Choose a base branch
from
Open

CV site - Add picture and tags #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91e69f1
CV - Add picture
mrivar Jun 25, 2025
887a7f5
Merge branch 'main' into cv-page-added-picture
mrivar Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<Head>
<Title>Martín Riva's site</Title>
<Title>Martín Riva | Full Stack Developer</Title>
<Meta name="description" content="This is my website! Welcome!"/>
</Head>
<NuxtLayout>
Expand Down
2 changes: 2 additions & 0 deletions assets/styles/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ $dark-red: #AE2535;
$snow: #FFFBFE;
$skull-white: #EBEBEC;

$latex-gray: #4D4D4D;

// rgba colors
$white-half: rgba(255, 255, 255, 0.6);
$gray-bg: rgba(240, 243, 255, 0.04);
Expand Down
3 changes: 3 additions & 0 deletions assets/styles/_fonts-weight.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ $heavy: 900;
.bold {
font-weight: $bold;
}
.semi-bold {
font-weight: $semi-bold;
}
.light {
font-weight: $light;
}
10 changes: 6 additions & 4 deletions assets/styles/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
//@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import "~/assets/fonts/barlow.scss";
//@import "~/assets/fonts/barlow.scss";
//@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

$barlow: 'Barlow', 'Roboto', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
//$quicksand: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$roboto: 'Roboto', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
$fallback: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
$barlow: 'Barlow', $fallback;
$lato: 'Lato', $fallback;
$quicksand: 'Quicksand', $fallback;
$roboto: 'Roboto', $fallback;
12 changes: 6 additions & 6 deletions assets/styles/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ input:where([type='submit']) {
}
}

$button-blur-radius: 0;
$button-blur-radius: 1px;

.big-button {
display: flex;
Expand All @@ -41,19 +41,19 @@ $button-blur-radius: 0;
margin: 15px 0;
padding: 20px 0;
font-size: $text-m;
//color: $snow !important;
background-color: $skull-white;
color: $snow !important;
background-color: $dark-gray;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 5.5px 6px $button-blur-radius $light-gray;
box-shadow: 5.5px 6px $button-blur-radius $gray2;
transition: all 0.1s ease-in-out;

&:hover {
box-shadow: 4.25px 4.25px $button-blur-radius $light-gray;
box-shadow: 4.25px 4.25px $button-blur-radius $gray2;
transform: translate(1.75px, 1.75px);
}

&:focus {
box-shadow: 2px 2px $button-blur-radius $light-gray;
box-shadow: 2px 2px $button-blur-radius $gray2;
transform: translate(4px, 4px);
}

Expand Down
1 change: 1 addition & 0 deletions assets/styles/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ a {
text-decoration: none;
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
color: inherit;
}

input {
Expand Down
3 changes: 3 additions & 0 deletions assets/styles/texts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ $text-s: 15px;
}
.text {
color: $light-text;
&.gray {
color: $latex-gray;
}

html.dark-mode & {
color: $dark-text;
Expand Down
22 changes: 19 additions & 3 deletions components/cv/CvBlock.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@
<NuxtLink v-for="item in items" :key="item.id" class="cv-block-item text" :to="item.institutionWeb">
<div class="years years-desktop">
{{ item.years }}<br>
<span v-if="item.yearSum">( {{ item.yearSum }} )</span>
<span class="sum" v-if="item.yearSum">( {{ item.yearSum }} )</span>
</div>
<div class="job">
<p class="job-title">{{ item.position }} @ <span class="institution">{{ item.institution }}</span></p>
<div class="years years-phone">
{{ item.years }}
</div>
<div class="tags"><span v-for="tag in item.tags" class="tag">{{ tag }}</span></div>
<p v-html="item.description"></p>
</div>
</NuxtLink>
Expand Down Expand Up @@ -45,15 +46,16 @@ class Item {
.cv-block {
display: grid;
justify-content: stretch;
max-width: 600px;
margin: auto auto 32px;

& .cv-block-title {
margin-bottom: 16px;
margin-bottom: 20px;
}

& p.cv-block-description {
text-align: left;
margin-bottom: 16px;
margin-bottom: 20px;
}

& .cv-block-item {
Expand All @@ -71,6 +73,9 @@ class Item {

& .years {
color: $gray3;
& .sum {
color: $gray3;
}
html.dark-mode & {
color: $white-half;
}
Expand Down Expand Up @@ -113,4 +118,15 @@ class Item {
}
}
}
.tags {
margin: 3px 0;
& .tag {
color: $primary-color;
background: $skull-white;
font-weight: $medium;
border-radius: 4px;
padding: 2px 4px;
margin-right: 10px;
}
}
</style>
2 changes: 1 addition & 1 deletion components/cv/CvTitle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<template>
<div>
<span class="title text"><slot /></span>
<span class="title text gray"><slot /></span>
</div>
</template>

Expand Down
15 changes: 14 additions & 1 deletion nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,19 @@ export default defineNuxtConfig({
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto:100,400,500&display=swap'
}
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'
},
]
}
},
Expand Down Expand Up @@ -73,6 +85,7 @@ export default defineNuxtConfig({
icons: [
'heroicons-outline:moon',
'heroicons-outline:sun',
'ph:read-cv-logo',
'grommet-icons:github',
'devicon-plain:linkedin',
'simple-icons:strava',
Expand Down
33 changes: 33 additions & 0 deletions pages/cv/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
<template>
<div class="cv-container">
<div class="me">
<img src="@/public/me.jpg" alt="me"/>
<div class="name-container">
<p class="name">
<span class="semi-bold">Martín de la Riva</span>
</p>
<p class="sub">
Full Stack Developer
</p>
<p class="city">
Barcelona, Spain
</p>
</div>
</div>
<CvBlock title="about me">
I’m a Developer with a Master’s in Artificial Intelligence, with 9+ years of experience in building
scalable backend systems and ML solutions. Passionate about clean code, distributed
Expand All @@ -23,6 +37,7 @@ const experience = [
institutionWeb: "https://www.devo.com/",
description: "Currently developing Devo’s big data product (a massive distributed DB), " +
"using <b>Kotlin</b>, RabbitMQ, Akka, Pekko, MySQL, Microservices, etc.",
tags: ["kotlin"],
},
{
years: "2019 — 2022",
Expand All @@ -36,6 +51,7 @@ const experience = [
"<li><b>Python</b>, MySQL, Docker, Kubernetes, RabbitMQ, Microservices</li>" +
"<li><b>Angular</b>, Jasmine, GraphQL</li>" +
"</ul>",
tags: ["python", "angular"],
},
{
years: "03 — 08/2019",
Expand All @@ -46,6 +62,7 @@ const experience = [
description: "Research Institute with a main focus on handling emergencies projects. " +
"Conducted research on Computer Vision and Natural Language Processing methods, " +
"in the field of Deep Learning. ",
tags: ["python", "react"],
},
{
years: "2016 — 2018",
Expand All @@ -54,6 +71,7 @@ const experience = [
institution: "United Academics",
institutionWeb: "https://www.ua-magazine.com/",
description: "Developed their Open Access Library using <b>Python</b> (Django framework), <b>React</b>, and MongoDB.",
tags: ["python", "django", "react"],
},
{
years: "01 — 06/2016",
Expand All @@ -62,6 +80,7 @@ const experience = [
institution: "Sugerendo",
institutionWeb: "https://www.sugerendo.com/",
description: "E-commerce consultancy specialized in Magento.",
tags: ["html", "css", "javascript"],
},
]

Expand Down Expand Up @@ -97,4 +116,18 @@ const education = [
margin-top: 0;
}
}
.me {
margin-bottom: 40px;
display: flex;
img {
width: 120px;
border-radius: 50%;
}
& .name-container {
text-align: left;
& p.name {
font-size: $text-xl;
}
}
}
</style>
28 changes: 25 additions & 3 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
<template>
<div class="grid-columns-container">
<div class="grid-left">
<h1 class="title">Hi, I'm Martín<br> and I'm a<br> developer</h1>
<h1 class="title">
Hi, I'm Martín<br>
and I'm a<br>
<NuxtLink v-if="random === 0" to="https://github.com/mrivar" target="_blank">developer <img src="@/public/arrow.svg" alt="arrow"/></NuxtLink>
<span v-if="random === 1">climber</span>
<NuxtLink v-if="random === 2" to="https://www.strava.com/athletes/martin_riva" target="_blank">runner <img src="@/public/arrow.svg" alt="arrow"/></NuxtLink>
</h1>
<div class="red-block"></div>
</div>
<div class="grid-right">
Expand All @@ -14,11 +20,16 @@
</div>
</template>

<script>
<script setup lang="ts">
const random = useState('random', () => getRandomInt(3))
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
</script>

<style scoped lang="scss">
.grid-columns-container {
grid-template-columns: 389px 1fr;
column-gap: 30px;
padding-top: 100px;
}
Expand All @@ -27,6 +38,17 @@
font-size: $text-xxxl;
text-align: left;
margin-bottom: 30px;
& a {
display: flex;
& img {
filter: invert(10%) sepia(5%) saturate(4496%) hue-rotate(195deg) brightness(93%) contrast(84%);
align-self: center;
height: 20px;
html.dark-mode & {
filter: invert(94%) sepia(51%) saturate(1620%) hue-rotate(183deg) brightness(114%) contrast(104%);
}
}
}
}
}
.grid-right {
Expand All @@ -42,7 +64,7 @@
.grid-columns-container {
padding-top: 0;
grid-template-columns: auto;
grid-template-rows: 1fr 1fr;
grid-template-rows: max-content max-content;
grid-template-areas: "left""right";
}
.grid-right {
Expand Down
4 changes: 4 additions & 0 deletions public/arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/me.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/me_beach.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.