pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): add project scope

Browse Source
This commit is contained in:
Stevan
2025-11-27 22:49:43 +01:00
parent da516c6e55
commit 8dcc3c660d
14 changed files with 166 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/projects/top-screen/scope-badge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

18
app/components/Projects/TopScreen/Previews.vue
View File

@@ -1,7 +1,12 @@
<script setup lang="ts">
import SCOPE_BADGE_IMAGE from "~/assets/images/projects/top-screen/scope-badge.png";
const store = useProjectsStore();
const projectPreviews = useImages(...store.projects.map((x) => x.preview));
const [scopeBadgeImage, ...projectPreviews] = useImages(
SCOPE_BADGE_IMAGE,
...store.projects.map((x) => x.preview),
);
const getBounds = () => ({
startIndex: Math.max(store.currentProject - 1, 0),
@@ -72,6 +77,7 @@ useRender((ctx) => {
const x = baseX + 256 * offsetFromCenter + store.offsetX * (256 / 69);
const y = (192 - previewImage.height) / 2 + 10;
// game
ctx.save();
ctx.translate(x, y);
@@ -89,6 +95,7 @@ useRender((ctx) => {
ctx.drawImage(previewImage, 0, 0);
ctx.restore();
// technologies
const project = store.projects[i]!;
if (project.technologies && project.technologies.length > 0) {
const badgeY = previewImage.height - BADGE_HEIGHT - BADGE_MARGIN;
@@ -96,6 +103,15 @@ useRender((ctx) => {
drawTechBadges(ctx, project.technologies, badgeX, badgeY);
}
// scope
ctx.translate(previewImage.width - scopeBadgeImage!.width + 3, -2);
ctx.drawImage(scopeBadgeImage!, 0, 0);
ctx.font = "7px NDS7";
ctx.fillStyle = "#000000";
ctx.textBaseline = "top";
fillTextCentered(ctx, project.scope.toUpperCase(), 0, -5, 40);
ctx.restore();
}
});

169
app/stores/contact.ts
View File

@@ -30,55 +30,53 @@ export const useContactStore = defineStore("contact", {
animateIntro() {
this.isIntro = true;
const start = 2;
const timeline = gsap.timeline({
onComplete: () => {
this.isIntro = false;
},
});
gsap.fromTo(
this.intro,
{
stage1Opacity: 0,
titleY: SCREEN_HEIGHT,
},
{
stage1Opacity: 1,
titleY: SCREEN_HEIGHT - 23,
duration: 0.1,
delay: start,
ease: "none",
},
);
gsap.fromTo(
this.intro,
{
stage2Opacity: 0,
},
{
stage2Opacity: 1,
duration: 0.1,
delay: start + 0.15,
ease: "none",
},
);
gsap.fromTo(
this.intro,
{
stage3Opacity: 0,
topBarY: -20,
bottomBarY: SCREEN_HEIGHT - 4,
},
{
stage3Opacity: 1,
topBarY: 0,
bottomBarY: SCREEN_HEIGHT - 24,
duration: 0.1,
delay: start + 0.15 + 0.15,
ease: "none",
onComplete: () => {
this.isIntro = false;
timeline
.fromTo(
this.intro,
{
stage1Opacity: 0,
titleY: SCREEN_HEIGHT,
},
},
);
{
stage1Opacity: 1,
titleY: SCREEN_HEIGHT - 23,
duration: 0.1,
ease: "none",
},
2,
)
.fromTo(
this.intro,
{ stage2Opacity: 0 },
{
stage2Opacity: 1,
duration: 0.1,
ease: "none",
},
2.15,
)
.fromTo(
this.intro,
{
stage3Opacity: 0,
topBarY: -20,
bottomBarY: SCREEN_HEIGHT - 4,
},
{
stage3Opacity: 1,
topBarY: 0,
bottomBarY: SCREEN_HEIGHT - 24,
duration: 0.1,
ease: "none",
},
2.3,
);
},
pushNotification(content: string) {
@@ -94,49 +92,46 @@ export const useContactStore = defineStore("contact", {
animateOutro() {
this.isOutro = true;
gsap.fromTo(
this.outro,
{
stage1Opacity: 1,
const timeline = gsap.timeline({
onComplete: () => {
setTimeout(() => {
this.isOutro = false;
navigateTo("/");
}, 2000);
},
{
stage1Opacity: 0,
duration: 0.2,
ease: "none",
},
);
});
gsap.fromTo(
this.outro,
{
stage2Opacity: 1,
},
{
stage2Opacity: 0,
duration: 0.25,
delay: 0.25,
ease: "none",
},
);
gsap.fromTo(
this.outro,
{
stage3Opacity: 1,
},
{
stage3Opacity: 0,
duration: 0.3,
delay: 0.5,
ease: "none",
onComplete: () => {
setTimeout(() => {
this.isOutro = false;
navigateTo("/");
}, 2000);
timeline
.fromTo(
this.outro,
{ stage1Opacity: 1 },
{
stage1Opacity: 0,
duration: 0.2,
ease: "none",
},
},
);
0,
)
.fromTo(
this.outro,
{ stage2Opacity: 1 },
{
stage2Opacity: 0,
duration: 0.25,
ease: "none",
},
0.25,
)
.fromTo(
this.outro,
{ stage3Opacity: 1 },
{
stage3Opacity: 0,
duration: 0.3,
ease: "none",
},
0.5,
);
},
},
});

114
app/stores/home.ts
View File

@@ -24,74 +24,72 @@ export const useHomeStore = defineStore("home", {
this.isIntro = true;
const start = 0.5;
const duration = 0.5;
const delay = 0.35;
const timeline = gsap.timeline({
onComplete: () => {
this.isIntro = false;
if (!appStore.booted) appStore.booted = true;
},
});
gsap.fromTo(
this.intro,
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration,
delay: start,
ease: "none",
onComplete: () => {
this.isIntro = false;
if (!appStore.booted) appStore.booted = true;
timeline
.fromTo(
this.intro,
{ stage1Opacity: 0 },
{
stage1Opacity: 1,
duration: 0.5,
ease: "none",
},
},
);
gsap.fromTo(
this.intro,
{ statusBarY: -20 },
{
statusBarY: 0,
duration: duration - delay,
delay: start + delay,
ease: "none",
},
);
0.5,
)
.fromTo(
this.intro,
{ statusBarY: -20 },
{
statusBarY: 0,
duration: 0.15,
ease: "none",
},
0.85,
);
},
animateOutro(to: "contact" | "projects" | "settings") {
this.isOutro = true;
this.outro.animateTop = to !== "settings";
const duration = 0.4;
const delay = 0.08;
gsap.fromTo(
this.outro,
{
buttonOffsetY: 0,
stage1Opacity: 1,
const timeline = gsap.timeline({
onComplete: () => {
this.isOutro = true;
navigateTo(`/${to}`);
},
{
buttonOffsetY: -200,
stage1Opacity: 0,
duration,
delay,
ease: "none",
onComplete: () => {
this.isOutro = true;
navigateTo(`/${to}`);
});
timeline
.fromTo(
this.outro,
{ stage2Opacity: 1 },
{
stage2Opacity: 0,
duration: 0.16,
ease: "none",
},
},
);
gsap.fromTo(
this.outro,
{
stage2Opacity: 1,
},
{
stage2Opacity: 0,
ease: "none",
duration: duration / 2 - delay,
},
);
0,
)
.fromTo(
this.outro,
{
buttonOffsetY: 0,
stage1Opacity: 1,
},
{
buttonOffsetY: -200,
stage1Opacity: 0,
duration: 0.4,
ease: "none",
},
0.08,
);
},
},
});

2
app/stores/projects.ts
View File

@@ -66,6 +66,7 @@ export const useProjectsStore = defineStore("projects", {
preview: string;
url: string | null;
technologies: string[];
scope: "hobby" | "work";
body: MarkdownBody;
}[],
currentProject: 0,
@@ -92,6 +93,7 @@ export const useProjectsStore = defineStore("projects", {
preview: `/images/projects/${id}/preview.webp`,
url: project.url,
technologies: project.technologies,
scope: project.scope,
body: simplifyMarkdownAST(project.body),
});
}