about mobile, title fixes & styling

rollup.config.js

@@ -66,20 +66,20 @@ export default {
     onwarn,
   },
 
-  serviceworker: {
-    input: config.serviceworker.input(),
-    output: config.serviceworker.output(),
-    plugins: [
-      resolve(),
-      replace({
-        'process.browser': true,
-        'process.env.NODE_ENV': JSON.stringify(mode),
-      }),
-      commonjs(),
-      !dev && terser(),
-    ],
+  // serviceworker: {
+  //   input: config.serviceworker.input(),
+  //   output: config.serviceworker.output(),
+  //   plugins: [
+  //     resolve(),
+  //     replace({
+  //       'process.browser': true,
+  //       'process.env.NODE_ENV': JSON.stringify(mode),
+  //     }),
+  //     commonjs(),
+  //     !dev && terser(),
+  //   ],
 
-    preserveEntrySignatures: false,
-    onwarn,
-  },
+  //   preserveEntrySignatures: false,
+  //   onwarn,
+  // },
 }

src/components/Project.svelte

@@ -44,6 +44,6 @@
   <p>{project.body}</p>
 
   <ion-icon name="link-outline" />
-  <a href={project.link}>{project.link.replace(/https?:\/\//, '')}</a>
+  <a rel="noopener noreferrer" target="_blank" href={project.link}>{project.link.replace(/https?:\/\//, '')}</a>
 
 </section>

src/components/SpacedLetters.svelte

@@ -1,24 +1,31 @@
 <script>
   export let letters = []
+  export let even = false
 </script>
 
 <style>
   span {
-    font-size: 8vw;
-    text-transform: uppercase;
-    user-select: none;
     width: 1em;
     text-align: center;
     display: inline-block;
   }
 
   div {
-    margin-left: -0.5em;
+    font-size: min(8vw, 2.5em);
+    text-transform: uppercase;
+    user-select: none;
+    letter-spacing: 0.35em;
+  }
+
+  div.even {
+    font-size: 8vw;
   }
 </style>
 
-<div>
-  {#each letters as letter}
-    <span>{letter}</span>
-  {/each}
+<div class:even>
+  {#if even}
+    {#each letters as letter}
+      <span>{letter}</span>
+    {/each}
+  {:else}{letters}{/if}
 </div>

src/routes/about.svelte

@@ -11,6 +11,7 @@
     height: 30vw;
     left: 35em;
     top: 12em;
+    max-width: 25em;
   }
 
   @media (max-width: 55em) {

src/routes/contact.svelte

@@ -1,18 +1,30 @@
 <script>
   import SimplePage from '../components/SimplePage.svelte'
+
+  const links = [
+    { href: 'mailto:hi@nicco.io', name: 'Say hi@nicco.io', icon: 'chatbubble-outline' },
+    { href: 'https://github.com/cupcakearmy', name: 'Github', icon: 'logo-github' },
+    { href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
+  ]
 </script>
 
 <style>
-  a {
-    text-decoration: none;
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
-  a:hover {
-    text-decoration: underline;
+  li {
+    transition: transform 200ms ease;
+    padding: 0.75em 0.5em;
+    cursor: pointer;
+    border-radius: 0.5em;
   }
 
-  span {
-    margin-right: 2em;
+  li:hover {
+    box-shadow: 0px 6px 6px -3px #00000012;
+    transform: translateY(0.25em) translateX(0.15em) scale(1.05);
   }
 
   ion-icon {
@@ -23,28 +35,16 @@
 <svelte:head>
   <title>Contact</title>
 </svelte:head>
+
 <SimplePage title="Contact">
-  <p>
-    <span>
-      <a rel="noopener noreferrer" href="mailto:hi@nicco.io">
-        <ion-icon name="chatbubble-outline" size="large" />
-        Say hi@nicco.io
-      </a>
-    </span>
-
-    <span>
-      <a rel="noopener noreferrer" target="_blank" href="https://github.com/cupcakearmy/">
-        <ion-icon name="logo-github" size="large" />
-        Github
-      </a>
-    </span>
-
-    <span>
-      <a href="/privacy">
-        <ion-icon name="finger-print-outline" size="large" />
-        Privacy
-      </a>
-    </span>
-
-  </p>
+  <ul>
+    {#each links as { href, name, icon }}
+      <li>
+        <a rel="noopener noreferrer" {href}>
+          <ion-icon name={icon} size="large" />
+          {name}
+        </a>
+      </li>
+    {/each}
+  </ul>
 </SimplePage>

src/routes/index.svelte

@@ -5,6 +5,7 @@
 <style>
   p {
     font-size: 4vw;
+    margin-top: 0;
   }
 
   section {
@@ -21,6 +22,7 @@
   section.left {
     align-items: flex-start;
     padding-left: 1em;
+    width: initial;
   }
 
   section.right {
@@ -53,8 +55,8 @@
 
 <section class="left" style="z-index: 3;">
   <h1>
-    <SpacedLetters letters="Niccolò" />
-    <SpacedLetters letters="Borgioli" />
+    <SpacedLetters letters="Niccolò" even />
+    <SpacedLetters letters="Borgioli" even />
   </h1>
 
   <p>Design & Development</p>

src/routes/privacy.svelte

@@ -0,0 +1,50 @@
+<script>
+  import SimplePage from '../components/SimplePage.svelte'
+</script>
+
+<SimplePage title="Privacy Policy">
+  <h3>TLDR;</h3>
+  <ul>
+    <li>There is no personal data collected, everything is anonymized</li>
+    <li>No data is passed to any third party</li>
+  </ul>
+
+  <hr />
+
+  <!-- <h2>The Legal</h2> -->
+
+  <p>
+    Your privacy is important to us. It is our policy to respect your privacy regarding any information we may collect
+    from you across our website, https://nicco.io, and other sites we own and operate.
+  </p>
+  <p>
+    We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and
+    lawful means, with your knowledge and consent. We also let you know why we’re collecting it and how it will be used.
+  </p>
+  <p>
+    We only retain collected information for as long as necessary to provide you with your requested service. What data
+    we store, we’ll protect within commercially acceptable means to prevent loss and theft, as well as unauthorised
+    access, disclosure, copying, use or modification.
+  </p>
+  <p>
+    We don’t share any personally identifying information publicly or with third-parties, except when required to by
+    law.
+  </p>
+  <p>
+    Our website may link to external sites that are not operated by us. Please be aware that we have no control over the
+    content and practices of these sites, and cannot accept responsibility or liability for their respective privacy
+    policies.
+  </p>
+
+  <p>
+    You are free to refuse our request for your personal information, with the understanding that we may be unable to
+    provide you with some of your desired services.
+  </p>
+
+  <p>
+    Your continued use of our website will be regarded as acceptance of our practices around privacy and personal
+    information. If you have any questions about how we handle user data and personal information, feel free to contact
+    us.
+  </p>
+  <p>This policy is effective as of 1 January 2019.</p>
+</SimplePage>

static/global.css

@@ -26,7 +26,7 @@ h5,
 h6 {
   font-family: 'Playfair Display', serif;
   font-weight: normal;
-  margin: 0.5em 0;
+  margin: 1em 0 0.5em 0;
 }
 
 p {
@@ -34,6 +34,10 @@ p {
   line-height: 1.5;
 }
 
+hr {
+  border: 0.1px solid var(--clr-primary);
+}
+
 :root {
   --clr-primary: hsl(219, 90%, 80%);
 }