Optimized README.md

This commit is contained in:
Kevin Veen-Birkenbach 2025-07-12 18:24:49 +02:00
parent ab67fc0b29
commit 6a57fa1e00
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E

153
README.md
View File

@ -1,88 +1,98 @@
# PortWebUI 🖥️ # PortWebUI 🖥️
[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-blue?logo=github)](https://github.com/sponsors/kevinveenbirkenbach) [![Patreon](https://img.shields.io/badge/Support-Patreon-orange?logo=patreon)](https://www.patreon.com/c/kevinveenbirkenbach) [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20Coffee-Funding-yellow?logo=buymeacoffee)](https://buymeacoffee.com/kevinveenbirkenbach) [![PayPal](https://img.shields.io/badge/Donate-PayPal-blue?logo=paypal)](https://s.veen.world/paypaldonate) [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-blue?logo=github)](https://github.com/sponsors/kevinveenbirkenbach)
[![Patreon](https://img.shields.io/badge/Support-Patreon-orange?logo=patreon)](https://www.patreon.com/c/kevinveenbirkenbach)
[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20me%20a%20Coffee-Funding-yellow?logo=buymeacoffee)](https://buymeacoffee.com/kevinveenbirkenbach)
[![PayPal](https://img.shields.io/badge/Donate-PayPal-blue?logo=paypal)](https://s.veen.world/paypaldonate)
This software allows individuals and institutions to set up an easy portfolio/landingpage/homepage to showcase their projects and online presence. It is highly customizable via a YAML configuration file. A lightweight, Docker-powered portfolio/landing-page generator—fully customizable via YAML! Showcase your projects, skills, and online presence in minutes.
🚀 Combine it with JavaScript to build sleek, web-based desktop interfaces! 💻 Check out CyMaIS.Cloud as an example ☁️✨ > 🚀 You can also pair PortWebUI with JavaScript for sleek, web-based desktop-style interfaces.
> 💻 Example in action: [CyMaIS.Cloud](https://cymais.cloud/) (demo)
> 🌐 Another live example: [veen.world](https://www.veen.world/) (Kevins personal site)
## Features ✨ ---
- **Dynamic Navigation:** Easily create dropdown menus and nested links. ## ✨ Key Features
- **Customizable Cards:** Showcase your skills, projects, or services.
- **Cache Management:** Optimize your assets with automatic caching.
- **Responsive Design:** Beautiful on any device with Bootstrap.
- **Easy Configuration:** Update content using a YAML file.
- **Command Line Interface:** Manage Docker containers with the `portfolio` CLI.
## Access 🌐 - **Dynamic Navigation**
Create dropdowns & nested menus with ease.
- **Customizable Cards**
Highlight skills, projects, or services—with icons, titles, and links.
- **Smart Cache Management**
Auto-cache assets for lightning-fast loading.
- **Responsive Design**
Built on Bootstrap; looks great on desktop, tablet & mobile.
- **YAML-Driven**
All content & structure defined in a simple `config.yaml`.
- **CLI Control**
Manage Docker containers via the `portfolio` command.
### Local Access ---
Access the application locally at [http://127.0.0.1:5000](http://127.0.0.1:5000).
## Getting Started 🏁 ## 🌐 Quick Access
### Prerequisites 📋 - **Local Preview:**
[http://127.0.0.1:5000](http://127.0.0.1:5000)
- Docker and Docker Compose installed on your system. ---
- Basic knowledge of Python and YAML for configuration.
### Installation 🛠️ ## 🏁 Getting Started
#### Installation via git clone ### 🔧 Prerequisites
1. **Clone the repository:** - Docker & Docker Compose
- Basic Python & YAML knowledge
### 🛠️ Installation via Git
1. **Clone & enter repo**
```bash ```bash
git clone <repository_url> git clone <repository_url>
cd <repository_directory> cd <repository_directory>
``` ````
2. **Update the configuration:** 2. **Configure**
Create a `config.yaml` file. You can use `config.sample.yaml` as an example (see below for details on the configuration). Copy `config.sample.yaml``config.yaml` & customize.
3. **Build & run**
3. **Build and run the Docker container:**
```bash ```bash
docker-compose up --build docker-compose up --build
``` ```
4. **Browse**
Open [http://localhost:5000](http://localhost:5000)
4. **Access your portfolio:** ### 📦 Installation via Kevins Package Manager
Open your browser and navigate to [http://localhost:5000](http://localhost:5000).
### Installation via Kevin's Package Manager
You can install the `portfolio` CLI using [Kevin's package manager](https://github.com/kevinveenbirkenbach/package-manager). Simply run:
```bash ```bash
pkgmgr install portfolio pkgmgr install portfolio
``` ```
This will install the CLI tool, making it available system-wide. Once installed, the `portfolio` CLI is available system-wide.
### Available Commands ---
After installation, you can access the help information for the CLI by running: ## 🖥️ CLI Commands
```bash ```bash
portfolio --help portfolio --help
``` ```
This command displays detailed instructions on how to use the following commands: * `build`Build the Docker image
* `up`Start containers (with build)
* `down`Stop & remove containers
* `run-dev`Dev mode (hot-reload)
* `run-prod`Production mode
* `logs`View container logs
* `dev`Docker-Compose dev environment
* `prod`Docker-Compose prod environment
* `cleanup`Prune stopped containers
- **build:** Build the Docker image for the portfolio application. ---
- **up:** Start the application using docker-compose (with build).
- **down:** Stop and remove the Docker container.
- **run-dev:** Run the container in development mode with hot-reloading.
- **run-prod:** Run the container in production mode.
- **logs:** Display the logs of the running container.
- **dev:** Start the application in development mode using docker-compose.
- **prod:** Start the application in production mode using docker-compose.
- **cleanup:** Remove all stopped Docker containers to clean up your Docker environment.
## YAML Configuration Guide 🔧 ## 🔧 YAML Configuration Guide
The portfolio is powered by a YAML configuration file (`config.yaml`). This file allows you to define the structure and content of your site, including cards, navigation, and company details. Define your sites structure in `config.yaml`:
### YAML Configuration Example 📄
```yaml ```yaml
accounts: accounts:
@ -96,17 +106,12 @@ accounts:
icon: icon:
class: fas fa-newspaper class: fas fa-newspaper
children: children:
- name: Microblogs - name: Mastodon
description: Stay updated with my microblog posts. description: Follow me on Mastodon.
icon: icon:
class: fa-solid fa-pen-nib class: fa-brands fa-mastodon
children: url: https://microblog.veen.world/@kevinveenbirkenbach
- name: Mastodon identifier: "@kevinveenbirkenbach@microblog.veen.world"
description: Follow my updates on Mastodon.
icon:
class: fa-brands fa-mastodon
url: https://microblog.veen.world/@kevinveenbirkenbach
identifier: "@kevinveenbirkenbach@microblog.veen.world"
cards: cards:
- icon: - icon:
source: https://cloud.veen.world/s/logo_agile_coach_512x512/download source: https://cloud.veen.world/s/logo_agile_coach_512x512/download
@ -114,9 +119,10 @@ accounts:
text: I lead agile transformations and improve team dynamics through Scrum and Agile Coaching. text: I lead agile transformations and improve team dynamics through Scrum and Agile Coaching.
url: https://www.agile-coach.world url: https://www.agile-coach.world
link_text: www.agile-coach.world link_text: www.agile-coach.world
company: company:
titel: Kevin Veen-Birkenbach title: Kevin Veen-Birkenbach
subtitel: Consulting and Coaching Solutions subtitle: Consulting & Coaching Solutions
logo: logo:
source: https://cloud.veen.world/s/logo_face_512x512/download source: https://cloud.veen.world/s/logo_face_512x512/download
favicon: favicon:
@ -129,26 +135,27 @@ company:
imprint_url: https://s.veen.world/imprint imprint_url: https://s.veen.world/imprint
``` ```
### Understanding the `children` Key 🔍 * **`children`** enables multi-level menus.
* **`link`** references other YAML paths to avoid duplication.
The `children` key allows hierarchical nesting of elements. Each child can itself have children, enabling the creation of multi-level navigation menus or grouped content. ---
### Understanding the `link` Key 🔗 ## 🚢 Production Deployment
The `link` key allows you to reference another part of the YAML configuration by its path, which helps avoid duplication and maintain consistency. * Use a reverse proxy (NGINX/Apache).
* Secure with SSL/TLS.
* Swap to a production database if needed.
## Deployment 🚢 ---
For production deployment, ensure to: ## 📜 License
- Use a reverse proxy like NGINX or Apache. Licensed under **GNU AGPLv3**. See [LICENSE](./LICENSE) for details.
- Secure your site with SSL/TLS.
- Use a production-ready database if required.
## License 📜 ---
This project is licensed under the GNU Affero General Public License Version 3. See the [LICENSE](./LICENSE) file for details. ## ✍️ Author
## Author ✍️ Created by [Kevin Veen-Birkenbach](https://www.veen.world/)
This software was created by [Kevin Veen-Birkenbach](https://www.veen.world/). Enjoy building your portfolio! 🌟