luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Added json content display and updated styling on main card item.

Browse Source
This commit is contained in:
Luke Else 2023-09-04 22:47:39 +01:00
parent d69078ff26
commit 0797fd9eff
9 changed files with 131 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "luke-else.co.uk",
"version": "0.0.1",
"devDependencies": {
"@rollup/plugin-json": "^6.0.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"prettier": "^2.8.0",
@ -473,6 +474,54 @@
"integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
"dev": true
},
"node_modules/@rollup/plugin-json": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.0.0.tgz",
"integrity": "sha512-i/4C5Jrdr1XUarRhVu27EEwjt4GObltD7c+MkCIpO2QIbojw8MUs+CCTqOphQi3Qtg1FLmYt+l+6YeoIf51J7w==",
"dev": true,
"dependencies": {
"@rollup/pluginutils": "^5.0.1"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/pluginutils": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.4.tgz",
"integrity": "sha512-0KJnIoRI8A+a1dqOYLxH8vBf8bphDmty5QvIm2hqm7oFCFYKCAZWWd2hXgMibaPsNDhI0AtpYfQZJG47pt/k4g==",
"dev": true,
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^2.0.2",
"picomatch": "^2.3.1"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/pluginutils/node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true
},
"node_modules/@sveltejs/adapter-auto": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",

1
package.json
View File

@ -12,6 +12,7 @@
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@rollup/plugin-json": "^6.0.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"prettier": "^2.8.0",

1
src/app.html
View File

@ -3,7 +3,6 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" type="text/css" href="vars.css">
<meta name="viewport" content="width=device-width" />
<meta name="color-scheme" content="dark" />
%sveltekit.head%

53
src/main.svelte Normal file
View File

@ -0,0 +1,53 @@
<script>
import * as info from '../static/json/me.json';
</script>
<style>
.card {
background-color: var(--bg-grad);
border-radius: 1em;
padding: .2em 2em 2em 2em;
box-shadow: .5em .5em .5em var(--purple);
}
.flex-container {
display: flex;
}
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.profile {
display: none;
}
.flex-container {
align-items: center;
flex-direction: column;
}
}
.profile {
border-radius: 100%;
height: 8em;
width: 8em;
padding: 1em 1em 1em 1em;
border: .5em solid var(--bg-grad);
}
.about {
padding: 0em 5% 0em 5%;
}
h1 {
color: var(--red);
}
</style>
<div class="card">
<h1>{info.name}</h1>
<div class="flex-container">
<img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
<p class="about">{info.about}</p>
</div>
</div>

5
src/routes/+layout.svelte
View File

@ -1,8 +1,13 @@
<script>
import json from '@rollup/plugin-json'
</script>
<style>
.main-container {
margin-left: 10%;
margin-right: 10%;
padding-top: 3em;
}
nav {

5
src/routes/+page.svelte
View File

@ -1,8 +1,5 @@
<script>
import Main from './Main.svelte';
import Main from '../main.svelte';
</script>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<Main></Main>

19
src/routes/main.svelte
View File

@ -1,19 +0,0 @@
<script>
</script>
<style>
.card {
background-color: var(--bg-grad);
border-radius: 1em;
padding: .1em 2em .1em 2em;
}
h1 {
color: var(--red);
}
</style>
<div class="card">
<h1>This is a test card</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu dictum varius duis at consectetur. Enim lobortis scelerisque fermentum dui. Eu mi bibendum neque egestas congue quisque egestas. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Eget est lorem ipsum dolor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Risus quis varius quam quisque id diam vel quam. Arcu non sodales neque sodales ut. Malesuada fames ac turpis egestas integer eget aliquet nibh. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus.</p>
</div>

22
static/json/me.json Normal file
View File

@ -0,0 +1,22 @@
{
"name": "Luke Else",
"profile_photo": "/profile.jpg",
"skills" : [
{
"skill": "Rust",
"logo": "test",
"mastery": 100
},
{
"skill": "C++",
"logo": "test",
"mastery": 40
},
{
"skill": "Linux",
"logo": "test",
"mastery": 10
}
],
"about": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vivamus at augue eget arcu dictum varius duis at consectetur. Enim lobortis scelerisque fermentum dui. Eu mi bibendum neque egestas congue quisque egestas. Tincidunt tortor aliquam nulla facilisi cras fermentum odio eu feugiat. Eget est lorem ipsum dolor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Risus quis varius quam quisque id diam vel quam. Arcu non sodales neque sodales ut. Malesuada fames ac turpis egestas integer eget aliquet nibh. Commodo nulla facilisi nullam vehicula ipsum a arcu cursus."
}

BIN
static/profile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB