Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add NProgress and add max min widths to uses.

Browse source
This commit is contained in:
Bradley Shellnut 2023-04-09 21:12:23 -07:00
parent 1ef2acba4b
commit 64ea1f4590
7 changed files with 49 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -61,6 +61,8 @@
},
"type": "module",
"dependencies": {
"ioredis": "^5.3.1"
"@types/nprogress": "^0.2.0",
"ioredis": "^5.3.1",
"nprogress": "^0.2.0"
}
}

14
pnpm-lock.yaml
View file

@ -1,9 +1,15 @@
lockfileVersion: '6.0'
dependencies:
'@types/nprogress':
specifier: ^0.2.0
version: 0.2.0
ioredis:
specifier: ^5.3.1
version: 5.3.1
nprogress:
specifier: ^0.2.0
version: 0.2.0
devDependencies:
'@iconify-icons/material-symbols':
@ -1218,6 +1224,10 @@ packages:
resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==}
dev: true
/@types/nprogress@0.2.0:
resolution: {integrity: sha512-1cYJrqq9GezNFPsWTZpFut/d4CjpZqA0vhqDUPFWYKF1oIyBz5qnoYMzR+0C/T96t3ebLAC1SSnwrVOm5/j74A==}
dev: false
/@types/postcss-preset-env@8.0.0(postcss@8.4.21):
resolution: {integrity: sha512-Mjw3bkhK1SkPg9HgBxUic1hSzpF5p3fSslgZrSg8fPC9mkjoz6ghhVqr9a+kVVDSvE7Lrw6GY/D+yLxmJ4IDAg==}
deprecated: This is a stub types definition. postcss-preset-env provides its own type definitions, so you do not need this installed.
@ -3182,6 +3192,10 @@ packages:
set-blocking: 2.0.0
dev: true
/nprogress@0.2.0:
resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
dev: false
/nth-check@1.0.2:
resolution: {integrity: sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==}
dependencies:

1
src/lib/util/fetchBandcampAlbums.ts
View file

@ -44,7 +44,6 @@ export async function fetchBandcampAlbums() {
);
const albums: Album[] = data?.collectionItems || [];
// console.log(`Albums ${JSON.stringify(albums)}`);
if (albums && albums?.length > 0) {
if (USE_REDIS_CACHE) {

25
src/routes/+layout.svelte
View file

@ -1,4 +1,7 @@
<script lang="ts">
import { navigating } from "$app/stores";
import "nprogress/nprogress.css";
import NProgress from "nprogress";
import 'iconify-icon';
import Header from '$lib/components/header/index.svelte';
import Footer from '$lib/components/footer/index.svelte';
@ -6,7 +9,20 @@
import Analytics from '$lib/components/analytics/index.svelte';
import SEO from '$lib/components/SEO.svelte';
NProgress.configure({
// Full list: https://github.com/rstacruz/nprogress#configuration
minimum: 0.16,
});
const dev = process.env.NODE_ENV !== 'production';
$: {
if ($navigating) {
NProgress.start();
} else {
NProgress.done();
}
}
</script>
{#if !dev}
@ -87,6 +103,15 @@
}
}
:global(#nprogress .bar) {
background: var(--lightGrey);
}
:global(#nprogress .spinner-icon) {
border-top-color: var(--lightGrey);
border-left-color: var(--lightGrey);
}
:global(p) {
word-wrap: normal;
font-size: var(--bodyTextSize);

15
src/routes/about/+page.svelte
View file

@ -267,11 +267,6 @@
>
<figure>
<Img class="portfolio-image better-blur" src={space_needle} alt="Clip art of the Seattle space needle" />
<!-- <Picture placeholder={space_needle_blurred} src="images/space_needle.png" alt="Clip art of the Seattle space needle">
{#each space_needle as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture> -->
<p class="center">Seattle Space Needle</p>
</figure>
</div>
@ -281,20 +276,10 @@
<div class="cat-pics">
<figure>
<Img class="portfolio-image better-blur" src={tortie_derp} alt="Turnip Cat" />
<!-- <Picture placeholder={tortie_derp_blurred} src="images/tortie_derp.jpg" alt="Turnip Cat">
{#each tortie_derp as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture> -->
<p class="center">Turnip</p>
</figure>
<figure>
<Img class="portfolio-image better-blur" src={orange_derp} alt="Taco Cat" />
<!-- <Picture placeholder={orange_derp_blurred} src="images/orange_derp.jpg" alt="Taco Cat">
{#each orange_derp as { src, format }}
<source data-srcset={src} type="image/{format}" />
{/each}
</Picture> -->
<p class="center">Taco 🌮</p>
</figure>
</div>

23
src/routes/portfolio/+page.svelte
View file

@ -72,14 +72,12 @@
</Portfolio>
</TabPanel>
<TabPanel>
<!-- <div class="portfolioStyles"> -->
<Portfolio name="Mark Shellnut Architect"
style="max-height: 640px;"
src={shellnutArchitectWebsite}
alt="Picture of Mark Shellnut Architect's Website">
<MarkShellnutArchitect slot="portfolio-details" />
</Portfolio>
<!-- </div> -->
<Portfolio name="Mark Shellnut Architect"
style="max-height: 640px;"
src={shellnutArchitectWebsite}
alt="Picture of Mark Shellnut Architect's Website">
<MarkShellnutArchitect slot="portfolio-details" />
</Portfolio>
</TabPanel>
</TabPanels>
</TabGroup>
@ -98,15 +96,6 @@
border-radius: 3px;
}
:global(.portfolioStyles) {
margin: 0.5rem auto;
@media (max-width: 800px) {
grid-gap: 1.2rem;
margin: 0.2rem 0;
}
}
:global(.tab-unselected) {
h2 {
border-bottom: 2px solid var(--white);

2
src/routes/uses/+page.svelte
View file

@ -41,7 +41,7 @@
</div>
<div class="uses-block-styles">
<figure>
<Img class="portfolio-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
<Img class="portfolio-image better-blur" style="max-height: 480px; max-width: 520px;" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
</figure>
<h2>Hardware & Accessories</h2>
<ul>