update content
This commit is contained in:
parent
d12945711f
commit
fdf99f5511
@ -101,9 +101,11 @@
|
||||
|
||||
|
||||
img{
|
||||
width: 30vw;
|
||||
max-width: 200px;
|
||||
max-height: 500px;
|
||||
background-color: $rich-black-fogra-29;
|
||||
text-align: center;
|
||||
// min-height: 200px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
|
||||
126
src/elements/projects.svelte
Normal file
126
src/elements/projects.svelte
Normal file
@ -0,0 +1,126 @@
|
||||
<script lang="ts">
|
||||
import data from '../model/projects.json'
|
||||
import type { Schema } from 'src/model/job';
|
||||
export let currentLanguage = 'it'
|
||||
const projects:Schema[] = data as Schema[];
|
||||
|
||||
export function changeLanguage(language = 'it'){
|
||||
currentLanguage = language
|
||||
}
|
||||
</script>
|
||||
<div class="projectsContainer">
|
||||
{#each projects as project, index }
|
||||
<div class="project container">
|
||||
<h3>{project.title[currentLanguage]}</h3>
|
||||
<div class="project-content">
|
||||
<div class="images-container">
|
||||
{#each project.images as image }
|
||||
<img src="{image}" alt="realtive to the article"/>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text-content {project.images.length!=0 ?'left':''}" id="{index.toString()}">
|
||||
<p>{project.content[currentLanguage]}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="added-info">
|
||||
<div class="added-info">
|
||||
{project.year.start} - {project.year.end}
|
||||
</div>
|
||||
<div>
|
||||
{#each project.collaborators as collaborator}
|
||||
<a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#each project.languages as language}
|
||||
{language+" "}
|
||||
{/each}
|
||||
</div>
|
||||
<div>
|
||||
{#each project.tecnologies as tecnology}
|
||||
{tecnology+" "}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<style lang="scss">
|
||||
@import './static/colors.scss';
|
||||
.projectsContainer{
|
||||
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;
|
||||
}
|
||||
.project{
|
||||
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;
|
||||
}
|
||||
|
||||
.project-content{
|
||||
padding: 2vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.added-info{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.text-content{
|
||||
height: auto;
|
||||
margin-left: 2.5vw;
|
||||
margin-right: 2.5vw;
|
||||
}
|
||||
|
||||
|
||||
img{
|
||||
width: 30vw;
|
||||
max-width: 200px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.projectsContainer{
|
||||
display: flex;
|
||||
height: auto;
|
||||
max-width: $cv-max-width;
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.project-content{
|
||||
flex-wrap: unset;
|
||||
}
|
||||
|
||||
.text-content{
|
||||
width: 35vw;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,4 +1,25 @@
|
||||
[
|
||||
{
|
||||
"year": {
|
||||
"start": "2021-10-01",
|
||||
"end": "2021-10-02"
|
||||
},
|
||||
"title": {"en":"This web site","it":"Questo sito web"},
|
||||
"content": {
|
||||
"en":"I created this web page to collect and present all my experiences. I'm not a web designer. However, I can build web pages because I have good knowledge of HTML and CSS. I made this page using Typescript and Svelte. To manage the content, I've created a simple system to load content from a couple of JSON files that define where to put the information.",
|
||||
"it":"Ho creato questo sito web per raccogliere e raccontare le mie esperienze. Come si può facilmente intuire non sono un web designer, ma ho comunque buone conoscenze nell'uso di HTML e CSS. Ho realizzato questa pagina web in Typescript e Svelte, per la gestione dei contenuti ho ideato un semplice sistema che controlla i dati presenti in un paio di file JSON che definiscono i contenuti della pagina e delle sezioni"
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [
|
||||
"typescript",
|
||||
"JSON-schema"
|
||||
],
|
||||
"tecnologies": [
|
||||
"Svelte",
|
||||
"Nodejs"
|
||||
],
|
||||
"images":["/webpage.png"]
|
||||
},
|
||||
{
|
||||
"year": {
|
||||
"start": "2021-10-01",
|
||||
|
||||
@ -1,23 +1,68 @@
|
||||
[
|
||||
{
|
||||
"year": {
|
||||
"start": "2021-10-01",
|
||||
"start": "2020-09-21",
|
||||
"end": "2021-10-02"
|
||||
},
|
||||
"title": {"en":"This web site","it":"Questo sito web"},
|
||||
"title": {"en":"intership in Athesys","it":"tirocinio in Athesys"},
|
||||
"content": {
|
||||
"en":"I created this web page to collect and present all my experiences. I'm not a web designer. However, I can build web pages because I have good knowledge of HTML and CSS. I made this page using Typescript and Svelte. To manage the content, I've created a simple system to load content from a couple of JSON files that define where to put the information.",
|
||||
"it":"Ho creato questo sito web per raccogliere e raccontare le mie esperienze. Come si può facilmente intuire non sono un web designer, ma ho comunque buone conoscenze nell'uso di HTML e CSS. Ho realizzato questa pagina web in Typescript e Svelte, per la gestione dei contenuti ho ideato un semplice sistema che controlla i dati presenti in un paio di file JSON che definiscono i contenuti della pagina e delle sezioni"
|
||||
"en":"intership in Athesys",
|
||||
"it":"tirocinio in Athesys"
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [
|
||||
"typescript",
|
||||
"JSON-schema"
|
||||
"HTML",
|
||||
"CSS"
|
||||
],
|
||||
"tecnologies": [
|
||||
"Svelte",
|
||||
"Nodejs"
|
||||
"Vuejs",
|
||||
"Nodejs",
|
||||
"Nuxt",
|
||||
"Docker"
|
||||
],
|
||||
"images":["/webpage.png"]
|
||||
"images":["/logo-athesys.png"]
|
||||
},
|
||||
{
|
||||
"year": {
|
||||
"start": "2016-08-13",
|
||||
"end": "2017-02-13"
|
||||
},
|
||||
"title": {"en":"Developer in Alternative Studio","it":"Sviluppatore in Alternative Studio"},
|
||||
"content": {
|
||||
"en":"Alternative studio collaboration",
|
||||
"it":"Progettazione e sviluppo di un Bot Telegram con comunicazione diretta al gestionale per la sezione cinofila della protezione civile Padova"
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [
|
||||
"Php"
|
||||
],
|
||||
"tecnologies": [
|
||||
"Telegram",
|
||||
"Composer",
|
||||
"Docker"
|
||||
],
|
||||
"images":["https://www.alternativestudio.it/images/logo/logo-light.png"]
|
||||
},
|
||||
{
|
||||
"year": {
|
||||
"start": "2015-08-10",
|
||||
"end": "2016-10-02"
|
||||
},
|
||||
"title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
|
||||
"content": {
|
||||
"en":"Alternative studio collaboration",
|
||||
"it":"Collaborazione con alternativestudio"
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [
|
||||
"Php"
|
||||
],
|
||||
"tecnologies": [
|
||||
"Telegram",
|
||||
"Composer",
|
||||
"Docker"
|
||||
],
|
||||
"images":["https://www.saxonhillacademy.org.uk/images/saxonhilllogo.jpg"]
|
||||
}
|
||||
]
|
||||
23
src/model/projects.json
Normal file
23
src/model/projects.json
Normal file
@ -0,0 +1,23 @@
|
||||
[
|
||||
{
|
||||
"year": {
|
||||
"start": "2021-10-01",
|
||||
"end": "2021-10-02"
|
||||
},
|
||||
"title": {"en":"This web site","it":"Questo sito web"},
|
||||
"content": {
|
||||
"en":"I created this web page to collect and present all my experiences. I'm not a web designer. However, I can build web pages because I have good knowledge of HTML and CSS. I made this page using Typescript and Svelte. To manage the content, I've created a simple system to load content from a couple of JSON files that define where to put the information.",
|
||||
"it":"Ho creato questo sito web per raccogliere e raccontare le mie esperienze. Come si può facilmente intuire non sono un web designer, ma ho comunque buone conoscenze nell'uso di HTML e CSS. Ho realizzato questa pagina web in Typescript e Svelte, per la gestione dei contenuti ho ideato un semplice sistema che controlla i dati presenti in un paio di file JSON che definiscono i contenuti della pagina e delle sezioni"
|
||||
},
|
||||
"collaborators": [],
|
||||
"languages": [
|
||||
"typescript",
|
||||
"JSON-schema"
|
||||
],
|
||||
"tecnologies": [
|
||||
"Svelte",
|
||||
"Nodejs"
|
||||
],
|
||||
"images":["/webpage.png"]
|
||||
}
|
||||
]
|
||||
BIN
static/logo-athesys.png
Normal file
BIN
static/logo-athesys.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Loading…
Reference in New Issue
Block a user