mirror of https://github.com/MedzikUser/portfolio
Compare commits
8 Commits
29d4f43c0a
...
9b8133f610
| Author | SHA1 | Date |
|---|---|---|
Oskar Karpiński
|
9b8133f610 | |
Oskar Karpiński
|
adf79cd7bc | |
|
Oskar Karpiński
|
63acd37427 | |
|
Oskar Karpiński
|
a747584bf5 | |
|
Oskar Karpiński
|
e3018cf621 | |
|
Oskar Karpiński
|
038905777e | |
|
Oskar Karpiński
|
3b7ade150f | |
|
Oskar Karpiński
|
18170f2255 |
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2023 Oskar
|
||||
Copyright (c) 2023 Oskar Karpiński
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# [Portfolio](https://medzik.dev)
|
||||
|
||||
|
||||
|
||||
|
||||
Licensed under MIT
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@
|
|||
"@floating-ui/dom": "^1.6.3",
|
||||
"@skeletonlabs/skeleton": "^2.9.0",
|
||||
"@skeletonlabs/tw-plugin": "^0.3.1",
|
||||
"@steeze-ui/font-awesome": "^1.0.1",
|
||||
"@steeze-ui/material-design-icons": "^1.1.2",
|
||||
"@steeze-ui/svelte-icon": "^1.5.0",
|
||||
"@sveltejs/adapter-auto": "^3.1.1",
|
||||
"@sveltejs/adapter-cloudflare": "^4.1.0",
|
||||
"@sveltejs/kit": "^2.5.3",
|
||||
|
|
@ -27,7 +30,6 @@
|
|||
"prettier-plugin-svelte": "^3.2.2",
|
||||
"svelte": "^4.2.12",
|
||||
"svelte-check": "^3.6.6",
|
||||
"svelte-icons": "^2.1.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.4.2",
|
||||
|
|
@ -933,6 +935,27 @@
|
|||
"tailwindcss": ">=3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@steeze-ui/font-awesome": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@steeze-ui/font-awesome/-/font-awesome-1.0.1.tgz",
|
||||
"integrity": "sha512-NTWmoyt8wk6NWWmi6/BV2rxfJoFKcaYyq5imla2bDtV+58lrvZ7bse3bUXxIAePco+6SB3JzBWcwgqdO37G7ug==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@steeze-ui/material-design-icons": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@steeze-ui/material-design-icons/-/material-design-icons-1.1.2.tgz",
|
||||
"integrity": "sha512-p1csJ9RR8J2zG+ED3JJehVHxIi88B0ilUhg0ScbduVe54lgTZ1suAu5d94zOrBww/ImKDPhFshEXUWodVpELLw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@steeze-ui/svelte-icon": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@steeze-ui/svelte-icon/-/svelte-icon-1.5.0.tgz",
|
||||
"integrity": "sha512-Y0S7Qk2kO6byzOlD5SQGbOF2ZaKXJgfTkH78QUPcq579wiWMQJ5H14zL4XwtsPJ0DfkoL5qa3WaIdYkWb9A6AA==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"svelte": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@sveltejs/adapter-auto": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.1.1.tgz",
|
||||
|
|
@ -3851,12 +3874,6 @@
|
|||
"svelte": "^3.19.0 || ^4.0.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.1.3",
|
||||
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.3.tgz",
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@
|
|||
"@floating-ui/dom": "^1.6.3",
|
||||
"@skeletonlabs/skeleton": "^2.9.0",
|
||||
"@skeletonlabs/tw-plugin": "^0.3.1",
|
||||
"@steeze-ui/font-awesome": "^1.0.1",
|
||||
"@steeze-ui/material-design-icons": "^1.1.2",
|
||||
"@steeze-ui/svelte-icon": "^1.5.0",
|
||||
"@sveltejs/adapter-auto": "^3.1.1",
|
||||
"@sveltejs/adapter-cloudflare": "^4.1.0",
|
||||
"@sveltejs/kit": "^2.5.3",
|
||||
|
|
@ -31,7 +34,6 @@
|
|||
"prettier-plugin-svelte": "^3.2.2",
|
||||
"svelte": "^4.2.12",
|
||||
"svelte-check": "^3.6.6",
|
||||
"svelte-icons": "^2.1.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"tslib": "^2.6.2",
|
||||
"typescript": "^5.4.2",
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
<script>
|
||||
import IconBase from 'svelte-icons/components/IconBase.svelte';
|
||||
</script>
|
||||
|
||||
<IconBase viewBox="0 0 24 24" {...$$props}>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</IconBase>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script>
|
||||
import IconBase from 'svelte-icons/components/IconBase.svelte';
|
||||
</script>
|
||||
|
||||
<IconBase viewBox="0 0 128 128" {...$$props}>
|
||||
<path
|
||||
d="M48.64,1.87l1.44,5.82A57.84,57.84,0,0,0,34,14.34L30.92,9.2A63.76,63.76,0,0,1,48.64,1.87Zm30.72,0L77.92,7.69A57.84,57.84,0,0,1,94,14.34l3.1-5.14A63.76,63.76,0,0,0,79.36,1.87ZM9.2,30.92A63.76,63.76,0,0,0,1.87,48.64l5.82,1.44A57.84,57.84,0,0,1,14.34,34ZM6,64a57.9,57.9,0,0,1,.65-8.69l-5.93-.9a64.23,64.23,0,0,0,0,19.18l5.93-.9A57.9,57.9,0,0,1,6,64Zm91.08,54.8L94,113.66a57.84,57.84,0,0,1-16.06,6.65l1.44,5.82A63.76,63.76,0,0,0,97.08,118.8ZM122,64a57.9,57.9,0,0,1-.65,8.69l5.93.9a64.23,64.23,0,0,0,0-19.18l-5.93.9A57.9,57.9,0,0,1,122,64Zm4.13,15.36-5.82-1.44A57.84,57.84,0,0,1,113.66,94l5.14,3.1A63.76,63.76,0,0,0,126.13,79.36Zm-53.44,42a58.41,58.41,0,0,1-17.38,0l-.9,5.93a64.23,64.23,0,0,0,19.18,0Zm38-22.95A58.21,58.21,0,0,1,98.4,110.69l3.56,4.83A64.1,64.1,0,0,0,115.52,102ZM98.4,17.31A58.21,58.21,0,0,1,110.69,29.6L115.52,26A64.1,64.1,0,0,0,102,12.48ZM17.31,29.6A58.21,58.21,0,0,1,29.6,17.31L26,12.48A64.1,64.1,0,0,0,12.48,26ZM118.8,30.92,113.66,34a57.84,57.84,0,0,1,6.65,16.06l5.82-1.44A63.76,63.76,0,0,0,118.8,30.92ZM55.31,6.65a58.41,58.41,0,0,1,17.38,0l.9-5.93a64.23,64.23,0,0,0-19.18,0ZM20.39,117.11,8,120l2.89-12.39-5.84-1.37L2.16,118.63a6,6,0,0,0,7.21,7.21L21.75,123ZM6.3,100.89l5.84,1.36,2-8.59A57.75,57.75,0,0,1,7.69,77.92L1.87,79.36a63.52,63.52,0,0,0,5.9,15.21Zm28,13-8.59,2,1.36,5.84,6.32-1.47a63.52,63.52,0,0,0,15.21,5.9l1.44-5.82A57.75,57.75,0,0,1,34.34,113.85ZM64,12A52,52,0,0,0,20,91.67L15,113l21.33-5A52,52,0,1,0,64,12Z"
|
||||
/>
|
||||
</IconBase>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<script>
|
||||
import { ProgressBar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import { Icon } from '@steeze-ui/svelte-icon'
|
||||
import { Email, ArrowDownward } from '@steeze-ui/material-design-icons'
|
||||
import { Github, SignalMessenger } from '@steeze-ui/font-awesome'
|
||||
|
||||
import photo from '../../assets/photo.jpg';
|
||||
|
||||
function scrollBottom() {
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="card-gradient min-h-[100vh] mx-auto flex justify-center items-center">
|
||||
<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={photo} class="w-full aspect-square rounded-full" alt="" />
|
||||
|
||||
<div class="col-span-2 space-y-2">
|
||||
<div class="text-on-primary-token text-lg opacity-75">Software Developer</div>
|
||||
|
||||
<div class="text-on-primary-token font-bold text-xl sm:text-3xl">Oskar Karpiński</div>
|
||||
|
||||
<div class="text-on-primary-token text-lg sm:text-2xl">Creating the Future</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProgressBar rounded="rounded-none" value={0} />
|
||||
|
||||
<footer class="grid grid-cols-3 place-items-center p-6 gap-10">
|
||||
<a class="btn-icon bg-surface-200 p-2" href="https://github.com/M3DZIK">
|
||||
<Icon src="{Github}" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="btn-icon bg-surface-200 p-2"
|
||||
href="https://signal.me/#eu/XIn9cgQ4+J9++45w66S350g29P7HWFAT3S9LOV18maUsbuxsZIFP5rAfJM1mtFW0"
|
||||
>
|
||||
<Icon src={SignalMessenger} />
|
||||
</a>
|
||||
|
||||
<a class="btn-icon bg-surface-200 p-2" href="mailto:me@medzik.dev">
|
||||
<Icon src={Email} />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<button class="absolute bottom-16 h-8 w-8 text-on-primary-token animate-bounce" on:click={scrollBottom}>
|
||||
<Icon src={ArrowDownward} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.card-gradient {
|
||||
background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 98% 1%, rgba(var(--color-success-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<div class="project-gradient mx-auto flex justify-center items-center p-16">
|
||||
<div class="container space-y-10">
|
||||
<h2 class="h2 text-center card-header">Featured Projects</h2>
|
||||
|
||||
<div class="flex justify-center gap-8 flex-wrap">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.project-gradient {
|
||||
background-image: radial-gradient(at 0% 0%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Dns } from "@steeze-ui/material-design-icons";
|
||||
import { Icon } from "@steeze-ui/svelte-icon";
|
||||
</script>
|
||||
|
||||
<a href="https://hsauth.medzik.dev" target="_blank" class="max-w-xl w-full">
|
||||
<div class="card variant-filled-primary bg-opacity-25 p-6 md:p-10 shadow-lg space-y-4 text-center btn whitespace-normal grid h-full">
|
||||
<div class="mx-auto variant-filled-primary bg-opacity-50 rounded-2xl p-2" style="width: 50px; height: 50px;">
|
||||
<Icon src={Dns} />
|
||||
</div>
|
||||
|
||||
<h3 class="h3">
|
||||
HSAuth Library
|
||||
</h3>
|
||||
|
||||
<p class="opacity-85">
|
||||
A user authentication algorithm which was created to eliminate the need to send the password or even its hash to the server.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { LockClock } from "@steeze-ui/material-design-icons";
|
||||
import { Icon } from "@steeze-ui/svelte-icon";
|
||||
</script>
|
||||
|
||||
<a href="https://github.com/M3DZIK/java-otp" target="_blank" class="max-w-xl w-full">
|
||||
<div class="card variant-filled-secondary bg-opacity-25 p-6 md:p-10 shadow-lg space-y-4 text-center btn whitespace-normal grid h-full">
|
||||
<div class="mx-auto variant-filled-secondary bg-opacity-50 rounded-2xl p-2" style="width: 50px; height: 50px;">
|
||||
<Icon src={LockClock} />
|
||||
</div>
|
||||
|
||||
<h3 class="h3">
|
||||
Java OTP Library
|
||||
</h3>
|
||||
|
||||
<p class="opacity-85">
|
||||
A <u>Time-based One-Time Password</u> and <u>HMAC-based One-Time Password</u> implementation.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { Security } from "@steeze-ui/material-design-icons";
|
||||
import { Icon } from "@steeze-ui/svelte-icon";
|
||||
</script>
|
||||
|
||||
<a href="https://librepass.org" target="_blank" class="max-w-xl w-full">
|
||||
<div class="card variant-filled-error bg-opacity-25 p-6 md:p-10 shadow-lg space-y-4 text-center btn whitespace-normal grid h-full">
|
||||
<div class="mx-auto variant-filled-error bg-opacity-50 rounded-2xl p-2" style="width: 50px; height: 50px;">
|
||||
<Icon src={Security} />
|
||||
</div>
|
||||
|
||||
<h3 class="h3">
|
||||
LibrePass
|
||||
</h3>
|
||||
|
||||
<p class="opacity-85">
|
||||
An open-source password manager that prioritizes security and ease of use.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -1,25 +1,13 @@
|
|||
<script>
|
||||
import { ProgressBar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
|
||||
import MdEmail from 'svelte-icons/md/MdEmail.svelte';
|
||||
import MdSecurity from 'svelte-icons/md/MdSecurity.svelte';
|
||||
|
||||
import SignalIcon from '$lib/Signal.svelte';
|
||||
import Arrow from '$lib/Arrow.svelte';
|
||||
|
||||
import photo from '../assets/photo.jpg';
|
||||
|
||||
function scrollBottom() {
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
import AboutCard from '$lib/sections/AboutCard.svelte';
|
||||
import ProjectsCard from '$lib/sections/ProjectsCard.svelte';
|
||||
import HSAuthProjectCard from '$lib/sections/projects/HSAuthProjectCard.svelte';
|
||||
import LibrePassProjectCard from '$lib/sections/projects/LibrePassProjectCard.svelte';
|
||||
import JavaOTPProjectCard from '$lib/sections/projects/JavaOTPProjectCard.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Medzik</title>
|
||||
<title>Oskar Karpiński</title>
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
|
|
@ -27,83 +15,10 @@
|
|||
/>
|
||||
</svelte:head>
|
||||
|
||||
<div class="card-gradient min-h-[100vh] mx-auto flex justify-center items-center">
|
||||
<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={photo} class="w-full aspect-square rounded-full" alt="" />
|
||||
<AboutCard />
|
||||
|
||||
<div class="col-span-2 space-y-2">
|
||||
<div class="text-on-primary-token text-lg opacity-75">Software Developer</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>
|
||||
</div>
|
||||
|
||||
<ProgressBar rounded="rounded-none" value={0} />
|
||||
|
||||
<footer class="grid grid-cols-3 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://signal.me/#eu/XIn9cgQ4+J9++45w66S350g29P7HWFAT3S9LOV18maUsbuxsZIFP5rAfJM1mtFW0"
|
||||
>
|
||||
<SignalIcon />
|
||||
</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>
|
||||
|
||||
<button class="absolute bottom-16 h-8 w-8 text-on-primary-token animate-bounce" on:click={scrollBottom}>
|
||||
<Arrow />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="project-gradient mx-auto flex justify-center items-center p-16">
|
||||
<div class="container space-y-10">
|
||||
<h2 class="h2 text-center card-header">Featured Project</h2>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<a href="https://librepass.org" target="_blank" class="max-w-xl">
|
||||
<div class="card variant-filled-error bg-opacity-25 md:p-10 shadow-lg space-y-4 text-center btn whitespace-normal grid">
|
||||
<div class="mx-auto variant-filled-error bg-opacity-50 rounded-2xl p-2" style="width: 50px; height: 50px;">
|
||||
<MdSecurity />
|
||||
</div>
|
||||
|
||||
<h3 class="h3">
|
||||
LibrePass
|
||||
</h3>
|
||||
|
||||
<p class="opacity-85">
|
||||
LibrePass is an open-source password manager that prioritizes security and ease of use.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.card-gradient {
|
||||
background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 98% 1%, rgba(var(--color-success-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.project-gradient {
|
||||
background-image: radial-gradient(at 0% 0%, rgba(var(--color-primary-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, rgba(var(--color-tertiary-500) / 0.33) 0px, transparent 50%);
|
||||
}
|
||||
</style>
|
||||
<ProjectsCard>
|
||||
<LibrePassProjectCard />
|
||||
<HSAuthProjectCard />
|
||||
<JavaOTPProjectCard />
|
||||
</ProjectsCard>
|
||||
|
|
|
|||
Loading…
Reference in New Issue