Kilokem/Personal-Website-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polishing of Uni quizes, and some styling

Browse Source
This commit is contained in:
Kilokem
2025-01-12 23:59:17 +01:00
parent e2d141eb09
commit 425e583bbe
21 changed files with 393 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
templates/posts/platformer-game-developement-in-godot.html
View File

@ -1,130 +1,8 @@
{% extends "main.html" %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/post.css') }}">
<main class="main">
<style>
.main {
margin: 50px auto;
display: flex;
flex-direction: column;
width: 90%;
max-width: 1200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
padding: 20px;
}
h1, h2, h3 {
color: #ffd700;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
margin-bottom: 20px;
}
p, li {
font-size: 1rem;
margin-bottom: 1em;
}
ul {
list-style-type: square;
padding-left: 1.5em;
}
a {
color: #00ffcc;
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: #ff5733;
}
img {
max-width: 40%;
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;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 20px;
}
.step img {
max-width: 40%;
margin: 0;
}
.step-content {
flex: 1;
}
.step pre {
background: rgba(30, 30, 30, 1);
color: #cfcfcf;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
padding: 15px;
border: 1px solid #444;
border-radius: 10px;
overflow-x: auto;
}
.button {
display: inline-block;
padding: 10px 20px;
margin-top: 10px;
background: linear-gradient(to right, #ff5733, #ffcc33);
color: #000;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
text-shadow: none;
transition: background 0.3s;
}
.button:hover {
background: linear-gradient(to right, #ffcc33, #ff5733);
}
@media (max-width: 768px) {
img {
float: none;
max-width: 100%;
margin: 0 auto 20px auto;
display: block;
}
.step {
flex-direction: column;
text-align: center;
}
.button {
margin: 10px auto;
}
}
pre{
width: fit-content;
align-content: left;
text-align: left;
margin: auto;
}
</style>
<section class="intro">
<h1>Game Development from Scratch: A Comprehensive Guide</h1>
<p>
@ -138,7 +16,7 @@
<section class="features">
<h2>Why Choose Godot 4?</h2>
<div class="step">
<img src="{{ url_for('static', filename='images/posts/godot_logo.png') }}" alt="Godot Logo">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/godot_logo.png') }}" alt="Godot Logo">
<div class="step-content">
<ul>
<li><strong>Open Source:</strong> Completely free to use with no royalties.</li>
@ -154,7 +32,7 @@
<h2>Step-by-Step Game Development Process</h2>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/plan_game.png') }}" alt="Game Planning">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/game_plan.png') }}" alt="Game Planning">
<div class="step-content">
<h3>Step 1: Plan Your Game</h3>
<p>
@ -165,7 +43,7 @@
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/godot_editor.png') }}" alt="Godot Editor Screenshot">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/installation.jpg') }}" alt="Godot Editor Screenshot">
<div class="step-content">
<h3>Step 2: Install Godot 4</h3>
<p>
@ -175,7 +53,7 @@
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/first_scene.png') }}" alt="Creating Your First Scene">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/first_scene.png') }}" alt="Creating Your First Scene">
<div class="step-content">
<h3>Step 3: Create Your First Scene</h3>
<p>
@ -189,7 +67,7 @@ func _ready():
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/player_character.png') }}" alt="Player Character Design">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/player_character.png') }}" alt="Player Character Design">
<div class="step-content">
<h3>Step 4: Design the Player Character</h3>
<p>
@ -210,7 +88,7 @@ func _physics_process(delta):
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/environment_design.png') }}" alt="Game Environment">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/game_environment.png') }}" alt="Game Environment">
<div class="step-content">
<h3>Step 5: Build the Game Environment</h3>
<p>
@ -221,7 +99,7 @@ func _physics_process(delta):
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/game_mechanics.png') }}" alt="Game Mechanics">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/game_mechanics.png') }}" alt="Game Mechanics">
<div class="step-content">
<h3>Step 6: Implement Gameplay Mechanics</h3>
<p>
@ -231,7 +109,7 @@ func _physics_process(delta):
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/polish_game.png') }}" alt="Polishing the Game">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/godot_testing.png') }}" alt="Polishing the Game">
<div class="step-content">
<h3>Step 7: Test and Polish</h3>
<p>
@ -242,7 +120,7 @@ func _physics_process(delta):
</article>
<article class="step">
<img src="{{ url_for('static', filename='images/posts/export_game.png') }}" alt="Exporting the Game">
<img src="{{ url_for('static', filename='images/posts/platformer-game-developement-in-godot/export_game.png') }}" alt="Exporting the Game">
<div class="step-content">
<h3>Step 8: Export and Share</h3>
<p>