docs: improve project overwview

Author: ioaiaaii

README.md

@@ -1 +1,37 @@
 # ioaiaaii.net
+
+So, this is an over-engineered website :).
+Wanted to gather my work from here and there and to maintain o project for experiments.
+This is a BFF, with Vue.js and Go backend, engineered using Clean Architecture and adhering to SRE principles.
+
+## System Design and API Spec
+
+![Architecture](./docs/desing/diagram.svg)
+
+## ADRs
+
+## Release Engineering
+TBD
+### Repo Operator
+TBD
+### Build
+TBD
+- distroless
+- kaniko
+- hermetic
+
+### CI
+
+TBD
+- GH Workflows caching
+- resuable
+
+### Releasing
+TBD
+### Packaging
+TBD
+## Observability
+TBD
+
+## Profiling and Capacity Planning
+TBD

docs/desing/diagram.d2

@@ -1,12 +1,34 @@
-Frontend -> API: "API Requests (/api/*)"
+vars: {
+  d2-config: {
+    center: true
+    layout-engine: elk #https://github.com/terrastruct/tala?tab=readme-ov-file#installation
+    theme-id: 300
+  }
+}
+classes: {
+  otel_collector: {
+    icon: https://avatars.githubusercontent.com/u/49998002?s=280&v=4
+    shape: image
+    label: "OTEL Collector" # No text under Grafana
+  }
+  fiber: {
+    icon: https://gofiber.io/assets/images/logo.svg
+    shape: image
+    label: "Fiber" # No text under Grafana
+  }  
+}
+
+OTEL.class: otel_collector
+Fiber.class: fiber
+
+Frontend <-> API: "API Request/Response (/api/*)"
 API: {
   label: "API"
-
-  WebServer -> UseCases: "Call Use Cases"
-  UseCases -> Repositories: "Fetch Data from Repository"
-  Repositories -> DataSource: "Load Data from Files"
-  
-  WebServer <- UseCases: "Return Processed Data"  
+  transport -> _.Fiber
+  transport -> controller
+  controller <-> usecase: "Call Use Cases"
+  usecase <-> repository: "Fetch Data from Repository"
+  repository <-> persistence: "Load Data from Files"
+  controller -> telemetry: "OTEL Instrumentation"
+  telemetry -> _.OTEL
 }
-
-API -> Frontend: "Response (JSON)"