KevinMidboe/k9e.no
1
0
Fork 0
mirror of https://github.com/KevinMidboe/k9e.no.git synced 2025-10-29 01:30:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initital commit simple bio page

Browse Source
This commit is contained in:
Kevin
2023-11-04 15:53:03 +01:00
commit 28502fe582
22 changed files with 2029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
package.json Normal file
View File

@@ -0,0 +1,34 @@
{
"name": "k9e.no",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-static": "^2.0.3",
"@sveltejs/kit": "^1.20.4",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"github-contributions-canvas": "^0.7.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.69.5",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.4.2"
},
"type": "module"
}

12
src/app.d.ts vendored Normal file
View 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
View 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
View File

@@ -0,0 +1,3 @@
const colors = ['#24d05a', '#eb4888', '#10a2f5', '#e9bc3f'];
export default colors;

50
src/lib/images.svelte Normal file
View 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
View File

@@ -0,0 +1,6 @@
interface IImage {
url: string;
alt: string;
}
export type { IImage };

6
src/lib/interfaces/ILink.ts Normal file
View File

@@ -0,0 +1,6 @@
interface ILink {
title: string;
url: string;
}
export default ILink;

6
src/lib/interfaces/IPersonalia.ts Normal file
View File

@@ -0,0 +1,6 @@
interface IPersonalia {
length: string;
text: string;
}
export type { IPersonalia };

25
src/lib/linkColor.svelte Normal file
View 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
View 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
View 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
View 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>

BIN
static/IMG_1925.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 524 KiB

BIN
static/IMG_4543.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
static/IMG_4551.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

BIN
static/IMG_5613.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

8
static/style.css Normal file
View File

@@ -0,0 +1,8 @@
html,
body {
font-family: monospace;
}
:root {
--selected-color: orange;
}

17
svelte.config.js Normal file
View File

@@ -0,0 +1,17 @@
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
export default {
preprocess: preprocess(),
kit: {
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: undefined,
precompress: false,
strict: true
})
}
};

17
tsconfig.json Normal file
View File

@@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

6
vite.config.ts Normal file
View File

@@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});

1673
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff