Done with the samples, and can be released as first version!

main.py

@@ -43,7 +43,35 @@ def uni():
 
 @app.route('/projects')
 def projects():
-    return render_template('projects/projects.html')
+    posts = []
+    with open("posts.json", "r") as f:
+        posts = json.load(f)
+
+    posts.reverse()
+    return render_template('projects/projects.html', post_data=posts)
+
+@app.route('/projects/search', methods=['GET', 'POST'])
+def search():
+    searched = request.args.get('searched')
+    searched = str(searched).lower()
+    posts = []
+    with open("posts.json", "r") as f:
+        posts = json.load(f)
+    posts.reverse()
+    if searched == "":
+        return render_template('projects/projects.html', post_data=posts)
+    found = []
+    for i in posts:
+        if searched in  [j.lower() for j in i['topics']] and i not in found:
+            found.append(i)
+        if searched in i['title'].lower() and i not in found:
+            found.append(i)
+        if searched in i['content'].lower() and i not in found:
+            found.append(i)
+        if searched in i['date'] and i not in found:
+            found.append(i)
+
+    return render_template('projects/projects.html', post_data=found)
 
 @app.route('/git')
 def git():

posts.json

@@ -16,11 +16,19 @@
         "topics": ["Godot", "Game developement"]
     },
     {
-        "slug": "third-post-title",
+        "slug": "platformer-game-developement-in-unity",
-        "title": "My Third Post",
+        "title": "Game developement in Unity 6",
-        "content": "This is the content for my third post. It's about a new journey I'm embarking on.",
+        "content": "The content of thi spost is generated, and its only purpose is to test the site.",
         "date": "2025-01-14",
-        "image_location": "images/post3.jpg",
+        "image_location": "images/posts/platformer-game-developement-in-unity/unity_wide_logo.png",
-        "topics": ["Adventure", "Personal", "Growth"]
+        "topics": ["Unity", "Game developement", "Guide"]
+    },
+    {
+        "slug": "platformer-game-developement-in-unreal-engine",
+        "title": "Game developement in Unreal Engine ",
+        "content": "The content of thi spost is generated, and its only purpose is to test the site.",
+        "date": "2025-01-14",
+        "image_location": "images/posts/platformer-game-developement-in-unreal-engine/unreal_engine_wide_logo.png",
+        "topics": ["Unreal Engine", "Game developement", "Guide"]
     }
 ]

static/css/main.css

@@ -151,9 +151,12 @@ body {
 }
 
 .main .card img {
-    width: 100%;
+    width: fit-content;
-    height: 150px;
+    height: fit-content;
-    object-fit: cover;
+    margin: auto;
+    max-height: 150px;
+    max-width: 100%;
+    object-fit: contain;
     border-radius: 8px;
     margin-bottom: 10px;
 }
@@ -220,4 +223,53 @@ body {
 
 .footer a:hover {
     text-decoration: underline;
-}
+}
+
+.card-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 15px;
+    height: fit-content;
+}
+
+.card-buttons .btn {
+    padding: 12px 24px;
+    font-size: 1rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    text-transform: uppercase;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.3s ease, background 0.3s ease;
+    width: 100%;
+    max-width: 160px;
+    height: 100%;
+}
+
+.card-buttons .btn {
+    background: linear-gradient(to right, #5a0fb8, #1f65d6);
+}
+
+.card-buttons .btn:hover {
+    background: linear-gradient(to right, #1f65d6, #5a0fb8);
+    transform: scale(1.05);
+}
+
+.card .topics {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    margin: 5px;
+}
+
+.card .topics .topic {
+    font-size: 0.85em;
+    color: #777;
+    background-color: #efefef;
+    border-radius: 16px;
+    padding: 4px 10px;
+    height: fit-content;
+}

static/css/post.css

@@ -40,16 +40,6 @@ a:hover {
     color: #ff5733;
 }
 
-img {
-    width: 30%;
-    min-height: 30%;
-    height: auto;
-    border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    margin-bottom: 20px;
-    float: right;
-    margin-left: 20px;
-}
 
 .step {
     margin-bottom: 2em;
@@ -58,20 +48,33 @@ img {
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     display: flex;
-    align-items: center;
+    align-items: center; /* This will center the image vertically */
     gap: 20px;
+    justify-content: flex-start; /* Ensure the content is aligned at the start horizontally */
 }
 
 .step img {
-    max-width: 40%;
+    width: 30%;
-    margin: 0;
+    min-height: 30%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    margin: auto;
+    float: none; 
 }
 
 .step-content {
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 20px;
+    overflow: hidden;
 }
 
 .step pre {
+    margin: auto;
+    text-align: left;
     background: rgba(30, 30, 30, 1);
     color: #cfcfcf;
     font-family: 'Courier New', Courier, monospace;
@@ -80,12 +83,41 @@ img {
     border: 1px solid #444;
     border-radius: 10px;
     overflow-x: auto;
+    width: fit-content;
+    max-width: 100%;
+    box-sizing: border-box;
+    height: auto;
+    position: relative; /* Needed for positioning the button */
+    word-wrap: break-word;
+    white-space: pre-wrap;
 }
 
+.copy-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background-color: #1f65d6;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.copy-btn:hover {
+    background-color: #5a0fb8;
+}
+
+.copy-btn:focus {
+    outline: none;
+}
+
+
 .button {
     display: inline-block;
     padding: 10px 20px;
-    margin-top: 10px;
     background: linear-gradient(to right, #5a0fb8, #1f65d6);
     color: white;
     border-radius: 5px;
@@ -93,6 +125,8 @@ img {
     text-decoration: none;
     text-shadow: none;
     transition: background 0.3s;
+    width: fit-content;
+    margin: 0px auto;
 }
 
 .button:hover {
@@ -100,15 +134,6 @@ img {
     color: white;
 }
 
-pre{
-    max-width: 100%;
-    width: fit-content;
-    align-content: left;
-    text-align: left;
-    margin: auto;
-    overflow-x: auto;
-}
-
 @media (max-width: 768px) {
     img {
         float: none;
@@ -120,11 +145,11 @@ pre{
     .step {
         flex-direction: column;
         text-align: center;
+        max-width: 100%;
+        width: 100%;
     }
+}
 
-    pre, code {
+article p{
-        margin: 10px auto;
+    text-align: justify;
-
-        max-width: 90%;
-    }
 }

static/script/image_viewer.js

@@ -0,0 +1,69 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const images = Array.from(document.getElementsByTagName('img'));
+
+    images.forEach(image => {
+        image.style.cursor = 'pointer';
+        image.addEventListener("click", function (){
+            const fullScreenDiv = document.createElement("div");
+            fullScreenDiv.style.position = "fixed";
+            fullScreenDiv.style.top = 0;
+            fullScreenDiv.style.left = 0;
+            fullScreenDiv.style.width = "100%";
+            fullScreenDiv.style.height = "100%";
+            fullScreenDiv.style.backgroundColor = "rgba(0, 0, 0, 0.8)";
+            fullScreenDiv.style.display = "flex";
+            fullScreenDiv.style.justifyContent = "center";
+            fullScreenDiv.style.alignItems = "center";
+            fullScreenDiv.style.zIndex = 1000;
+
+            const fullScreenImage = document.createElement("img");
+            fullScreenImage.src = image.src;
+            fullScreenImage.style.maxWidth = "90%";
+            fullScreenImage.style.maxHeight = "90%";
+            fullScreenImage.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.5)";
+            fullScreenImage.style.borderRadius = "10px";
+            fullScreenImage.style.cursor = 'pointer';
+
+            fullScreenDiv.appendChild(fullScreenImage);
+
+
+            fullScreenDiv.addEventListener("click", () => {
+                document.body.removeChild(fullScreenDiv);
+            });
+
+            document.body.appendChild(fullScreenDiv);
+        });
+    });
+});
+
+function copyToClipboard(button) {
+    // Find the <pre> block (the parent of the button)
+    const preBlock = button.closest('pre');
+    
+    // Get the text content of the <code> inside the <pre> block
+    const codeContent = preBlock.querySelector('code').innerText;
+    
+    // Create a temporary textarea to copy the content
+    const tempTextArea = document.createElement('textarea');
+    tempTextArea.value = codeContent;
+    
+    // Append the textarea to the document (it needs to be in the DOM to work)
+    document.body.appendChild(tempTextArea);
+    
+    // Select the text inside the textarea
+    tempTextArea.select();
+    
+    // Execute the copy command
+    document.execCommand('copy');
+    
+    // Remove the temporary textarea from the document
+    document.body.removeChild(tempTextArea);
+    
+    // Optionally: Provide feedback to the user (e.g., change button text)
+    button.innerText = "Copied!";
+    
+    // Reset the button text after 2 seconds
+    setTimeout(() => {
+        button.innerText = "Copy";
+    }, 2000);
+}

templates/home/home.html

@@ -1,22 +1,6 @@
 {% extends "main.html" %}
 {% block content %}
 <style>
-.card .topics {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 8px;
-    margin-top: 20px;
-}
-
-.card .topics .topic {
-    font-size: 0.85em;
-    color: #777;
-    background-color: #efefef;
-    border-radius: 16px;
-    padding: 4px 10px;
-}
-
 </style>
 <main class="main">
     <div class="intro">

templates/main.html

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Portfolio</title>
+    <meta name="author" content="Máté Gosztolya">
+    <title>Matthew's website</title>
     <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
     <link rel="shortcut icon" href="{{ url_for('static', filename='images/home/logo.jpg') }}" type="image/x-icon">
@@ -16,7 +17,7 @@
             <nav>
                 <a href="{{ url_for('home') }}">Home</a>
                 <a href="{{ url_for('git') }}">Git</a>
-                <a href="{{ url_for('projects') }}">Projects</a>
+                <a href="{{ url_for('projects') }}">Posts</a>
                 <a href="{{ url_for('uni') }}">UNI</a>
                 <a href="{{ url_for('about') }}">About</a>
 

templates/posts/my-fIrst-post.html

@@ -2,6 +2,7 @@
 
 {% block content %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
+<script src="{{ url_for('static', filename='script/image_viewer.js') }}"></script>
 <main class="main">
     <section class="intro">
         <h1></h1>
@@ -49,7 +50,7 @@
             <div class="step-content">
                 <h3></h3>
                 <p></p>
-                <pre><code class="language-gdscript"></code></pre>
+                <pre><code class="language-gdscript"><button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
             </div>
         </article>
 
@@ -58,7 +59,7 @@
             <div class="step-content">
                 <h3></h3>
                 <p></p>
-                <pre><code class="language-gdscript"></code></pre>
+                <pre><code class="language-gdscript"><button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
             </div>
         </article>
 

templates/posts/platformer-game-developement-in-godot.html

@@ -2,6 +2,7 @@
 
 {% block content %}
 <link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
+<script src="{{ url_for('static', filename='script/image_viewer.js') }}"></script>
 <main class="main">
     <section class="intro">
         <h1>Game Development from Scratch: A Comprehensive Guide</h1>
@@ -62,7 +63,7 @@
                 <pre><code class="language-gdscript">extends Node2D
 
 func _ready():
-    print("Hello, Godot!")</code></pre>
+    print("Hello, Godot!")<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
             </div>
         </article>
 
@@ -83,7 +84,7 @@ func _physics_process(delta):
         velocity.x += SPEED
     if Input.is_action_pressed("ui_left"):
         velocity.x -= SPEED
-    velocity = move_and_slide(velocity)</code></pre>
+    velocity = move_and_slide(velocity)<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
             </div>
         </article>
 

templates/posts/platformer-game-developement-in-unity.html

@@ -0,0 +1,142 @@
+{% extends "main.html" %}
+
+{% block content %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
+<script src="{{ url_for('static', filename='script/image_viewer.js') }}"></script>
+<main class="main">
+    <section class="intro">
+        <h1>Game Development in Unity: A Comprehensive Guide</h1>
+        <p>
+            Welcome to the ultimate guide for Unity game development! Whether you’re a beginner or an experienced developer, this page walks you through the entire process of creating a game from scratch using Unity. Explore every step, tool, and resource needed to bring your vision to life.
+        </p>
+        <p>
+            Unity is a powerful and versatile game engine that allows you to create both 2D and 3D games. Let’s dive in and learn how to make your dream game a reality!
+        </p>
+    </section>
+
+    <section class="features">
+        <h2>Why Choose Unity?</h2>
+        <div class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/unity_wide_logo.png') }}" alt="Unity Logo">
+            <div class="step-content">
+                <ul>
+                    <li><strong>Cross-Platform:</strong> Build games for PC, consoles, mobile, and web from a single project.</li>
+                    <li><strong>Beginner-Friendly:</strong> Intuitive interface with extensive documentation and tutorials.</li>
+                    <li><strong>Powerful Tools:</strong> Industry-standard tools for animation, physics, and lighting.</li>
+                    <li><strong>Asset Store:</strong> Access to a vast library of pre-made assets and plugins.</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <section class="steps">
+        <h2>Step-by-Step Game Development Process</h2>
+
+        <article class="step">
+            <div class="step-content">
+                <h3>Step 1: Plan Your Game</h3>
+                <p>
+                    Start with a solid concept. Define your game’s genre, core mechanics, and target audience. Tools like <a href="https://www.miro.com/" target="_blank">Miro</a> or <a href="https://www.trello.com/" target="_blank">Trello</a> can help you organize your ideas and tasks.
+                </p>
+                <blockquote>Tip: Create a Game Design Document (GDD) to outline your game’s vision and technical details.</blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/unity_installation.png') }}" alt="Unity Installation">
+            <div class="step-content">
+                <h3>Step 2: Install Unity</h3>
+                <p>
+                    Download Unity Hub from the <a href="https://unity.com/" target="_blank">official website</a>. Use Unity Hub to manage Unity versions and create new projects. Choose a version compatible with your project requirements.
+                </p>
+            </div>
+        </article>
+
+        <article class="step">
+            <div class="step-content">
+                <h3>Step 3: Create Your First Scene</h3>
+                <p>
+                    In Unity, games are built from scenes. Start by creating a new scene and organizing the hierarchy with GameObjects for your player, environment, and UI. Use prefabs to save reusable components.
+                </p>
+                <pre><code class="language-csharp">using UnityEngine;
+
+public class HelloWorld : MonoBehaviour {
+    void Start() {
+        Debug.Log("Hello, Unity!");
+    }
+}<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/player_design.gif') }}" alt="Player Character Design">
+            <div class="step-content">
+                <h3>Step 4: Design the Player Character</h3>
+                <p>
+                    Use the <code>Rigidbody</code> component for physics-based movement or <code>CharacterController</code> for customized control. Add animations using Unity’s Animator system.
+                </p>
+                <pre><code class="language-csharp">using UnityEngine;
+
+public class PlayerMovement : MonoBehaviour {
+    public float speed = 5f;
+
+    void Update() {
+        float horizontal = Input.GetAxis("Horizontal");
+        float vertical = Input.GetAxis("Vertical");
+        transform.Translate(new Vector3(horizontal, 0, vertical) * speed * Time.deltaTime);
+    }
+}<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/game_environment.jpg') }}" alt="Game Environment">
+            <div class="step-content">
+                <h3>Step 5: Build the Game Environment</h3>
+                <p>
+                    Use Unity’s Terrain tools for 3D environments or Tilemap tools for 2D levels. Add materials, lighting, and post-processing effects to enhance the visuals.
+                </p>
+                <a href="#" class="button">Learn More</a>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/gameplay_mechanics.png') }}" alt="Game Mechanics">
+            <div class="step-content">
+                <h3>Step 6: Implement Gameplay Mechanics</h3>
+                <p>
+                    Add interactivity using scripts. Use Unity’s physics engine, triggers, and events to create gameplay features like jumping, collecting items, or enemy AI.
+                </p>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/game_testing.jpg') }}" alt="Testing the Game">
+            <div class="step-content">
+                <h3>Step 7: Test and Polish</h3>
+                <p>
+                    Test your game frequently to catch bugs early. Use Unity’s Profiler to optimize performance. Add audio, particle effects, and UI elements to enhance the player experience.
+                </p>
+                <blockquote>Pro Tip: Gather feedback from players and iterate on your design.</blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unity/export.png') }}" alt="Exporting the Game">
+            <div class="step-content">
+                <h3>Step 8: Export and Share</h3>
+                <p>
+                    Export your game for your desired platform. Unity supports platforms like Windows, iOS, Android, and WebGL. Share your game on <a href="https://itch.io/" target="_blank">Itch.io</a> or <a href="https://store.steampowered.com/" target="_blank">Steam</a> to reach a wide audience.
+                </p>
+                <blockquote>Tip: Create an eye-catching trailer and game page to attract players.</blockquote>
+            </div>
+        </article>
+    </section>
+
+    <footer>
+        <p>
+            Thank you for exploring this guide! We hope you enjoy creating your games with Unity. For more tutorials and resources, check out the <a href="https://learn.unity.com/" target="_blank">official Unity Learn page</a>.
+        </p>
+    </footer>
+</main>
+{% endblock %}

templates/posts/platformer-game-developement-in-unreal-engine.html

@@ -0,0 +1,134 @@
+{% extends "main.html" %}
+
+{% block content %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
+<script src="{{ url_for('static', filename='script/image_viewer.js') }}"></script>
+<main class="main">
+    <section class="intro">
+        <h1>Game Development in Unreal Engine: A Comprehensive Guide</h1>
+        <p>
+            Welcome to the ultimate guide for Unreal Engine game development! Whether you’re a beginner or an experienced developer, this page walks you through the entire process of creating a game from scratch using Unreal Engine. Explore every step, tool, and resource needed to bring your vision to life.
+        </p>
+        <p>
+            Unreal Engine is a powerful and versatile game engine that allows you to create both 2D and 3D games with stunning visuals and performance. Let’s dive in and learn how to make your dream game a reality!
+        </p>
+    </section>
+
+    <section class="features">
+        <h2>Why Choose Unreal Engine?</h2>
+        <div class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/unreal_engine_wide_logo.png') }}" alt="Unreal Engine Logo">
+            <div class="step-content">
+                <ul>
+                    <li><strong>High-Quality Graphics:</strong> Industry-leading tools for creating realistic visuals and effects.</li>
+                    <li><strong>Blueprint System:</strong> Visual scripting makes game development accessible to non-programmers.</li>
+                    <li><strong>Cross-Platform:</strong> Build games for PC, consoles, mobile, VR, and more.</li>
+                    <li><strong>Active Community:</strong> Access a wealth of tutorials, assets, and plugins.</li>
+                </ul>
+            </div>
+        </div>
+    </section>
+
+    <section class="steps">
+        <h2>Step-by-Step Game Development Process</h2>
+
+        <article class="step">
+            <div class="step-content">
+                <h3>Step 1: Plan Your Game</h3>
+                <p>
+                    Start with a solid concept. Define your game’s genre, core mechanics, and target audience. Tools like <a href="https://www.miro.com/" target="_blank">Miro</a> or <a href="https://www.trello.com/" target="_blank">Trello</a> can help you organize your ideas and tasks.
+                </p>
+                <blockquote>Tip: Create a Game Design Document (GDD) to outline your game’s vision and technical details.</blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/install.png') }}" alt="Unreal Engine Installation">
+            <div class="step-content">
+                <h3>Step 2: Install Unreal Engine</h3>
+                <p>
+                    Download Unreal Engine from the <a href="https://www.unrealengine.com/" target="_blank">official website</a>. Use the Epic Games Launcher to install and manage different versions of the engine. Choose the latest version to access the newest features.
+                </p>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/first_level.jpg') }}" alt="Creating Your First Level">
+            <div class="step-content">
+                <h3>Step 3: Create Your First Level</h3>
+                <p>
+                    In Unreal Engine, games are built from levels. Start by creating a new level using the default template or a blank template. Organize your level using Actors, which include meshes, lights, cameras, and more.
+                </p>
+                <pre><code class="language-cpp">#include "GameFramework/Actor.h"
+#include "MyActor.generated.h"
+
+UCLASS()
+class MYPROJECT_API AMyActor : public AActor {
+    GENERATED_BODY()
+public:
+    AMyActor();
+};<button class="copy-btn" onclick="copyToClipboard(this)">Copy</button></code></pre>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/blueprints.jpg') }}" alt="Blueprints in Unreal Engine">
+            <div class="step-content">
+                <h3>Step 4: Use Blueprints for Logic</h3>
+                <p>
+                    Unreal Engine’s Blueprint system allows you to create gameplay logic visually. Drag and drop nodes to implement mechanics like movement, interactions, and animations without writing code.
+                </p>
+                <blockquote>Tip: Combine Blueprints with C++ for maximum flexibility and performance.</blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/environment.jpg') }}" alt="Environment Design">
+            <div class="step-content">
+                <h3>Step 5: Build the Game Environment</h3>
+                <p>
+                    Use Unreal Engine’s powerful tools to create stunning environments. Add landscapes, foliage, and lighting. The Material Editor allows you to design custom materials for realistic surfaces.
+                </p>
+                <a href="#" class="button">Learn More</a>
+            </div>
+        </article>
+
+        <article class="step">
+            <div class="step-content">
+                <h3>Step 6: Implement Gameplay Mechanics</h3>
+                <p>
+                    Add interactivity using Blueprints or C++. Implement mechanics like character movement, combat, or puzzles. Use Unreal’s built-in AI tools to add intelligent behaviors to NPCs.
+                </p>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/testing.png') }}" alt="Testing and Optimization">
+            <div class="step-content">
+                <h3>Step 7: Test and Optimize</h3>
+                <p>
+                    Playtest your game frequently. Use Unreal’s Profiling tools to identify performance bottlenecks and optimize assets, scripts, and rendering settings for smooth gameplay.
+                </p>
+                <blockquote>Pro Tip: Use LOD (Level of Detail) settings to improve performance on lower-end systems.</blockquote>
+            </div>
+        </article>
+
+        <article class="step">
+            <img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-unreal-engine/export.png') }}" alt="Exporting the Game">
+            <div class="step-content">
+                <h3>Step 8: Export and Share</h3>
+                <p>
+                    Export your game for your desired platform. Unreal Engine supports platforms like Windows, PlayStation, Xbox, iOS, Android, and more. Share your game on platforms like <a href="https://itch.io/" target="_blank">Itch.io</a> or <a href="https://store.steampowered.com/" target="_blank">Steam</a>.
+                </p>
+                <blockquote>Tip: Create a trailer and professional game page to attract players.</blockquote>
+            </div>
+        </article>
+    </section>
+
+    <footer>
+        <p>
+            Thank you for exploring this guide! We hope you enjoy creating your games with Unreal Engine. For more tutorials and resources, check out the <a href="https://www.unrealengine.com/en-US/learn" target="_blank">official Unreal Engine Learning portal</a>.
+        </p>
+    </footer>
+</main>
+{% endblock %}

templates/projects/projects.html

@@ -1 +1,123 @@
-{% extends "main.html" %}
+{% extends "main.html" %}
+{% block content %}
+<style>
+    .search-container {
+        position: relative;
+        border-radius: 1000px;
+        padding: 10px;
+        display: grid;
+        place-content: center;
+        z-index: 0;
+        max-width: 600px;
+        width: 90%;
+        margin: 10px auto -20px auto;
+    }
+
+    .search-search-container {
+        position: relative;
+        width: 100%;
+        border-radius: 50px;
+        background: linear-gradient(to right, #5b0fb886, #1f65d686);
+        padding: 5px;
+        display: flex;
+        align-items: center;
+    }
+
+    .search-search-container::after, .search-search-container::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        position: absolute;
+    }
+
+    .search-search-container::before {
+        top: -1px;
+        left: -1px;
+        background: linear-gradient(to right, #5b0fb886, #1f65d686);
+        z-index: -1;
+    }
+
+    .search-search-container::after {
+        bottom: -1px;
+        right: -1px;
+        background: linear-gradient(to right, #5b0fb886, #1f65d686);
+        box-shadow: rgba(79, 156, 232, 0.1) 3px 3px 5px 0px, rgba(79, 156, 232, 0.1) 5px 5px 20px 0px;
+        z-index: -2;
+    }
+
+    .input {
+        padding: 10px;
+        width: 100%;
+        background: linear-gradient(135deg, rgba(218, 232, 247, 0.1) 0%, rgba(214, 229, 247, 0.1) 100%);
+        border: none;
+        color: #9EBCD9;
+        font-size: 20px;
+        border-radius: 50px;
+        margin: 0px 5px;
+    }
+
+    .input:focus {
+        outline: none;
+        background: linear-gradient(135deg, hsla(210, 100%, 97%, 0.1) 0%, hsla(214, 229, 247, 0.1) 100%);
+    }
+
+    .search__icon {
+        width: 50px;
+        aspect-ratio: 1;
+        border-left: 2px solid white;
+        border-top: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+        border-radius: 50%;
+        padding-left: 12px;
+        margin-right: 10px;
+        cursor: pointer;
+    }
+
+    .search__icon:hover {
+        border-left: 3px solid white;
+    }
+
+    .search__icon path {
+        fill: white;
+    }
+
+    .search-button {
+        border: none;
+        background: none;
+        padding: 0;
+        cursor: pointer;
+    }
+</style>
+<div class="search-container">
+    <form method="PUT" action="{{ url_for('search')}}" class="search-search-container">
+        <input class="input" type="text" name="searched" placeholder="Search...">
+        <button type="submit" class="search-button">
+            <svg viewBox="0 0 24 24" class="search__icon">
+                <g>
+                    <path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
+                    </path>
+                </g>
+            </svg>
+        </button>
+    </form>
+</div>
+<main class="main">
+    <div class="card-container">
+        {% for post in post_data %}
+            <div class="card">
+                <img src="{{ url_for('static', filename=post['image_location']) }}" alt="Post Image">
+                <h3>{{ post['title'] }}</h3>
+                <div class="date">{{ post['date'] }}</div>
+                <p>{{ post['content'] }}</p>
+                <p class="topics">
+                    {% for topic in post['topics'] %}
+                        <span class="topic">{{ topic }}</span>
+                    {% endfor %}
+                </p>
+                <a href="{{ url_for('post', slug=post['slug']) }}">Read More</a>
+            </div>
+        {% endfor %}
+    </div>
+</main>
+{% endblock %}

templates/uni/uni.html

@@ -1,38 +1,6 @@
 {% extends "main.html" %}
 {% block content%}
 <style>
-    .card-buttons {
-        display: flex;
-        justify-content: center;
-        gap: 20px;
-        margin-top: 15px;
-        height: fit-content;
-    }
-
-    .card-buttons .btn {
-        padding: 12px 24px;
-        font-size: 1rem;
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        text-transform: uppercase;
-        color: #fff;
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-        transition: transform 0.3s ease, background 0.3s ease;
-        width: 100%;
-        max-width: 160px;
-        height: 100%;
-    }
-
-    .card-buttons .btn {
-        background: linear-gradient(to right, #5a0fb8, #1f65d6);
-    }
-
-    .card-buttons .btn:hover {
-        background: linear-gradient(to right, #1f65d6, #5a0fb8);
-        transform: scale(1.05);
-    }
-
 </style>
 <main class="main">
     <div class="card-container">