Compare commits
9 Commits
main
...
64389fa258
| Author | SHA1 | Date | |
|---|---|---|---|
|
64389fa258 | ||
|
|
cd55feca1e | ||
|
|
9a73fe708e | ||
| c86542dabf | |||
| 5359bc96a5 | |||
| c507c34138 | |||
|
|
f947c96777 | ||
|
|
23b18ccc7a | ||
|
|
7cbbdf2f1a |
13
.eslintignore
Normal file
13
.eslintignore
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Ignore files for PNPM, NPM and YARN
|
||||||
|
pnpm-lock.yaml
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
20
.eslintrc copy.cjs
Normal file
20
.eslintrc copy.cjs
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||||
|
plugins: ['svelte3', '@typescript-eslint'],
|
||||||
|
ignorePatterns: ['*.cjs'],
|
||||||
|
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
|
||||||
|
settings: {
|
||||||
|
'svelte3/typescript': () => require('typescript')
|
||||||
|
},
|
||||||
|
parserOptions: {
|
||||||
|
sourceType: 'module',
|
||||||
|
ecmaVersion: 2020
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2017: true,
|
||||||
|
node: true
|
||||||
|
}
|
||||||
|
};
|
||||||
13
.prettierignore
Normal file
13
.prettierignore
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# Ignore files for PNPM, NPM and YARN
|
||||||
|
pnpm-lock.yaml
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
9
.prettierrc copy
Normal file
9
.prettierrc copy
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"useTabs": true,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "none",
|
||||||
|
"printWidth": 100,
|
||||||
|
"plugins": ["prettier-plugin-svelte"],
|
||||||
|
"pluginSearchDirs": ["."],
|
||||||
|
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||||
|
}
|
||||||
18
default.conf
18
default.conf
@@ -1,18 +0,0 @@
|
|||||||
server {
|
|
||||||
# The port to listen on
|
|
||||||
listen 80;
|
|
||||||
# The root directory, which must exactly match the internal volume share
|
|
||||||
root /usr/share/nginx/html;
|
|
||||||
|
|
||||||
# For all files with the PHP extension run the following
|
|
||||||
location ~ ^/.+\.php(/|$) {
|
|
||||||
# Pass the request to the host "php" and port 9000 (default PHP-FPM port)
|
|
||||||
fastcgi_pass php:9000;
|
|
||||||
# Include the default NGINX FastCGI Parameters
|
|
||||||
include fastcgi_params;
|
|
||||||
# Define one additional parameter telling PHP-FPM where to find the file
|
|
||||||
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
|
|
||||||
}
|
|
||||||
add_header Cache-Control no-cache;
|
|
||||||
expires 1s;
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
# The specification version of Docker-compose
|
|
||||||
version: "3.9"
|
|
||||||
# The collection of applications composing this service
|
|
||||||
services:
|
|
||||||
# The NGINX custom container
|
|
||||||
web:
|
|
||||||
# Instead of referencing image: nginx:mainline-alpine here, use build to
|
|
||||||
# reference the current directory (.), which will look for a dockerfile
|
|
||||||
# by default
|
|
||||||
build: .
|
|
||||||
# The external directory location to map to an internal location
|
|
||||||
volumes:
|
|
||||||
- /home/gianm/Project/myCv/build:/usr/share/nginx/html
|
|
||||||
# The external port mapping to internal port mapping
|
|
||||||
ports:
|
|
||||||
- "80:80"
|
|
||||||
php:
|
|
||||||
image: php:fpm-alpine
|
|
||||||
ports:
|
|
||||||
- "9000:9000"
|
|
||||||
# It is important that both containers can reference the same files
|
|
||||||
volumes:
|
|
||||||
- /home/gianm/Project/myCv/build:/usr/share/nginx/html
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
# The image to pull the base configuration from
|
|
||||||
FROM nginx:mainline-alpine
|
|
||||||
# The directory where any additional files will be referenced
|
|
||||||
WORKDIR /home/gianm/Project/myCv/build
|
|
||||||
# Copy the custom default.conf from the WORKDIR (.) and overwrite the existing internal configuration in the NGINX container
|
|
||||||
COPY ./default.conf /etc/nginx/conf.d/default.conf
|
|
||||||
13
list of cv
13
list of cv
@@ -1,13 +0,0 @@
|
|||||||
lista delle cose da mettere in cv
|
|
||||||
Laurea in scienze informatiche all'università di Padova.
|
|
||||||
Questo sito web
|
|
||||||
Greenpass scanner web; with Marco Celadin
|
|
||||||
GoCart project; with Marco Celadin
|
|
||||||
Server in casa - {server git, reverse proxy}
|
|
||||||
Tirocinio di due mesi ad Athesys.
|
|
||||||
Stampante 3d rpi
|
|
||||||
swe typescript, Docker, serverless-framework - { latex multi compiler, serverless service, Docker }
|
|
||||||
Pao c++ - Qontainer
|
|
||||||
Antrlr parser 1 e 2; with Mariano Sciacco
|
|
||||||
Telegram bot alternativestudio
|
|
||||||
Progetto Leonardo - ICT in Saxon Hill Academy Dean
|
|
||||||
13478
package-lock.json
generated
13478
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
68
package.json
68
package.json
@@ -2,47 +2,49 @@
|
|||||||
"name": "mycv",
|
"name": "mycv",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"update-model": "json2ts ./src/model/schema.json ./src/model/job.d.ts",
|
"update-model": "json2ts ./src/lib/model/schema.json ./src/lib/model/job.d.ts",
|
||||||
"dev": "svelte-kit dev --host 0.0.0.0",
|
"dev": "vite dev",
|
||||||
"build": "svelte-kit build",
|
"build": "vite build",
|
||||||
"preview": "svelte-kit preview",
|
"preview": "vite preview",
|
||||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
"test": "playwright test",
|
||||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
|
"test:unit": "vitest",
|
||||||
|
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||||
|
"format": "prettier --plugin-search-dir . --write ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/preset-env": "^7.15.8",
|
"@playwright/test": "^1.28.1",
|
||||||
"@sveltejs/adapter-static": "^1.0.0-next.20",
|
"@sveltejs/adapter-auto": "^1.0.0",
|
||||||
"@sveltejs/kit": "next",
|
"@sveltejs/kit": "^1.0.0",
|
||||||
"@testing-library/jest-dom": "^5.14.1",
|
"@types/markdown-it": "^12.2.3",
|
||||||
"@testing-library/svelte": "^3.0.3",
|
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||||
"@types/jest": "^27.0.2",
|
"@typescript-eslint/parser": "^5.45.0",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.31.1",
|
"eslint": "^8.28.0",
|
||||||
"@typescript-eslint/parser": "^4.31.1",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"babel-jest": "^27.3.0",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
"eslint": "^7.32.0",
|
"prettier": "^2.8.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"prettier-plugin-svelte": "^2.8.1",
|
||||||
"eslint-plugin-svelte3": "^3.2.1",
|
"sass": "^1.57.1",
|
||||||
"jest": "^27.3.0",
|
"svelte": "^3.54.0",
|
||||||
"prettier": "^2.4.1",
|
"svelte-check": "^3.0.1",
|
||||||
"prettier-plugin-svelte": "^2.4.0",
|
"svelte-meta-tags": "^2.5.5",
|
||||||
"svelte": "^3.42.6",
|
|
||||||
"svelte-check": "^2.2.6",
|
|
||||||
"svelte-jester": "^2.1.5",
|
|
||||||
"svelte-preprocess": "^4.9.4",
|
"svelte-preprocess": "^4.9.4",
|
||||||
"svelte-preprocess-markdown": "^2.7.3",
|
"svelte-preprocess-markdown": "^2.7.3",
|
||||||
"svelte-scrollto": "^0.2.0",
|
"tslib": "^2.4.1",
|
||||||
"ts-jest": "^27.0.7",
|
"typescript": "^4.9.3",
|
||||||
"tslib": "^2.3.1",
|
"vite": "^4.0.0",
|
||||||
"typescript": "^4.4.3"
|
"vitest": "^0.25.3"
|
||||||
},
|
},
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^5.15.4",
|
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||||
|
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||||
|
"@fortawesome/svelte-fontawesome": "^0.2.0",
|
||||||
"json-schema-to-typescript": "^10.1.5",
|
"json-schema-to-typescript": "^10.1.5",
|
||||||
"markdown-it": "^12.2.0",
|
"markdown-it": "^12.2.0",
|
||||||
"milligram": "^1.4.1",
|
"punycode": "^2.1.1",
|
||||||
"punycode": "^2.1.1"
|
"typesafe-i18n": "^5.20.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
11
playwright.config.ts
Normal file
11
playwright.config.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import type { PlaywrightTestConfig } from '@playwright/test';
|
||||||
|
|
||||||
|
const config: PlaywrightTestConfig = {
|
||||||
|
webServer: {
|
||||||
|
command: 'npm run build && npm run preview',
|
||||||
|
port: 4173
|
||||||
|
},
|
||||||
|
testDir: 'tests'
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
15
src/app.html
15
src/app.html
@@ -1,15 +1,12 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="%lang%">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<link rel="stylesheet" href="/main.css">
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
%sveltekit.head%
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<title>Gianmarco Pettinato</title>
|
|
||||||
%svelte.head%
|
|
||||||
</head>
|
</head>
|
||||||
<body id="svelte">
|
<body data-sveltekit-preload-data="hover">
|
||||||
%svelte.body%
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
62
src/app.scss
62
src/app.scss
@@ -1,3 +1,65 @@
|
|||||||
|
$basecolor:#E5E5E5;
|
||||||
|
$basecolor2:#FFFFFF;
|
||||||
|
$accent2: #256EFF;
|
||||||
|
$contrast: #14213D;
|
||||||
|
$contrast2: #000000;
|
||||||
|
$img-contrast: #14213D;
|
||||||
|
|
||||||
|
$text-color: #011936;
|
||||||
|
$border-color: #256EFF;
|
||||||
|
$button-border-color: #256EFF;
|
||||||
|
|
||||||
|
$min-tablet: 900px;
|
||||||
|
$min-desktop: 1024px;
|
||||||
|
$min-ultrawide: 1700px;
|
||||||
|
$default-border-radius:5px;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
||||||
|
color: $text-color;
|
||||||
|
background-color: $basecolor
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
@@ -1,130 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
export let currentLanguage = 'it';
|
|
||||||
const whoIt='Ciao! Sono Gianmarco Pettinato, mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\
|
|
||||||
Ho famigliarità con diversi linguaggi e framework, sia front-end che back-end.\
|
|
||||||
In particolare con C++ con Qt e TypeScript con Express, serverless, Angular, Vue.js e Svelte.\
|
|
||||||
Tra le mie competenze, oltre allo sviluppo software e alla manutenzione di sistemi linux, spicca la gestione di ambienti CI/CD, con pipeline automatiche e container come Docker.\
|
|
||||||
Sono interessato in particolar modo all\'ambiente dei dispositivi IoT e del wearble tech.\
|
|
||||||
Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione e manutenzione di computer.\
|
|
||||||
Per maggiori informazioni non esitate a contattarmi.';
|
|
||||||
const whoEn='Hi! I\'m Gianmarco Pettinato. I have a bachelor degree in computer science, and I\'m a full-stack developer.\
|
|
||||||
I know several languages and frameworks, either front-end or back-end.\
|
|
||||||
In particular, I have experience in C++ with Qt and TypeScript with Express, serverless, Angular, Vue.js and Svelte.\
|
|
||||||
Among my skill-set, there is the administration of the CI/CD environment with Docker.\
|
|
||||||
I\'m interested in the IoT world and Wearable tech. In my free time, I like to manage my GNU/Linux home server and build PCs.';
|
|
||||||
|
|
||||||
const who = {
|
|
||||||
it:whoIt,
|
|
||||||
en:whoEn
|
|
||||||
}
|
|
||||||
// export function changeLanguage(language = 'it'){
|
|
||||||
// currentLanguage = language
|
|
||||||
// }
|
|
||||||
</script>
|
|
||||||
<div class="aboutMe">
|
|
||||||
<div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" />
|
|
||||||
<div class="info">
|
|
||||||
<h1>Gianmarco Pettinato</h1>
|
|
||||||
<div>
|
|
||||||
<a href="https://twitter.com/jatus_93"><i class="fab fa-twitter"></i></a>
|
|
||||||
<a href="https://www.linkedin.com/in/gianmarco-pettinato/"><i class="fab fa-linkedin-in"></i></a>
|
|
||||||
<a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane"></i></a>
|
|
||||||
<a href="mailto:gianmarco@pettinato.eu"><i class="fas fa-at"></i></a>
|
|
||||||
<a href="https://github.com/Jatus93/"><i class="fab fa-github"></i></a>
|
|
||||||
<a href="https://git.jatus.tech/Jatus"><i class="fab fa-git-alt"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="presentazione">
|
|
||||||
<p>
|
|
||||||
{who[currentLanguage]}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="cv">
|
|
||||||
<a rel="external" href="/curriculum_it.pdf"><i class="fas fa-download"></i> curriculum_it.pdf</a>
|
|
||||||
<a rel="external" href="/curriculum_en.pdf"><i class="fas fa-download"></i> curriculum_en.pdf</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<style lang="scss">
|
|
||||||
@import './static/colors.scss';
|
|
||||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
|
||||||
.aboutMe{
|
|
||||||
background-color: $cultured;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: auto;
|
|
||||||
max-width: $cv-max-width;
|
|
||||||
width: 90%;
|
|
||||||
height: auto;
|
|
||||||
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: 1vh;
|
|
||||||
padding-bottom: 2vh;
|
|
||||||
padding-top: 2vh;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cv>a{
|
|
||||||
font-size: unset;
|
|
||||||
text-decoration: none;
|
|
||||||
width: 50%;
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
.cv{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile{
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 35vw;
|
|
||||||
max-width: 150px;
|
|
||||||
border: solid $rich-black-fogra-29 1px;
|
|
||||||
box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
||||||
-webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
||||||
-moz-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.info{
|
|
||||||
margin: 1px;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info>h1{
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,a:visited{
|
|
||||||
font-size: 1.5em;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presentazione{
|
|
||||||
width: 90%;
|
|
||||||
margin: auto;
|
|
||||||
text-justify: distribute;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
.aboutMe{
|
|
||||||
max-width: $cv-max-width;
|
|
||||||
width: 80vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,81 +0,0 @@
|
|||||||
<script lang="ts"></script>
|
|
||||||
<div class="contactContainer">
|
|
||||||
<div class="contacts">
|
|
||||||
<div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
|
|
||||||
<ul class="contact-list">
|
|
||||||
<li><i class="fas fa-at"></i> e-mail: <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
|
|
||||||
<li><i class="fab fa-telegram-plane"></i> telegram: <a href="https://t.me/jatus_93">@jatus_93</a></li>
|
|
||||||
<li><i class="fab fa-twitter"></i> twitter: <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
|
|
||||||
<li><i class="fab fa-linkedin-in"></i> linkedin: <a href="https://www.linkedin.com/in/gianmarco-pettinato/">Gianmarco Pettinato</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<style lang="scss">
|
|
||||||
@import './static/colors.scss';
|
|
||||||
.contactContainer{
|
|
||||||
margin: auto;
|
|
||||||
background-color:$navajo-white;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 90%;
|
|
||||||
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: 1vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contacts{
|
|
||||||
background-color: $cultured;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center ;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 1vh;
|
|
||||||
background-color: $cultured;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0.1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contacts>ul{
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
.contacts>ul>li{
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile{
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 35vw;
|
|
||||||
max-width: 150px;
|
|
||||||
border: solid $rich-black-fogra-29 1px;
|
|
||||||
box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
||||||
-webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
||||||
-moz-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
a,a:visited{
|
|
||||||
// text-decoration: none;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
.contactContainer{
|
|
||||||
display: flex;
|
|
||||||
height: auto;
|
|
||||||
max-width: $cv-max-width;
|
|
||||||
width: 80vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contacts{
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contacts>ul{
|
|
||||||
margin: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import MarkdownIt from 'markdown-it';
|
|
||||||
const md = new MarkdownIt({
|
|
||||||
html:true,
|
|
||||||
xhtmlOut:true,
|
|
||||||
typographer: true,
|
|
||||||
breaks: true,
|
|
||||||
linkify: true
|
|
||||||
});
|
|
||||||
import type { Schema } from 'src/model/job';
|
|
||||||
export let currentLanguage = '';
|
|
||||||
export let jobs:Schema[] = [];
|
|
||||||
</script>
|
|
||||||
<div class="jobsContainer">
|
|
||||||
{#each jobs as job }
|
|
||||||
<div class="job container">
|
|
||||||
<h3>{job.title[currentLanguage]}</h3>
|
|
||||||
<div class="job-content">
|
|
||||||
<div class="images-container">
|
|
||||||
{#each job.images as image }
|
|
||||||
<img src="{image}" alt="{image}"/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="text-content">
|
|
||||||
{@html md.render(job.content[currentLanguage])}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="added-info">
|
|
||||||
{#if job.year.lenght!=0}
|
|
||||||
Date: {job.year.start}{#if job.year.end.length!=0}; {job.year.end} {/if}
|
|
||||||
{/if}
|
|
||||||
<div>
|
|
||||||
{#if job.collaborators.length!=0}
|
|
||||||
Collab:
|
|
||||||
{/if}
|
|
||||||
{#each job.collaborators as collaborator, index }
|
|
||||||
<a href="{collaborator.ref}">{collaborator.name} {collaborator.surname}</a>{index!=job.collaborators.length-1?', ':''}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{#if job.languages.length!=0}
|
|
||||||
Lang:
|
|
||||||
{/if}
|
|
||||||
{#each job.languages as language,index }
|
|
||||||
{language}{index!=job.languages.length-1?', ':''}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
{#if job.tecnologies.length!=0}
|
|
||||||
Tech:
|
|
||||||
{/if}
|
|
||||||
{#each job.tecnologies as tecnology, index }
|
|
||||||
{tecnology}{index!=job.tecnologies.length-1?', ':''}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<style lang="scss">
|
|
||||||
@import './static/colors.scss';
|
|
||||||
.jobsContainer{
|
|
||||||
margin: auto;
|
|
||||||
background-color:$steel-blue;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 90%;
|
|
||||||
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: 1vh;
|
|
||||||
}
|
|
||||||
.job{
|
|
||||||
background-color: $cultured;
|
|
||||||
text-align: center;
|
|
||||||
width: 98%;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 1vh;
|
|
||||||
padding: 1vh;
|
|
||||||
background-color: $cultured;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0.1px;
|
|
||||||
}
|
|
||||||
.job:last-child{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-content{
|
|
||||||
padding: 2vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.added-info{
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-content{
|
|
||||||
margin: auto;
|
|
||||||
text-align: justify;
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: auto;
|
|
||||||
max-width: 80%;
|
|
||||||
max-height: 20%;
|
|
||||||
background-color: $rich-black-fogra-29;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
.jobsContainer{
|
|
||||||
display: flex;
|
|
||||||
height: auto;
|
|
||||||
max-width: $cv-max-width;
|
|
||||||
width: 80vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.job-content{
|
|
||||||
flex-wrap: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { scrollto } from "svelte-scrollto";
|
|
||||||
export let currentLanguage = 'it'
|
|
||||||
export const menu = {home:{it:"Home",en:"Home"},
|
|
||||||
job:{it:"Esperienze",en:"Experiences"},
|
|
||||||
school:{it:"Formazione",en:"Training"},
|
|
||||||
contacts:{it:"Contatti",en:"Contacts"},
|
|
||||||
portfolio:{it:"Portfolio",en:"Portfolio"}}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="div-menu">
|
|
||||||
<div class="wrapper">
|
|
||||||
<a use:scrollto={{element:'#home', offset:-70}} class="menu-element" href="#home" alt="{menu.home[currentLanguage]}"><i class="fas fa-home"></i><span class="hide">{menu.home[currentLanguage]}</span></a>
|
|
||||||
<a use:scrollto={{element:'#jobs', offset:-50}} class="menu-element" href="#jobs" alt="{menu.job[currentLanguage]}"><i class="fas fa-user-tie"></i><span class="hide">{menu.job[currentLanguage]}</span></a>
|
|
||||||
<a use:scrollto={{element:'#training', offset:-50}} class="menu-element" href="#training" alt="{menu.school[currentLanguage]}"><i class="fas fa-graduation-cap"></i><span class="hide">{menu.school[currentLanguage]}</span></a>
|
|
||||||
<a use:scrollto={{element:'#portfolio', offset:-50}} class="menu-element" href="#portfolio" alt="{menu.portfolio[currentLanguage]}"><i class="fas fa-user-clock"></i><span class="hide">{menu.portfolio[currentLanguage]}</span></a>
|
|
||||||
<a use:scrollto={{element:'#contacts', offset:-50}} class="menu-element" href="#contacts" alt="{menu.contacts[currentLanguage]}"><i class="fas fa-address-card"></i><span class="hide">{menu.contacts[currentLanguage]}</span></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
|
|
||||||
@import './static/colors.scss';
|
|
||||||
.div-menu{
|
|
||||||
width: 100%;
|
|
||||||
background-color: $steel-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-element {
|
|
||||||
background-color: $cultured;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
text-decoration: none;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
width: 13%;
|
|
||||||
height: 30px;
|
|
||||||
margin: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
border-color: $rich-black-fogra-29;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-element:hover{
|
|
||||||
background-color: $navajo-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
width: 100%;
|
|
||||||
margin: auto;
|
|
||||||
height: auto;
|
|
||||||
max-width: $cv-max-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 666px) {
|
|
||||||
.div-menu{
|
|
||||||
display: flex;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-element {
|
|
||||||
background-color: $cultured;
|
|
||||||
text-decoration: none;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
width: 17%;
|
|
||||||
height: 30px;
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hide{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
37
src/elements/Skills copy.svelte
Normal file
37
src/elements/Skills copy.svelte
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts"></script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Hello
|
||||||
|
<div>
|
||||||
|
<h4>HTML</h4>
|
||||||
|
<div class="round_base">
|
||||||
|
<div class="inside"><div>percentage</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.round_base {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: yellow;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
outline: 0.1px solid black;
|
||||||
|
background-image: linear-gradient(to right, transparent 40px, #000000 2px);
|
||||||
|
}
|
||||||
|
.inside {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
outline: 0.1px solid black;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import MarkdownIt from 'markdown-it'
|
|
||||||
const md = new MarkdownIt({
|
|
||||||
html:true,
|
|
||||||
xhtmlOut:true,
|
|
||||||
typographer: true,
|
|
||||||
});
|
|
||||||
import data from '../model/training.json'
|
|
||||||
import type { Schema } from 'src/model/job';
|
|
||||||
export let currentLanguage = 'it'
|
|
||||||
const training:Schema[] = data as Schema[];
|
|
||||||
</script>
|
|
||||||
<div class="trainingContainer">
|
|
||||||
{#each training as school }
|
|
||||||
<div class="element">
|
|
||||||
<img src="{school.images[0]}" alt="school logo" />
|
|
||||||
<div>
|
|
||||||
<h4>{school.title[currentLanguage]}</h4>
|
|
||||||
<p>{school.content[currentLanguage]}</p>
|
|
||||||
<p>{school.year.start} - {school.year.end}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<style lang="scss">
|
|
||||||
@import './static/colors.scss';
|
|
||||||
.trainingContainer{
|
|
||||||
margin: auto;
|
|
||||||
background-color:$navajo-white;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 90%;
|
|
||||||
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: 1vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element{
|
|
||||||
background-color: $cultured;
|
|
||||||
text-align: justify;
|
|
||||||
display: flex;
|
|
||||||
align-items: center ;
|
|
||||||
width: 98%;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 1vh;
|
|
||||||
padding: 1vh;
|
|
||||||
background-color: $cultured;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0.1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element:last-child{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element>img{
|
|
||||||
max-width: 35%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element>div{
|
|
||||||
max-width: 50%;
|
|
||||||
margin-left: auto;
|
|
||||||
justify-self: end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element>div>p{
|
|
||||||
text-align: center;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
text-align: justify;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
|
||||||
.trainingContainer{
|
|
||||||
display: flex;
|
|
||||||
height: auto;
|
|
||||||
max-width: $cv-max-width;
|
|
||||||
width: 80vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
79
src/lib/elements/AboutMe.svelte
Normal file
79
src/lib/elements/AboutMe.svelte
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Contacts from './Contacts.svelte';
|
||||||
|
import Skills from './Skills.svelte';
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||||
|
import { faDownload } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import { library, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
|
||||||
|
library.add(faDownload);
|
||||||
|
const downloadDefinition = findIconDefinition({ prefix: 'fas', iconName: 'download' });
|
||||||
|
import type { CurrentLanguage, LanguagePair } from '$lib/types';
|
||||||
|
const whoIt =
|
||||||
|
"Ciao! Sono Gianmarco Pettinato, mi sono laureato in scienze informatiche e sono uno sviluppatore full-stack.\
|
||||||
|
Ho famigliarità con diversi linguaggi e framework, sia front-end che back-end.\
|
||||||
|
In particolare con C++ con Qt e TypeScript con Express, serverless, Angular, Vue.js e Svelte.\
|
||||||
|
Tra le mie competenze, oltre allo sviluppo software e alla manutenzione di sistemi linux, spicca la gestione di ambienti CI/CD, con pipeline automatiche e container come Docker.\
|
||||||
|
Sono interessato in particolar modo all'ambiente dei dispositivi IoT e del wearble tech.\
|
||||||
|
Nel tempo libero mi dedico alla gestione del mio home sever e alla costruzione e manutenzione di computer.\
|
||||||
|
Per maggiori informazioni non esitate a contattarmi.";
|
||||||
|
const whoEn =
|
||||||
|
"Hi! I'm Gianmarco Pettinato. I have a bachelor degree in computer science, and I'm a full-stack developer.\
|
||||||
|
I know several languages and frameworks, either front-end or back-end.\
|
||||||
|
In particular, I have experience in C++ with Qt and TypeScript with Express, serverless, Angular, Vue.js and Svelte.\
|
||||||
|
Among my skill-set, there is the administration of the CI/CD environment with Docker.\
|
||||||
|
I'm interested in the IoT world and Wearable tech. In my free time, I like to manage my GNU/Linux home server and build PCs.";
|
||||||
|
|
||||||
|
const who: LanguagePair = {
|
||||||
|
it: whoIt,
|
||||||
|
en: whoEn
|
||||||
|
};
|
||||||
|
const cvUrl: LanguagePair = { it: '/curriculum_it.pdf', en: '/curriculum_en.pdf' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="aboutMe">
|
||||||
|
<div class="title">
|
||||||
|
<h1>Gianmarco Pettinato</h1>
|
||||||
|
<h2>Software developer</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Contacts />
|
||||||
|
<div class="whoIAm">
|
||||||
|
<p>
|
||||||
|
{who[currentLanguage]}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="cv">
|
||||||
|
<div>
|
||||||
|
<a rel="external" href={cvUrl[currentLanguage]}
|
||||||
|
>curriculum<i><FontAwesomeIcon icon={downloadDefinition} /></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
.cv {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
.whoIAm {
|
||||||
|
margin: auto;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.aboutMe {
|
||||||
|
background-color: $basecolor2;
|
||||||
|
// border: solid 1px $border-color;
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
padding: 30px;
|
||||||
|
margin: 10px;
|
||||||
|
.title {
|
||||||
|
display: none;
|
||||||
|
@media (min-width: $min-tablet) {
|
||||||
|
display: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
104
src/lib/elements/Contacts.svelte
Normal file
104
src/lib/elements/Contacts.svelte
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||||
|
import { faAt } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import { faTelegramPlane, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
|
||||||
|
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||||
|
|
||||||
|
svgCore.library.add(faTelegramPlane);
|
||||||
|
svgCore.library.add(faTwitter);
|
||||||
|
svgCore.library.add(faLinkedin);
|
||||||
|
svgCore.library.add(faAt);
|
||||||
|
|
||||||
|
const telegramLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'telegram-plane' };
|
||||||
|
const twitterLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'twitter' };
|
||||||
|
const linkedinLookup: svgCore.IconLookup = { prefix: 'fab', iconName: 'linkedin' };
|
||||||
|
const atLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'at' };
|
||||||
|
|
||||||
|
const telegramIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(telegramLookup);
|
||||||
|
const twitterIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(twitterLookup);
|
||||||
|
const linkedinIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(linkedinLookup);
|
||||||
|
const atIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(atLookup);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="contacts">
|
||||||
|
<img src="/profile_pic.webp" alt="profile" class="profile" />
|
||||||
|
<div class="links">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="mailto://gianmarco@pettinato.eu"
|
||||||
|
><i><FontAwesomeIcon icon={atIconDefinition} /></i> e-mail: gianmarco@pettinato.eu</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://t.me/jatus_93"
|
||||||
|
><i><FontAwesomeIcon icon={telegramIconDefinition} /></i> telegram: @jatus_93</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://twitter.com/jatus_93"
|
||||||
|
><i><FontAwesomeIcon icon={twitterIconDefinition} /></i> twitter: @jatus_93</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.linkedin.com/in/gianmarco-pettinato/"
|
||||||
|
><i><FontAwesomeIcon icon={linkedinIconDefinition} /></i> linkedin: Gianmarco Pettinato</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
|
||||||
|
img.profile {
|
||||||
|
border-radius: 50%;
|
||||||
|
max-width: 150px;
|
||||||
|
// border: solid 1px $border-color;
|
||||||
|
}
|
||||||
|
.contacts {
|
||||||
|
background-color: $basecolor2;
|
||||||
|
// border: solid 1px $border-color;
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
padding: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
text-align: left;
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
line-height: 20px;
|
||||||
|
white-space: nowrap;
|
||||||
|
li {
|
||||||
|
padding: 0;
|
||||||
|
margin: 10px;
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: $min-tablet) {
|
||||||
|
.contacts {
|
||||||
|
flex-direction: row;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
a {
|
||||||
|
font-size: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
78
src/lib/elements/JobElement.svelte
Normal file
78
src/lib/elements/JobElement.svelte
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import MarkdownIt from 'markdown-it';
|
||||||
|
const md = new MarkdownIt({
|
||||||
|
html: true,
|
||||||
|
xhtmlOut: true,
|
||||||
|
typographer: true,
|
||||||
|
breaks: true,
|
||||||
|
linkify: true
|
||||||
|
});
|
||||||
|
import type { Schema } from '$lib/model/job';
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
export let job: Schema;
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="job-container">
|
||||||
|
<h3>{job.title[currentLanguage]}</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])}
|
||||||
|
</div>
|
||||||
|
<div class="added-info">
|
||||||
|
{#if job.year}
|
||||||
|
Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
|
||||||
|
{/if}
|
||||||
|
<div>
|
||||||
|
{#if job.collaborators.length != 0}
|
||||||
|
Collab:
|
||||||
|
{/if}
|
||||||
|
{#each job.collaborators as collaborator, index}
|
||||||
|
<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
|
||||||
|
job.collaborators.length - 1
|
||||||
|
? ', '
|
||||||
|
: ''}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{#if job.languages.length != 0}
|
||||||
|
Lang:
|
||||||
|
{/if}
|
||||||
|
{#each job.languages as language, index}
|
||||||
|
{language}{index != job.languages.length - 1 ? ', ' : ''}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{#if job.tecnologies.length != 0}
|
||||||
|
Tech:
|
||||||
|
{/if}
|
||||||
|
{#each job.tecnologies as tecnology, index}
|
||||||
|
{tecnology}{index != job.tecnologies.length - 1 ? ', ' : ''}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
.text-content {
|
||||||
|
margin: auto;
|
||||||
|
text-align: justify;
|
||||||
|
}
|
||||||
|
.added-info {
|
||||||
|
text-align: left;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.job-container {
|
||||||
|
img {
|
||||||
|
background-color: $text-color;
|
||||||
|
}
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
43
src/lib/elements/Jobs.svelte
Normal file
43
src/lib/elements/Jobs.svelte
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Schema } from '$lib/model/job';
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
import JobElement from './JobElement.svelte';
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
export let isBlogContainer = false;
|
||||||
|
export let jobs: Schema[] = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="jobs-container">
|
||||||
|
{#if isBlogContainer}
|
||||||
|
{#each jobs as job}
|
||||||
|
<a href="#" class="job-card"><JobElement {job} {currentLanguage} /></a>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
{#each jobs as job}
|
||||||
|
<div class="job-card"><JobElement {job} {currentLanguage} /></div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
.jobs-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.job-card {
|
||||||
|
background-color: $basecolor2;
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
padding: 10px 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
@media (min-width: $min-desktop) {
|
||||||
|
width: 29vw;
|
||||||
|
}
|
||||||
|
@media (min-width: 1400px) {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
20
src/lib/elements/LanguageSelector.svelte
Normal file
20
src/lib/elements/LanguageSelector.svelte
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
currentLanguage = 'it';
|
||||||
|
}}>it</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
currentLanguage = 'en';
|
||||||
|
}}>en</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
119
src/lib/elements/Menu.svelte
Normal file
119
src/lib/elements/Menu.svelte
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||||
|
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||||
|
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
|
||||||
|
|
||||||
|
svgCore.library.add(svgIcons.faHome);
|
||||||
|
svgCore.library.add(svgIcons.faUserTie);
|
||||||
|
svgCore.library.add(svgIcons.faGraduationCap);
|
||||||
|
svgCore.library.add(svgIcons.faUserClock);
|
||||||
|
svgCore.library.add(svgIcons.faAddressCard);
|
||||||
|
svgCore.library.add(svgIcons.faBars);
|
||||||
|
svgCore.library.add(svgIcons.faGlobeEurope);
|
||||||
|
|
||||||
|
const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
|
||||||
|
const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
|
||||||
|
const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
|
||||||
|
const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
|
||||||
|
const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
|
||||||
|
const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
|
||||||
|
const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
|
||||||
|
const graduationDefinition: svgCore.IconDefinition =
|
||||||
|
svgCore.findIconDefinition(graduationCapLookup);
|
||||||
|
const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
|
||||||
|
const addressCardDefinition: svgCore.IconDefinition =
|
||||||
|
svgCore.findIconDefinition(addressCardLookUp);
|
||||||
|
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
const menu: Record<MenuEntry, LanguagePair> = {
|
||||||
|
home: { it: 'Home', en: 'Home' },
|
||||||
|
job: { it: 'Esperienze', en: 'Experiences' },
|
||||||
|
school: { it: 'Formazione', en: 'Training' },
|
||||||
|
blog: { it: 'Blog', en: 'Blog' },
|
||||||
|
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<ul class="wrapper">
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#top">
|
||||||
|
<i>
|
||||||
|
<FontAwesomeIcon icon={homeIconDefinition} />
|
||||||
|
</i>
|
||||||
|
<span>{menu.home[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#jobs"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={userTieDefinition} />
|
||||||
|
</i><span>{menu.job[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#training"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={graduationDefinition} />
|
||||||
|
</i><span>{menu.school[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#portfolio"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={userClockDefinition} />
|
||||||
|
</i><span>{menu.portfolio[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="/blog"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={addressCardDefinition} />
|
||||||
|
</i><span>{menu.blog[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
$menu-size: 1004px;
|
||||||
|
.wrapper {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
@media (min-width: $menu-size) {
|
||||||
|
width: $menu-size;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: white;
|
||||||
|
font-size: larger;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
outline: 1px solid;
|
||||||
|
i {
|
||||||
|
margin-right: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background-color: rgb(176, 176, 176);
|
||||||
|
outline: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
list-style-type: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
164
src/lib/elements/MenuMobile.svelte
Normal file
164
src/lib/elements/MenuMobile.svelte
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { tweened } from 'svelte/motion';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
|
||||||
|
import * as svgIcons from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import * as svgCore from '@fortawesome/fontawesome-svg-core';
|
||||||
|
import type { CurrentLanguage, LanguagePair, MenuEntry } from '$lib/types';
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
svgCore.library.add(svgIcons.faBars);
|
||||||
|
|
||||||
|
svgCore.library.add(svgIcons.faHome);
|
||||||
|
svgCore.library.add(svgIcons.faUserTie);
|
||||||
|
svgCore.library.add(svgIcons.faGraduationCap);
|
||||||
|
svgCore.library.add(svgIcons.faUserClock);
|
||||||
|
svgCore.library.add(svgIcons.faAddressCard);
|
||||||
|
svgCore.library.add(svgIcons.faBars);
|
||||||
|
svgCore.library.add(svgIcons.faX);
|
||||||
|
svgCore.library.add(svgIcons.faGlobeEurope);
|
||||||
|
|
||||||
|
const barsLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'bars' };
|
||||||
|
const globeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'globe-europe' };
|
||||||
|
const homeLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'home' };
|
||||||
|
const userTieLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-tie' };
|
||||||
|
const graduationCapLookup: svgCore.IconLookup = { prefix: 'fas', iconName: 'graduation-cap' };
|
||||||
|
const userClockLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'user-clock' };
|
||||||
|
const addressCardLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'address-card' };
|
||||||
|
const xLookUp: svgCore.IconLookup = { prefix: 'fas', iconName: 'x' };
|
||||||
|
|
||||||
|
const homeIconDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(homeLookup);
|
||||||
|
const userTieDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userTieLookup);
|
||||||
|
const graduationDefinition: svgCore.IconDefinition =
|
||||||
|
svgCore.findIconDefinition(graduationCapLookup);
|
||||||
|
const userClockDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(userClockLookUp);
|
||||||
|
const addressCardDefinition: svgCore.IconDefinition =
|
||||||
|
svgCore.findIconDefinition(addressCardLookUp);
|
||||||
|
const barsDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(barsLookup);
|
||||||
|
const xDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(xLookUp);
|
||||||
|
const globeDefinition: svgCore.IconDefinition = svgCore.findIconDefinition(globeLookup);
|
||||||
|
|
||||||
|
const menu: Record<MenuEntry, LanguagePair> = {
|
||||||
|
home: { it: 'Home', en: 'Home' },
|
||||||
|
job: { it: 'Esperienze', en: 'Experiences' },
|
||||||
|
school: { it: 'Formazione', en: 'Training' },
|
||||||
|
blog: { it: 'Blog', en: 'Blog' },
|
||||||
|
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||||
|
};
|
||||||
|
let menuContainer: Element;
|
||||||
|
let menuOpen = false;
|
||||||
|
|
||||||
|
function setOpen() {
|
||||||
|
menuOpen = !menuOpen;
|
||||||
|
const animation = menuContainer.animate([{ height: '0px' }, { height: '360px' }], {
|
||||||
|
duration: 100,
|
||||||
|
fill: 'both'
|
||||||
|
});
|
||||||
|
if (menuOpen) animation.play();
|
||||||
|
else animation.reverse();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="menu-container">
|
||||||
|
<div class="header">
|
||||||
|
<button on:click={setOpen} tabindex="0" title="menu toggle">
|
||||||
|
{#if !menuOpen}<FontAwesomeIcon icon={barsDefinition} size="lg" />
|
||||||
|
{:else}
|
||||||
|
<FontAwesomeIcon icon={xDefinition} size="lg" />
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
<div class="title">
|
||||||
|
<h1>Gianmarco Pettinato</h1>
|
||||||
|
<h2>Software developer</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="wrapper" bind:this={menuContainer}>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#top">
|
||||||
|
<i>
|
||||||
|
<FontAwesomeIcon icon={homeIconDefinition} />
|
||||||
|
</i>
|
||||||
|
<span>{menu.home[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#jobs"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={userTieDefinition} />
|
||||||
|
</i><span>{menu.job[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#training"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={graduationDefinition} />
|
||||||
|
</i><span>{menu.school[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="#portfolio"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={userClockDefinition} />
|
||||||
|
</i><span>{menu.portfolio[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a class="menu-element" href="/blog"
|
||||||
|
><i>
|
||||||
|
<FontAwesomeIcon icon={addressCardDefinition} />
|
||||||
|
</i><span>{menu.blog[currentLanguage]}</span></a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 10px;
|
||||||
|
height: 10%;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
button {
|
||||||
|
height: 80px;
|
||||||
|
width: 80px;
|
||||||
|
border: none;
|
||||||
|
font-size: 40px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-container {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
padding-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
background-color: white;
|
||||||
|
font-size: larger;
|
||||||
|
height: 60px;
|
||||||
|
border: 1px solid;
|
||||||
|
i {
|
||||||
|
margin-right: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
background-color: rgb(176, 176, 176);
|
||||||
|
outline: 1px solid;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
37
src/lib/elements/Skills copy.svelte
Normal file
37
src/lib/elements/Skills copy.svelte
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts"></script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Hello
|
||||||
|
<div>
|
||||||
|
<h4>HTML</h4>
|
||||||
|
<div class="round_base">
|
||||||
|
<div class="inside"><div>percentage</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.round_base {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: yellow;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
outline: 0.1px solid black;
|
||||||
|
background-image: linear-gradient(to right, #000000 2px, blue 100%);
|
||||||
|
}
|
||||||
|
.inside {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
outline: 0.1px solid black;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
37
src/lib/elements/Skills.svelte
Normal file
37
src/lib/elements/Skills.svelte
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script lang="ts"></script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="round_base">
|
||||||
|
<div class="inside"><p>HTML</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
p {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.round_base {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
outline: 0.1px solid black;
|
||||||
|
background-image: linear-gradient(to right, red 5px 5px, black 5px 5px, red 1px);
|
||||||
|
// background-size: 1px 20px;
|
||||||
|
// background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
.inside {
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
// background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
outline: 0.1px solid black;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
66
src/lib/elements/Training.svelte
Normal file
66
src/lib/elements/Training.svelte
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import MarkdownIt from 'markdown-it';
|
||||||
|
import data from '../model/training.json';
|
||||||
|
import type { Schema } from '$lib/model/job';
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
|
||||||
|
const md = new MarkdownIt({
|
||||||
|
html: true,
|
||||||
|
xhtmlOut: true,
|
||||||
|
typographer: true
|
||||||
|
});
|
||||||
|
export let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
const training: Schema[] = data as Schema[];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="training">
|
||||||
|
{#each training as school}
|
||||||
|
<div class="element">
|
||||||
|
<img src={school.images[0]} alt="school logo" />
|
||||||
|
<div>
|
||||||
|
<h3>{school.title[currentLanguage]}</h3>
|
||||||
|
<p>{school.content[currentLanguage]}</p>
|
||||||
|
<p>{school.year.start} - {school.year.end}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.training {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
@import '../../app.scss';
|
||||||
|
.element {
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
background-color: white;
|
||||||
|
padding: 45px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-content: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 150px;
|
||||||
|
object-fit: scale-down;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $min-tablet) {
|
||||||
|
.element {
|
||||||
|
flex-direction: row;
|
||||||
|
div {
|
||||||
|
width: 50%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/model/job.d.ts → src/lib/model/job.d.ts
vendored
10
src/model/job.d.ts → src/lib/model/job.d.ts
vendored
@@ -1,34 +1,30 @@
|
|||||||
/* tslint:disable */
|
/* tslint:disable */
|
||||||
/**
|
/**
|
||||||
* This file was automatically generated by json-schema-to-TypeScript.
|
* This file was automatically generated by json-schema-to-typescript.
|
||||||
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
* DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
|
||||||
* and run json-schema-to-TypeScript to regenerate this file.
|
* and run json-schema-to-typescript to regenerate this file.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface Schema {
|
export interface Schema {
|
||||||
|
id?: string;
|
||||||
year: {
|
year: {
|
||||||
start: string;
|
start: string;
|
||||||
end: string;
|
end: string;
|
||||||
[k: string]: unknown;
|
|
||||||
};
|
};
|
||||||
title: {
|
title: {
|
||||||
en: string;
|
en: string;
|
||||||
it: string;
|
it: string;
|
||||||
[k: string]: unknown;
|
|
||||||
};
|
};
|
||||||
content: {
|
content: {
|
||||||
en: string;
|
en: string;
|
||||||
it: string;
|
it: string;
|
||||||
[k: string]: unknown;
|
|
||||||
};
|
};
|
||||||
collaborators: {
|
collaborators: {
|
||||||
name: string;
|
name: string;
|
||||||
surname: string;
|
surname: string;
|
||||||
ref: string;
|
ref: string;
|
||||||
[k: string]: unknown;
|
|
||||||
}[];
|
}[];
|
||||||
languages: string[];
|
languages: string[];
|
||||||
tecnologies: string[];
|
tecnologies: string[];
|
||||||
images: string[];
|
images: string[];
|
||||||
[k: string]: unknown;
|
|
||||||
}
|
}
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
"Docker",
|
"Docker",
|
||||||
"AWS"
|
"AWS"
|
||||||
],
|
],
|
||||||
"images":["/ALTEN.jpg"]
|
"images":["/ALTEN.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year": {
|
"year": {
|
||||||
@@ -35,8 +35,8 @@
|
|||||||
},
|
},
|
||||||
"title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
|
"title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
|
||||||
"content": {
|
"content": {
|
||||||
"en":"Through the 2021, I've worked to begin my independent activity base on my idea of business. To do so, I learnt different practices and filled many roles:<div style=\"margin-left: -25px;\">\n- Create a work's infrastructure, mainly create a centralized resource on the server:\n - Manage the **GNU\/Linux** server with \"Unraid\" as distribution.\n - Manage all the services using **Docker**:\n - **GitLab**, with the runner for CI\/CD, other than the software repositories I managed to setup:\n - package **npm** repository\n - **Docker** repository\n - **NginxProxyManager** to handle the public services in reverse proxy\n - **SonarQube** to automatically verify the software quality\n - Manage all the virtual machines to develop and deploy software in the staging environment\n - Project and develop the software, main activity of this endeavour:\n - Project the software architecture\n - Project the database\n - Implement the software based on the architecture:\n - Back-end **TypeScript** on **AWS-Lambda** platform with **Serverless framework**\n - Front-end in **TypeScript** with **Nativescript** framework\n - Implement the database architecture with **MongoDB**\n - Create a Proof of Concept of the application\n - Project and develop **CI\/CD** solution for the product:\n - Create pipelines for the CI\/CD process in the **GitLab** environment\n - Create **Docker files** to perform the unit test and compilation of the source code in the repositories.</div>",
|
"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 attività indipendente che si basa su una mia idea di app. Per far ciò, durante questo periodo ho dovuto ricoprire diversi ruoli e svolgere diverse mansioni:<div style=\"margin-left: -25px;\">\n- Creare un'infrastruttura di lavoro, un server dove centralizzare le risorse, nello specifico:\n - Gestire il server **GNU\/Linux** con la distribuzione *prosumer* Unraid..\n - Gestire i vari servizi in container **Docker**:\n - **GitLab** con il suo runner per le pipeline **CI/CD**:\n - *repository* di pacchetti **npm** \n - *repository* di immagini **Docker**\n - **NginxProxyManager** per la gestione dei servizi pubblici in reverse proxy\n - **SonarQube** per la verifica automatica della qualità del codice\n - Gestione di macchine virtuali per lo sviluppo di codice ma anche come *staging area* per testare le applicazioni in un ambiente *production like*\n - Progettare e sviluppare il software, focus di questa attività:\n - Progettare l'architettura del software\n - Progettare il database\n - Implementare l'architettura:\n - Back-end in **TypeScript** su piattaforma **AWS-Lambda** con **Serveless framework**\n - Front-end in app *cross-platform* in **TypeScript** con **Nativescript**\n - Implementare l'architettura di database in **MongoDB**\n - Creare un *proof of concept* dell'applicazione.\n - Progettare e sviluppare soluzioni di **CI\/CD** legate al prodotto:\n - Creare pipeline automatiche in **GitLab** con riferimento al \"versionamento\" interno\n - Creare Docker-file con l'ambiente di compilazione da utilizzare con le pipeline automatiche.</div>"
|
"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**."
|
||||||
},
|
},
|
||||||
"collaborators": [],
|
"collaborators": [],
|
||||||
"languages": [
|
"languages": [
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
"GitLab",
|
"GitLab",
|
||||||
"Nativescript"
|
"Nativescript"
|
||||||
],
|
],
|
||||||
"images":["/logo-jatus-tech.png"]
|
"images":["/logo-jatus-tech.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year": {
|
"year": {
|
||||||
@@ -78,7 +78,7 @@
|
|||||||
"Nuxt",
|
"Nuxt",
|
||||||
"Docker"
|
"Docker"
|
||||||
],
|
],
|
||||||
"images":["/logo-athesys.png"]
|
"images":["/logo-athesys.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year": {
|
"year": {
|
||||||
@@ -99,7 +99,7 @@
|
|||||||
"Composer",
|
"Composer",
|
||||||
"Docker"
|
"Docker"
|
||||||
],
|
],
|
||||||
"images":["/alternative-studio.png"]
|
"images":["/alternative-studio.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year": {
|
"year": {
|
||||||
@@ -108,12 +108,12 @@
|
|||||||
},
|
},
|
||||||
"title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
|
"title": {"en":"ICT office's assistant","it":"Assistente dell'ufficio ICT "},
|
||||||
"content": {
|
"content": {
|
||||||
"en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:<div style=\"margin-left: -25px;\">\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.</div>",
|
"en":"I applied to this position, in Saxon Hill Academy, through the European project Leonardo which provided accommodation for the stay, an English course and a workplace mainly for practices the language skill. In Saxon Hill Academy, my responsibilities were:\n - Maintenance of administration's computers.\n - Maintenance of students' computers.\n - Make the sensorial room usable.",
|
||||||
"it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire agli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:<div style=\"margin-left: -25px;\">\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\"</div>"
|
"it":"Ho avuto l'opportunità di lavorare in questo ambiente grazie al progetto europeo Leonardo. Questo progetto di 4 settimane si occupava di fornire agli studenti tutto il necessario tra vitto e alloggio, prevedeva, inoltre, un corso di inglese e un luogo di lavoro dove fare principalmente pratica con la lingua. In questo contesto sono stato assegnato a Saxon Hill Academy dove ho svolto le seguenti mansioni:\n - Manutenzione dei computer della segreteria\n - Manutenzione dei computer degli studenti \n - Rendere operativa la \"sensiorial room\""
|
||||||
},
|
},
|
||||||
"collaborators": [],
|
"collaborators": [],
|
||||||
"languages": [],
|
"languages": [],
|
||||||
"tecnologies": [],
|
"tecnologies": [],
|
||||||
"images":["/saxonhilllogo.jpg"]
|
"images":["/saxonhilllogo.webp"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
"Svelte",
|
"Svelte",
|
||||||
"Node.js"
|
"Node.js"
|
||||||
],
|
],
|
||||||
"images":["/webpage.png"]
|
"images":["/webpage.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":["TypeScript"],
|
"languages":["TypeScript"],
|
||||||
"tecnologies":["Node.js"],
|
"tecnologies":["Node.js"],
|
||||||
"images":[]
|
"images":["./DGCServerVerifier.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year": {
|
"year": {
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
"tecnologies": [
|
"tecnologies": [
|
||||||
"QMK"
|
"QMK"
|
||||||
],
|
],
|
||||||
"images":["/custom-keyboard.jpg"]
|
"images":["/custom-keyboard.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":["bash","python"],
|
"languages":["bash","python"],
|
||||||
"tecnologies":["raspberry"],
|
"tecnologies":["raspberry"],
|
||||||
"images":["/3dprinter.jpg"]
|
"images":["/3dprinter.webp"]
|
||||||
},{
|
},{
|
||||||
"year":{
|
"year":{
|
||||||
"start":"2021-09-15",
|
"start":"2021-09-15",
|
||||||
@@ -77,7 +77,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":["YAML"],
|
"languages":["YAML"],
|
||||||
"tecnologies":["Docker","Unraid","GNU/Linux"],
|
"tecnologies":["Docker","Unraid","GNU/Linux"],
|
||||||
"images":[]
|
"images":["./unraid.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -91,7 +91,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":[],
|
"languages":[],
|
||||||
"tecnologies":[],
|
"tecnologies":[],
|
||||||
"images":["/workstation.jpg"]
|
"images":["/workstation.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -105,7 +105,7 @@
|
|||||||
"collaborators":[{"name":"Gezim","surname":"Cikaqi","ref":"https://www.linkedin.com/in/gezimcikaqi/"},{"name":"Gabriel","surname":"Ciulei","ref":"https://www.linkedin.com/in/gabriel-ciulei/"},{"name":"Simone","surname":"Franconetti","ref":"https://www.linkedin.com/in/simone-franconetti-2b48b4147/"},{"name":"Giovanni","surname":"Incalza","ref":"https://www.linkedin.com/in/giovanni-incalza/"},{"name":"Nicola","surname":"Salvadore","ref":"https://www.linkedin.com/in/nicola-salvadore-02b015210/"},{"name":"Paola","surname":"Trevisan","ref":"https://www.linkedin.com/in/paola-trevisan-166891113/"}],
|
"collaborators":[{"name":"Gezim","surname":"Cikaqi","ref":"https://www.linkedin.com/in/gezimcikaqi/"},{"name":"Gabriel","surname":"Ciulei","ref":"https://www.linkedin.com/in/gabriel-ciulei/"},{"name":"Simone","surname":"Franconetti","ref":"https://www.linkedin.com/in/simone-franconetti-2b48b4147/"},{"name":"Giovanni","surname":"Incalza","ref":"https://www.linkedin.com/in/giovanni-incalza/"},{"name":"Nicola","surname":"Salvadore","ref":"https://www.linkedin.com/in/nicola-salvadore-02b015210/"},{"name":"Paola","surname":"Trevisan","ref":"https://www.linkedin.com/in/paola-trevisan-166891113/"}],
|
||||||
"languages":["TypeScript","Solidity","YAML"],
|
"languages":["TypeScript","Solidity","YAML"],
|
||||||
"tecnologies":["Node.js","AWS Lambda","Docker","GitHub Action","Ethereum"],
|
"tecnologies":["Node.js","AWS Lambda","Docker","GitHub Action","Ethereum"],
|
||||||
"images":[]
|
"images":["./tenners.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -119,7 +119,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":["bash"],
|
"languages":["bash"],
|
||||||
"tecnologies":["Docker","GitHub Action"],
|
"tecnologies":["Docker","GitHub Action"],
|
||||||
"images":[]
|
"images":["./LatexMulticompiler.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -133,7 +133,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":["bash"],
|
"languages":["bash"],
|
||||||
"tecnologies":["Docker","GitHub Action"],
|
"tecnologies":["Docker","GitHub Action"],
|
||||||
"images":[]
|
"images":["/spellCheck.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -147,7 +147,7 @@
|
|||||||
"collaborators":[],
|
"collaborators":[],
|
||||||
"languages":["C++"],
|
"languages":["C++"],
|
||||||
"tecnologies":["Qt"],
|
"tecnologies":["Qt"],
|
||||||
"images":["/QContainer.png"]
|
"images":["/QContainer.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -160,7 +160,7 @@
|
|||||||
"collaborators":[{"name":"Giuseppe Vito","surname":"Bitetti","ref":"https://www.linkedin.com/in/giuseppe-vito-bitetti-587751200"}, {"name":"Enrico","surname":"Buratto","ref":"https://www.linkedin.com/in/enrico-buratto-04104b151"},{"name":"Mariano","surname":"Sciacco","ref":"https://www.linkedin.com/in/marianosciacco/"}],
|
"collaborators":[{"name":"Giuseppe Vito","surname":"Bitetti","ref":"https://www.linkedin.com/in/giuseppe-vito-bitetti-587751200"}, {"name":"Enrico","surname":"Buratto","ref":"https://www.linkedin.com/in/enrico-buratto-04104b151"},{"name":"Mariano","surname":"Sciacco","ref":"https://www.linkedin.com/in/marianosciacco/"}],
|
||||||
"languages":["PHP","SQL"],
|
"languages":["PHP","SQL"],
|
||||||
"tecnologies":["Apache","MariaDB"],
|
"tecnologies":["Apache","MariaDB"],
|
||||||
"images":["/techweb.png"]
|
"images":["/techweb.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year":{
|
"year":{
|
||||||
@@ -174,6 +174,6 @@
|
|||||||
"collaborators":[{"name":"Mariano","surname":"Sciacco","ref":"https://www.linkedin.com/in/marianosciacco/"}],
|
"collaborators":[{"name":"Mariano","surname":"Sciacco","ref":"https://www.linkedin.com/in/marianosciacco/"}],
|
||||||
"languages":["C++","SWL","ANTLR grammar"],
|
"languages":["C++","SWL","ANTLR grammar"],
|
||||||
"tecnologies":["ANTLR"],
|
"tecnologies":["ANTLR"],
|
||||||
"images":[]
|
"images":["./SWL.webp"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -2,6 +2,9 @@
|
|||||||
"$schema": "http://json-schema.org/draft-04/schema#",
|
"$schema": "http://json-schema.org/draft-04/schema#",
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
|
"id": {
|
||||||
|
"type": "string"
|
||||||
|
},
|
||||||
"year": {
|
"year": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"properties": {
|
"properties": {
|
||||||
@@ -15,7 +18,8 @@
|
|||||||
"required": [
|
"required": [
|
||||||
"start",
|
"start",
|
||||||
"end"
|
"end"
|
||||||
]
|
],
|
||||||
|
"additionalProperties": false
|
||||||
},
|
},
|
||||||
"title": {
|
"title": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
@@ -30,7 +34,8 @@
|
|||||||
"required": [
|
"required": [
|
||||||
"en",
|
"en",
|
||||||
"it"
|
"it"
|
||||||
]
|
],
|
||||||
|
"additionalProperties": false
|
||||||
},
|
},
|
||||||
"content": {
|
"content": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
@@ -45,7 +50,8 @@
|
|||||||
"required": [
|
"required": [
|
||||||
"en",
|
"en",
|
||||||
"it"
|
"it"
|
||||||
]
|
],
|
||||||
|
"additionalProperties": false
|
||||||
},
|
},
|
||||||
"collaborators": {
|
"collaborators": {
|
||||||
"type": "array",
|
"type": "array",
|
||||||
@@ -66,7 +72,8 @@
|
|||||||
"name",
|
"name",
|
||||||
"surname",
|
"surname",
|
||||||
"ref"
|
"ref"
|
||||||
]
|
],
|
||||||
|
"additionalProperties": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"languages": {
|
"languages": {
|
||||||
@@ -96,5 +103,6 @@
|
|||||||
"languages",
|
"languages",
|
||||||
"tecnologies",
|
"tecnologies",
|
||||||
"images"
|
"images"
|
||||||
]
|
],
|
||||||
|
"additionalProperties": false
|
||||||
}
|
}
|
||||||
@@ -10,7 +10,7 @@
|
|||||||
"collaborators": [],
|
"collaborators": [],
|
||||||
"languages": [],
|
"languages": [],
|
||||||
"tecnologies": [],
|
"tecnologies": [],
|
||||||
"images":["unipd-universita-di-padova.png"]
|
"images":["unipd-universita-di-padova.webp"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"year": {
|
"year": {
|
||||||
@@ -24,6 +24,6 @@
|
|||||||
"collaborators": [],
|
"collaborators": [],
|
||||||
"languages": [],
|
"languages": [],
|
||||||
"tecnologies": [],
|
"tecnologies": [],
|
||||||
"images":["logoSeveri.png"]
|
"images":["logoSeveri.webp"]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
13
src/lib/types.ts
Normal file
13
src/lib/types.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
export type CurrentLanguage = 'it' | 'en';
|
||||||
|
export type MenuEntry = 'home' | 'job' | 'school' | 'blog' | 'portfolio';
|
||||||
|
export type LanguagePair = {
|
||||||
|
[key in CurrentLanguage]: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const e: Record<MenuEntry, LanguagePair> = {
|
||||||
|
home: { it: 'Home', en: 'Home' },
|
||||||
|
job: { it: 'Esperienze', en: 'Experiences' },
|
||||||
|
school: { it: 'Formazione', en: 'Training' },
|
||||||
|
blog: { it: 'Blog', en: 'Blog' },
|
||||||
|
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||||
|
};
|
||||||
138
src/routes/+page.svelte
Normal file
138
src/routes/+page.svelte
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { MetaTags } from 'svelte-meta-tags';
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
import AboutMe from '$lib/elements/AboutMe.svelte';
|
||||||
|
import Jobs from '$lib/elements/Jobs.svelte';
|
||||||
|
import Menu from '$lib/elements/Menu.svelte';
|
||||||
|
import MenuMobile from '$lib/elements/MenuMobile.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: CurrentLanguage = 'it';
|
||||||
|
let titles = {
|
||||||
|
home: {
|
||||||
|
it: 'Gianmarco Pettinato',
|
||||||
|
en: 'Gianmarco Pettinato'
|
||||||
|
},
|
||||||
|
job: { it: 'Esperienze', en: 'Experiences' },
|
||||||
|
school: { it: 'Formazione', en: 'Training' },
|
||||||
|
contacts: { it: 'Contatti', en: 'Contacts' },
|
||||||
|
portfolio: { it: 'Portfolio', en: 'Portfolio' }
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MetaTags
|
||||||
|
title="Gianmarco Pettinato"
|
||||||
|
description="This is the Gianmarco's portfolio site"
|
||||||
|
canonical="https://pettinato.eu/"
|
||||||
|
openGraph={{
|
||||||
|
url: 'https://pettinato.eu/',
|
||||||
|
title: 'Gianmarco Pettinato',
|
||||||
|
description: "This is the Gianmarco's portfolio site",
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: 'https://www.example.ie/og-image-01.jpg',
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
alt: 'Og Image Alt'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://www.example.ie/og-image-02.jpg',
|
||||||
|
width: 900,
|
||||||
|
height: 800,
|
||||||
|
alt: 'Og Image Alt Second'
|
||||||
|
},
|
||||||
|
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
||||||
|
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
||||||
|
],
|
||||||
|
site_name: 'Gianmarco Pettinato Portfolio'
|
||||||
|
}}
|
||||||
|
twitter={{
|
||||||
|
handle: '@jatus_93',
|
||||||
|
site: '@jatus_93',
|
||||||
|
cardType: 'summary',
|
||||||
|
title: 'Gianmarco Pettinato Portfolio',
|
||||||
|
description: "This is the Gianmarco's portfolio site",
|
||||||
|
image: 'https://pettinato.eu/profile_pic.webp',
|
||||||
|
imageAlt: 'Gianmarco Photo'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||||
|
|
||||||
|
<div class="menu menu-desktop">
|
||||||
|
<Menu {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
<div class="menu menu-mobile">
|
||||||
|
<MenuMobile {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
<div id="home" class="default">
|
||||||
|
<AboutMe {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
<div id="jobs" class="default">
|
||||||
|
<h2>{titles.job[currentLanguage]}</h2>
|
||||||
|
<Jobs {jobs} {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
<div id="training" class="default">
|
||||||
|
<h2>{titles.school[currentLanguage]}</h2>
|
||||||
|
<Training {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
<div id="portfolio" class="default">
|
||||||
|
<h2>{titles.portfolio[currentLanguage]}</h2>
|
||||||
|
<Jobs jobs={portfolio} {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../app.scss';
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
background-color: $basecolor2;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
top: 0px;
|
||||||
|
border-bottom: solid #999 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-desktop {
|
||||||
|
display: none;
|
||||||
|
@media (min-width: $min-tablet) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-mobile {
|
||||||
|
@media (min-width: $min-tablet) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
border: solid $button-border-color 1px;
|
||||||
|
width: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.custom-button:hover {
|
||||||
|
background-color: $text-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.custom-button-active {
|
||||||
|
cursor: unset;
|
||||||
|
background-color: $text-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
@media (max-width: $min-tablet) {
|
||||||
|
.custom-button {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
134
src/routes/blog/+page.svelte
Normal file
134
src/routes/blog/+page.svelte
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { MetaTags } from 'svelte-meta-tags';
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
import Data_portfolio from '../../lib/model/portfolio.json';
|
||||||
|
import type { Schema } from '$lib/model/job';
|
||||||
|
import Menu from '$lib/elements/Menu.svelte';
|
||||||
|
import Jobs from '$lib/elements/Jobs.svelte';
|
||||||
|
|
||||||
|
let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
let isBlogContainer = true;
|
||||||
|
let jobs: Schema[] = Data_portfolio as Schema[];
|
||||||
|
let title = { it: 'I miei articoli', en: 'my blog posts' };
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MetaTags
|
||||||
|
title="Gianmarco Pettinato"
|
||||||
|
description="This is the Gianmarco's portfolio site"
|
||||||
|
canonical="https://pettinato.eu/"
|
||||||
|
openGraph={{
|
||||||
|
url: 'https://pettinato.eu/',
|
||||||
|
title: 'Gianmarco Pettinato',
|
||||||
|
description: "This is the Gianmarco's portfolio site",
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: 'https://www.example.ie/og-image-01.jpg',
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
alt: 'Og Image Alt'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://www.example.ie/og-image-02.jpg',
|
||||||
|
width: 900,
|
||||||
|
height: 800,
|
||||||
|
alt: 'Og Image Alt Second'
|
||||||
|
},
|
||||||
|
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
||||||
|
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
||||||
|
],
|
||||||
|
site_name: 'Gianmarco Pettinato Portfolio'
|
||||||
|
}}
|
||||||
|
twitter={{
|
||||||
|
handle: '@jatus_93',
|
||||||
|
site: '@jatus_93',
|
||||||
|
cardType: 'summary',
|
||||||
|
title: 'Gianmarco Pettinato Portfolio',
|
||||||
|
description: "This is the Gianmarco's portfolio site",
|
||||||
|
image: 'https://pettinato.eu/profile_pic.webp',
|
||||||
|
imageAlt: 'Gianmarco Photo'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||||
|
<div class="language-selector" id="language-selector">
|
||||||
|
<button
|
||||||
|
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
currentLanguage = 'it';
|
||||||
|
}}>it</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
currentLanguage = 'en';
|
||||||
|
}}>en</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu">
|
||||||
|
<Menu {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
<div id="portfolio" class="default">
|
||||||
|
<h2>{title.it}</h2>
|
||||||
|
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../app.scss';
|
||||||
|
.language-selector {
|
||||||
|
right: 0;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
@media (max-width: $min-desktop) {
|
||||||
|
width: 100%;
|
||||||
|
position: unset;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
background-color: $basecolor2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
background-color: $basecolor2;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
top: 0px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: solid #999 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
border: solid $button-border-color 1px;
|
||||||
|
width: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.custom-button:hover {
|
||||||
|
background-color: $text-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.custom-button-active {
|
||||||
|
cursor: unset;
|
||||||
|
background-color: $text-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
@media (max-width: $min-tablet) {
|
||||||
|
.custom-button {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
125
src/routes/blog/[slug]/+page.svelte
Normal file
125
src/routes/blog/[slug]/+page.svelte
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { MetaTags } from 'svelte-meta-tags';
|
||||||
|
import Menu from '$lib/elements/Menu.svelte';
|
||||||
|
let currentLanguage: CurrentLanguage = 'it';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import type { CurrentLanguage } from '$lib/types';
|
||||||
|
console.log($page);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<MetaTags
|
||||||
|
title="Gianmarco Pettinato"
|
||||||
|
description="This is the Gianmarco's portfolio site"
|
||||||
|
canonical="https://pettinato.eu/"
|
||||||
|
openGraph={{
|
||||||
|
url: 'https://pettinato.eu/',
|
||||||
|
title: 'Gianmarco Pettinato',
|
||||||
|
description: "This is the Gianmarco's portfolio site",
|
||||||
|
images: [
|
||||||
|
{
|
||||||
|
url: 'https://www.example.ie/og-image-01.jpg',
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
alt: 'Og Image Alt'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: 'https://www.example.ie/og-image-02.jpg',
|
||||||
|
width: 900,
|
||||||
|
height: 800,
|
||||||
|
alt: 'Og Image Alt Second'
|
||||||
|
},
|
||||||
|
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
||||||
|
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
||||||
|
],
|
||||||
|
site_name: 'Gianmarco Pettinato Portfolio'
|
||||||
|
}}
|
||||||
|
twitter={{
|
||||||
|
handle: '@jatus_93',
|
||||||
|
site: '@jatus_93',
|
||||||
|
cardType: 'summary',
|
||||||
|
title: 'Gianmarco Pettinato Portfolio',
|
||||||
|
description: "This is the Gianmarco's portfolio site",
|
||||||
|
image: 'https://pettinato.eu/profile_pic.webp',
|
||||||
|
imageAlt: 'Gianmarco Photo'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- svelte-ignore a11y-invalid-attribute -->
|
||||||
|
<div class="language-selector" id="language-selector">
|
||||||
|
<button
|
||||||
|
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
currentLanguage = 'it';
|
||||||
|
}}>it</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
|
||||||
|
on:click={() => {
|
||||||
|
currentLanguage = 'en';
|
||||||
|
}}>en</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu">
|
||||||
|
<Menu {currentLanguage} />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../../app.scss';
|
||||||
|
.language-selector {
|
||||||
|
right: 0;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 999;
|
||||||
|
@media (max-width: $min-desktop) {
|
||||||
|
width: 100%;
|
||||||
|
position: unset;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
background-color: $basecolor2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
background-color: $basecolor2;
|
||||||
|
position: sticky;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
top: 0px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: solid #999 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: $default-border-radius;
|
||||||
|
border: solid $button-border-color 1px;
|
||||||
|
width: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.custom-button:hover {
|
||||||
|
background-color: $text-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.custom-button-active {
|
||||||
|
cursor: unset;
|
||||||
|
background-color: $text-color;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
@media (max-width: $min-tablet) {
|
||||||
|
.custom-button {
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
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 Contacts from '$elem/Contacts.svelte'
|
|
||||||
import Data_jobs from '../model/jobs.json';
|
|
||||||
import Data_portfolio from '../model/portfolio.json';
|
|
||||||
import type { Schema } from "src/model/job";
|
|
||||||
let jobs:Schema[] = Data_jobs as Schema[];
|
|
||||||
let portfolio:Schema[] = Data_portfolio as Schema[];
|
|
||||||
let currentLanguage: string ='it';
|
|
||||||
let titles = {home:{it:"Home",en:"Home"},
|
|
||||||
job:{it:"Esperienze",en:"Experiences"},
|
|
||||||
school:{it:"Formazione",en:"Training"},
|
|
||||||
contacts:{it:"Contatti",en:"Contacts"},
|
|
||||||
portfolio:{it:"Portfolio",en:"Portfolio"}}
|
|
||||||
</script>
|
|
||||||
<main class="maindiv">
|
|
||||||
<!-- svelte-ignore a11y-invalid-attribute -->
|
|
||||||
<div class="language-selector" id="language-selector"> <a href="#" on:click={()=>{ currentLanguage = 'it'}}>IT</a> <a href="#" on:click={()=>{currentLanguage = 'en'}}>EN</a> </div>
|
|
||||||
|
|
||||||
<div class="menu">
|
|
||||||
<Menu {currentLanguage}/>
|
|
||||||
</div>
|
|
||||||
<div class="about" id="home">
|
|
||||||
<AboutMe {currentLanguage}/>
|
|
||||||
</div>
|
|
||||||
<div class="content" id="jobs">
|
|
||||||
<h2>{titles.job[currentLanguage]}</h2>
|
|
||||||
<Jobs jobs={jobs} {currentLanguage}/>
|
|
||||||
</div>
|
|
||||||
<div class="content" id="training">
|
|
||||||
<h2>{titles.school[currentLanguage]}</h2>
|
|
||||||
<Training {currentLanguage} />
|
|
||||||
</div>
|
|
||||||
<div class="content" id="portfolio">
|
|
||||||
<h2>{titles.portfolio[currentLanguage]}</h2>
|
|
||||||
<Jobs jobs={portfolio} {currentLanguage}/>
|
|
||||||
</div>
|
|
||||||
<div class="content" id="contacts">
|
|
||||||
<h2>{titles.contacts[currentLanguage]}</h2>
|
|
||||||
<Contacts/>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<style lang="scss">
|
|
||||||
@import "./static/colors.scss";
|
|
||||||
.maindiv {
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-selector {
|
|
||||||
width: 100%;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
background-color: $steel-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.language-selector > a, .language-selector > a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: $rich-black-fogra-29;
|
|
||||||
font-size: 16px;
|
|
||||||
margin-right: 20px ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about{
|
|
||||||
margin-top: 4vh;
|
|
||||||
margin-bottom: 4vh;
|
|
||||||
}
|
|
||||||
.content{
|
|
||||||
|
|
||||||
margin-bottom: 4vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2{
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
width: 100%;
|
|
||||||
position: -webkit-sticky; /* Safari */
|
|
||||||
position: sticky;
|
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 306 KiB |
BIN
static/3dprinter.webp
Normal file
BIN
static/3dprinter.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
static/ALTEN.jpg
BIN
static/ALTEN.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
BIN
static/ALTEN.webp
Normal file
BIN
static/ALTEN.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/DGCServerVerifier.webp
Normal file
BIN
static/DGCServerVerifier.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
static/LatexMulticompiler.webp
Normal file
BIN
static/LatexMulticompiler.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
BIN
static/QContainer.webp
Normal file
BIN
static/QContainer.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
static/SWL.webp
Normal file
BIN
static/SWL.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
BIN
static/alternative-studio.webp
Normal file
BIN
static/alternative-studio.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
18
static/blogPosts/2022-05-15.json
Normal file
18
static/blogPosts/2022-05-15.json
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"year": {
|
||||||
|
"start": "2022-05-15",
|
||||||
|
"end": ""
|
||||||
|
},
|
||||||
|
"title": {
|
||||||
|
"en": "blog",
|
||||||
|
"it": "Il blog"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"en": "Articolo di prova in inglese",
|
||||||
|
"it": "Articolo di prova in italiano."
|
||||||
|
},
|
||||||
|
"collaborators": [],
|
||||||
|
"languages": [],
|
||||||
|
"tecnologies": [],
|
||||||
|
"images": []
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
/* SCSS HEX */
|
/* SCSS HEX */
|
||||||
$cultured: #f2f2f2ff;
|
$cultured: #f2f2f2ff;
|
||||||
$rich-black-fogra-29: #011627ff;
|
: #011627ff;
|
||||||
$navajo-white: #ffddadff;
|
$navajo-white: #ffddadff;
|
||||||
$middle-blue-green: #9ad5d3ff;
|
$middle-blue-green: #9ad5d3ff;
|
||||||
$steel-blue: #3a7ca5ff;
|
$steel-blue: #3a7ca5ff;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 305 KiB |
BIN
static/custom-keyboard.webp
Normal file
BIN
static/custom-keyboard.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
@@ -1,11 +0,0 @@
|
|||||||
|
|
||||||
.box-with-shadow {
|
|
||||||
background-color: $cultured;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 0.1px;
|
|
||||||
border-color: $sonic-silver ;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: -12px 26px 25px -14px $sonic-silver;
|
|
||||||
-webkit-box-shadow: -12px 26px 25px -14px $sonic-silver;
|
|
||||||
-moz-box-shadow: -12px 26px 25px -14px $sonic-silver;
|
|
||||||
}
|
|
||||||
BIN
static/favicon.webp
Normal file
BIN
static/favicon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 608 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
BIN
static/logo-athesys.webp
Normal file
BIN
static/logo-athesys.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
BIN
static/logo-jatus-tech.webp
Normal file
BIN
static/logo-jatus-tech.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
BIN
static/logoSeveri.webp
Normal file
BIN
static/logoSeveri.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@@ -1,6 +1,6 @@
|
|||||||
body{
|
body{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #9ad5d3ff;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
BIN
static/profile_pic.webp
Normal file
BIN
static/profile_pic.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
BIN
static/saxonhilllogo.webp
Normal file
BIN
static/saxonhilllogo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/spellCheck.webp
Normal file
BIN
static/spellCheck.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
BIN
static/techweb.webp
Normal file
BIN
static/techweb.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
static/tenners.webp
Normal file
BIN
static/tenners.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
BIN
static/unipd-universita-di-padova.webp
Normal file
BIN
static/unipd-universita-di-padova.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
static/unraid.webp
Normal file
BIN
static/unraid.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 281 KiB |
BIN
static/webpage.webp
Normal file
BIN
static/webpage.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB |
BIN
static/workstation.webp
Normal file
BIN
static/workstation.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
@@ -1,36 +1,20 @@
|
|||||||
import preprocess from 'svelte-preprocess';
|
import adapter from '@sveltejs/adapter-auto';
|
||||||
import adapter from '@sveltejs/adapter-static';
|
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||||
import {markdown} from 'svelte-preprocess-markdown';
|
import {markdown} from 'svelte-preprocess-markdown';
|
||||||
import path from 'path';
|
import preprocess from 'svelte-preprocess';
|
||||||
|
|
||||||
|
|
||||||
/** @type {import('@sveltejs/kit').Config} */
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
const config = {
|
const config = {
|
||||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
// for more information about preprocessors
|
// for more information about preprocessors
|
||||||
preprocess: [preprocess({
|
preprocess: [vitePreprocess(), markdown(),preprocess({
|
||||||
sass: true,
|
sass: true,
|
||||||
typescript: true,
|
typescript: true,
|
||||||
|
})],
|
||||||
}), markdown()],
|
|
||||||
|
|
||||||
kit: {
|
kit: {
|
||||||
// hydrate the <div id="svelte"> element in src/app.html
|
adapter: adapter()
|
||||||
target: '#svelte',
|
|
||||||
vite:{
|
|
||||||
resolve:{
|
|
||||||
alias:{
|
|
||||||
$elem: path.resolve('src/elements'),
|
|
||||||
// $model: path.resolve('src/model')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hostHeader: 'X-Forwarded-Host',
|
|
||||||
adapter: adapter({
|
|
||||||
// default options are shown
|
|
||||||
pages: 'build',
|
|
||||||
assets: 'build',
|
|
||||||
fallback: null
|
|
||||||
}),
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
37
svelte.config.old.js
Normal file
37
svelte.config.old.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import preprocess from 'svelte-preprocess';
|
||||||
|
import adapter from '@sveltejs/adapter-static';
|
||||||
|
import {markdown} from 'svelte-preprocess-markdown';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
const config = {
|
||||||
|
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: [preprocess({
|
||||||
|
sass: true,
|
||||||
|
typescript: true,
|
||||||
|
|
||||||
|
}), markdown()],
|
||||||
|
|
||||||
|
kit: {
|
||||||
|
// hydrate the <div id="svelte"> element in src/app.html
|
||||||
|
target: '#svelte',
|
||||||
|
vite:{
|
||||||
|
resolve:{
|
||||||
|
alias:{
|
||||||
|
$elem: path.resolve('src/elements'),
|
||||||
|
// $model: path.resolve('src/model')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hostHeader: 'X-Forwarded-Host',
|
||||||
|
adapter: adapter({
|
||||||
|
// default options are shown
|
||||||
|
pages: 'build',
|
||||||
|
assets: 'build',
|
||||||
|
fallback: null
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
6
tests/test.ts
Normal file
6
tests/test.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { expect, test } from '@playwright/test';
|
||||||
|
|
||||||
|
test('index page has expected h1', async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
|
||||||
|
});
|
||||||
@@ -1,33 +1,17 @@
|
|||||||
{
|
{
|
||||||
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"moduleResolution": "node",
|
|
||||||
"module": "es2020",
|
|
||||||
"lib": ["es2020", "DOM"],
|
|
||||||
"target": "es2019",
|
|
||||||
/**
|
|
||||||
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
|
|
||||||
to enforce using \`import type\` instead of \`import\` for Types.
|
|
||||||
*/
|
|
||||||
"importsNotUsedAsValues": "error",
|
|
||||||
"isolatedModules": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
/**
|
|
||||||
To have warnings/errors of the Svelte compiler at the correct position,
|
|
||||||
enable source maps by default.
|
|
||||||
*/
|
|
||||||
"sourceMap": true,
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"baseUrl": ".",
|
|
||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"checkJs": true,
|
"checkJs": true,
|
||||||
"paths": {
|
"esModuleInterop": true,
|
||||||
"$lib": ["src/lib"],
|
"forceConsistentCasingInFileNames": true,
|
||||||
"$lib/*": ["src/lib/*"],
|
"resolveJsonModule": true,
|
||||||
"$elem":["src/elements"],
|
"skipLibCheck": true,
|
||||||
// "$model":["src/model"]
|
"sourceMap": true,
|
||||||
|
"strict": true
|
||||||
}
|
}
|
||||||
},
|
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
|
//
|
||||||
|
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||||
|
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||||
}
|
}
|
||||||
|
|||||||
11
vite.config.ts
Normal file
11
vite.config.ts
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import type { UserConfig } from 'vite';
|
||||||
|
|
||||||
|
const config: UserConfig = {
|
||||||
|
plugins: [sveltekit()],
|
||||||
|
test: {
|
||||||
|
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
Reference in New Issue
Block a user