Initial commit

.github/workflows/deployment.yaml

@@ -0,0 +1,40 @@
+name: deployment
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - gh-pages
+    paths-ignore:
+      - 'dist/**'
+      - 'docs/**'
+
+jobs:
+  build:
+    env:
+      CI_COMMIT_MESSAGE: updates CI/CD Build Artifacts
+      CI_COMMIT_AUTHOR: Continuous Integration
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🌿 Check out branch
+        uses: actions/checkout@v3
+
+      - name: 💽 Install dependencies
+        run: |
+          npm ci
+
+      - name: 🚧 Build project for production
+        run: |
+          rm -r ./docs
+          npm run build-prod
+          cp -r "./dist/portfolio/browser/" "./docs"
+          cp "./docs/index.html" "./docs/404.html"
+
+      - name: 🎉 Commit & Push
+        run: |
+          git add .
+          git config --global user.name "${{ env.CI_COMMIT_AUTHOR }}"
+          git config --global user.email "username@users.noreply.github.com"
+          git commit -a -m "${{ env.CI_COMMIT_MESSAGE }}"
+          git push

LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright 2024 Stephanie Hohenberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,27 +1,35 @@
-# Caligraphy
+<h1>
+    <img style="width: 40px;" src=".github/images/favicon.ico">
+    Chinese Puzzle
+</h1>
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.4.
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?color=blue)](./LICENSE)
 
-## Development server
+### Introduction
+Chinese Puzzle is an innovative platform designed for learning the Chinese language and exploring its complex characters. 
+The core components include:
+- Radicals Overview: A comprehensive guide to the root elements of Chinese characters, known as radicals.
+- Character Visualization: Engaging visuals that illustrate how characters are formed from these root elements.
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Through the deconstruction of characters into root elements — a process known as chanzi — users can enhance their ability to recognize and memorize characters, significantly improving their learning experience. 
+Additionally, users can expand their vocabulary by browsing specific topic clusters or exploring radicals and their occurrences in various Chinese characters.
 
-## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Features (WIP)
+- Internationalization: The platform is available in 🇺🇸 English and 🇩🇪 German.
+- Vocabulary: Access a collection of the 1,000 most common Chinese words.
+- Chanzi Analysis: Interactively explore Chinese characters and their compositions.
+- Search Functionality: Search for characters to discover their chanzi and occurrences in other characters.
+- Chanzi via Machine Learning: For characters not included in the platform's vocabulary, machine learning is utilized to deconstruct them into root elements.
 
-## Build
+Explore the Chinese Puzzle and embark on your journey to mastering the Chinese language!
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
-## Running unit tests
+### Local Setup
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+The tool is deployed as a <a href='https://stephaniehhnbrg.github.io/chinese-caligraphy/' target='_blank'>Github Page</a>.
 
-## Running end-to-end tests
+But in case you would like to run the project locally, follow these steps:
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- Install dependencies: `npm install`
+- Start project: `npm run start`

angular.json

@@ -13,20 +13,19 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/caligraphy",
+            "outputPath": "docs",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
               "zone.js"
             ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
+              "src/favicon.ico",
+              "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/magenta-violet.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -79,12 +78,11 @@
             ],
             "tsConfig": "tsconfig.spec.json",
             "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
+              "src/favicon.ico",
+              "src/assets"
             ],
             "styles": [
+              "@angular/material/prebuilt-themes/magenta-violet.css",
               "src/styles.css"
             ],
             "scripts": []

docs/gh-pages.md

@@ -0,0 +1,6 @@
+## Info
+
+This folder is used for the files of the github page in the branch gh-pages
+https://stephaniehhnbrg.github.io/chinese-caligraphy/
+
+Check out the Github Action or the Github Workflow deployment.yaml for more insights.

package.json

@@ -5,19 +5,25 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build-prod": "ng build --configuration production --base-href https://stephaniehhnbrg.github.io/chinese-caligraphy/",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.4",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.4",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
+    "ngx-translate": "^0.0.1-security",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.10"