mirror of https://github.com/MedzikUser/portfolio
Refactor design and change photo
This commit is contained in:
M3DZIK
parent
7686071813
commit
d1d67b12b2
|
|
@ -15,6 +15,7 @@
|
|||
"@sveltejs/adapter-cloudflare": "^4.1.0",
|
||||
"@sveltejs/kit": "^2.5.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@types/node": "^20.11.28",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.1",
|
||||
"@typescript-eslint/parser": "^7.1.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
|
|
@ -1047,6 +1048,15 @@
|
|||
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.11.28",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.28.tgz",
|
||||
"integrity": "sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/pug": {
|
||||
"version": "2.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
|
||||
|
|
@ -4125,6 +4135,12 @@
|
|||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "5.26.5",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
|
||||
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"@sveltejs/adapter-cloudflare": "^4.1.0",
|
||||
"@sveltejs/kit": "^2.5.3",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"@types/node": "^20.11.28",
|
||||
"@typescript-eslint/eslint-plugin": "^7.1.1",
|
||||
"@typescript-eslint/parser": "^7.1.1",
|
||||
"autoprefixer": "^10.4.18",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" class="light">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" data-theme="skeleton"">
|
||||
<body data-theme="medzik">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -3,5 +3,7 @@
|
|||
</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" />
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export const prerender = true
|
||||
export const prerender = true;
|
||||
|
|
|
|||
|
|
@ -2,36 +2,39 @@
|
|||
import { ProgressBar } from '@skeletonlabs/skeleton';
|
||||
|
||||
import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
|
||||
import FaCreditCard from 'svelte-icons/fa/FaCreditCard.svelte';
|
||||
import MdEmail from 'svelte-icons/md/MdEmail.svelte';
|
||||
import MdSecurity from 'svelte-icons/md/MdSecurity.svelte';
|
||||
|
||||
import Card from '$lib/Card.svelte';
|
||||
|
||||
import avatar from '../assets/avatar.svg';
|
||||
import SignalIcon from '../lib/Signal.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'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Medzik</title>
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="I'm a self-taught programmer with a passion for open-source software. Currently working on LibrePass, a password manager, and using Fedora with KDE. Explore my portfolio for more projects and achievements."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="self-taught programmer, open-source software, LibrePass, password manager, Fedora, KDE, portfolio, projects, achievements"
|
||||
content="16-year-old software developer and high school student, passionate about building secure applications. Mastermind behind LibrePass, your key to digital freedom."
|
||||
/>
|
||||
</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={avatar} class="w-full aspect-square rounded-full" alt="Avatar" />
|
||||
<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">Self-Taught Programmer</div>
|
||||
<div class="text-on-primary-token text-lg opacity-75">Self-Taught Developer</div>
|
||||
|
||||
<div class="text-on-primary-token font-bold text-xl sm:text-3xl">Oskar</div>
|
||||
|
||||
|
|
@ -39,14 +42,17 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<ProgressBar rounded="rounded-none" value={100} />
|
||||
<ProgressBar rounded="rounded-none" value={0} />
|
||||
|
||||
<footer class="grid grid-cols-4 place-items-center p-6 gap-10">
|
||||
<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">
|
||||
<a
|
||||
class="btn-icon bg-surface-200 p-2"
|
||||
href="https://signal.me/#eu/XIn9cgQ4+J9++45w66S350g29P7HWFAT3S9LOV18maUsbuxsZIFP5rAfJM1mtFW0"
|
||||
>
|
||||
<SignalIcon />
|
||||
</a>
|
||||
|
||||
|
|
@ -54,27 +60,27 @@
|
|||
<MdEmail />
|
||||
</a>
|
||||
|
||||
<a class="btn-icon bg-surface-200 p-2" href="https://liberapay.com/Medzik/">
|
||||
<!-- <a class="btn-icon bg-surface-200 p-2" href="https://liberapay.com/Medzik/">
|
||||
<FaCreditCard />
|
||||
</a>
|
||||
</a> -->
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-4 h-8 w-8 text-on-primary-token animate-bounce">
|
||||
<button class="absolute bottom-16 h-8 w-8 text-on-primary-token animate-bounce" on:click={scrollBottom}>
|
||||
<Arrow />
|
||||
</div>
|
||||
</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">My Project</h2>
|
||||
<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">
|
||||
<Card
|
||||
icon={MdSecurity}
|
||||
title="LibrePass"
|
||||
description="Currently, I'm developing LibrePass, a password manager, driven by the belief in online privacy and security. My goal is to create a secure and convenient tool for managing passwords."
|
||||
description="LibrePass is an open-source password manager that prioritizes security and ease of use."
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -84,12 +90,15 @@
|
|||
<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-error-500) / 0.33) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.5) 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-success-500) / 0.5) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%);
|
||||
}
|
||||
|
||||
.project-gradient {
|
||||
background-image: radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.5) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(var(--color-primary-500) / 0.24) 0px, transparent 50%);
|
||||
background-image: radial-gradient(at 0% 0%, rgba(var(--color-success-500) / 0.5) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 0%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%),
|
||||
radial-gradient(at 0% 100%, rgba(var(--color-error-500) / 0.5) 0px, transparent 50%),
|
||||
radial-gradient(at 100% 100%, rgba(var(--color-primary-500) / 0.5) 0px, transparent 50%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
declare module 'svelte-icons/fa/*.svelte' {
|
||||
const e: any;
|
||||
export default e;
|
||||
}
|
||||
|
||||
declare module 'svelte-icons/md/*.svelte' {
|
||||
const e: any;
|
||||
export default e;
|
||||
}
|
||||
|
|
@ -2,6 +2,8 @@ import { skeleton } from '@skeletonlabs/tw-plugin';
|
|||
import { join } from 'path';
|
||||
import type { Config } from 'tailwindcss';
|
||||
|
||||
import { medzikTheme } from './theme';
|
||||
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
|
|
@ -14,7 +16,7 @@ export default {
|
|||
plugins: [
|
||||
skeleton({
|
||||
themes: {
|
||||
preset: ['skeleton']
|
||||
custom: [medzikTheme]
|
||||
}
|
||||
})
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
|
||||
|
||||
export const medzikTheme: CustomThemeConfig = {
|
||||
name: 'medzik',
|
||||
properties: {
|
||||
// =~= Theme Properties =~=
|
||||
'--theme-font-family-base': `system-ui`,
|
||||
'--theme-font-family-heading': `system-ui`,
|
||||
'--theme-font-color-base': '0 0 0',
|
||||
'--theme-font-color-dark': '255 255 255',
|
||||
'--theme-rounded-base': '9999px',
|
||||
'--theme-rounded-container': '8px',
|
||||
'--theme-border-base': '1px',
|
||||
// =~= Theme On-X Colors =~=
|
||||
'--on-primary': '0 0 0',
|
||||
'--on-secondary': '0 0 0',
|
||||
'--on-tertiary': '0 0 0',
|
||||
'--on-success': '0 0 0',
|
||||
'--on-warning': '0 0 0',
|
||||
'--on-error': '0 0 0',
|
||||
'--on-surface': '0 0 0',
|
||||
// =~= Theme Colors =~=
|
||||
// primary | #8ff0a4
|
||||
'--color-primary-50': '238 253 241', // #eefdf1
|
||||
'--color-primary-100': '233 252 237', // #e9fced
|
||||
'--color-primary-200': '227 251 232', // #e3fbe8
|
||||
'--color-primary-300': '210 249 219', // #d2f9db
|
||||
'--color-primary-400': '177 245 191', // #b1f5bf
|
||||
'--color-primary-500': '143 240 164', // #8ff0a4
|
||||
'--color-primary-600': '129 216 148', // #81d894
|
||||
'--color-primary-700': '107 180 123', // #6bb47b
|
||||
'--color-primary-800': '86 144 98', // #569062
|
||||
'--color-primary-900': '70 118 80', // #467650
|
||||
// secondary | #57e389
|
||||
'--color-secondary-50': '230 251 237', // #e6fbed
|
||||
'--color-secondary-100': '221 249 231', // #ddf9e7
|
||||
'--color-secondary-200': '213 248 226', // #d5f8e2
|
||||
'--color-secondary-300': '188 244 208', // #bcf4d0
|
||||
'--color-secondary-400': '137 235 172', // #89ebac
|
||||
'--color-secondary-500': '87 227 137', // #57e389
|
||||
'--color-secondary-600': '78 204 123', // #4ecc7b
|
||||
'--color-secondary-700': '65 170 103', // #41aa67
|
||||
'--color-secondary-800': '52 136 82', // #348852
|
||||
'--color-secondary-900': '43 111 67', // #2b6f43
|
||||
// tertiary | #99c1f1
|
||||
'--color-tertiary-50': '240 246 253', // #f0f6fd
|
||||
'--color-tertiary-100': '235 243 252', // #ebf3fc
|
||||
'--color-tertiary-200': '230 240 252', // #e6f0fc
|
||||
'--color-tertiary-300': '214 230 249', // #d6e6f9
|
||||
'--color-tertiary-400': '184 212 245', // #b8d4f5
|
||||
'--color-tertiary-500': '153 193 241', // #99c1f1
|
||||
'--color-tertiary-600': '138 174 217', // #8aaed9
|
||||
'--color-tertiary-700': '115 145 181', // #7391b5
|
||||
'--color-tertiary-800': '92 116 145', // #5c7491
|
||||
'--color-tertiary-900': '75 95 118', // #4b5f76
|
||||
// success | #84cc16
|
||||
'--color-success-50': '237 247 220', // #edf7dc
|
||||
'--color-success-100': '230 245 208', // #e6f5d0
|
||||
'--color-success-200': '224 242 197', // #e0f2c5
|
||||
'--color-success-300': '206 235 162', // #ceeba2
|
||||
'--color-success-400': '169 219 92', // #a9db5c
|
||||
'--color-success-500': '132 204 22', // #84cc16
|
||||
'--color-success-600': '119 184 20', // #77b814
|
||||
'--color-success-700': '99 153 17', // #639911
|
||||
'--color-success-800': '79 122 13', // #4f7a0d
|
||||
'--color-success-900': '65 100 11', // #41640b
|
||||
// warning | #ffbe6f
|
||||
'--color-warning-50': '255 245 233', // #fff5e9
|
||||
'--color-warning-100': '255 242 226', // #fff2e2
|
||||
'--color-warning-200': '255 239 219', // #ffefdb
|
||||
'--color-warning-300': '255 229 197', // #ffe5c5
|
||||
'--color-warning-400': '255 210 154', // #ffd29a
|
||||
'--color-warning-500': '255 190 111', // #ffbe6f
|
||||
'--color-warning-600': '230 171 100', // #e6ab64
|
||||
'--color-warning-700': '191 143 83', // #bf8f53
|
||||
'--color-warning-800': '153 114 67', // #997243
|
||||
'--color-warning-900': '125 93 54', // #7d5d36
|
||||
// error | #f66151
|
||||
'--color-error-50': '254 231 229', // #fee7e5
|
||||
'--color-error-100': '253 223 220', // #fddfdc
|
||||
'--color-error-200': '253 216 212', // #fdd8d4
|
||||
'--color-error-300': '251 192 185', // #fbc0b9
|
||||
'--color-error-400': '249 144 133', // #f99085
|
||||
'--color-error-500': '246 97 81', // #f66151
|
||||
'--color-error-600': '221 87 73', // #dd5749
|
||||
'--color-error-700': '185 73 61', // #b9493d
|
||||
'--color-error-800': '148 58 49', // #943a31
|
||||
'--color-error-900': '121 48 40', // #793028
|
||||
// surface | #2ec27e
|
||||
'--color-surface-50': '224 246 236', // #e0f6ec
|
||||
'--color-surface-100': '213 243 229', // #d5f3e5
|
||||
'--color-surface-200': '203 240 223', // #cbf0df
|
||||
'--color-surface-300': '171 231 203', // #abe7cb
|
||||
'--color-surface-400': '109 212 165', // #6dd4a5
|
||||
'--color-surface-500': '46 194 126', // #2ec27e
|
||||
'--color-surface-600': '41 175 113', // #29af71
|
||||
'--color-surface-700': '35 146 95', // #23925f
|
||||
'--color-surface-800': '28 116 76', // #1c744c
|
||||
'--color-surface-900': '23 95 62' // #175f3e
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue