feat: create portfolio

astro.config.mjs

@@ -12,6 +12,7 @@ export default defineConfig({
     site: `https://${subdomain}futureblur.com`,
     prefetch: true,
     build: { format: 'preserve' },
+    trailingSlash: 'never',
     integrations: [
         tailwind(), sitemap({
             i18n: {

public/_redirects

@@ -24,3 +24,5 @@
 # Newsroom
 /news/* /en/news/:splat 301
 
+/:slug/  /:slug  301!
+

src/components/Home/Promotion.astro

@@ -22,12 +22,17 @@ const promotionImage = images[promotionImagePath];
 if (!promotionImage) {
     throw new Error(`Image not found: ${promotionImagePath}`);
 }
+
+function getUrl() {
+    return data.isRelative ? Astro.url + data.url : data.url;
+}
+
 ---
 
 <a
     class="relative flex items-center justify-center bg-black"
-    href={data.url}
-    target="_blank"
+    href={getUrl()}
+    target={data.isRelative ? "_self" : "_blank"}
 >
     <Image
         class:list={[

src/consts.ts

@@ -19,6 +19,12 @@ export const INVESTORS: Metadata = {
     COVER: '/images/investors-banner.png',
 };
 
+export const WORK: Metadata = {
+    TITLE: 'Work',
+    DESCRIPTION: 'View our work and projects at Futureblur.',
+    COVER: '/images/glyph-banner.png',
+};
+
 export const navBarLinks: NavigationLink[] = [
     {
         title: 'nav.title.store',

src/content/config.ts

@@ -21,7 +21,8 @@ const promotionCollection = defineCollection({
             .max(3, promotionDimError)
             .optional(),
         cta: z.string(),
-        url: z.string().url()
+        url: z.string(),
+        isRelative: z.boolean().optional()
     })
 })
 
@@ -62,7 +63,7 @@ const markdownCollection = defineCollection({
         }),
         coverDescription: z.string(),
     })
-})
+});
 
 export const collections = {
     promotion: promotionCollection,

src/content/promotion/de/archviz.json

@@ -1,5 +1,5 @@
 {
-    "order": 0,
+    "order": 1,
     "title": "ArchViz",
     "subtitle": "Schritt für Schritt. Sammle Ideen. Gestalte die Szene. Verwirkliche sie. Alles in Blender.",
     "image": "archviz.jpg",

src/content/promotion/de/octane.json

@@ -1,5 +1,5 @@
 {
-    "order": 1,
+    "order": 2,
     "hide": true,
     "title": "Octane",
     "subtitle": "",

src/content/promotion/de/work.json

@@ -0,0 +1,10 @@
+{
+    "order": 0,
+    "title": "Portfolio",
+    "subtitle": "Wir erstellen 3D-CGI, Werbung und Motion Graphics.",
+    "image": "car.jpg",
+    "alt": "Ein modernes, einstöckiges Haus mit großen Fenstern wird nachts beleuchtet, umgeben von dichtem Wald und Felsen.",
+    "cta": "Jetzt ansehen",
+    "url": "/work",
+    "isRelative": true
+}

src/content/promotion/en/archviz.json

@@ -1,5 +1,5 @@
 {
-    "order": 0,
+    "order": 1,
     "title": "ArchViz",
     "subtitle": "Follow step by step. Gather ideas. Build the scene. Make it real. All in Blender.",
     "image": "archviz.jpg",

src/content/promotion/en/octane.json

@@ -1,5 +1,5 @@
 {
-    "order": 1,
+    "order": 2,
     "hide": true,
     "title": "Octane",
     "subtitle": "Replicate the Octane look in Blender.",

src/content/promotion/en/work.json

@@ -0,0 +1,10 @@
+{
+    "order": 0,
+    "title": "Portfolio",
+    "subtitle": "We create 3D CGI, Ads and Motion Graphics.",
+    "image": "car.jpg",
+    "alt": "A modern, single-story house with large windows is illuminated at night, surrounded by dense forest and rocks.",
+    "cta": "See all",
+    "url": "/work",
+    "isRelative": true
+}

src/i18n/ui.ts

@@ -56,7 +56,9 @@ export const ui = {
         'soon.title': 'This page is in development. Check back later.',
         'investors.title': 'Investor Relations',
         'investors.description':
-            'Get access to our reports in the Investor Relations Center.'
+            'Get access to our reports in the Investor Relations Center.',
+        'work.title': 'Work',
+        'work.description': 'View our work and projects at Futureblur.',
     },
     de: {
         'header.locale.description':
@@ -109,6 +111,8 @@ export const ui = {
             'Diese Seite ist in Entwicklung. Schaue später noch einmal vorbei.',
         'investors.title': 'Investor Relations',
         'investors.description':
-            'Erhalte Zugang zu unseren Berichten im Investor Relations Center.'
+            'Erhalte Zugang zu unseren Berichten im Investor Relations Center.',
+        'work.title': 'Portfolio',
+        'work.description': 'Sieh dir unser Porttfolio an.',
     }
 } as const;

src/pages/[lang]/work.astro

@@ -0,0 +1,71 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { WORK } from "@consts";
+import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import { Image } from "astro:assets";
+
+export async function getStaticPaths() {
+  return [
+    { params: { lang: 'en' } },
+    { params: { lang: 'de' }}
+  ];
+}
+
+const t = useTranslations(getLangFromUrl(Astro.url));
+
+// Import all images from the work folder as static assets using Astro's recommended style
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/public/images/work/*.{jpg,jpeg,png,tiff,webp,gif}",
+  { eager: true }
+);
+
+---
+
+<Layout
+    title={t("work.title")}
+    siteName="Work"
+    description={t("work.description")}
+    cover={WORK.COVER}
+>
+    <div class="page-spacing mx-auto px-4 select-none">
+        <div class="flex flex-col sm:flex-row gap-2 sm:gap-4">
+            {(() => {
+                const imageEntries = Object.entries(images).sort(([a], [b]) => a.localeCompare(b));
+                const col1 = imageEntries.filter((_, idx) => idx % 2 === 0);
+                const col2 = imageEntries.filter((_, idx) => idx % 2 === 1);
+                return (
+                    <>
+                        <div class="flex-1 flex flex-col gap-2 sm:gap-4">
+                            {col1.map(([path, image]) => {
+                                const fileName = path.split('/').pop() ?? '';
+                                return (
+                                    <Image
+                                        src={image.default}
+                                        alt={fileName}
+                                        class="w-full h-[60vw] sm:h-auto object-cover rounded-lg select-none"
+                                        loading="lazy"
+                                        draggable={false}
+                                    />
+                                );
+                            })}
+                        </div>
+                        <div class="flex-1 flex flex-col gap-2 sm:gap-4 mt-0">
+                            {col2.map(([path, image]) => {
+                                const fileName = path.split('/').pop() ?? '';
+                                return (
+                                    <Image
+                                        src={image.default}
+                                        alt={fileName}
+                                        class="w-full h-[60vw] sm:h-auto object-cover rounded-lg select-none"
+                                        loading="lazy"
+                                        draggable={false}
+                                    />
+                                );
+                            })}
+                        </div>
+                    </>
+                );
+            })()}
+        </div>
+    </div>
+</Layout>