Implemented the python draft

.comments/logo_100x100.png.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<comment version="3.0">
-  <caption/>
-  <note>Kevin Veen-Birkenbach Logo</note>
-  <place/>
-  <categories/>
-</comment>

.gitignore

@@ -0,0 +1 @@
+app/static/logos/*

Dockerfile

@@ -0,0 +1,18 @@
+# Basis-Image für Python
+FROM python:slim
+
+# Arbeitsverzeichnis festlegen
+WORKDIR /app
+
+# Abhängigkeiten kopieren und installieren
+COPY app/requirements.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Anwendungscode kopieren
+COPY app/ .
+
+# Port freigeben
+EXPOSE 5000
+
+# Startbefehl
+CMD ["python", "app.py"]

README.md

@@ -1 +1,9 @@
 # homepage.veen.world
+
+docker build -t flask-app .
+
+docker run -d -p 5000:5000 --name landingpage flask-app
+
+http://127.0.0.1:5000
+
+sudo docker run -d -p 5000:5000 --name landingpage -v $(pwd)/app/:/app -e FLASK_APP=app.py -e FLASK_ENV=development flask-app

app/app.py

@@ -0,0 +1,70 @@
+import json
+import os
+from flask import Flask, render_template
+import requests
+import hashlib
+
+def cache_icon(icon_url, cache_dir="static/logos"):
+    """Lädt ein Icon herunter und speichert es lokal, wenn es nicht existiert. Fügt einen Hash hinzu."""
+    # Erstelle das Verzeichnis, falls es nicht existiert
+    os.makedirs(cache_dir, exist_ok=True)
+    
+    # Generiere einen 8-Zeichen-Hash basierend auf der URL
+    hash_object = hashlib.blake2s(icon_url.encode('utf-8'), digest_size=8)
+    hash_suffix = hash_object.hexdigest()
+    
+    # Erstelle den Dateinamen mit Hash
+    base_name = icon_url.split("/")[-2]
+    filename = f"{base_name}_{hash_suffix}.png"
+    full_path = os.path.join(cache_dir, filename)
+    
+    # Wenn die Datei existiert, überspringe den Download
+    if os.path.exists(full_path):
+        return full_path
+
+    # Lade die Datei herunter
+    response = requests.get(icon_url, stream=True)
+    if response.status_code == 200:
+        with open(full_path, "wb") as f:
+            for chunk in response.iter_content(1024):
+                f.write(chunk)
+    return full_path
+
+
+app = Flask(__name__)
+
+# Hole die Umgebungsvariable FLASK_ENV oder setze einen Standardwert
+FLASK_ENV = os.getenv("FLASK_ENV", "production")
+
+config_data = None  # Globale Variable für die Konfiguration
+
+def load_config():
+    """Lädt die Konfiguration aus der JSON-Datei."""
+    with open("config.json", "r") as config_file:
+        return json.load(config_file)
+
+@app.before_request
+def reload_config_in_dev():
+    """Lädt die Datei bei jedem Request neu im Dev-Modus."""
+    global config_data
+    if FLASK_ENV == "development" or config_data is None:
+        config_data = load_config()
+        
+    # Cachen der Icons
+    for card in config_data["cards"]:
+        card["icon"] = cache_icon(card["icon"])
+
+@app.route('/')
+def index():
+    return render_template("pages/index.html.j2", cards=config_data.get("cards", []), networks=config_data.get("networks", []), company=config_data["company"])
+
+@app.route('/imprint')
+def imprint():
+    return render_template('pages/imprint.html.j2')
+
+@app.route('/agb')
+def agb():
+    return render_template('pages/agb.html.j2')
+
+if __name__ == "__main__":
+    app.run(debug=(FLASK_ENV == "development"), host="0.0.0.0", port=5000)

app/config.json

@@ -0,0 +1,112 @@
+{
+    "cards": [
+        {
+            "icon": "https://cloud.veen.world/s/logo_agile_coach_512x512/download",
+            "title": "Agile Coach",
+            "text": "I lead agile transformations and improve team dynamics through Scrum, DevOps, and Agile Coaching. My goal is to enhance collaboration and efficiency in organizations, ensuring agile principles are effectively implemented for sustainable success.",
+            "link": "https://www.agile-coach.world",
+            "link_text": "www.agile-coach.world"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_personal_coach_512x512/download",
+            "title": "Personal Coach",
+            "text": "Offering personalized coaching for growth and development, I utilize a blend of hypnotherapy, mediation, and holistic techniques. My approach is tailored to help you achieve personal and professional milestones, fostering holistic well-being.",
+            "link": "https://www.personalcoach.berlin",
+            "link_text": "www.personalcoach.berlin"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_yachtmaster_512x512/download",
+            "title": "Yachtmaster",
+            "text": "As a Yachtmaster, I provide comprehensive sailing education, yacht delivery, and voyage planning services. Whether you're learning to sail or need an experienced skipper, my expertise ensures a safe and enjoyable experience on the water.",
+            "link": "https://www.yachtmaster.world",
+            "link_text": "www.yachtmaster.world"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_polymath_512x512/download",
+            "title": "Polymath",
+            "text": "I support the evaluation and execution of complex cross-domain projects, offering insights across land, sea, sky, and digital realms. My expertise helps clients navigate and succeed in multifaceted environments with strategic precision.",
+            "link": "https://www.crossdomain.consulting/",
+            "link_text": "www.crossdomain.consulting"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_cybermaster_512x512/download",
+            "title": "Cybermaster",
+            "text": "Specializing in open-source IT solutions for German SMBs, I focus on automation, security, and reliability. My services are designed to create robust infrastructures that streamline operations and safeguard digital assets.",
+            "link": "https://www.cybermaster.space",
+            "link_text": "www.cybermaster.space"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_prompt_master_512x512/download",
+            "title": "Prompt Engineer",
+            "text": "Leveraging AI's power, I specialize in crafting custom prompts and creative content for AI-driven applications. My services are aimed at businesses, creatives, and researchers looking to harness AI technology for innovation, efficiency, and exploring new possibilities.",
+            "link": "https://promptmaster.nexus",
+            "link_text": "www.promptmaster.nexus"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_mediator_512x512/download",
+            "title": "Mediator",
+            "text": "Specializing in resolving interpersonal and business conflicts with empathy and neutrality, I facilitate open communication to achieve lasting agreements and strengthen relationships. My mediation services are designed for individuals, teams, and organizations to foster a harmonious and productive environment.",
+            "link": "https://www.mediator.veen.world",
+            "link_text": "www.mediator.veen.world"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_hypnotherapist_512x512/download",
+            "title": "Hypnotherapist",
+            "text": "As a certified Hypnotherapist, I offer tailored sessions to address mental and emotional challenges through hypnosis. My approach helps unlock the subconscious to overcome negative beliefs and stress, empowering you to activate self-healing and embrace positive life changes.",
+            "link": "https://www.hypno.veen.world",
+            "link_text": "www.hypno.veen.world"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_skydiver_512x512/download",
+            "title": "Aerospace Consultant",
+            "text": "As an Aerospace Consultant with aviation credentials, including a Sport Pilot License for Parachutes, and a Restricted Radiotelephony and Operator's Certificate I deliver expert consulting services. Currently training for my Private Pilot License, I specialize in guiding clients through aviation regulations, safety standards, and operational efficiency.",
+            "link": null,
+            "link_text": "Website under construction"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_hunter_512x512/download",
+            "title": "Wildlife Expert",
+            "text": "As a certified hunter and wildlife coach, I offer educational programs, nature walks, survival trainings, and photo expeditions, merging ecological knowledge with nature respect. My goal is to foster sustainable conservation and enhance appreciation for the natural world through responsible practices.",
+            "link": null,
+            "link_text": "Website under construction"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_diver_512x512/download",
+            "title": "Master Diver",
+            "text": "As a certified master diver with trainings in various specialties, I offer diving instruction, underwater photography, and guided dive tours. My experience ensures safe and enriching underwater adventures, highlighting marine conservation and the wonders of aquatic ecosystems.",
+            "link": null,
+            "link_text": "Website under construction"
+        },
+        {
+            "icon": "https://cloud.veen.world/s/logo_massage_therapist_512x512/download",
+            "title": "Massage Therapist",
+            "text": "Certified in Tantra Massage, I offer unique full-body rituals to awaken senses and harmonize body and mind. My sessions, a blend of ancient Tantra and modern relaxation, focus on energy flow, personal growth, and spiritual awakening.",
+            "link": null,
+            "link_text": "Website under construction"
+        }
+
+    ],
+    "networks": [
+      {
+        "name": "GitHub",
+        "icon": "bi bi-github",
+        "link": "https://github.com/kevinveenbirkenbach"
+      },
+      {
+        "name": "Instagram",
+        "icon": "fa-brands fa-instagram",
+        "link": "https://www.instagram.com/kevinveenbirkenbach/"
+      }
+    ],
+    "company": {
+        "titel": "Kevin Veen-Birkenbach",
+        "subtitel": "Consulting and Coaching Solutions",
+        "logo": "https://cloud.veen.world/s/logo_face_512x512/download",
+        "address": {
+            "street": "Afrikanische Straße 43",
+            "postal_code": "DE-13351",
+            "city": "Berlin",
+            "country": "Germany"
+        }
+    }
+  }

app/requirements.txt

@@ -0,0 +1,2 @@
+flask
+requests

app/static/css/default.css

@@ -0,0 +1,67 @@
+a {
+    text-decoration: none;
+    color: #000000;
+  }
+  .header img {
+    float: right;
+    width: 100px;
+    height: 100px;
+  }
+
+  .header h1 {
+    position: relative;
+  }
+  .equal-height {
+    display: flex;
+    flex: 1;
+  }
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Zentriert die Inhalte horizontal */
+    text-align: center; /* Zentriert den Text */
+  }
+
+  .card-icon {
+    display: flex;
+    justify-content: center; /* Zentriert das Icon horizontal */
+  }
+  
+  .card-text,
+  .card ul {
+    text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
+  }
+
+  .card{
+    flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
+    border-width: 3px;
+    /*border-color: #000000;*/
+  }
+
+  h3.card-title{
+    font-size: 1.3em;
+  }
+
+  .card .stretched-link{
+    font-size: 0.7em;
+  }
+
+  .card-column{
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+
+  h3.footer-title{
+    font-size: 1.3em;
+  }
+
+  .footer {
+    margin-top: 12px;
+    text-align: center;
+    font-size:  0.7em;
+  }
+
+  .footer p, h3{
+    margin: 0px;
+    padding: 0px;
+  }

app/templates/base.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>{{company.titel}}</title>
+        <meta charset="utf-8" >
+        <link rel="icon" type="image/x-icon" href="favicon.ico">
+        <!-- Bootstrap CSS only -->
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+        <!-- Bootstrap JavaScript Bundle with Popper -->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
+        <!-- Bootstrap Icons -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
+        <!-- Fontawesome -->
+        <script src="https://kit.fontawesome.com/56f96da298.js" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="static/css/default.css">
+    </head>
+    <body>
+        <div class="container">
+            <header class="header">
+              <img src="{{company.logo}}" alt="logo"/>
+              <h1>{{company.titel}}</h1>
+              <h2>{{company.subtitel}}</h2>
+            </header>
+
+            {% block content %}{% endblock %}
+
+            <footer class="footer" itemscope itemtype="http://schema.org/LocalBusiness" class="small">
+                <p itemprop="name">{{ company.titel }} <br />
+                {{ company.subtitel }}</p>
+                <span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
+                <p><a href="/imprint"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
+            </footer>
+        </div>
+    </body>
+</html>

app/templates/card.html.j2

@@ -0,0 +1,13 @@
+<div class="card-column col-lg-3 col-md-6 col-12">
+    <div class="card h-100 d-flex flex-column">
+        <div class="card-body d-flex flex-column">
+            <div class="card-img-top">
+                <img src="{{ card.icon }}" alt="{{ card.title }}" style="width: 100px; height: auto;">
+            </div>
+            <hr />
+            <h3 class="card-title">{{ card.title }}</h3>
+            <p class="card-text">{{ card.text }}</p>
+            <a href="{{ card.link }}" class="mt-auto btn btn-light stretched-link" ><i class="fa-solid fa-globe"></i> {{ card.link_text }}</a>
+        </div>
+    </div>
+</div>

app/templates/index.html.backup

@@ -1,83 +1,5 @@
 <html>
-  <head>
-    <title>Kevin Veen-Birkenbach - Consulting and Coaching Solutions</title>
-    <meta charset="utf-8" >
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <!-- Bootstrap CSS only -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
-    <!-- Bootstrap JavaScript Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
-    <!-- Bootstrap Icons -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
-    <!-- Fontawesome -->
-    <script src="https://kit.fontawesome.com/56f96da298.js" crossorigin="anonymous"></script>
-    <style>
-      a {
-        text-decoration: none;
-        color: #000000;
-      }
-      .header img {
-        float: right;
-        width: 100px;
-        height: 100px;
-      }
 
-      .header h1 {
-        position: relative;
-      }
-      .equal-height {
-        display: flex;
-        flex: 1;
-      }
-      .card-body {
-        display: flex;
-        flex-direction: column;
-        align-items: center; /* Zentriert die Inhalte horizontal */
-        text-align: center; /* Zentriert den Text */
-      }
-
-      .card-icon {
-        display: flex;
-        justify-content: center; /* Zentriert das Icon horizontal */
-      }
-      
-      .card-text,
-      .card ul {
-        text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
-      }
-
-      .card{
-        flex: 1; /* Stellt sicher, dass die Karten die ganze Höhe ihrer Container ausfüllen */
-      }
-
-      h3.card-title{
-        font-size: 1.3em;
-      }
-
-      .card .stretched-link{
-        font-size: 0.7em;
-      }
-
-      .card-column{
-        padding-top: 12px;
-        padding-bottom: 12px;
-      }
-
-      h3.footer-title{
-        font-size: 1.3em;
-      }
-
-      .footer {
-        margin-top: 12px;
-        text-align: center;
-        font-size:  0.7em;
-      }
-
-      .footer p, h3{
-        margin: 0px;
-        padding: 0px;
-      }
-    </style>
   </head>
   <body>
     <div class="container">

app/templates/pages/index.html.j2

@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="row">
+    {% for card in cards %}
+        {% include "card.html.j2" %}
+    {% endfor %}
+</div>
+<div class="row">
+    <div class="col">
+        <h3>Networks</h3>
+        <ul>
+            {% for network in networks %}
+                <li>
+                    <a href="{{ network.link }}">
+                        <i class="{{ network.icon }}"></i> {{ network.name }}
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+{% endblock %}