Syndria98/aranroig.com
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

hat

Browse Source
This commit is contained in:
BinarySandia04
2026-06-08 20:48:23 +02:00
parent b224c2ba65
commit 89277dc1fb
22 changed files with 155 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/app/pages/art/[slug].vue
View File

@@ -1,6 +1,5 @@
<script setup>
import MinimalHeader from '~/components/parts/MinimalHeader.vue';
import PageHeader from '~/components/parts/PageHeader.vue';
import TableHeader from '~/components/parts/TableHeader.vue';
const slug = useRoute().params.slug;
const { locale } = useI18n();
@@ -12,7 +11,9 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
<template>
<!-- Render the blog post as Prose & Vue components -->
<MinimalHeader></MinimalHeader>
<div class="no-sprite">
<TableHeader></TableHeader>
</div>
<div class="extended-container">
<ContentRenderer v-if="post" :value="post" class="art" />
</div>
@@ -39,4 +40,10 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
max-width: 100%;
}
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
display: none;
}
</style>

12
frontend/app/pages/art/index.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, computed } from 'vue';
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import MinimalHeader from '~/components/parts/MinimalHeader.vue';
import TableHeader from '~/components/parts/TableHeader.vue';
const { locale, t } = useI18n();
const localePath = useLocalePath();
@@ -53,7 +53,9 @@ const displayedArt = computed(() => {
</script>
<template>
<MinimalHeader></MinimalHeader>
<div class="no-sprite">
<TableHeader></TableHeader>
</div>
<FixedLayout>
<Container>
<h2 class="section-title">ART GALLERY</h2>
@@ -235,3 +237,9 @@ const displayedArt = computed(() => {
}
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
display: none;
}
</style>

12
frontend/app/pages/blog/[slug].vue
View File

@@ -1,6 +1,6 @@
<script setup>
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import PageHeader from '~/components/parts/PageHeader.vue';
import TableHeader from '~/components/parts/TableHeader.vue';
const slug = useRoute().params.slug;
const { locale } = useI18n();
@@ -12,7 +12,9 @@ const { data: post } = await useAsyncData(`blog-${slug}`, () =>
<template>
<!-- Render the blog post as Prose & Vue components -->
<PageHeader></PageHeader>
<div class="no-sprite">
<TableHeader></TableHeader>
</div>
<FixedLayout>
<Container>
<ContentRenderer v-if="post" :value="post" class="blog" />
@@ -36,4 +38,10 @@ const { data: post } = await useAsyncData(`blog-${slug}`, () =>
max-height: 400px;
}
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
display: none;
}
</style>

13
frontend/app/pages/blog/index.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import MinimalHeader from '~/components/parts/MinimalHeader.vue';
import { useAsyncData } from '#app';
import TableHeader from '~/components/parts/TableHeader.vue';
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import { ref, computed } from 'vue';
const { locale } = useI18n();
@@ -26,7 +25,9 @@ const displayedPosts = computed(() => {
</script>
<template>
<MinimalHeader></MinimalHeader>
<div class="no-sprite">
<TableHeader></TableHeader>
</div>
<FixedLayout>
<Container>
<section class="blog-section">
@@ -165,3 +166,9 @@ const displayedPosts = computed(() => {
}
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
display: none;
}
</style>

10
frontend/app/pages/contact/index.vue
View File

@@ -13,7 +13,9 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>
</script>
<template>
<TableHeader></TableHeader>
<div class="no-sprite">
<TableHeader></TableHeader>
</div>
<FixedLayout>
<Container>
@@ -36,4 +38,10 @@ p {
display: flex;
width: 100%;
}
</style>
<style lang="scss">
.no-sprite .undertable-wrapper {
display: none;
}
</style>

111
frontend/app/pages/index.vue
View File

@@ -29,6 +29,19 @@ const { data: contactMarkdown } = await useAsyncData(`fixed-contact`, async () =
const localePath = useLocalePath();
function resolveProjectLink(project) {
if (project.link) return project.link;
const slugToProjectMap = {
'dragonroll': 'https://dragonroll.aranroig.com',
};
return slugToProjectMap[project.slug] || null;
}
function navigateToProject(project) {
const link = resolveProjectLink(project);
if (link) window.open(link, '_blank', 'noopener,noreferrer');
}
const artPosts = useState<any[]>('art-posts', () => null as any);
if (!artPosts.value?.length) {
const currentLocale = locale.value;
@@ -125,33 +138,37 @@ const sectionTargets = {
<section class="projects-section" id="scroll-projects" v-if="projects && projects.length > 0">
<Container>
<h2 class="section-title">{{ t('pages.projects_heading') }}</h2>
<!--
<div class="projects-grid">
<div
v-for="project in projects"
v-for="project in projects"
:key="project.slug"
class="project-card"
class="project-card-wrapper"
>
<span class="project-card-corner tl"></span>
<span class="project-card-corner tr"></span>
<span class="project-card-corner bl"></span>
<span class="project-card-corner br"></span>
<a
:href="project.link"
target="_blank"
rel="noopener noreferrer"
class="project-title"
>{{ project.title }}</a>
<p class="project-description">{{ project.description }}</p>
<div class="project-tech">
<span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
<div
class="project-card"
@click="navigateToProject(project)"
>
<div class="project-layout">
<img
v-if="project.preview"
:src="project.preview"
:alt="`Preview of ${project.title}`"
class="project-preview"
/>
<div class="project-info">
<p class="project-title">{{ project.title }}</p>
<p class="project-description">{{ project.description }}</p>
<div class="project-tech">
<span v-for="tech in project.tech" :key="tech" class="tech-tag">{{ tech }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
-->
(Under construction...)
</Container>
</section>
@@ -388,11 +405,6 @@ const sectionTargets = {
padding: 12px 16px;
transition: all 0.1s steps(2, end);
&:hover {
border-color: var(--color-link);
box-shadow: 4px -4px 0px 0px var(--color-link);
}
&::before {
content: "[ PROJECT ]";
position: absolute;
@@ -404,6 +416,28 @@ const sectionTargets = {
color: var(--color-link);
letter-spacing: 2px;
}
.project-layout {
display: flex;
gap: 16px;
}
.project-preview {
width: 140px;
min-width: 140px;
height: 85px;
object-fit: cover;
border: 1px solid var(--color-border-color);
image-rendering: auto;
transition: border-color 0.1s steps(2, end);
}
.project-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
}
.project-card-corner {
@@ -420,18 +454,29 @@ const sectionTargets = {
.project-title {
font-family: 'Hurmit', monospace;
color: var(--color-link);
color: inherit;
text-decoration: none;
font-size: 1.05rem;
text-shadow: 0 0 4px var(--color-link);
display: block;
text-shadow: inherit;
&:hover {
color: var(--color-link);
text-shadow: 0 0 12px var(--color-link), 0 0 4px var(--color-link);
}
}
.project-card {
cursor: pointer;
}
.project-card-wrapper:hover .project-card {
border-color: var(--color-link);
box-shadow: 4px -4px 0px 0px var(--color-link);
}
.project-info {
cursor: pointer;
}
.project-description {
font-family: 'Hurmit', monospace;
color: var(--color-text);
@@ -762,6 +807,16 @@ const sectionTargets = {
.project-card {
padding: 8px 12px;
}
.project-layout {
flex-direction: column !important;
}
.project-preview {
width: 100% !important;
min-width: auto !important;
height: 160px !important;
}
.project-title {
font-size: 0.95rem;