diff --git a/README.md b/README.md index 601f06d..89cd6e0 100644 --- a/README.md +++ b/README.md @@ -1,42 +1,183 @@ -# Portfolio +# Portfolio: Flask-based Portfolio πŸš€ -This software allows people and institutions to setup an easy landingpage\homepage to show their portfolio. It's configured via an yaml file. +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. + +## Features ✨ + +- **Dynamic Navigation**: Easily create dropdown menus and nested links. +- **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. + +## Access 🌐 -## Access ### Locale -[http://127.0.0.1:5000](http://127.0.0.1:5000) +Access the application locally at [http://127.0.0.1:5000](http://127.0.0.1:5000). -## Configure -To configure this app create an config.yaml you can use config.sample.yaml as an example +## Getting Started 🏁 +### Prerequisites πŸ“‹ + +- Docker and Docker Compose installed on your system. +- Basic knowledge of Python and YAML for configuration. + +### Installation πŸ› οΈ + +1. **Clone the repository:** + ```bash + git clone + cd + ``` + +2. **Update the configuration:** + Create a `config.yaml` file. You can use `config.sample.yaml` as an example (see below for details on the configuration). + +3. **Build and run the Docker container:** + ```bash + docker-compose up --build + ``` + +4. **Access your portfolio:** Open your browser and navigate to `http://localhost:5000`. + +## 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. + +### YAML Configuration Example πŸ“„ + +```yaml +accounts: + name: Online Accounts + description: Discover my online presence. + icon: + class: fa-solid fa-users + children: + - name: Channels + description: Platforms where I share content. + icon: + class: fas fa-newspaper + children: + - name: Microblogs + description: Stay updated with my microblog posts. + icon: + class: fa-solid fa-pen-nib + children: + - name: Mastodon + description: Follow my updates on Mastodon. + icon: + class: fa-brands fa-mastodon + url: https://microblog.veen.world/@kevinveenbirkenbach + identifier: "@kevinveenbirkenbach@microblog.veen.world" + cards: + - icon: + source: https://cloud.veen.world/s/logo_agile_coach_512x512/download + title: Agile Coach + text: I lead agile transformations and improve team dynamics through Scrum and Agile Coaching. + url: https://www.agile-coach.world + link_text: www.agile-coach.world +company: + titel: Kevin Veen-Birkenbach + subtitel: Consulting and Coaching Solutions + logo: + source: https://cloud.veen.world/s/logo_face_512x512/download + favicon: + source: https://cloud.veen.world/s/veen_world_favicon/download + address: + street: Afrikanische Straße 43 + postal_code: DE-13351 + city: Berlin + country: Germany + imprint_url: https://s.veen.world/imprint +``` + +### Understanding the `children` Key πŸ” + +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. Example: + +```yaml +children: + - name: Parent Item + description: Parent description. + icon: + class: fa-solid fa-folder + children: + - name: Child Item + description: Child description. + icon: + class: fa-solid fa-file + url: https://example.com +``` + +This structure will render a parent menu or section containing nested child elements. Each child can be further customized with icons, descriptions, and links. + +### Understanding the `link` Key πŸ”— + +The `link` key allows you to reference another part of the YAML configuration by its path. This is useful for avoiding duplication and maintaining consistency. Example: + +```yaml +children: + - name: Blog + description: My blog posts. + icon: + class: fa-solid fa-blog + url: https://example.com/blog + - name: Featured Blog + link: accounts.children[0].children[0] # References the "Blog" item above +``` + +In this example, `Featured Blog` will inherit all properties from the `Blog` item, including its name, description, and URL. This feature ensures that any updates to the `Blog` item are automatically reflected in all linked entries. + +## Administrate Docker 🐳 -## Administrate Docker ### Stop and Destroy -```bash -docker stop landingpage -docker rm landingpage +```bash +docker stop portfolio +docker rm portfolio ``` ### Build ```bash -docker build -t application-landingpage . +docker build -t application-portfolio . ``` ### Run #### Run Development Environment ```bash -docker run -d -p 5000:5000 --name landingpage -v $(pwd)/app/:/app -e FLASK_APP=app.py -e FLASK_ENV=development application-landingpage +docker run -d -p 5000:5000 --name portfolio -v $(pwd)/app/:/app -e FLASK_APP=app.py -e FLASK_ENV=development application-portfolio ``` #### Run Production Environment ```bash -docker run -d -p 5000:5000 --name landingpage application-landingpage +docker run -d -p 5000:5000 --name portfolio application-portfolio ``` ### Debug ```bash -docker logs -f landingpage +docker logs -f portfolio ``` -## Author -This software was created from [Kevin Veen-Birkenbach](https://www.veen.world/). + +## Development Mode πŸ§‘β€πŸ’» + +To run the app in development mode with hot-reloading: + +```bash +FLASK_ENV=development docker-compose up +``` + +## Deployment 🚒 + +For production deployment, ensure to: + +- Use a reverse proxy like NGINX or Apache. +- Secure your site with SSL/TLS. +- Use a production-ready database if required. + +## Author ✍️ + +This software was created by [Kevin Veen-Birkenbach](https://www.veen.world/). + +## License πŸ“œ + +This project is licensed under the GNU Affero General Public License Version 3. See the [LICENSE](./LICENSE) file for details. \ No newline at end of file