Skip to content

Commit 9a49d42

Browse files
BluSpringBluSpring
committed
Add light theme, rework navbar and fully revamp projects page
1 parent c80bcf9 commit 9a49d42

33 files changed

+2846
-2181
lines changed

‎app.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,20 @@
55
</div>
66
</template>
77

8+
<style lang="css">
9+
.dark-mode body {
10+
background: rgb(32, 32, 32);
11+
}
12+
13+
body {
14+
background: rgb(236, 236, 236);
15+
}
16+
</style>
17+
818
<script setup lang="ts">
919
const route = useRoute();
1020
1121
useHead({
1222
titleTemplate: '%s - BluSpring'
1323
});
14-
</script>
24+
</script>

‎assets/css/index.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ body {
2525
overflow-y: hidden;
2626
overflow-x: hidden;
2727

28-
background: rgb(32, 32, 32);
29-
30-
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
28+
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
3129
}
3230

3331
main {

‎components/Navbar.vue‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,28 @@
11
<template>
22
<div class="navbar fixed top-0 left-0 navbar w-full z-50">
3-
<div class="container flex flex-wrap justify-between items-center mx-auto">
4-
<div class="flex flex-wrap items-center w-full right-0 left-0 mx-auto text-blue-50 text-2xl sm:text-3xl md:text-4xl" id="navbar-buttons">
5-
<NuxtLink @click="onClick" class="navbar-button flex-1 navbar-link w-2/3 sm:w-1/3 justify-between items-center text-center align-center content-center px-1 sm:px-2 py-1" to="/"><div>Home</div></NuxtLink>
6-
<NuxtLink @click="onClick" class="navbar-button flex-1 navbar-link w-2/3 sm:w-1/3 justify-between items-center text-center align-center content-center px-1 sm:px-2 py-1" to="/projects"><div>Projects</div></NuxtLink>
7-
<NuxtLink @click="onClick" class="navbar-button flex-1 navbar-link w-2/3 sm:w-1/3 justify-between items-center text-center align-center content-center px-1 sm:px-2 py-1" to="/commissions"><div>Commissions</div></NuxtLink>
8-
<NuxtLink @click="onClick" class="navbar-button flex-1 navbar-link w-2/3 sm:w-1/3 justify-between items-center text-center align-center content-center px-1 sm:px-2 py-1" to="/specs"><div>PC Specs</div></NuxtLink>
3+
<div class="mx-auto flex">
4+
<div class="flex mx-2 left-0 text-blue-50 text-2xl sm:text-3xl md:text-4xl" id="navbar-buttons">
5+
<NuxtLink @click="onClick" to="/" title="Home" class="navbar-button mx-2">
6+
<img src="/img/profile_64x.png" title="Home" class="rounded-full border-[1px] h-12 my-1 border-white hover:border-blue-300">
7+
</NuxtLink>
8+
9+
<NuxtLink @click="onClick" class="navbar-button px-1 sm:px-2 py-2 mx-2" to="/" title="Home">
10+
<span>Home</span>
11+
</NuxtLink>
12+
13+
<NuxtLink @click="onClick" class="navbar-button px-1 sm:px-2 py-2 mx-2" to="/projects" title="Projects">
14+
<span>Projects</span>
15+
</NuxtLink>
16+
17+
<!--<NuxtLink @click="onClick" class="navbar-button flex-1 navbar-link w-2/3 sm:w-1/3 justify-between text-center align-center content-center px-1 sm:px-2 py-1" to="/commissions"><div>Commissions</div></NuxtLink>-->
18+
<NuxtLink @click="onClick" class="navbar-button px-1 sm:px-2 py-2 mx-2" to="/specs" title="PC Specs">
19+
<span>PC Specs</span>
20+
</NuxtLink>
21+
</div>
22+
<div class="flex mx-4 right-0 text-blue-50 text-2xl sm:text-3xl md:text-4xl fixed">
23+
<a @click="$colorMode.preference == 'system' ? $colorMode.preference = 'light' : $colorMode.preference == 'light' ? $colorMode.preference = 'dark' : $colorMode.preference = 'system'" :title="`${$colorMode.preference == 'system' ? 'System' : $colorMode.preference == 'light' ? 'Light Mode' : 'Dark Mode'}`" class="py-2 cursor-pointer hover:text-yellow-500">
24+
<i :class="`fas fa-${$colorMode.preference == 'system' ? 'eclipse' : $colorMode.preference == 'light' ? 'sun' : 'moon'}`"></i>
25+
</a>
926
</div>
1027
</div>
1128
</div>
@@ -21,22 +38,34 @@
2138
}
2239
2340
.navbar-button:hover {
24-
color: #68bedb;
41+
color: #95e4ff;
2542
}
2643
2744
.selected {
45+
color: #31ccff;
46+
}
47+
48+
.dark-mode .selected {
2849
color: #7ddfff;
2950
}
3051
52+
.selected img {
53+
border-color: #7ddfff;
54+
}
55+
3156
.selected:hover {
32-
color: #68bedb;
57+
color: #95e4ff;
58+
}
59+
60+
.selected:hover img {
61+
border-color: #68bedb;
3362
}
3463
</style>
3564

3665
<script lang="ts">
3766
export default {
3867
mounted() {
39-
const buttons = document.getElementById('navbar-buttons');
68+
const buttons = document.getElementById('navbar-buttons')!!;
4069
4170
const children = buttons.children;
4271
@@ -54,17 +83,17 @@ export default {
5483
onClick: function (ev: MouseEvent) {
5584
const target = ev.target as HTMLLinkElement;
5685
57-
const children = document.getElementById('navbar-buttons').children;
86+
const children = document.getElementById('navbar-buttons')!!.children;
5887
5988
for (let i = 0; i < children.length; i++) {
60-
const child = children.item(i);
89+
const child = children.item(i)!!;
6190
6291
if (child.classList.contains('selected')) {
6392
child.classList.remove('selected');
6493
}
6594
66-
if (child.children.item(0).classList.contains('selected')) {
67-
child.children.item(0).classList.remove('selected');
95+
if (child.children.item(0)!!.classList.contains('selected')) {
96+
child.children.item(0)!!.classList.remove('selected');
6897
}
6998
}
7099

‎components/ProjectCard.vue‎

Lines changed: 23 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,33 @@
11
<template>
2-
<NuxtLink :to="link" class="project-info flex text-center h-full w-32 md:w-48 lg:w-80 hover:brightness-110">
3-
<div class="w-full h-full rounded-bl-md rounded-tl-md bg-blue-400">
4-
<div class="h-full">
5-
<div class="image w-full h-1/3 rounded-tl-md" :style="'--image: url(/img/projects/works/' + image + ')'"> </div>
6-
<div class="info pt-2 pb-2 md:pt-4 md:pb-4 h-2/3 overflow-y-auto overflow-x-hidden">
7-
<h2 class="title text-2xl lg:text-3xl text-gray-200">{{ title }}</h2>
8-
9-
<div class="description w-11/12 max-h-20 sm:max-h-48 md:max-h-96 mx-auto rounded-md text-sm md:text-base lg:text-xl overflow-auto p-2">{{ description }}</div>
10-
</div>
2+
<div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-2xl flex my-4">
3+
<img :src="`/img/projects/works/${image}`" class="h-full my-auto rounded-l-2xl object-cover w-1/3">
4+
5+
<div class="w-full">
6+
<h3 :class="`text-5xl project-title px-6 pt-6 pb-3 text-${color}`">
7+
{{ name }}
8+
</h3>
9+
<div class="text-left text-xl px-3 py-2 project-description overflow-y-auto bg-black bg-opacity-25 dark:bg-opacity-40 text-white w-11/12 mx-auto h-1/2 rounded-md select-text">
10+
<slot></slot>
1111
</div>
1212
</div>
13-
</NuxtLink>
13+
</div>
1414
</template>
1515

16-
<script lang="ts">
17-
export default {
18-
props: [ 'title', 'image', 'description', 'link' ]
19-
}
20-
</script>
21-
2216
<style scoped>
23-
.image:hover {
24-
background-size: 125%;
17+
.project-title {
18+
font-family: 'Rajdhani Medium', 'Segoe UI', sans-serif;
2519
}
2620
27-
.project-info:hover .image {
28-
background-size: 125%;
21+
.project-description {
22+
font-family: 'Rajdhani Medium', 'Segoe UI', sans-serif;
2923
}
24+
</style>
3025

31-
.info .title {
32-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
33-
}
34-
35-
.info {
36-
font-family: 'Rajdhani', 'Segoe UI Light', sans-serif;
37-
}
38-
39-
.info .description {
40-
background-color: rgba(0, 0, 0, 0.2);
41-
42-
color: rgb(222, 241, 236);
43-
}
44-
45-
.image {
46-
background-size: cover;
47-
background-position: center;
48-
background-repeat: no-repeat;
49-
background-image: var(--image);
50-
background-color: rgba(0, 0, 0, 0.4);
51-
transition: all .2s ease-in-out;
52-
}
53-
</style>
26+
<script lang="ts">
27+
export default {
28+
props: [
29+
'color', 'image',
30+
'name',
31+
]
32+
}
33+
</script>

‎components/ProjectInfoCard.vue‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎components/ProjectTeam.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="my-4 project-team" :style="cssVars">
3+
<div class="mx-auto flex text-center">
4+
<div class="my-32 mx-auto bg-gray-400 bg-opacity-45 dark:bg-opacity-45 dark:bg-black backdrop-blur-sm container py-4 rounded-2xl">
5+
<img :src="`/img/projects/teams/${image}`" class="mx-auto py-8 h-72">
6+
<a :href="url" :class="`text-5xl team-title text-${color} hover:text-${hoverColor}`">
7+
{{ name }}
8+
</a>
9+
<p class="text-2xl py-4 text-gray-100 dark:text-white select-text">
10+
{{ description }}
11+
</p>
12+
13+
<div class="project-cards mt-8 w-4/5 mx-auto">
14+
<slot></slot>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
</template>
20+
21+
<script lang="ts">
22+
export default {
23+
props: [
24+
'url', 'background', 'image', 'color', 'hoverColor',
25+
'name', 'description', 'duration'
26+
],
27+
computed: {
28+
cssVars() {
29+
return {
30+
'--background-image': `url('/img/projects/backgrounds/${this.background}')`
31+
};
32+
}
33+
}
34+
}
35+
</script>
36+
37+
<style>
38+
.team-title {
39+
font-family: 'Rajdhani Semibold', 'Segoe UI', sans-serif;
40+
}
41+
42+
.project-team {
43+
background-image: var(--background-image);
44+
background-repeat: no-repeat;
45+
background-size: cover;
46+
background-attachment: fixed;
47+
}
48+
49+
.project-cards a {
50+
color: rgb(116, 176, 255);
51+
}
52+
53+
.project-cards a:hover {
54+
color: rgb(179, 237, 255);
55+
}
56+
</style>

‎components/SpecCard.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ export default {
1616
<style scoped>
1717
.spec-card {
1818
border: 1px solid black;
19-
background: rgb(167, 94, 94);
19+
background: rgb(212, 100, 100);
20+
}
21+
22+
.dark-mode .spec-card {
23+
border: 1px solid black;
24+
background: rgb(170, 66, 66);
2025
}
2126
</style>

‎components/SpecsCard.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,15 @@ export default {
1919
background-color: rgba(0, 0, 0, 0.2);
2020
}
2121
22+
.dark-mode .description {
23+
background-color: rgba(0, 0, 0, 0.2);
24+
}
25+
2226
.specs-card {
27+
background: rgba(0, 0, 0, 0.3);
28+
}
29+
30+
.dark-mode .specs-card {
2331
background: rgba(0, 0, 0, 0.4);
2432
}
2533
</style>

‎nuxt.config.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,35 @@ export default defineNuxtConfig({
44
'~/assets/css/index.css',
55
'~/assets/css/all.min.css'
66
],
7+
78
js: [
89
'~/assets/js/main.js'
910
],
11+
1012
head: {
1113
title: 'BluSpring Website',
1214
meta: [
1315
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
1416
]
1517
},
18+
1619
modules: [
17-
'@nuxtjs/tailwindcss'
20+
'@nuxtjs/tailwindcss',
21+
'@nuxtjs/color-mode'
1822
],
19-
ssr: false
20-
})
23+
24+
ssr: false,
25+
compatibilityDate: '2024-09-17',
26+
27+
colorMode: {
28+
preference: 'system', // default value of $colorMode.preference
29+
fallback: 'dark', // fallback value if not system preference found
30+
hid: 'nuxt-color-mode-script',
31+
globalName: '__NUXT_COLOR_MODE__',
32+
componentName: 'ColorScheme',
33+
classPrefix: '',
34+
classSuffix: '-mode',
35+
storage: 'localStorage', // or 'sessionStorage' or 'cookie'
36+
storageKey: 'nuxt-color-mode'
37+
}
38+
});

0 commit comments

Comments
 (0)