2025-02-05 14:31:23 +00:00
9 changed files with 131 additions and 24 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
--- a/package.json
+++ b/package.json
@@ -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",
--- a/src/app.html
+++ b/src/app.html
@@ -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%
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -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>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -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 {
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -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>
--- a/src/routes/main.svelte
+++ b/src/routes/main.svelte
@@ -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>
--- a/static/json/me.json
+++ b/static/json/me.json
@@ -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."
+}
--- a/static/profile.jpg
+++ b/static/profile.jpg