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

Compare commits

base: Medzik:bccb882a99854776d93a6b78317853ef1bfffecf
Branches Tags
Medzik:main
...
compare: Medzik:47dabfb4708b0f17c70bd1e5a958c1d8a1acaa81
Branches Tags
Medzik:main

4 Commits
bccb882a99 ... 47dabfb470

Author SHA1 Message Date
M3DZIK 47dabfb470
Scroll bottom after clicking the arrow 2024-03-18 16:55:05 +01:00
M3DZIK 85c764e28f
Add type declarations to `svelte-icons` module 2024-03-18 16:52:14 +01:00
M3DZIK 0960c96c20
Change bottom margin of arrow from `4` to `16` 2024-03-18 16:47:05 +01:00
M3DZIK 034ab4ef7c
Update gradient colors 2024-03-18 16:45:02 +01:00
3 changed files with 23 additions and 7 deletions
Show Stats Expand all files Collapse all files

2
src/app.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en" class="light">
<head>
<meta charset="utf-8" />

19
src/routes/+page.svelte
View File

@ -11,6 +11,13 @@
import photo from '../assets/photo.jpg';
import SignalIcon from '../lib/Signal.svelte';
import Arrow from '$lib/Arrow.svelte';
function scrollBottom() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth',
});
}
</script>
<svelte:head>
@ -60,9 +67,9 @@
</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">
@ -86,13 +93,13 @@
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-success-500) / 0.5) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(var(--color-error-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-success-500) / 0.5) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(var(--color-error-500) / 0.5) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(var(--color-warning-500) / 0.5) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(var(--color-surface-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>

9
src/svelte-icons.d.ts vendored Normal file
View File

@ -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;
}