base structure

2021-10-04 18:24:20 +02:00
parent b594f57468
commit a99ee9fa45
30 changed files with 823 additions and 118 deletions
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,8 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="/favicon.png" />
+		<link rel="stylesheet" href="/main.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
--- a/src/app.scss
+++ b/src/app.scss
@@ -0,0 +1,3 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
--- a/src/elements/aboutMe.svelte
+++ b/src/elements/aboutMe.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+</script>
+<div class="aboutMe">
+  <img src="/profile_pic.jpg" alt="profile" class="profile" />
+  <div class="info">
+    <h1>Gianmarco Pettinato</h1>
+    <p>Back-end developer GNU/Linux user </p>
+    <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>
+    </div>
+  </div>
+</div>
+<style lang="scss">
+  @import './static/colors.scss';
+  @import '/node_modules/@fortawesome/fontawesome-free/css/all.css';
+  .aboutMe{
+    padding: 1vh;
+    display: flex;
+    flex-direction: row;
+    min-width: 370px;
+    max-width: 550px;
+    width: 40vw;
+    height: auto;
+    align-items: center;
+    background-color: $cultured;
+    border-style: solid;
+    border-width: 0.1px;
+    border-color: $rich-black-fogra-29;
+    border-radius: 10px;
+    box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;    
+  }
+
+  .profile{
+    border-radius: 50%;
+    height: 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{
+    text-align: center;
+    color: $rich-black-fogra-29;
+    width: auto;
+    margin-left: 20px;    
+  }
+
+  a,a:visited{
+    font-size: 1.5em;
+    color: $rich-black-fogra-29;
+  }
+
+</style>
--- a/src/elements/header.svelte
+++ b/src/elements/header.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  export const status = 'test string';
+</script>
+<div class="header">
+  <!-- <p>page header</p> -->
+</div>
+<style lang="scss">
+  @import './static/colors.scss';
+  .header{
+    background-color: red;
+  }
+</style>
--- a/src/elements/jobs.svelte
+++ b/src/elements/jobs.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+  import data from '../model/data'
+  import type { Schema } from 'src/model/job';
+  export let currentLanguage = 'it'
+  import { onMount, tick } from 'svelte';
+  const jobs:Schema[] = data.default as Schema[];
+  onMount(()=>{
+    console.log(jobs[0]);
+  })
+</script>
+<div class="jobsContainer">
+  {#each jobs as job }
+    <div class="job container">
+      <h2>{job.title[currentLanguage]}</h2>
+      <div class="added-info">
+        {job.year.start} - {job.year.end}
+      </div>
+      <div class="job-content">
+        <div class="images-container">
+          {#each job.images as image }
+            <img src="{image}" alt="realtive to the article"/>
+          {/each}
+        </div>
+        <div class="text-content {job.images.length!=0 ?'left':''}">
+            <p>{job.content[currentLanguage]}</p>
+          <div class="added-info">
+            <div>
+              {#each job.collaborators as collaborator}
+                <a href={collaborator.ref}>{collaborator.name}{collaborator.surname}</a>
+              {/each}
+            </div>
+            <div>
+              {#each job.languages as language}
+                {language+" "}
+              {/each}
+            </div>
+            <div>
+              {#each job.tecnologies as tecnology}
+                {tecnology+" "}
+              {/each}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+<style  lang="scss">
+  @import './static/colors.scss';
+  .container{
+    background-color: $cultured;
+    border-style: solid;
+    border-width: 0.1px;
+    border-color: $rich-black-fogra-29;
+    border-radius: 10px;
+    box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    -webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+    -moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
+  }
+  .jobsContainer{
+    width: 80%;
+    height: auto;
+    background-color: $steel-blue;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 30px;
+    max-width: 1280px;
+  }
+  .job{
+    background-color: $cultured;
+    min-height: 300px;
+    height: auto;
+    width: 90%;
+    margin-bottom: 20px;
+    text-align: center;
+    padding-top: 1vh;
+    padding-bottom: 2vh;
+  }
+
+  .job-content{
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 2vw;
+  }
+  .text-content{
+    height: auto;
+  }
+  .added-info{
+    font-size: 13px;
+  }
+
+  .images-container{
+    display: flex;
+    flex-direction: column;
+    margin-right: 30px;
+  }
+
+  img{
+    width: 30vw;
+    max-width: 500px;
+    max-height: 500px;
+  }
+</style>
--- a/src/elements/jobsExperience.svelte
+++ b/src/elements/jobsExperience.svelte
--- a/src/model/data.json
+++ b/src/model/data.json
@@ -1,18 +1,93 @@
-{
-  "year": {
-    "start": "2021-10-01",
-    "end": "2021-10-02"
+[
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"This web site","it":"Questo sito web"},
+    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["https://via.placeholder.com/500"]
  },
-  "title": {"en":"This web site","it":"Questo sito web"},
-  "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web come curriculum"},
-  "collaborators": [],
-  "languages": [
-    "typescript",
-    "JSON-schema"
-  ],
-  "tecnologies": [
-    "Svelte",
-    "Nodejs"
-  ],
-  "immagies":[]
-}
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"This web site","it":"Questo sito web"},
+    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["https://via.placeholder.com/500"]
+  },
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"This web site","it":"Questo sito web"},
+    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["https://via.placeholder.com/500"]
+  },
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"This web site","it":"Questo sito web"},
+    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["https://via.placeholder.com/500"]
+  },
+  {
+    "year": {
+      "start": "2021-10-01",
+      "end": "2021-10-02"
+    },
+    "title": {"en":"This web site","it":"Questo sito web"},
+    "content": {"en":"I'have created this web site as CV","it":"Ho creato questo sito web per raccogliere, in maniera semplice ed efficiente, tutti i miei lavori ed esperienze. Ho realizzato questa pagina utilizzando Typescript con il framework Svelte e le classi css invece le ho gestite a mano"},
+    "collaborators": [],
+    "languages": [
+      "typescript",
+      "JSON-schema"
+    ],
+    "tecnologies": [
+      "Svelte",
+      "Nodejs"
+    ],
+    "images":["https://via.placeholder.com/500"]
+  }
+
+]
--- a/src/model/data.ts
+++ b/src/model/data.ts
@@ -0,0 +1,3 @@
+import * as data from './data.json';
+
+export default data as unknown[];
--- a/src/model/job.d.ts
+++ b/src/model/job.d.ts
@@ -5,7 +5,7 @@
 * and run json-schema-to-typescript to regenerate this file.
 */

-export type Schema = {
+export interface Schema {
  year: {
    start: string;
    end: string;
@@ -29,6 +29,6 @@ export type Schema = {
  }[];
  languages: string[];
  tecnologies: string[];
-  immagies: string[];
+  images: string[];
  [k: string]: unknown;
-}[];
+}
--- a/src/model/schema.json
+++ b/src/model/schema.json
@@ -1,103 +1,100 @@
 {
  "$schema": "http://json-schema.org/draft-04/schema#",
-  "type": "array",
-  "items": {
-    "type": "object",
-    "properties": {
-      "year": {
+  "type": "object",
+  "properties": {
+    "year": {
+      "type": "object",
+      "properties": {
+        "start": {
+          "type": "string"
+        },
+        "end": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "start",
+        "end"
+      ]
+    },
+    "title": {
+      "type": "object",
+      "properties": {
+        "en": {
+          "type": "string"
+        },
+        "it": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "en",
+        "it"
+      ]
+    },
+    "content": {
+      "type": "object",
+      "properties": {
+        "en": {
+          "type": "string"
+        },
+        "it": {
+          "type": "string"
+        }
+      },
+      "required": [
+        "en",
+        "it"
+      ]
+    },
+    "collaborators": {
+      "type": "array",
+      "items": {
        "type": "object",
        "properties": {
-          "start": {
+          "name": {
            "type": "string"
          },
-          "end": {
+          "surname": {
+            "type": "string"
+          },
+          "ref": {
            "type": "string"
          }
        },
        "required": [
-          "start",
-          "end"
+          "name",
+          "surname",
+          "ref"
        ]
-      },
-      "title": {
-        "type": "object",
-        "properties": {
-          "en": {
-            "type": "string"
-          },
-          "it": {
-            "type": "string"
-          }
-        },
-        "required": [
-          "en",
-          "it"
-        ]
-      },
-      "content": {
-        "type": "object",
-        "properties": {
-          "en": {
-            "type": "string"
-          },
-          "it": {
-            "type": "string"
-          }
-        },
-        "required": [
-          "en",
-          "it"
-        ]
-      },
-      "collaborators": {
-        "type": "array",
-        "items": {
-          "type": "object",
-          "properties": {
-            "name": {
-              "type": "string"
-            },
-            "surname": {
-              "type": "string"
-            },
-            "ref": {
-              "type": "string"
-            }
-          },
-          "required": [
-            "name",
-            "surname",
-            "ref"
-          ]
-        }
-      },
-      "languages": {
-        "type": "array",
-        "items": {
-          "type": "string"
-        }
-      },
-      "tecnologies": {
-        "type": "array",
-        "items": {
-          "type": "string"
-        }
-      },
-      "immagies": {
-        "type": "array",
-        "items": {
-          "type": "string"
-        }
      }
    },
-    "required": [
-      "year",
-      "title",
-      "content",
-      "collaborators",
-      "languages",
-      "tecnologies",
-      "immagies"
-    ]
-  }
-}
+    "languages": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "tecnologies": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "images": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "required": [
+    "year",
+    "title",
+    "content",
+    "collaborators",
+    "languages",
+    "tecnologies",
+    "images"
+  ]
+}
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,2 +1,51 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+  // import Header from "$elem/header.svelte";
+  import AboutMe from "$elem/aboutMe.svelte";
+  import Jobs from "$elem/jobs.svelte";
+</script>
+<div class="maindiv">
+  <div class="about">
+    <AboutMe/>
+  </div>
+  <div class="jobs">
+    <Jobs/>
+  </div>
+ 
+</div>
+<style lang="scss">
+  @import "./static/colors.scss";
+  .maindiv {
+    width: 100vw;
+    height: 100vh;
+    background-color: $cultured;
+    margin: 0;
+    color: $rich-black-fogra-29;
+    display: flex;
+    align-items: center;
+    justify-content:flex-start;
+    flex-flow: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    // font-family: Exo2-RegularCondensed;
+  }
+
+  .about{
+    width: 100vw;
+    min-height: 200px;
+    height: 15%;
+    max-height: 300px;
+    background-color: $middle-blue-green;
+    display: flex;
+    align-items: center;
+    justify-content:center;
+  }
+  .jobs{
+    background-color: $navajo-white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content:flex-start;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+  }
+</style>