mirror of
https://github.com/KevinMidboe/k9e.no.git
synced 2026-02-11 18:59:27 +00:00
Initital commit simple bio page
This commit is contained in:
12
src/app.d.ts
vendored
Normal file
12
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
15
src/app.html
Normal file
15
src/app.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Kevin Midbøe 🏠</title>
|
||||
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
3
src/lib/colors.ts
Normal file
3
src/lib/colors.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
const colors = ['#24d05a', '#eb4888', '#10a2f5', '#e9bc3f'];
|
||||
|
||||
export default colors;
|
||||
50
src/lib/images.svelte
Normal file
50
src/lib/images.svelte
Normal file
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import type IImage from '$lib/interfaces/IImage';
|
||||
|
||||
let images: IImage[] = [
|
||||
{ url: 'IMG_5613.jpeg', alt: 'Kevin at beach' },
|
||||
{ url: 'IMG_4551.jpeg', alt: 'Kevin fishing' },
|
||||
{ url: 'IMG_1925.jpeg', alt: 'Kevin in a boat with dog' }
|
||||
];
|
||||
|
||||
function cycle() {
|
||||
images.push(images.shift() || images[0]);
|
||||
images = images;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="images"
|
||||
on:click={cycle}
|
||||
on:keydown={(e) => e.key === 'Enter'}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{#each images as image (image.url)}
|
||||
<img src={image.url} alt={image.alt} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
div.images {
|
||||
position: relative;
|
||||
display: flex;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
margin-left: 40px;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
margin-top: 10vh;
|
||||
max-height: 80vh;
|
||||
transition: all 0.51s ease;
|
||||
}
|
||||
|
||||
@for $i from 0 through 4 {
|
||||
img:nth-of-type(#{$i}) {
|
||||
left: calc(-10px * $i);
|
||||
top: calc(-10px * $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
6
src/lib/interfaces/IImage.ts
Normal file
6
src/lib/interfaces/IImage.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
interface IImage {
|
||||
url: string;
|
||||
alt: string;
|
||||
}
|
||||
|
||||
export type { IImage };
|
||||
6
src/lib/interfaces/ILink.ts
Normal file
6
src/lib/interfaces/ILink.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
interface ILink {
|
||||
title: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default ILink;
|
||||
6
src/lib/interfaces/IPersonalia.ts
Normal file
6
src/lib/interfaces/IPersonalia.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
interface IPersonalia {
|
||||
length: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export type { IPersonalia };
|
||||
25
src/lib/linkColor.svelte
Normal file
25
src/lib/linkColor.svelte
Normal file
@@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import colors from './colors';
|
||||
|
||||
function getRandomColor() {
|
||||
return colors[Math.floor(Math.random() * colors.length)];
|
||||
}
|
||||
|
||||
function setRandomLinkColor() {
|
||||
Array.from(document.getElementsByTagName('a')).forEach((e) => {
|
||||
e.style.color = getRandomColor();
|
||||
});
|
||||
}
|
||||
|
||||
function setColorHoverListener() {
|
||||
Array.from(document.querySelectorAll('a, button')).forEach((e) => {
|
||||
e.addEventListener('mouseover', setRandomLinkColor);
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
setRandomLinkColor();
|
||||
setColorHoverListener();
|
||||
});
|
||||
</script>
|
||||
71
src/lib/personalia.svelte
Normal file
71
src/lib/personalia.svelte
Normal file
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import colors from './colors';
|
||||
import type IPersonalia from '$lib/interfaces/IPersonalia';
|
||||
|
||||
const personalias: IPersonalia[] = [
|
||||
{
|
||||
length: 'short bio',
|
||||
text: 'Hello 👋 I currently work at Aller Media as DevOps Lead. I enjoy building things with my hands & head, bouldering and teaching in my free time.'
|
||||
},
|
||||
{
|
||||
length: 'long bio',
|
||||
text: 'Hello longer 👋 I currently work at Aller Media as DevOps Lead. I enjoy building things with my hands & head, bouldering and teaching in my free time.'
|
||||
}
|
||||
];
|
||||
|
||||
let selectedPersonalia = personalias[0];
|
||||
|
||||
function setSelectedPersonalia(personalia: IPersonalia) {
|
||||
selectedPersonalia = personalia;
|
||||
|
||||
const color = colors[Math.floor(Math.random() * colors.length)];
|
||||
document.documentElement.style.setProperty('--selected-color', color);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="personalia-toggles">
|
||||
{#each personalias as p}
|
||||
<button
|
||||
on:click={() => setSelectedPersonalia(p)}
|
||||
class={selectedPersonalia.length === p.length ? 'selected' : ''}
|
||||
>
|
||||
{p.length}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<p>{selectedPersonalia.text}</p>
|
||||
|
||||
<style lang="scss">
|
||||
.personalia-toggles {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
border: 2px solid gray;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
color: gray;
|
||||
font-size: 1rem;
|
||||
background-color: white;
|
||||
overflow: auto;
|
||||
transition: 0.2s ease all;
|
||||
|
||||
&:not(&:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
font-weight: bold;
|
||||
border-color: var(--selected-color);
|
||||
color: var(--selected-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(150, 151, 156, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
src/routes/+layout.ts
Normal file
16
src/routes/+layout.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// if you want to generate a static html file
|
||||
// for your page.
|
||||
// Documentation: https://kit.svelte.dev/docs/page-options#prerender
|
||||
export const prerender = true;
|
||||
|
||||
// if you want to Generate a SPA
|
||||
// you have to set ssr to false.
|
||||
// This is not the case (so set as true or comment the line)
|
||||
// Documentation: https://kit.svelte.dev/docs/page-options#ssr
|
||||
export const ssr = true;
|
||||
|
||||
// How to manage the trailing slashes in the URLs
|
||||
// the URL for about page witll be /about with 'ignore' (default)
|
||||
// the URL for about page witll be /about/ with 'always'
|
||||
// https://kit.svelte.dev/docs/page-options#trailingslash
|
||||
export const trailingSlash = 'ignore';
|
||||
64
src/routes/+page.svelte
Normal file
64
src/routes/+page.svelte
Normal file
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
import Images from '$lib/images.svelte';
|
||||
import LinkColor from '$lib/linkColor.svelte';
|
||||
import Personalia from '$lib/personalia.svelte';
|
||||
import type ILink from '$lib/interfaces/ILink';
|
||||
|
||||
const links: ILink[] = [
|
||||
{ title: 'github', url: 'https://github.com/kevinmidboe' },
|
||||
{ title: 'blog', url: 'https://blog.schleppe.cloud' },
|
||||
{ title: 'CV', url: 'https://no.linkedin.com/in/kevin-midbøe-687837161' },
|
||||
{ title: 'Linkedin', url: 'https://no.linkedin.com/in/kevin-midbøe-687837161' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<div class="personalia">
|
||||
<h1>Kevin Midbøe</h1>
|
||||
|
||||
<ul>
|
||||
{#each links as link}
|
||||
<li>
|
||||
<a href={link.url}>{link.title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<Personalia />
|
||||
</div>
|
||||
|
||||
<Images />
|
||||
</section>
|
||||
|
||||
<LinkColor />
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
h1 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
div.personalia {
|
||||
font-size: 1.5rem;
|
||||
|
||||
ul {
|
||||
margin: 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0.8rem 1rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user