128 lines
2.8 KiB
Svelte
128 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import MarkdownIt from 'markdown-it'
|
|
const md = new MarkdownIt({
|
|
html:true,
|
|
xhtmlOut:true,
|
|
typographer: true,
|
|
linkify: true
|
|
});
|
|
import data from '../model/portfolio.json'
|
|
import type { Schema } from 'src/model/job';
|
|
export let currentLanguage = 'it'
|
|
const hobbies:Schema[] = data as Schema[];
|
|
|
|
export function changeLanguage(language = 'it'){
|
|
currentLanguage = language
|
|
}
|
|
</script>
|
|
<div class="extraContainer">
|
|
{#each hobbies as hobby }
|
|
<div class="hobby">
|
|
<h3>{hobby.title[currentLanguage]}</h3>
|
|
<div class="content">
|
|
<div class="images">
|
|
{#each hobby.images as image}
|
|
<img src={image} alt="{hobby.title[currentLanguage].toString()}" />
|
|
{/each}
|
|
</div>
|
|
<div class="hobby-text">
|
|
{@html md.render(hobby.content[currentLanguage])}
|
|
</div>
|
|
<div class="added-info">
|
|
<p>{#each hobby.languages as language }
|
|
{language+" "}
|
|
{/each}</p>
|
|
|
|
<p>{#each hobby.tecnologies as tecnology }
|
|
{tecnology+" "}
|
|
{/each}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<style lang="scss">
|
|
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
|
@import './static/colors.scss';
|
|
.extraContainer{
|
|
margin: auto;
|
|
background-color:$steel-blue;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: auto;
|
|
font-size: 1.1em;
|
|
border-radius: 10px;
|
|
width: 95%;
|
|
border-style: solid;
|
|
border-width: 0.1px;
|
|
border-color: $rich-black-fogra-29;
|
|
border-radius: 10px;
|
|
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
padding-top: 1.5vh;
|
|
padding-bottom: 1.5vh;
|
|
}
|
|
|
|
.hobby{
|
|
background-color: $cultured;
|
|
text-align: center;
|
|
width: 90%;
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
padding-top: 2vh;
|
|
padding-bottom: 2vh;
|
|
background-color: $cultured;
|
|
border-style: solid;
|
|
border-width: 0.1px;
|
|
}
|
|
|
|
.images{
|
|
width: 90%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.images>img{
|
|
margin: auto;
|
|
margin-bottom: 2vh;
|
|
max-width: 350px;
|
|
max-height: 250px;
|
|
}
|
|
|
|
.content{
|
|
width: 90%;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.added-info{
|
|
font-size: 15px;
|
|
}
|
|
|
|
.hobby-text{
|
|
text-align: justify;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.extraContainer{
|
|
display: flex;
|
|
height: auto;
|
|
max-width: $cv-max-width;
|
|
width: 80vw;
|
|
}
|
|
|
|
// .job-content{
|
|
// flex-wrap: unset;
|
|
// }
|
|
|
|
// .text-content{
|
|
// width: 35vw;
|
|
// }
|
|
}
|
|
</style> |