robe
This commit is contained in:
15
src/app.html
15
src/app.html
@@ -1,15 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="%lang%">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
<link rel="stylesheet" href="/main.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Gianmarco Pettinato</title>
|
||||
%svelte.head%
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body id="svelte">
|
||||
%svelte.body%
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
72
src/app.scss
72
src/app.scss
@@ -19,46 +19,46 @@ $default-border-radius:5px;
|
||||
background-color: $basecolor
|
||||
}
|
||||
|
||||
.box-with-shadow {
|
||||
border-style: solid;
|
||||
border-width: 0.1px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
// .box-with-shadow {
|
||||
// border-style: solid;
|
||||
// border-width: 0.1px;
|
||||
// border-radius: 10px;
|
||||
// }
|
||||
|
||||
.default{
|
||||
margin: auto;
|
||||
@media (min-width: $min-tablet) {
|
||||
width: 80%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
// .default{
|
||||
// margin: auto;
|
||||
// @media (min-width: $min-tablet) {
|
||||
// width: 80%;
|
||||
// max-width: 1024px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.image-container{
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
object-fit: scale-down;
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $contrast;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .image-container{
|
||||
// width: 80%;
|
||||
// margin: auto;
|
||||
// text-align: center;
|
||||
// align-items: center;
|
||||
// img{
|
||||
// max-width: 100%;
|
||||
// max-height: 300px;
|
||||
// object-fit: scale-down;
|
||||
// @media (prefers-color-scheme: light) {
|
||||
// background-color: $contrast;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
color: $text-color;
|
||||
}
|
||||
// a {
|
||||
// text-decoration:none;
|
||||
// color: $text-color;
|
||||
// }
|
||||
|
||||
button{
|
||||
color: $text-color;
|
||||
}
|
||||
// button{
|
||||
// color: $text-color;
|
||||
// }
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: normal;
|
||||
}
|
||||
// h1, h2, h3 {
|
||||
// font-weight: normal;
|
||||
// }
|
||||
@@ -27,7 +27,7 @@
|
||||
<Contacts />
|
||||
<div class="whoIAm">
|
||||
<p>
|
||||
{who[currentLanguage]}
|
||||
{who.it}
|
||||
</p>
|
||||
</div>
|
||||
<div class="cv">
|
||||
@@ -42,12 +42,10 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<Skills />
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
@import '../app.scss';
|
||||
@import '../../app.scss';
|
||||
.cv {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<div class="contacts">
|
||||
<img src="/profile_pic.webp" alt="profile" class="profile" />
|
||||
<img src="/profile_pic.webp" alt="profile" class="profile" />
|
||||
<div class="links">
|
||||
<ul>
|
||||
<li>
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
@import '../../app.scss';
|
||||
|
||||
img.profile {
|
||||
border-radius: 50%;
|
||||
@@ -7,20 +7,20 @@
|
||||
breaks: true,
|
||||
linkify: true
|
||||
});
|
||||
import type { Schema } from 'src/model/job';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
export let job: Schema;
|
||||
export let currentLanguage = '';
|
||||
</script>
|
||||
|
||||
<div class="job-container">
|
||||
<h3>{job.title[currentLanguage]}</h3>
|
||||
<h3>{job.title.it}</h3>
|
||||
<div class="image-container">
|
||||
{#each job.images as image}
|
||||
<img src={image} alt={image} loading="lazy" />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text-content">
|
||||
{@html md.render(job.content[currentLanguage])}
|
||||
{@html md.render(job.content.it)}
|
||||
</div>
|
||||
<div class="added-info">
|
||||
{#if job.year.lenght != 0}
|
||||
@@ -57,7 +57,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
@import '../../app.scss';
|
||||
.text-content {
|
||||
margin: auto;
|
||||
text-align: justify;
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import type { Schema } from 'src/model/job';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
import JobElement from './JobElement.svelte';
|
||||
export let currentLanguage = '';
|
||||
export let isBlogContainer = false;
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
@import '../../app.scss';
|
||||
.jobs-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1,5 +1,4 @@
|
||||
<script lang="ts">
|
||||
import { scrollto } from 'svelte-scrollto';
|
||||
export let currentLanguage = 'it';
|
||||
export const menu = {
|
||||
home: { it: 'Home', en: 'Home' },
|
||||
@@ -13,32 +12,29 @@
|
||||
<div class="div-menu">
|
||||
<div class="wrapper">
|
||||
<a class="menu-element" href="/#top">
|
||||
<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
|
||||
<span class="hide">{menu.home.it}</span><i class="fas fa-home" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="#jobs"
|
||||
><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
|
||||
><span class="hide">{menu.job.it}</span><i class="fas fa-user-tie" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="#training"
|
||||
><span class="hide">{menu.school[currentLanguage]}</span><i
|
||||
class="fas fa-graduation-cap"
|
||||
/></a
|
||||
><span class="hide">{menu.school.it}</span><i class="fas fa-graduation-cap" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="#portfolio"
|
||||
><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
|
||||
><span class="hide">{menu.portfolio.it}</span><i class="fas fa-user-clock" /></a
|
||||
>
|
||||
|
||||
<a class="menu-element" href="/blog" alt={menu.blog[currentLanguage]}
|
||||
><span class="hide">{menu.blog[currentLanguage]}</span><i class="fas fa-address-card" /></a
|
||||
<a class="menu-element" href="/blog"
|
||||
><span class="hide">{menu.blog.it}</span><i class="fas fa-address-card" /></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
||||
@import '../../app.scss';
|
||||
.hide {
|
||||
@media (max-width: $min-tablet) {
|
||||
position: absolute;
|
||||
@@ -6,7 +6,7 @@
|
||||
typographer: true
|
||||
});
|
||||
import data from '../model/training.json';
|
||||
import type { Schema } from 'src/model/job';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
export let currentLanguage = 'it';
|
||||
const training: Schema[] = data as Schema[];
|
||||
</script>
|
||||
@@ -28,7 +28,7 @@
|
||||
.training {
|
||||
padding: 10px;
|
||||
}
|
||||
@import '../app.scss';
|
||||
@import '../../app.scss';
|
||||
.element {
|
||||
border-radius: $default-border-radius;
|
||||
background-color: white;
|
||||
@@ -35,8 +35,6 @@
|
||||
},
|
||||
"title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
|
||||
"content": {
|
||||
"en":"In 2021, I worked to open a start-up with an app idea.\n To do so, I learned a lot of different skills, including how to set up a server with all my services running in **Docker**, set up a **GitLab** server, **design and build** an application infrastructure, and set up a private registry for **npm** and **docker images**.\n Furthermore, I configured all the **automation pipelines** to streamline the software distribution in virtualized environments and build the application **proof of concept** to demo to potential customers.",
|
||||
"it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di servizio. Per far ciò, durante questo periodo ho imparato a creare un'infrastruttura di lavoro, su un server **GNU\/Linux** dove centralizzare le risorse con **GitLab** in container **Docker**.\n Per semplificare la distribuzione di elementi di sviluppo ho integrato un *repository* privato di pacchetti **npm** e immagini **Docker**. Oltre alle mansioni da sistemista e devops ho progettato e scritto il **Proof of concept** del mio servizio per dimostrarlo a potenziali clienti"
|
||||
"en":"In 2021, I worked to open a start-up with an app idea.\nTo do so, I acquired skills in design and developing a software solution for the problem. I learnt how to set up a **CI/CD** pipeline with **Docker** and **Gitlab** and took confidence in **serverless** technologies like AWS.",
|
||||
"it":"Nel corso del 2021 ho lavorato per avviare una mia attività indipendente, basata su un’idea per una app che ritenevo, e ritengo, fattibile. In questo periodo ho dovuto ricoprire diversi ruoli per portar avanti quest’iniziativa. Di conseguenza ho imparato a svolgere le mansioni di analista e architetto, **devops** e sviluppo. \n In particolare, ho acquisito dimestichezza con i sistemi di **CI/CD** basati su **Docker** e nell’uso di tecnologie **serverless**."
|
||||
},
|
||||
@@ -1,12 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import AboutMe from '$elem/AboutMe.svelte';
|
||||
import Jobs from '$elem/Jobs.svelte';
|
||||
import Menu from '$elem/Menu.svelte';
|
||||
import Training from '$elem/Training.svelte';
|
||||
import Data_jobs from '../model/jobs.json';
|
||||
import Data_portfolio from '../model/portfolio.json';
|
||||
import type { Schema } from 'src/model/job';
|
||||
import AboutMe from '$lib/elements/AboutMe.svelte';
|
||||
import Jobs from '$lib/elements/Jobs.svelte';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
import Training from '$lib/elements/Training.svelte';
|
||||
import Data_jobs from '$lib/model/jobs.json';
|
||||
import Data_portfolio from '$lib/model/portfolio.json';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
let jobs: Schema[] = Data_jobs as Schema[];
|
||||
let portfolio: Schema[] = Data_portfolio as Schema[];
|
||||
let currentLanguage: string = 'it';
|
||||
@@ -80,26 +80,27 @@
|
||||
<Menu {currentLanguage} />
|
||||
</div>
|
||||
<div id="home" class="default">
|
||||
<h1>{titles.home[currentLanguage]}</h1>
|
||||
<h1>{titles.home.it}</h1>
|
||||
<h2>Software developer</h2>
|
||||
<AboutMe {currentLanguage} />
|
||||
</div>
|
||||
<div id="jobs" class="default">
|
||||
<h2>{titles.job[currentLanguage]}</h2>
|
||||
<h2>{titles.job.it}</h2>
|
||||
<Jobs {jobs} {currentLanguage} />
|
||||
</div>
|
||||
<div id="training" class="default">
|
||||
<h2>{titles.school[currentLanguage]}</h2>
|
||||
<h2>{titles.school.it}</h2>
|
||||
<Training {currentLanguage} />
|
||||
</div>
|
||||
<div id="portfolio" class="default">
|
||||
<h2>{titles.portfolio[currentLanguage]}</h2>
|
||||
<h2>{titles.portfolio.it}</h2>
|
||||
<Jobs jobs={portfolio} {currentLanguage} />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../app.scss';
|
||||
|
||||
.language-selector {
|
||||
right: 0;
|
||||
height: 30px;
|
||||
@@ -1,11 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import Menu from '$elem/Menu.svelte';
|
||||
import Jobs from '$elem/Jobs.svelte';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
import Jobs from '$lib/elements/Jobs.svelte';
|
||||
let currentLanguage: string = 'it';
|
||||
let isBlogContainer = true;
|
||||
import Data_portfolio from '../../model/portfolio.json';
|
||||
import type { Schema } from 'src/model/job';
|
||||
import Data_portfolio from '../../lib/model/portfolio.json';
|
||||
import type { Schema } from '$lib/model/job';
|
||||
let jobs: Schema[] = Data_portfolio as Schema[];
|
||||
let title = { it: 'I miei articoli', en: 'my blog posts' };
|
||||
</script>
|
||||
@@ -68,7 +68,7 @@
|
||||
<Menu {currentLanguage} />
|
||||
</div>
|
||||
<div id="portfolio" class="default">
|
||||
<h2>{title[currentLanguage]}</h2>
|
||||
<h2>{title.it}</h2>
|
||||
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
|
||||
</div>
|
||||
</main>
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { MetaTags } from 'svelte-meta-tags';
|
||||
import Menu from '$elem/Menu.svelte';
|
||||
import Menu from '$lib/elements/Menu.svelte';
|
||||
let currentLanguage: string = 'it';
|
||||
import { page } from '$app/stores';
|
||||
console.log($page)
|
||||
import { page } from '$app/stores';
|
||||
console.log($page);
|
||||
</script>
|
||||
|
||||
<MetaTags
|
||||
@@ -66,7 +66,7 @@
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../app.scss';
|
||||
@import '../../../app.scss';
|
||||
.language-selector {
|
||||
right: 0;
|
||||
height: 30px;
|
||||
Reference in New Issue
Block a user