mirror of
https://github.com/cupcakearmy/nicco.io.git
synced 2025-09-06 18:50:44 +00:00
webp & removed ionicons
This commit is contained in:
17
src/components/Icon.svelte
Normal file
17
src/components/Icon.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
export let icon
|
||||
</script>
|
||||
|
||||
<img {...$$restProps} src="/icons/{icon}.svg" alt={icon} />
|
||||
|
||||
<style>
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
contain: strict;
|
||||
fill: currentcolor;
|
||||
box-sizing: content-box;
|
||||
transform: translateY(0.2em);
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,6 @@
|
||||
<script>
|
||||
import Icon from './Icon.svelte'
|
||||
|
||||
export let segment
|
||||
|
||||
const routes = [
|
||||
@@ -12,6 +14,27 @@
|
||||
let nav
|
||||
</script>
|
||||
|
||||
<nav bind:this={nav}>
|
||||
<a href="/">
|
||||
<h1 class:active={segment === undefined}>NB</h1>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/search">
|
||||
<Icon icon="search-outline" />
|
||||
</a>
|
||||
</li>
|
||||
{#each routes as { name, href }}
|
||||
<li>
|
||||
<a {href}>
|
||||
<span>{name}</span>
|
||||
<div class:active={href.slice(1) === segment} />
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav :global(*) {
|
||||
box-sizing: initial;
|
||||
@@ -97,24 +120,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<nav bind:this={nav}>
|
||||
<a href="/">
|
||||
<h1 class:active={segment === undefined}>NB</h1>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/search">
|
||||
<ion-icon name="search-outline" />
|
||||
</a>
|
||||
</li>
|
||||
{#each routes as { name, href }}
|
||||
<li>
|
||||
<a {href}>
|
||||
<span>{name}</span>
|
||||
<div class:active={href.slice(1) === segment} />
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<script>
|
||||
import dj from 'dayjs'
|
||||
|
||||
import Icon from '../components/Icon.svelte'
|
||||
|
||||
export let project
|
||||
</script>
|
||||
|
||||
@@ -8,7 +10,7 @@
|
||||
<a href={project.link} target="_blank" rel="noopener">
|
||||
<h2>{project.title}</h2>
|
||||
</a>
|
||||
<div>
|
||||
<div class="subtitle">
|
||||
<b>{project.description}</b>
|
||||
<b class="date">{dj(project.date * 1000).format('MMM YY')}</b>
|
||||
</div>
|
||||
@@ -17,10 +19,12 @@
|
||||
{@html project.content}
|
||||
</p>
|
||||
|
||||
<ion-icon name="link-outline" />
|
||||
<a class="link" rel="noopener noreferrer" target="_blank" href={project.link}
|
||||
>{project.link.replace(/https?:\/\//, '')}</a
|
||||
>
|
||||
<div class="link">
|
||||
<Icon icon="link-outline" />
|
||||
<a rel="noopener noreferrer" target="_blank" href={project.link}
|
||||
>{project.link.replace(/https?:\/\//, '')}</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
@@ -29,7 +33,7 @@
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
div {
|
||||
div.subtitle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@@ -39,6 +43,16 @@
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.link a {
|
||||
margin-left: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 6em;
|
||||
}
|
||||
@@ -47,13 +61,8 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
a.link {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 30em) {
|
||||
div {
|
||||
div.subtitle {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,33 @@
|
||||
<script>
|
||||
import dj from 'dayjs'
|
||||
import ImageFrame from '../components/ImageFrame.svelte'
|
||||
import Icon from '../components/Icon.svelte'
|
||||
|
||||
export let work
|
||||
</script>
|
||||
|
||||
<a href={work.link} target="_blank" rel="noopener">
|
||||
<div class="horizontal">
|
||||
<div class="title regular">{work.title}</div>
|
||||
<div>
|
||||
<Icon icon="link-outline" />
|
||||
<span>{work.link.replace(/https?:\/\//, '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImageFrame
|
||||
src={work.image.sizes.medium_large}
|
||||
alt={work.image.description}
|
||||
/>
|
||||
</a>
|
||||
<div class="horizontal regular">
|
||||
<div>{work.role}</div>
|
||||
<div>{dj(work.date * 1000).format('MMM YY')}</div>
|
||||
</div>
|
||||
<p>
|
||||
{@html work.content}
|
||||
</p>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
font-size: 2em;
|
||||
@@ -36,22 +59,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href={work.link} target="_blank" rel="noopener">
|
||||
<div class="horizontal">
|
||||
<div class="title regular">{work.title}</div>
|
||||
<div>
|
||||
<ion-icon name="link-outline" />
|
||||
<span>{work.link.replace(/https?:\/\//, '')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ImageFrame src={work.image.sizes.medium_large} alt={work.image.description} />
|
||||
</a>
|
||||
<div class="horizontal regular">
|
||||
<div>{work.role}</div>
|
||||
<div>{dj(work.date * 1000).format('MMM YY')}</div>
|
||||
</div>
|
||||
<p>
|
||||
{@html work.content}
|
||||
</p>
|
||||
|
||||
@@ -1,13 +1,40 @@
|
||||
<script>
|
||||
import Icon from '../components/Icon.svelte'
|
||||
|
||||
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: 'mailto:hi@nicco.io',
|
||||
name: 'Say hi@nicco.io',
|
||||
icon: 'chatbubbles-outline',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/cupcakearmy',
|
||||
name: 'Github',
|
||||
icon: 'logo-github',
|
||||
},
|
||||
{ href: '/privacy', name: 'Privacy Policy', icon: 'finger-print-outline' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact</title>
|
||||
</svelte:head>
|
||||
|
||||
<SimplePage title="Contact">
|
||||
<ul>
|
||||
{#each links as { href, name, icon }}
|
||||
<li>
|
||||
<a rel="noopener noreferrer" {href}>
|
||||
<Icon class="icon" {icon} />
|
||||
{name}
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</SimplePage>
|
||||
|
||||
<style>
|
||||
ul {
|
||||
list-style: none;
|
||||
@@ -27,24 +54,9 @@
|
||||
transform: translateY(0.25em) translateX(0.15em) scale(1.05);
|
||||
}
|
||||
|
||||
ion-icon {
|
||||
li :global(.icon) {
|
||||
transform: translateY(0.3em);
|
||||
font-size: 2em;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact</title>
|
||||
</svelte:head>
|
||||
|
||||
<SimplePage title="Contact">
|
||||
<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>
|
||||
|
||||
@@ -2,6 +2,28 @@
|
||||
import SpacedLetters from '../components/SpacedLetters.svelte'
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Niccolo Borgioli</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="left" style="z-index: 3;">
|
||||
<h1>
|
||||
<SpacedLetters letters="Niccolò" even />
|
||||
<SpacedLetters letters="Borgioli" even />
|
||||
</h1>
|
||||
|
||||
<p>Design & Development</p>
|
||||
</section>
|
||||
|
||||
<section class="right" style="z-index: 2;">
|
||||
<picture>
|
||||
<source media="(min-width: 60em)" srcset="/images/home@1500.webp" />
|
||||
<source media="(min-width: 45em)" srcset="/images/home@1000.webp" />
|
||||
<source srcset="/images/home@500.webp" />
|
||||
<img src="/images/decoration.jpg" alt="decoration" />
|
||||
</picture>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
p {
|
||||
font-size: 4vw;
|
||||
@@ -48,20 +70,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Niccolo Borgioli</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="left" style="z-index: 3;">
|
||||
<h1>
|
||||
<SpacedLetters letters="Niccolò" even />
|
||||
<SpacedLetters letters="Borgioli" even />
|
||||
</h1>
|
||||
|
||||
<p>Design & Development</p>
|
||||
</section>
|
||||
|
||||
<section class="right" style="z-index: 2;">
|
||||
<img src="/images/decoration.jpg" alt="decoration" />
|
||||
</section>
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Designer & Developer" />
|
||||
<meta name="keywords" content="Web Agency Blog Articles" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,viewport-fit=cover"
|
||||
@@ -32,8 +34,6 @@
|
||||
initialise the router -->
|
||||
%sapper.scripts%
|
||||
|
||||
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var _paq = (window._paq = window._paq || [])
|
||||
_paq.push(['setDocumentTitle', document.domain + '/' + document.title])
|
||||
|
||||
Reference in New Issue
Block a user