diff --git a/main.py b/main.py index cdc2bb5..c90b296 100644 --- a/main.py +++ b/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(): diff --git a/posts.json b/posts.json index b2b9ebd..0c262b9 100644 --- a/posts.json +++ b/posts.json @@ -16,11 +16,19 @@ "topics": ["Godot", "Game developement"] }, { - "slug": "third-post-title", - "title": "My Third Post", - "content": "This is the content for my third post. It's about a new journey I'm embarking on.", + "slug": "platformer-game-developement-in-unity", + "title": "Game developement in Unity 6", + "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", - "topics": ["Adventure", "Personal", "Growth"] + "image_location": "images/posts/platformer-game-developement-in-unity/unity_wide_logo.png", + "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"] } ] diff --git a/static/css/main.css b/static/css/main.css index 51aef96..0f2d777 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -151,9 +151,12 @@ body { } .main .card img { - width: 100%; - height: 150px; - object-fit: cover; + width: fit-content; + height: fit-content; + 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; -} \ No newline at end of file +} + +.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; +} diff --git a/static/css/post.css b/static/css/post.css index d72c05e..6177efd 100644 --- a/static/css/post.css +++ b/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%; - margin: 0; + width: 30%; + 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 { - margin: 10px auto; - - max-width: 90%; - } +article p{ + text-align: justify; } \ No newline at end of file diff --git a/static/images/posts/platformer-game-developement-in-unity/export.png b/static/images/posts/platformer-game-developement-in-unity/export.png new file mode 100644 index 0000000..8ae8eee Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/export.png differ diff --git a/static/images/posts/platformer-game-developement-in-unity/game_environment.jpg b/static/images/posts/platformer-game-developement-in-unity/game_environment.jpg new file mode 100644 index 0000000..7ed5d5b Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/game_environment.jpg differ diff --git a/static/images/posts/platformer-game-developement-in-unity/game_testing.jpg b/static/images/posts/platformer-game-developement-in-unity/game_testing.jpg new file mode 100644 index 0000000..c4fe578 Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/game_testing.jpg differ diff --git a/static/images/posts/platformer-game-developement-in-unity/gameplay_mechanics.png b/static/images/posts/platformer-game-developement-in-unity/gameplay_mechanics.png new file mode 100644 index 0000000..a4262bd Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/gameplay_mechanics.png differ diff --git a/static/images/posts/platformer-game-developement-in-unity/player_design.gif b/static/images/posts/platformer-game-developement-in-unity/player_design.gif new file mode 100644 index 0000000..023316a Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/player_design.gif differ diff --git a/static/images/posts/platformer-game-developement-in-unity/unity_installation.png b/static/images/posts/platformer-game-developement-in-unity/unity_installation.png new file mode 100644 index 0000000..400a008 Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/unity_installation.png differ diff --git a/static/images/posts/platformer-game-developement-in-unity/unity_wide_logo.png b/static/images/posts/platformer-game-developement-in-unity/unity_wide_logo.png new file mode 100644 index 0000000..6c2428c Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unity/unity_wide_logo.png differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/blueprints.jpg b/static/images/posts/platformer-game-developement-in-unreal-engine/blueprints.jpg new file mode 100644 index 0000000..9adfcd7 Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/blueprints.jpg differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/environment.jpg b/static/images/posts/platformer-game-developement-in-unreal-engine/environment.jpg new file mode 100644 index 0000000..dd8ffc6 Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/environment.jpg differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/export.png b/static/images/posts/platformer-game-developement-in-unreal-engine/export.png new file mode 100644 index 0000000..44bde8a Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/export.png differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/first_level.jpg b/static/images/posts/platformer-game-developement-in-unreal-engine/first_level.jpg new file mode 100644 index 0000000..d3d2cf5 Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/first_level.jpg differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/install.png b/static/images/posts/platformer-game-developement-in-unreal-engine/install.png new file mode 100644 index 0000000..bd5d712 Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/install.png differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/testing.png b/static/images/posts/platformer-game-developement-in-unreal-engine/testing.png new file mode 100644 index 0000000..92e22da Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/testing.png differ diff --git a/static/images/posts/platformer-game-developement-in-unreal-engine/unreal_engine_wide_logo.png b/static/images/posts/platformer-game-developement-in-unreal-engine/unreal_engine_wide_logo.png new file mode 100644 index 0000000..85d4fdc Binary files /dev/null and b/static/images/posts/platformer-game-developement-in-unreal-engine/unreal_engine_wide_logo.png differ diff --git a/static/script/image_viewer.js b/static/script/image_viewer.js new file mode 100644 index 0000000..a3650ec --- /dev/null +++ b/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
block (the parent of the button)
+ const preBlock = button.closest('pre');
+
+ // Get the text content of the inside the 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);
+}
\ No newline at end of file
diff --git a/templates/home/home.html b/templates/home/home.html
index 687c453..2cebcef 100644
--- a/templates/home/home.html
+++ b/templates/home/home.html
@@ -1,22 +1,6 @@
{% extends "main.html" %}
{% block content %}
diff --git a/templates/main.html b/templates/main.html
index de48839..76f1576 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -3,7 +3,8 @@
- My Portfolio
+
+ Matthew's website
@@ -16,7 +17,7 @@
@@ -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)
+ velocity = move_and_slide(velocity)
diff --git a/templates/posts/platformer-game-developement-in-unity.html b/templates/posts/platformer-game-developement-in-unity.html
new file mode 100644
index 0000000..e1bf8af
--- /dev/null
+++ b/templates/posts/platformer-game-developement-in-unity.html
@@ -0,0 +1,142 @@
+{% extends "main.html" %}
+
+{% block content %}
+
+
++ 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. +
++ 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! +
++ Download Unity Hub from the official website. Use Unity Hub to manage Unity versions and create new projects. Choose a version compatible with your project requirements. +
++ 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. +
+using UnityEngine;
+
+public class HelloWorld : MonoBehaviour {
+ void Start() {
+ Debug.Log("Hello, Unity!");
+ }
+}
+
+ Use the Rigidbody
component for physics-based movement or CharacterController
for customized control. Add animations using Unity’s Animator system.
+
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);
+ }
+}
+ + 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. +
+ Learn More ++ Add interactivity using scripts. Use Unity’s physics engine, triggers, and events to create gameplay features like jumping, collecting items, or enemy AI. +
++ 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. +
+Pro Tip: Gather feedback from players and iterate on your design.+
+ 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. +
++ 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! +
++ Download Unreal Engine from the official website. Use the Epic Games Launcher to install and manage different versions of the engine. Choose the latest version to access the newest features. +
++ 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. +
+#include "GameFramework/Actor.h"
+#include "MyActor.generated.h"
+
+UCLASS()
+class MYPROJECT_API AMyActor : public AActor {
+ GENERATED_BODY()
+public:
+ AMyActor();
+};
+ + 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. +
+Tip: Combine Blueprints with C++ for maximum flexibility and performance.+
+ 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. +
+ Learn More ++ 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. +
++ Playtest your game frequently. Use Unreal’s Profiling tools to identify performance bottlenecks and optimize assets, scripts, and rendering settings for smooth gameplay. +
+Pro Tip: Use LOD (Level of Detail) settings to improve performance on lower-end systems.+
{{ post['content'] }}
++ {% for topic in post['topics'] %} + {{ topic }} + {% endfor %} +
+ Read More +