Skip to content

Commit

Permalink
⚡️ fix broken colours in falling rain
Browse files Browse the repository at this point in the history 
try and optimize page load and [first] load performance
  • Loading branch information
@csc530
csc530 committed Sep 9, 2024
1 parent 8903ec2 commit b66ab2f
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 98 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
14 changes: 7 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css" rel="stylesheet"> -->
<!-- <link href="https://unpkg.com/@catppuccin/palette/css/catppuccin.css" rel="stylesheet"> -->
<title>my site</title>

<meta content="my awes-mazingly lovely site" property="description">
<meta content="Link preview image URL" property="og:image">
<meta content="christofercousins.ca" property="og:site_name">
<meta content="my site" property="og:title">
<title>Christofer's Portfolio</title>
<meta content="my portolio website" name="description" property="description">
<meta content="Link preview image URL" name="image" property="og:image">
<meta content="christofercousins.ca" name="og:site_name" property="og:site_name">
<meta content="my site" property="og:title" name="og:title">
<meta content="my awes-mazingly lovely site" property="og:description">
<!-- <meta property="og:url" content="Canonical link preview URL"> -->
<script src="https://kit.fontawesome.com/f6ae6b9ec4.js" crossorigin="anonymous"></script>
<link rel="preload" src="https://kit.fontawesome.com/f6ae6b9ec4.js" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/f6ae6b9ec4.js" crossorigin="anonymous" async defer></script>
</head>

<body>
Expand Down
5 changes: 4 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"devicon": "^2.16.0",
"i": "^0.3.7",
"pinia": "^2.2.2",
"sass": "^1.77.8",
"sass": "^1.78.0",
"sass-embedded": "^1.77.8",
"vue": "^3.4.38",
"vue-router": "^4.4.3"
Expand All @@ -34,9 +34,12 @@
"@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vue/tsconfig": "^0.5.1",
"browserlist": "^1.0.1",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.27.0",
"lightningcss": "^1.26.0",
"npm-run-all2": "^6.2.2",
"terser": "^5.31.6",
"vite": "^5.4.2",
"vite-plugin-checker": "^0.7.2",
"vite-plugin-vercel": "^8.0.1",
Expand Down
2 changes: 1 addition & 1 deletion src/assets/cat.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
"pink": map-get($map: $colours, $key: "pink"),
"red": map-get($map: $colours, $key: "red"),
"text": map-get($map: $colours, $key: "text"),
"background": map-get($map: $colours, $key: "base"),
// "background": map-get($map: $colours, $key: "base"), //breaks hr + it doens't work
"black": map-get($map: $colours, $key: "crust"),
"black-bis": map-get($map: $colours, $key: "mantle"),
"black-ter": map-get($map: $colours, $key: "base"),
Expand Down
2 changes: 1 addition & 1 deletion src/components/FallingRain.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
return {
min: refElement?.offsetLeft ?? 0,
max: refElement?.offsetWidth - getSize() ?? 0,
max: (refElement?.offsetWidth ?? getSize()) - getSize(),
}
})
Expand Down
99 changes: 45 additions & 54 deletions src/components/TheFoot.vue
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,51 @@
<template>
<teleport to="body" :disabled="teleport" ref="teleportRef">
<footer v-bind="$attrs"
class="footer flex is-flex-direction-column justify-content-center has-text-centered has-background-inherit">
<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/footers/ext_black_monochromatic.svg"
alt="logo" :width="width" decoding="auto" loading="lazy" />
<hr>

<p>Want to contact me?
<br>
<a :href="`mailto:${email}?subject=Hello...`">Send me an e-mail <i class="fas fa-envelope"></i></a>
</p>
<footer v-bind="$attrs"
class="footer flex is-flex-direction-column justify-content-center has-text-centered has-background-inherit">
<p>Want to contact me?
<br>
<a :href="`mailto:${email}?subject=Hello...`">Send me an e-mail <i class="fas fa-envelope"></i></a>
</p>

<section class="section">
<h2 class="subtitle is-7">Acknowledgements, Thx, Credits</h2>
<ul class="is-flex is-flex-direction-row is-gap-3 is-justify-content-space-around">
<li title="bulma" class="image is-128x128">
<a href="https://bulma.io"><img
:src="`https://bulma.io/assets/brand/Bulma%20Logo${colour && '%20'.concat(colour)}.svg`"
alt="bulma logo" loading="lazy">
</a>
</li>
<li title="vue" class="image is-128x128">
<a href="https://vuejs.org">
<img src="https://raw.githubusercontent.com/vuejs/art/master/vue-badge-outlined.svg"
srcset="https://github.com/vuejs/art/blob/master/vue-badge-outlined.svg?raw=true, https://vuejs.org/images/logo.png"
width="100" alt="vue logo" loading="lazy" />
</a>
</li>
<li title="catppuccin" class="image is-128x128">
<a href="https://catppuccin.com">
<img class="is-rounded"
src="https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true"
alt="catppuccin" loading="lazy" />
</a>
</li>
<li title="chinablue03" class="image is-128x128">
<a href="https://www.deviantart.com/chinablue03" target="_top" rel="external">
<img class="is-rounded" src="https://a.deviantart.net/avatars-big/c/h/chinablue03.jpg?8"
alt="chinablue03 - for favicon" loading="lazy">
</a>
</li>
<li title="le moi" class="image is-128x128" wi lang="fr-CA">
<a href="https://github.com/csc530/mysite">
<img class="is-rounded" srcset="/bitmoji_sipping-tea.png, /bitmoji_hi.png" alt="bitmoji"
src="/bitmoji_hi.png">
</a>
</li>
</ul>
</section>


<!-- <figure class="image is-16by9">
<img class="is-rounded" :src="mort" alt="mort" loading="eager" />
</figure> -->

</footer>
</teleport>
<section class="section">
<h2 class="subtitle is-7">Acknowledgements, Thx, Credits</h2>
<ul class="is-flex is-flex-direction-row is-gap-3 is-justify-content-space-around">
<li title="bulma" class="image is-128x128">
<a href="https://bulma.io"><img
:src="`https://bulma.io/assets/brand/Bulma%20Logo${colour && '%20'.concat(colour)}.svg`"
alt="bulma logo" loading="lazy">
</a>
</li>
<li title="vue" class="image is-128x128">
<a href="https://vuejs.org">
<img src="https://raw.githubusercontent.com/vuejs/art/master/vue-badge-outlined.svg"
srcset="https://github.com/vuejs/art/blob/master/vue-badge-outlined.svg?raw=true, https://vuejs.org/images/logo.png"
width="100" alt="vue logo" loading="lazy" />
</a>
</li>
<li title="catppuccin" class="image is-128x128">
<a href="https://catppuccin.com">
<img class="is-rounded"
src="https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true"
alt="catppuccin" loading="lazy" />
</a>
</li>
<li title="chinablue03" class="image is-128x128">
<a href="https://www.deviantart.com/chinablue03" target="_top" rel="external">
<img class="is-rounded" src="https://a.deviantart.net/avatars-big/c/h/chinablue03.jpg?8"
alt="chinablue03 - for favicon" loading="lazy">
</a>
</li>
<li title="le moi" class="image is-128x128" wi lang="fr-CA">
<a href="https://github.com/csc530/mysite">
<img class="is-rounded" srcset="/bitmoji_sipping-tea.png, /bitmoji_hi.png" alt="bitmoji"
src="/bitmoji_hi.png" loading="lazy">
</a>
</li>
</ul>
</section>
</footer>
</template>

<style scoped>
Expand Down
18 changes: 11 additions & 7 deletions src/components/TheNav.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,12 @@

<script setup lang="ts">
import { PuccinTheme } from "@/types/helper";
import { useColorMode } from "@vueuse/core";
import { computed, ref, watch, } from "vue";
import { useRouter } from "vue-router";
import { useColorMode } from "@vueuse/core";
import { computed, ref, watch, type Ref, } from "vue";
const navMenuRef = ref<HTMLDivElement | null>(null);
const hamburgerRef = ref<HTMLDivElement | null>(null);
const router = useRouter();
const themes: Ref<PuccinTheme[]> = ref(Object.keys(PuccinTheme)) as Ref<PuccinTheme[]>;
const routes = computed(() => {
const anchors = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
return Array.from(anchors).filter(anchor => anchor.id).map(anchor => ({ name: anchor.textContent, path: `#${anchor.id}` }));
Expand All @@ -56,22 +55,27 @@ import { useRouter } from "vue-router";
[PuccinTheme.mocha]: "https://github.com/catppuccin/catppuccin/blob/18acd8f58d49b551eb8cc0ff035a006d605c9905/assets/logos/exports/macchiato_squircle.png?raw=true",
getTheme(theme: any) {
if (Object.keys(PuccinTheme).includes(theme))
return this[theme as PuccinTheme];
if (theme === PuccinTheme.latte)
return this[PuccinTheme.latte];
else
return this[PuccinTheme.mocha];
return this.latte;
}
};
const { system: systemColourTheme, store: storeColourTheme } = useColorMode({
attribute: "data-theme",
modes: PuccinTheme,
});
const colourTheme = computed(() => storeColourTheme.value === 'auto' ? systemColourTheme.value : systemColourTheme.value === 'light' ? PuccinTheme.latte : PuccinTheme.mocha);
const colourTheme = computed(() => storeColourTheme.value === 'auto' ? systemColourTheme.value : themes.value[0]);
// ? if the prefferedColourScheme changes from outside the component (i.e. system/browser prefs.)
watch(colourTheme, () => {
storeColourTheme.value = colourTheme.value;
})
function toggleTheme() {
storeColourTheme.value = storeColourTheme.value === PuccinTheme.latte ? PuccinTheme.mocha : PuccinTheme.latte;
const nextTheme = (themes.value.shift());
if (nextTheme)
themes.value.push(nextTheme);
}
</script>
6 changes: 3 additions & 3 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/cat.scss'
import './assets/stylesheets/sense.css'
import './assets/cat.scss'

import { inject } from '@vercel/analytics';

const app = createApp(App)

app.use(createPinia())
// app.use(createPinia())
app.use(router)

inject({
Expand Down
2 changes: 2 additions & 0 deletions src/types/helper.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export enum PuccinTheme {
latte = "latte",
frappe = "frappe",
macchiato = "macchiato",
mocha = "mocha",
}
3 changes: 1 addition & 2 deletions src/views/JobsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<h2 class="title is-2">Work Experience</h2>

<div class="is-flex is-flex-direction-row is-justify-content-center is-flex-wrap-wrap">
<WorkCard class="is-flex-shrink-1 is-flex-grow-1" style="margin-bottom: 1rem;" v-for="(job, i) in jobs" v-bind="job"
:key="i" />
<WorkCard class="is-flex-shrink-1 is-flex-grow-1" style="margin-bottom: 1rem;" v-for="(job, i) in jobs" v-bind="job" :key="i" />
</div>
</section>
</template>
Expand Down
34 changes: 18 additions & 16 deletions src/views/TheWelcome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<section class="hero-head">
<FallingRain container="body" :items="['0', '1']" :size="[10, 18]" :interval="0.3" :duration="[2, 15]"
:colour="starColours" position="interleave" />
<FallingRain container="body" rotate :items="['0', '1']" :size="[5, 150]" :interval="[0.1, 100]"
:duration="0.045" :colour="catFlavour.colors.text.hex" position="infront" />
<FallingRain container="body" rotate :items="['0', '1']" :size="[5, 150]" :interval="[0.1, 100]" :duration="0.045" :colour="catFlavour" position="infront" />
<FallingRain container="body" :items="['0', '1']" :size="[4, 12]" :interval="0.25" :duration="[1, 10]"
:colour="starColours" />
<FallingRain container="body" :items="['0', '1']" :size="24" :interval="1" :duration="[15, 20]"
Expand All @@ -15,19 +14,19 @@
<h1 class="title" id="theone">Christofer Cousins</h1>
<!-- and my pfp is spinning in the middle with radiance-->
<!-- huge loves to starknoght https://github.com/StarKnightt/Falling-Stars -->
<img alt="" src="">
<!-- <img alt="" src=""> -->

</section>
</div>
<section class="hero-foot">
<nav class="tabs is-centered">
<ul>
<li><a class="icon is-large" href="https://github.com/csc530"><i
<li><a title="my github page" class="icon is-medium" href="https://github.com/csc530"><i
class="fab fa-github fa-2xl"></i></a></li>
<li><a class="icon is-large" href="https://www.linkedin.com/in/christofer-cousins/"><i
<li><a title="my linkedin profile" class="icon is-medium" href="https://www.linkedin.com/in/christofer-cousins/"><i
class="fab fa-linkedin fa-2xl"></i></a></li>
<li @click="nope"><a class="icon is-large"><i class="fab fa-twitter fa-2xl"></i></a></li>
<li><a class="icon is-large" :href="resume" target="_parent"><i
<li @click="nope"><a title="my twitter?" class="icon is-medium"><i class="fab fa-twitter fa-2xl"></i></a></li>
<li><a class="icon is-medium" title="my resume" :href="resume" target="_parent"><i
class="fa-solid fa-file fa-2xl"></i></a></li>
</ul>
</nav>
Expand All @@ -38,6 +37,11 @@
<style lang="css" scoped>
h1 {
text-transform: uppercase;
/* word-break: normal; */
word-wrap: normal;
justify-content: center;
text-align: center;
width: 100%;
}
</style>

Expand All @@ -48,28 +52,26 @@
import { PuccinTheme } from "@/types/helper";
import { flavors, type MonochromaticName } from "@catppuccin/palette";
import { useColorMode } from "@vueuse/core";
import { computed, ref, watch } from "vue";
import { computed, ref } from "vue";
const monochromaticColours: MonochromaticName[] = ['text', 'base', 'overlay0', 'overlay1', 'overlay2', 'mantle', 'crust', 'surface0', 'surface1', 'surface2', 'subtext0', 'subtext1']
const colour = useColorMode<PuccinTheme>()
const catFlavour = computed(() => {
if (colour.value === PuccinTheme.latte || colour.value === 'light')
return flavors.latte
return flavors.mocha
if (Object.keys(PuccinTheme).includes(colour.value))
return flavors[colour.value as PuccinTheme].colors.text.hex
return colour.value
})
const getCatppuccinColours = (coloursEntries: typeof flavors.latte.colorEntries) => coloursEntries.filter(colour => !monochromaticColours.includes(colour[0])).map(colour => colour[1].hex)
const starColours = computed(() => {
switch (colour.value) {
case PuccinTheme.latte:
return getCatppuccinColours(flavors.latte.colorEntries);
case 'light':
return 'Black';
case PuccinTheme.mocha:
return getCatppuccinColours(flavors.mocha.colorEntries);
case 'dark':
return 'White';
case 'auto':
return undefined;
default:
return undefined;
return getCatppuccinColours(flavors[colour.value].colorEntries);
}
})
Expand Down
19 changes: 13 additions & 6 deletions vite.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
import {fileURLToPath, URL} from "node:url";
import { fileURLToPath, URL } from "node:url";

import {defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import VueDevTools from "vite-plugin-vue-devtools";
import { defineConfig } from "vite";
import checker from "vite-plugin-checker";
import VueDevTools from "vite-plugin-vue-devtools";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
features: {optionsAPI: false}
features: { optionsAPI: false }
}),
VueDevTools(),
checker({typescript: true, vueTsc: true}),
checker({ typescript: true, vueTsc: true }),
],
build: {
reportCompressedSize: true,
cssMinify: 'lightningcss',
minify: "terser",
},
css: {
devSourcemap: true,
// transformer: 'lightningcss',

// lightningcss: {
// errorRecovery: true,
// targets: browserslistToTargets(browserlists('>= 0.25%'))
// }
},
resolve: {
alias: {
Expand Down

1 comment on commit b66ab2f

@vercel
Copy link

@vercel vercel bot commented on b66ab2f Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

portfolio – ./

portfolio-git-master-csc530s-projects.vercel.app
portfolio-csc530.vercel.app
portfolio-csc530s-projects.vercel.app
csc.christofercousins.ca
christofercousins.ca
www.christofercousins.ca

Please sign in to comment.