Turns in the direction of developing

*The next big step is to develop further the posts.astro page. It has to be connected to the CMS later. I want to connect the .markdown files to this page. I don't know in which way the headers of new posts with single title image should be displayed. On the middle? On the left side? Maybe once left once right? Should I add any tabs and if yes I need to strict to HOMM3 style so those tabs could be for example the 4 elements from spell book but I don't have detailed idea for implementation.*

1. The Layout: “The Quest Log”

Instead of alternating left and right (which is a very modern “startup website” trend), 90s RPGs relied on strict, organized lists. Think of the HoMM3 Save Game menu, the Quest Log, or the Tavern Rumors.

I highly recommend Horizontal Strips:

• A dark, semi-transparent row for each post.

• The thumbnail image strictly on the left (acting like an item icon or a hero portrait).

• The Title, Date, and Description on the right.

• A subtle golden border separating them.

2. The Tabs: “The Spellbook”

In HoMM3, the spellbook tabs stick out from the edges of the pages. We can use CSS to attach your 4 Element tabs to the right or left edge of your golden frame, just like physical bookmarks.

*Interesting, but in your approach is it supposed to open posts in separate page? or replace the menu with content?*

*I was thinking about keeping the posts menu on the left side with those fantastic elements bookmarks. and content of the post on the middle.*

*Another crazy idea is to make the graph like in obsidian app with nodes as a some HOMM3 assets and nodes would be connected to each other by similarity of subjects or by direct reference. Then after clicking node it redirect to actual post.*

*What do you think? Do you have other idea?*

Idea 1: The “Opened Spellbook” (Split Pane)

Left side = Post list with Element bookmarks. Right side = Markdown content.

This is an incredibly authentic 90s RPG design. Think of the classic HoMM3 Town Screen where you have the building list on one side and the details on the other.

How it works in Astro: Because Astro is a multi-page framework, you wouldn’t dynamically inject the content with JavaScript like a React app. Instead, you create a layout that always draws the left menu. When a user goes to /posts, the right side says “Select a chronicle to read.” When they click a post, the browser navigates to /posts/my-first-post. Astro redraws the exact same left menu, but fills the right side with the Markdown text. With View Transitions enabled, the left menu stays frozen in place, and only the right page fades into the new text.

• Pros: Highly thematic, great desktop UX, very easy to implement in Astro.

• Cons: Reading long Markdown articles in a constrained box can feel cramped. On mobile phones, you will have to hide the left menu entirely because there isn’t enough horizontal space.

---

Idea 2: The Obsidian Graph

Nodes are HoMM3 assets connected by subject similarity. Clicking a node opens a post.

This is a wild, top-tier idea. It turns content discovery into an actual mini-game of exploration.

How it works technically: You cannot build this with standard HTML/CSS. You would need to use a JavaScript library like D3.js or Vis.js (specifically a “Force-Directed Graph”). You would feed your Markdown frontmatter (tags, categories, related posts) into the library, and it would generate the floating, physics-based web of connections on your canvas.

• Pros: A massive “wow” factor. It visually proves your Computer Science skills immediately.

• Cons: It is complex to build and optimize. Also, as you mentioned earlier regarding digital literacy, a node graph is notoriously difficult for non-technical users to navigate if they just want to read your resume.

---

Idea 3: The “Adventure Map Lore” (My Pitch)

You already have a working 2D Canvas Game Engine with a hero walking around a map. Why separate the blog from the game?

Instead of a traditional posts.astro menu, your posts become literal objects on your game map.

• A tutorial on CSS Grid is a “Campfire” on the map.

• Your “About Me” post is a “Tavern”.

• A deep dive into Astro architecture is a “Scholar” or a “Shrine of Magic Gesture”.

When the hero walks up to the Scholar and you press action, your dark overlay pops up, the golden frame appears, and the Markdown content of that post is displayed right there in the game interface. Your “Spellbook” tab simply becomes an “Index” or “Map Legend” that lets users quickly fast-travel to different posts if they don’t want to walk.

*The graph is rejected is too much work. The first or third (your option) sounds cool. You are right, the hardest part of this blog was the canvas I could make it the central point of my blog instead of page that I can open from main menu.*

*The drawback is that I really like my main menu, it's simple but also shows the creativity. You can see it on the image. Im not sure if I have license to use this image I took it from promotions materials for Heroes of Might and Magic VI from Ubisoft.*

*If I make the canvas central point I'd move the about me tab to open when click on hero. I would just make one place for all posts. The biggest place like castle could be proper, because I want to predict this system for adding many posts. Every post in your way need separate object so I'd need every time I'll add something to position object on the map. The projects could be separate buildings because the take more time. Also there could be something like fame hall where I could put some of my already done certificates.*

*I'm still torn between those two approaches as I don't want give up my main menu as the starting point. The canvas is the massive "wow" factor.*

The “Final Fantasy” Architecture

Think about how almost every classic RPG works. You don’t start immediately on the map.

1. The Title Screen (Your Landing Page) Keep your current landing page exactly as it is. It is gorgeous, it sets the mood, and it acts as the “Cover Art” for your portfolio.

• Regarding the Ubisoft image: Since this is a personal portfolio and you aren’t selling a product, using promo art falls into a gray area. Most companies won’t bother you over it, but if you want to be 100% safe later, you can easily use an AI image generator to create a custom “Dragon and Knight” background in a similar style!

2. The Overworld (The Canvas) On your landing page, change the first icon from “Posts” to something like “Enter Realm” or “Start Adventure”. When the user clicks it, Astro does a smooth View Transition, the dragon fades away, and your Canvas Map appears. This gives the user that massive “Wow” factor because they transition from a static website into a living, breathing game engine.

3. The Interactions (Your Map Nodes) Now, your Canvas map acts as the central hub for your entire site:

• The Hero: Clicking the hero (or pressing “I” on the keyboard) pops up the About Me (Level 22) inventory panel we discussed.

• The Castle (Capital City): Clicking this opens the Spellbook/Quest Log panel, listing all your Markdown blog posts.

• Special Buildings (Mill, Fountain, etc.): These represent your specific, major coding projects.

• The Hall of Fame (Shrine/Obelisk): Clicking this opens a beautifully framed gallery of your certificates.

Why this is the ultimate approach

1. You keep your aesthetic: The dragon menu stays, and your hard work on the Canvas becomes the main feature of the site.

2. It solves the digital literacy problem: If a recruiter visits your site and doesn’t understand they are supposed to walk around a map, they can still just click the icons on your Landing Page! Your landing page menu can have links that bypass the canvas entirely (e.g., clicking “Projects” on the main menu just opens the projects panel directly).

3. It’s infinitely scalable: You only have to build the Castle once. After that, your CMS just adds new text files to it.

*Your idea is great but I don't know how to resolve the problem of main menu icons. I don't know how to set them in what order and what they will display. I would keep 5 icons like in original game. If I don't figure out, I'll keep current structure and develop the posts panel with left tab as we talked before. I need develop everything that it could be reusable later on canvas*

This is a very common design challenge: balancing a cool, immersive experience (the Map) with standard web usability (a recruiter who just wants to read your resume in 10 seconds).

Here is the perfect way to assign those 5 icons. It solves your problem by treating the Main Menu as a “Fast Travel” system.

If a user wants to explore, they click “Start Adventure” and walk around your canvas. If a recruiter is in a hurry, they just click “Hero Stats” to bypass the map entirely.

Because of the Astro architecture we are using, both paths will open the exact same reusable UI panels.

The 5 Icon Mapping Strategy

Here is exactly what those 5 icons on your landing.astro page should represent:

1. The Campaign (Enter Realm / Canvas Map):

   • What it is: The top icon.

   • What it does: Fades the landing page out and loads your full-screen 2D Canvas engine. The user now walks around to find your content.

2. The Hero (About Me / Resume):

   • What it is: The “Character Stats” icon.

   • What it does: Instantly opens the about.astro panel (the Level 22 Computer Science screen) over the landing page.

   • Canvas equivalent: Pressing “I” or clicking the Hero sprite on the map opens this exact same panel.

3. The Spellbook (Posts / Chronicles):

   • What it is: The magic book icon.

   • What it does: Instantly opens your posts.astro panel (the Quest Log / Split Pane we designed).

   • Canvas equivalent: Walking up to the “Castle” on the map opens this exact same panel.

4. The Quests (Projects):

   • What it is: A map or glowing orb icon.

   • What it does: Opens a panel listing your actual coding projects and GitHub links.

   • Canvas equivalent: Walking up to a “Mill” or “Fountain” on the map opens this exact same panel.

5. The Tavern (Contact):

   • What it is: A scroll or pigeon icon (the bottom one).

   • What it does: Opens the contact.astro panel we built earlier.

   • Canvas equivalent: Walking up to the “Tavern” on the map opens this exact same panel.

Why this guarantees 100% Reusability

If we build the “Opened Spellbook” split-pane layout for your posts right now, we will build it as a standalone Astro page/component with a dark overlay and a solo “Exit” button at the bottom right.

• If the user clicks the Spellbook icon on the Landing Menu, Astro shows the Spellbook panel over the dragon. Clicking “Exit” takes them back to the dragon.

• Later, when we connect the Canvas Map, you will write a line of JavaScript: if (hero.collidesWith(Castle)) { window.location.href = '/posts'; }. Astro will show the exact same Spellbook panel over your map. Clicking “Exit” will take them back to the map.

You don’t lose any work! Everything you build for the UI right now is completely independent of how the user gets there.