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

materia design
Some checks failed
pettinato.eu/cv-site/pipeline/head There was a failure building this commit
Details

Browse Source
This commit is contained in:
Gianmarco Pettinato
2022-04-23 17:34:01 +02:00
parent 7cbbdf2f1a
commit 23b18ccc7a
18 changed files with 1768 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/app.scss
View File

@@ -0,0 +1,79 @@
// $basecolor:#CDCBD6;
// $basecolor2:#E3F5E7;
// $accent2: #E3E8F5;
// $contrast: #E3E8F5;
// $contrast2: #F5E3F1;
// $img-contrast: #F5E3F1;
// @media (prefers-color-scheme: dark) {
// $basecolor:#140a0a;
// $basecolor2:#E3F5E7;
// $accent2: #E3E8F5;
// $contrast: #E3E8F5;
// $contrast2: #F5E3F1;
// $img-contrast:#00000000;
// }
$basecolor:#E5E5E5;
$basecolor2:#FFFFFF;
// $basecolor2:#FCA311;
$accent2: #FCA311;
$contrast: #14213D;
$contrast2: #000000;
$img-contrast: #14213D;
$text-color: #011936;
$border-color: #D77A61;
$button-border-color: #D77A61;
$min-tablet: 768px;
$min-desktop: 1024px;
$default-border-radius:5px;
:root {
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;
// margin-top: 50px;
// margin-bottom: 50px;
// text-align: center;
// @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 {}

12
src/elements/AboutMe.svelte
View File

@@ -22,7 +22,7 @@
};
</script>
<div>
<div class="aboutMe">
<Contacts />
<div class="whoIAm">
<p>
@@ -44,8 +44,8 @@
</div>
<style lang="scss">
@import './static/elements.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
@import '../app.scss';
.cv {
width: 80%;
margin: auto;
@@ -53,8 +53,14 @@
justify-content: space-evenly;
}
.whoIAm {
width: 80% !important;
margin: auto;
text-align: justify;
}
.aboutMe {
background-color: $basecolor2;
border: solid 1px $border-color;
border-radius: $default-border-radius;
padding: 30px;
margin: 30px;
}
</style>

78
src/elements/Contacts.svelte
View File

@@ -1,46 +1,66 @@
<script lang="ts"></script>
<div class="contacts">
<div><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
<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>
<img src="/profile_pic.jpg" 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 './static/elements.scss';
@import './static/breakpoints.scss';
@import '../app.scss';
img.profile {
border-radius: 50%;
max-width: 150px;
border: solid 1px $border-color;
}
.contacts {
width: 80%;
background-color: $basecolor2;
border: solid 1px $border-color;
border-radius: $default-border-radius;
padding: 30px;
margin: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
margin: auto;
}
ul {
text-align: justify;
list-style-type: none;
white-space: nowrap;
.contacts:last-of-type {
width: 86%;
}
@media screen and (min-width: $min-tablet) {
.links {
text-align: left;
ul {
padding: 0;
list-style-type: none;
line-height: 20px;
white-space: nowrap;
li {
margin-left: 0px;
}
}
}
@media (min-width: $min-tablet) {
.contacts {
width: 80%;
flex-direction: row;
margin: auto;
}

13
src/elements/JobElement.svelte
View File

@@ -12,7 +12,7 @@
export let currentLanguage = '';
</script>
<div>
<div class="job-container">
<h3>{job.title[currentLanguage]}</h3>
<div>
<div class="image-container">
@@ -59,14 +59,21 @@
</div>
<style lang="scss">
@import './static/elements.scss';
@import '../app.scss';
.text-content {
margin: auto;
width: 70%;
text-align: justify;
}
.added-info {
margin-top: 50px;
text-align: left;
font-size: smaller;
}
.job-container {
background-color: $basecolor2;
border: solid 1px $border-color;
border-radius: $default-border-radius;
padding: 30px;
margin: 30px;
}
</style>

18
src/elements/Jobs.svelte
View File

@@ -1,14 +1,12 @@
<script lang="ts">
import type { Schema } from 'src/model/job';
import JobElement from './JobElement.svelte';
export let currentLanguage = '';
export let jobs:Schema[] = [];
import type { Schema } from 'src/model/job';
import JobElement from './JobElement.svelte';
export let currentLanguage = '';
export let jobs: Schema[] = [];
</script>
<div>
{#each jobs as job }
<JobElement {job} {currentLanguage} />
{/each}
{#each jobs as job}
<JobElement {job} {currentLanguage} />
{/each}
</div>
<style lang="scss">
@import './static/elements.scss';
</style>

46
src/elements/Menu.svelte
View File

@@ -21,7 +21,7 @@
>
<a
use:scrollto={{ element: '#jobs', offset: -50 }}
use:scrollto={{ element: '#jobs', offset: -70 }}
class="menu-element"
href="#jobs"
alt={menu.job[currentLanguage]}
@@ -29,7 +29,7 @@
>
<a
use:scrollto={{ element: '#training', offset: -50 }}
use:scrollto={{ element: '#training', offset: -70 }}
class="menu-element"
href="#training"
alt={menu.school[currentLanguage]}
@@ -39,7 +39,7 @@
>
<a
use:scrollto={{ element: '#portfolio', offset: -50 }}
use:scrollto={{ element: '#portfolio', offset: -70 }}
class="menu-element"
href="#portfolio"
alt={menu.portfolio[currentLanguage]}
@@ -47,7 +47,7 @@
>
<a
use:scrollto={{ element: '#contacts', offset: -50 }}
use:scrollto={{ element: '#contacts', offset: -70 }}
class="menu-element"
href="#contacts"
alt={menu.contacts[currentLanguage]}
@@ -59,11 +59,13 @@
</div>
<style lang="scss">
@import './static/elements.scss';
@import './static/breakpoints.scss';
@import '../app.scss';
@import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
.hide {
display: none;
}
.div-menu {
width: 90%;
width: 100%;
max-width: 1024px;
}
.wrapper {
@@ -71,15 +73,35 @@
display: flex;
}
a {
border: solid black;
width: 15%;
font-size: 20px;
border: solid $button-border-color 1px;
border-radius: $default-border-radius;
width: 50px;
margin: auto;
text-align: center;
padding: 5px;
i {
font-size: 22px;
margin: 5px;
}
}
@media screen and (max-width: $min-tablet) {
a:hover {
background-color: $accent2;
}
@media (min-width: $min-tablet) {
.hide {
display: none;
display: unset;
}
a {
width: 130px;
i {
font-size: unset;
}
}
}
@media (min-width: $min-desktop) {
a {
width: 150px;
}
}
</style>

5
src/elements/Training.svelte
View File

@@ -25,8 +25,7 @@
</div>
<style lang="scss">
@import './static/elements.scss';
@import './static/breakpoints.scss';
@import '../app.scss';
.training {
width: 100%;
}
@@ -46,7 +45,7 @@
}
}
@media screen and (min-width: $min-tablet) {
@media (min-width: $min-tablet) {
.element {
flex-direction: row;
div {

56
src/routes/index.svelte
View File

@@ -12,8 +12,8 @@
let currentLanguage: string = 'it';
let titles = {
home: {
it: 'Gianmarco Pettinato Sviluppatore Fullstack',
en: 'Gianmarco Pettinato Fullstack Developer'
it: 'Gianmarco Pettinato \n Software Developer',
en: 'Gianmarco Pettinato \n Software Developer'
},
job: { it: 'Esperienze', en: 'Experiences' },
school: { it: 'Formazione', en: 'Training' },
@@ -25,15 +25,14 @@
<main class="material-theme dark-theme light-theme body">
<!-- svelte-ignore a11y-invalid-attribute -->
<div class="language-selector" id="language-selector">
Lang:
<button
class="buttton"
class="custom-button {currentLanguage == 'it' ? 'custom-button-active' : ''}"
on:click={() => {
currentLanguage = 'it';
}}>it</button
>
<button
class="buttton"
class="custom-button {currentLanguage == 'en' ? 'custom-button-active' : ''}"
on:click={() => {
currentLanguage = 'en';
}}>en</button
@@ -44,48 +43,69 @@
<Menu {currentLanguage} />
</div>
<h1>{titles.home[currentLanguage]}</h1>
<div class="default" id="home">
<div id="home" class="default">
<h1>{titles.home[currentLanguage]}</h1>
<AboutMe {currentLanguage} />
</div>
<div class="default" id="jobs">
<div id="jobs" class="default">
<h2>{titles.job[currentLanguage]}</h2>
<Jobs {jobs} {currentLanguage} />
</div>
<div class="default" id="training">
<div id="training" class="default">
<h2>{titles.school[currentLanguage]}</h2>
<Training {currentLanguage} />
</div>
<div class="default" id="portfolio">
<div id="portfolio" class="default">
<h2>{titles.portfolio[currentLanguage]}</h2>
<Jobs jobs={portfolio} {currentLanguage} />
</div>
<div class="default" id="contacts">
<div id="contacts" class="default">
<h2>{titles.contacts[currentLanguage]}</h2>
<Contacts />
</div>
</main>
<style lang="scss">
@import './static/shared.scss';
@import './static/elements.scss';
@import '../app.scss';
.language-selector {
width: 100%;
height: 30px;
text-align: center;
text-transform: uppercase;
text-align: end;
a {
margin: 20px;
}
background-color: $basecolor2;
padding-top: 10px;
}
.menu {
background-color: $basecolor2;
position: sticky;
position: -webkit-sticky;
top: 30px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
border-bottom: solid black 1px;
}
.custom-button {
border: 0;
background: none;
box-shadow: none;
border-radius: 0px;
border: solid $button-border-color 1px;
cursor: pointer;
}
.custom-button:hover {
background-color: $accent2;
}
.custom-button-active {
cursor: unset;
background-color: $accent2;
}
@media (max-width: $min-tablet) {
.custom-button {
font-size: large;
}
}
</style>