Jatus/cv-site
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Compare commits

base: Jatus:64389fa2586d9b82be30c239d4ceb8bb91cc712b
Branches Tags
Jatus:main
Jatus:develop
..
compare: Jatus:9a73fe708ea2778105b2d91d53bfe60e059c4adb
Branches Tags
Jatus:develop
Jatus:main

No commits in common. "64389fa2586d9b82be30c239d4ceb8bb91cc712b" and "9a73fe708ea2778105b2d91d53bfe60e059c4adb" have entirely different histories.
64389fa258 ... 9a73fe708e

36 changed files with 14012 additions and 2330 deletions
Show Stats Expand all files Collapse all files

13
.eslintignore
View File

@ -1,13 +0,0 @@
.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
View File

@ -1,20 +0,0 @@
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
View File

@ -1,13 +0,0 @@
.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
View File

@ -1,9 +0,0 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"pluginSearchDirs": ["."],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

15249
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

66
package.json
View File

@ -2,49 +2,47 @@
"name": "mycv",
"version": "0.0.1",
"scripts": {
"update-model": "json2ts ./src/lib/model/schema.json ./src/lib/model/job.d.ts",
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
"update-model": "json2ts ./src/model/schema.json ./src/model/job.d.ts",
"dev": "svelte-kit dev --host 0.0.0.0",
"build": "svelte-kit build",
"preview": "svelte-kit preview",
"check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"@playwright/test": "^1.28.1",
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
"@types/markdown-it": "^12.2.3",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"sass": "^1.57.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"@babel/preset-env": "^7.15.8",
"@sveltejs/adapter-static": "^1.0.0-next.20",
"@sveltejs/kit": "next",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/svelte": "^3.0.3",
"@types/jest": "^27.0.2",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"@typescript-eslint/parser": "^4.31.1",
"babel-jest": "^27.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1",
"jest": "^27.3.0",
"prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0",
"svelte": "^3.42.6",
"svelte-check": "^2.2.6",
"svelte-jester": "^2.1.5",
"svelte-meta-tags": "^2.5.5",
"svelte-preprocess": "^4.9.4",
"svelte-preprocess-markdown": "^2.7.3",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vitest": "^0.25.3"
"svelte-scrollto": "^0.2.0",
"ts-jest": "^27.0.7",
"tslib": "^2.3.1",
"typescript": "^4.4.3"
},
"type": "module",
"dependencies": {
"@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",
"@fortawesome/fontawesome-free": "^5.15.4",
"json-schema-to-typescript": "^10.1.5",
"markdown-it": "^12.2.0",
"punycode": "^2.1.1",
"typesafe-i18n": "^5.20.0"
"punycode": "^2.1.1"
}
}

11
playwright.config.ts
View File

@ -1,11 +0,0 @@
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
View File

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html lang="%lang%">
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link rel="icon" href="/favicon.png" />
<link rel="stylesheet" href="/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gianmarco Pettinato</title>
%svelte.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<body id="svelte">
%svelte.body%
</body>
</html>

3
src/app.scss
View File

@ -9,9 +9,8 @@ $text-color: #011936;
$border-color: #256EFF;
$button-border-color: #256EFF;
$min-tablet: 900px;
$min-tablet: 768px;
$min-desktop: 1024px;
$min-ultrawide: 1700px;
$default-border-radius:5px;
:root {

35
src/lib/elements/AboutMe.svelte → src/elements/AboutMe.svelte
View File

@ -1,13 +1,7 @@
<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';
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.\
@ -23,19 +17,13 @@
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 = {
const who = {
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>
@ -44,15 +32,22 @@
</div>
<div class="cv">
<div>
<a rel="external" href={cvUrl[currentLanguage]}
>curriculum<i><FontAwesomeIcon icon={downloadDefinition} /></i>
<a rel="external" href="/curriculum_it.pdf"
>curriculum_it.pdf <i class="fas fa-download" />
</a>
</div>
<div>
<a rel="external" href="/curriculum_en.pdf"
>curriculum_en.pdf <i class="fas fa-download" />
</a>
</div>
</div>
<Skills />
</div>
<style lang="scss">
@import '../../app.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../app.scss';
.cv {
width: 80%;
margin: auto;
@ -69,11 +64,5 @@
border-radius: $default-border-radius;
padding: 30px;
margin: 10px;
.title {
display: none;
@media (min-width: $min-tablet) {
display: unset;
}
}
}
</style>

80
src/elements/Contacts.svelte Normal file
View File

@ -0,0 +1,80 @@
<script lang="ts"></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 class="fas fa-at" /> e-mail: gianmarco@pettinato.eu</a
>
</li>
<li>
<a href="https://t.me/jatus_93"><i class="fab fa-telegram-plane" /> telegram: @jatus_93</a>
</li>
<li>
<a href="https://twitter.com/jatus_93"><i class="fab fa-twitter" /> twitter: @jatus_93</a>
</li>
<li>
<a href="https://www.linkedin.com/in/gianmarco-pettinato/"
><i class="fab fa-linkedin-in" /> 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>

9
src/lib/elements/JobElement.svelte → src/elements/JobElement.svelte
View File

@ -7,10 +7,9 @@
breaks: true,
linkify: true
});
import type { Schema } from '$lib/model/job';
import type { CurrentLanguage } from '$lib/types';
import type { Schema } from 'src/model/job';
export let job: Schema;
export let currentLanguage: CurrentLanguage = 'it';
export let currentLanguage = '';
</script>
<div class="job-container">
@ -24,7 +23,7 @@
{@html md.render(job.content[currentLanguage])}
</div>
<div class="added-info">
{#if job.year}
{#if job.year.lenght != 0}
Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
{/if}
<div>
@ -58,7 +57,7 @@
</div>
<style lang="scss">
@import '../../app.scss';
@import '../app.scss';
.text-content {
margin: auto;
text-align: justify;

7
src/lib/elements/Jobs.svelte → src/elements/Jobs.svelte
View File

@ -1,8 +1,7 @@
<script lang="ts">
import type { Schema } from '$lib/model/job';
import type { CurrentLanguage } from '$lib/types';
import type { Schema } from 'src/model/job';
import JobElement from './JobElement.svelte';
export let currentLanguage: CurrentLanguage = 'it';
export let currentLanguage = '';
export let isBlogContainer = false;
export let jobs: Schema[] = [];
</script>
@ -20,7 +19,7 @@
</div>
<style lang="scss">
@import '../../app.scss';
@import '../app.scss';
.jobs-container {
display: flex;
justify-content: space-between;

89
src/elements/Menu.svelte Normal file
View File

@ -0,0 +1,89 @@
<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' },
blog: { it: 'Blog', en: 'Blog' },
portfolio: { it: 'Portfolio', en: 'Portfolio' }
};
</script>
<div class="div-menu">
<div class="wrapper">
<a class="menu-element" href="/#top">
<span class="hide">{menu.home[currentLanguage]}</span><i class="fas fa-home" /></a
>
<a class="menu-element" href="#jobs"
><span class="hide">{menu.job[currentLanguage]}</span><i class="fas fa-user-tie" /></a
>
<a class="menu-element" href="#training"
><span class="hide">{menu.school[currentLanguage]}</span><i
class="fas fa-graduation-cap"
/></a
>
<a class="menu-element" href="#portfolio"
><span class="hide">{menu.portfolio[currentLanguage]}</span><i class="fas fa-user-clock" /></a
>
<a class="menu-element" href="/blog" alt={menu.blog[currentLanguage]}
><span class="hide">{menu.blog[currentLanguage]}</span><i class="fas fa-address-card" /></a
>
</div>
</div>
<style lang="scss">
@import '../app.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
.hide {
@media (max-width: $min-tablet) {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
}
.div-menu {
width: 100%;
max-width: 1024px;
}
.wrapper {
width: 100%;
display: flex;
}
a {
border-radius: $default-border-radius;
width: 50px;
margin: auto;
text-align: center;
padding: 5px;
i {
font-size: 22px;
margin: 5px;
}
}
a:hover {
background-color: $text-color;
color: white;
}
@media (min-width: $min-tablet) {
a {
width: 130px;
i {
font-size: unset;
}
}
}
@media (min-width: $min-desktop) {
a {
width: 150px;
}
}
</style>

2
src/elements/Skills copy.svelte
View File

@ -20,7 +20,7 @@
align-items: center;
justify-content: center;
outline: 0.1px solid black;
background-image: linear-gradient(to right, transparent 40px, #000000 2px);
background-image: linear-gradient(to right, #000000 2px, blue 100%);
}
.inside {
width: 80px;

0
src/lib/elements/Skills.svelte → src/elements/Skills.svelte
View File

10
src/lib/elements/Training.svelte → src/elements/Training.svelte
View File

@ -1,15 +1,13 @@
<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';
import data from '../model/training.json';
import type { Schema } from 'src/model/job';
export let currentLanguage = 'it';
const training: Schema[] = data as Schema[];
</script>
@ -30,7 +28,7 @@
.training {
padding: 10px;
}
@import '../../app.scss';
@import '../app.scss';
.element {
border-radius: $default-border-radius;
background-color: white;

104
src/lib/elements/Contacts.svelte
View File

@ -1,104 +0,0 @@
<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>

20
src/lib/elements/LanguageSelector.svelte
View File

@ -1,20 +0,0 @@
<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
View File

@ -1,119 +0,0 @@
<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
View File

@ -1,164 +0,0 @@
<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
View File

@ -1,37 +0,0 @@
<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>

13
src/lib/types.ts
View File

@ -1,13 +0,0 @@
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' }
};

5
src/lib/model/job.d.ts → src/model/job.d.ts vendored
View File

@ -10,21 +10,26 @@ export interface Schema {
year: {
start: string;
end: string;
[k: string]: unknown;
};
title: {
en: string;
it: string;
[k: string]: unknown;
};
content: {
en: string;
it: string;
[k: string]: unknown;
};
collaborators: {
name: string;
surname: string;
ref: string;
[k: string]: unknown;
}[];
languages: string[];
tecnologies: string[];
images: string[];
[k: string]: unknown;
}

2
src/lib/model/jobs.json → src/model/jobs.json
View File

@ -35,6 +35,8 @@
},
"title": {"en":"Jatus.tech my start-up","it":"La mia start-up Jatus.tech"},
"content": {
"en":"In 2021, I worked to open a start-up with an app idea.\n To do so, I learned a lot of different skills, including how to set up a server with all my services running in **Docker**, set up a **GitLab** server, **design and build** an application infrastructure, and set up a private registry for **npm** and **docker images**.\n Furthermore, I configured all the **automation pipelines** to streamline the software distribution in virtualized environments and build the application **proof of concept** to demo to potential customers.",
"it":"Nel corso del 2021 ho lavorato, per avviare una attività indipendente che si basa su una mia idea di servizio. Per far ciò, durante questo periodo ho imparato a creare un'infrastruttura di lavoro, su un server **GNU\/Linux** dove centralizzare le risorse con **GitLab** in container **Docker**.\n Per semplificare la distribuzione di elementi di sviluppo ho integrato un *repository* privato di pacchetti **npm** e immagini **Docker**. Oltre alle mansioni da sistemista e devops ho progettato e scritto il **Proof of concept** del mio servizio per dimostrarlo a potenziali clienti"
"en":"In 2021, I worked to open a start-up with an app idea.\nTo do so, I acquired skills in design and developing a software solution for the problem. I learnt how to set up a **CI/CD** pipeline with **Docker** and **Gitlab** and took confidence in **serverless** technologies like AWS.",
"it":"Nel corso del 2021 ho lavorato per avviare una mia attività indipendente, basata su un’idea per una app che ritenevo, e ritengo, fattibile. In questo periodo ho dovuto ricoprire diversi ruoli per portar avanti quest’iniziativa. Di conseguenza ho imparato a svolgere le mansioni di analista e architetto, **devops** e sviluppo. \n In particolare, ho acquisito dimestichezza con i sistemi di **CI/CD** basati su **Docker** e nell’uso di tecnologie **serverless**."
},

0
src/lib/model/portfolio.json → src/model/portfolio.json
View File

15
src/lib/model/schema.json → src/model/schema.json
View File

@ -18,8 +18,7 @@
"required": [
"start",
"end"
],
"additionalProperties": false
]
},
"title": {
"type": "object",
@ -34,8 +33,7 @@
"required": [
"en",
"it"
],
"additionalProperties": false
]
},
"content": {
"type": "object",
@ -50,8 +48,7 @@
"required": [
"en",
"it"
],
"additionalProperties": false
]
},
"collaborators": {
"type": "array",
@ -72,8 +69,7 @@
"name",
"surname",
"ref"
],
"additionalProperties": false
]
}
},
"languages": {
@ -103,6 +99,5 @@
"languages",
"tecnologies",
"images"
],
"additionalProperties": false
]
}

0
src/lib/model/training.json → src/model/training.json
View File

11
src/routes/blog/[slug]/+page.svelte → src/routes/blog/[post].svelte
View File

@ -1,10 +1,9 @@
<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);
import Menu from '$elem/Menu.svelte';
let currentLanguage: string = 'it';
import { page } from '$app/stores';
console.log($page)
</script>
<MetaTags
@ -67,7 +66,7 @@
</main>
<style lang="scss">
@import '../../../app.scss';
@import '../../app.scss';
.language-selector {
right: 0;
height: 30px;

14
src/routes/blog/+page.svelte → src/routes/blog/index.svelte
View File

@ -1,13 +1,11 @@
<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';
import Menu from '$elem/Menu.svelte';
import Jobs from '$elem/Jobs.svelte';
let currentLanguage: string = 'it';
let isBlogContainer = true;
import Data_portfolio from '../../model/portfolio.json';
import type { Schema } from 'src/model/job';
let jobs: Schema[] = Data_portfolio as Schema[];
let title = { it: 'I miei articoli', en: 'my blog posts' };
</script>
@ -70,7 +68,7 @@
<Menu {currentLanguage} />
</div>
<div id="portfolio" class="default">
<h2>{title.it}</h2>
<h2>{title[currentLanguage]}</h2>
<Jobs {jobs} {currentLanguage} {isBlogContainer} />
</div>
</main>

75
src/routes/+page.svelte → src/routes/index.svelte
View File

@ -1,17 +1,15 @@
<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';
import AboutMe from '$elem/AboutMe.svelte';
import Jobs from '$elem/Jobs.svelte';
import Menu from '$elem/Menu.svelte';
import Training from '$elem/Training.svelte';
import Data_jobs from '../model/jobs.json';
import Data_portfolio from '../model/portfolio.json';
import type { Schema } from 'src/model/job';
let jobs: Schema[] = Data_jobs as Schema[];
let portfolio: Schema[] = Data_portfolio as Schema[];
let currentLanguage: CurrentLanguage = 'it';
let currentLanguage: string = 'it';
let titles = {
home: {
it: 'Gianmarco Pettinato',
@ -63,14 +61,27 @@
<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-desktop">
<div class="menu">
<Menu {currentLanguage} />
</div>
<div class="menu menu-mobile">
<MenuMobile {currentLanguage} />
</div>
<div id="home" class="default">
<h1>{titles.home[currentLanguage]}</h1>
<h2>Software developer</h2>
<AboutMe {currentLanguage} />
</div>
<div id="jobs" class="default">
@ -89,28 +100,36 @@
<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;
}
.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;

34
svelte.config.js
View File

@ -1,20 +1,36 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
import {markdown} from 'svelte-preprocess-markdown';
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://kit.svelte.dev/docs/integrations#preprocessors
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: [vitePreprocess(), markdown(),preprocess({
preprocess: [preprocess({
sass: true,
typescript: true,
})],
typescript: true,
}), markdown()],
kit: {
adapter: adapter()
// 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
}),
}
};

37
svelte.config.old.js
View File

@ -1,37 +0,0 @@
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
View File

@ -1,6 +0,0 @@
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');
});

40
tsconfig.json
View File

@ -1,17 +1,33 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"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,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// 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
"paths": {
"$lib": ["src/lib"],
"$lib/*": ["src/lib/*"],
"$elem/*":["src/elements/*"],
"$model/*":["src/model/*"]
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

11
vite.config.ts
View File

@ -1,11 +0,0 @@
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;