Medzik
/
portfolio
mirror of https://github.com/MedzikUser/portfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add some links to card

This commit is contained in:
M3DZIK 2023-06-18 16:10:13 +02:00
parent 1d9a48b37b
commit be9304b3f4
No known key found for this signature in database
GPG Key ID: A5FAC1E185C112DB
8 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -23,6 +23,7 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-icons": "^2.1.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
@ -3164,6 +3165,12 @@
"svelte": "^3.19.0 || ^4.0.0-next.0"
}
},
"node_modules/svelte-icons": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/svelte-icons/-/svelte-icons-2.1.0.tgz",
"integrity": "sha512-rHPQjweEc9fGSnvM0/4gA3pDHwyZyYsC5KhttCZRhSMJfLttJST5Uq0B16Czhw+HQ+HbSOk8kLigMlPs7gZtfg==",
"dev": true
},
"node_modules/svelte-preprocess": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",

1
package.json
View File

@ -27,6 +27,7 @@
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"svelte-icons": "^2.1.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.4.1",
"typescript": "^5.0.0",

8
src/lib/SkillCard.svelte
View File

@ -5,14 +5,12 @@
</script>
<div class="card variant-glass p-4 md:p-10 shadow-lg space-y-4 text-center">
<svg
<div
class="mx-auto variant-glass rounded-2xl p-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
width="50px" height="50px"
style="width: 50px; height: 50px;"
>
<svelte:component this={icon} />
</svg>
</div>
<h3 class="h3">{title}</h3>

1
src/lib/icons/Golang.svelte
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

1
src/lib/icons/Java.svelte
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 28.1875 0 C 30.9375 6.363281 18.328125 10.292969 17.15625 15.59375 C 16.082031 20.464844 24.648438 26.125 24.65625 26.125 C 23.355469 24.109375 22.398438 22.449219 21.09375 19.3125 C 18.886719 14.007813 34.535156 9.207031 28.1875 0 Z M 36.5625 8.8125 C 36.5625 8.8125 25.5 9.523438 24.9375 16.59375 C 24.6875 19.742188 27.847656 21.398438 27.9375 23.6875 C 28.011719 25.558594 26.0625 27.125 26.0625 27.125 C 26.0625 27.125 29.609375 26.449219 30.71875 23.59375 C 31.949219 20.425781 28.320313 18.285156 28.6875 15.75 C 29.039063 13.324219 36.5625 8.8125 36.5625 8.8125 Z M 19.1875 25.15625 C 19.1875 25.15625 9.0625 25.011719 9.0625 27.875 C 9.0625 30.867188 22.316406 31.089844 31.78125 29.25 C 31.78125 29.25 34.296875 27.519531 34.96875 26.875 C 28.765625 28.140625 14.625 28.28125 14.625 27.1875 C 14.625 26.179688 19.1875 25.15625 19.1875 25.15625 Z M 38.65625 25.15625 C 37.664063 25.234375 36.59375 25.617188 35.625 26.3125 C 37.90625 25.820313 39.84375 27.234375 39.84375 28.84375 C 39.84375 32.46875 34.59375 35.875 34.59375 35.875 C 34.59375 35.875 42.71875 34.953125 42.71875 29 C 42.71875 26.296875 40.839844 24.984375 38.65625 25.15625 Z M 16.75 30.71875 C 15.195313 30.71875 12.875 31.9375 12.875 33.09375 C 12.875 35.417969 24.5625 37.207031 33.21875 33.8125 L 30.21875 31.96875 C 24.351563 33.847656 13.546875 33.234375 16.75 30.71875 Z M 18.1875 35.9375 C 16.058594 35.9375 14.65625 37.222656 14.65625 38.1875 C 14.65625 41.171875 27.371094 41.472656 32.40625 38.4375 L 29.21875 36.40625 C 25.457031 37.996094 16.015625 38.238281 18.1875 35.9375 Z M 11.09375 38.625 C 7.625 38.554688 5.375 40.113281 5.375 41.40625 C 5.375 48.28125 40.875 47.964844 40.875 40.9375 C 40.875 39.769531 39.527344 39.203125 39.03125 38.9375 C 41.933594 45.65625 9.96875 45.121094 9.96875 41.15625 C 9.96875 40.253906 12.320313 39.390625 14.5 39.8125 L 12.65625 38.75 C 12.113281 38.667969 11.589844 38.636719 11.09375 38.625 Z M 44.625 43.25 C 39.226563 48.367188 25.546875 50.222656 11.78125 47.0625 C 25.542969 52.695313 44.558594 49.535156 44.625 43.25 Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

1
src/lib/icons/JavaScript.svelte
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"><path d="M 6.667969 4 C 5.207031 4 4 5.207031 4 6.667969 L 4 43.332031 C 4 44.792969 5.207031 46 6.667969 46 L 43.332031 46 C 44.792969 46 46 44.796875 46 43.332031 L 46 6.667969 C 46 5.207031 44.796875 4 43.332031 4 Z M 6.667969 6 L 43.332031 6 C 43.703125 6 44 6.296875 44 6.667969 L 44 43.332031 C 44 43.703125 43.703125 44 43.332031 44 L 6.667969 44 C 6.296875 44 6 43.703125 6 43.332031 L 6 6.667969 C 6 6.296875 6.296875 6 6.667969 6 Z M 23 23 L 23 35.574219 C 23 37.503906 22.269531 38 21 38 C 19.671875 38 18.75 37.171875 18.140625 36.097656 L 15 38 C 15.910156 39.925781 18.140625 42 21.234375 42 C 24.65625 42 27 40.179688 27 36.183594 L 27 23 Z M 35.453125 23 C 32.046875 23 29.863281 25.179688 29.863281 28.042969 C 29.863281 31.148438 31.695313 32.617188 34.449219 33.789063 L 35.402344 34.199219 C 37.140625 34.960938 38 35.425781 38 36.734375 C 38 37.824219 37.171875 38.613281 35.589844 38.613281 C 33.707031 38.613281 32.816406 37.335938 32 36 L 29 38 C 30.121094 40.214844 32.132813 42 35.675781 42 C 39.300781 42 42 40.117188 42 36.683594 C 42 33.496094 40.171875 32.078125 36.925781 30.6875 L 35.972656 30.28125 C 34.335938 29.570313 33.625 29.109375 33.625 27.964844 C 33.625 27.039063 34.335938 26.328125 35.453125 26.328125 C 36.550781 26.328125 37.253906 26.792969 37.90625 27.964844 L 40.878906 26.058594 C 39.625 23.84375 37.878906 23 35.453125 23 Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

2
src/lib/icons/Svelte.svelte
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

53
src/routes/+page.svelte
View File

@ -1,8 +1,15 @@
<script>
import { ProgressBar } from "@skeletonlabs/skeleton";
import DiJava from 'svelte-icons/di/DiJava.svelte'
import DiGo from 'svelte-icons/di/DiGo.svelte'
import DiJavascript from 'svelte-icons/di/DiJavascript1.svelte'
import FaGithub from "svelte-icons/fa/FaGithub.svelte";
import FaGitlab from "svelte-icons/fa/FaGitlab.svelte";
import FaCreditCard from "svelte-icons/fa/FaCreditCard.svelte";
import MdEmail from "svelte-icons/md/MdEmail.svelte";
import SkillCard from "$lib/SkillCard.svelte";
import Java from "$lib/icons/Java.svelte";
import Golang from "$lib/icons/Golang.svelte";
import JavaScript from "$lib/icons/JavaScript.svelte";
import Svelte from "$lib/icons/Svelte.svelte";
import avatar from '../assets/avatar.avif'
@ -15,16 +22,38 @@
</svelte:head>
<div class="container h-full mx-auto flex justify-center items-center">
<div class="max-w-[640px] variant-glass rounded-container-token p-6 grid grid-cols-3 gap-8 items-center shadow-xl">
<img src={avatar} class="w-full aspect-square rounded-full" alt="Avatar" />
<div class="max-w-[640px] variant-glass rounded-container-token shadow-xl">
<div class="grid grid-cols-3 gap-8 items-center p-6">
<img src={avatar} class="w-full aspect-square rounded-full" alt="Avatar" />
<div class="col-span-2 space-y-2">
<div class="text-on-primary-token text-lg opacity-75">Self-Taught Programmer</div>
<div class="col-span-2 space-y-2">
<div class="text-on-primary-token text-lg opacity-75">Self-Taught Programmer</div>
<div class="text-on-primary-token font-bold text-xl sm:text-3xl">Oskar</div>
<div class="text-on-primary-token font-bold text-xl sm:text-3xl">Oskar</div>
<div class="text-on-primary-token text-lg sm:text-2xl">Creating the Future</div>
<div class="text-on-primary-token text-lg sm:text-2xl">Creating the Future</div>
</div>
</div>
<ProgressBar rounded="rounded-none" />
<footer class="grid grid-cols-4 place-items-center p-6 gap-10">
<a class="btn-icon bg-surface-200 p-2" href="https://github.com/M3DZIK">
<FaGithub />
</a>
<a class="btn-icon bg-surface-200 p-2" href="https://gitlab.com/Medzik">
<FaGitlab />
</a>
<a class="btn-icon bg-surface-200 p-2" href="mailto:me@medzik.dev">
<MdEmail />
</a>
<a class="btn-icon bg-surface-200 p-2" href="https://liberapay.com/Medzik/">
<FaCreditCard />
</a>
</footer>
</div>
</div>
@ -34,19 +63,19 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<SkillCard
icon={Java}
icon={DiJava}
title="Java/Kotlin"
description="After several years of writing code, Java and Kotlin seem to work best for me."
/>
<SkillCard
icon={Golang}
icon={DiGo}
title="Go"
description="Golang is my second favorite language because it is fast and friendly to write."
/>
<SkillCard
icon={JavaScript}
icon={DiJavascript}
title="JavaScript"
description="Unfortunately, the use of JavaScript is a must in web development."
/>