finish contact and footer

package.json

@@ -14,10 +14,11 @@
     "@angular/compiler": "^17.0.7",
     "@angular/core": "^17.0.7",
     "@angular/forms": "^17.0.7",
+    "@angular/material": "^17.0.7",
     "@angular/platform-browser": "^17.0.7",
     "@angular/platform-browser-dynamic": "^17.0.7",
     "@angular/router": "^17.0.7",
-    "@angular/material": "^17.0.7",
+    "@emailjs/browser": "^3.12.1",
     "@studio-freight/lenis": "^1.0.33",
     "gsap": "^3.12.2",
     "js-circle-progress": "^1.0.0-beta.0",

src/app/app.component.html

@@ -1,4 +1,4 @@
-<main #outest_container>
+<main #outest_container style="position: relative;">
   <div #backgroundImg id="background-img">
 <!--    <img-->
 <!--      srcset= "../assets/avatar_600.png 600w,-->
@@ -72,8 +72,6 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
 
       <heading-card id="contact-start" [heading]="dataService.languagePack.contact" type="3" styleClass="alarm-clock-animated" style="margin-top: 5vh"></heading-card>
       <contact></contact>
-
-      <div class="spacer" style="width: 100vw; height: 50vh"></div>
     </div>
   </div>
   <footer-section></footer-section>

src/app/components/badge/badge.component.scss

@@ -52,20 +52,7 @@
   max-height: 100%;
   display: flex;
   align-items: center;
-  //margin-right: 0.3rem;
-  //max-height: 2.25rem;
-  //height: 100%;
-  //width: auto;
   font-size: 2rem;
-
-  object {
-    //height: 100%;
-    //width: auto;
-  }
-
-  //img {
-  //  height: 100%;
-  //}
 }
 
 .text {

src/app/components/chat-row/chat-row.component.html

@@ -1,11 +1,11 @@
-<div class="img-container">
+<div class="img-container" [class.hidden]="followingMessage">
   <img *ngIf="isLeft()" src="../../../assets/chat-avatar/avatar.png" height="210" width="210" alt="">
   <img *ngIf="!isLeft()" src="../../../assets/chat-avatar/anonymous.svg" alt="">
 </div>
 <!--<div class="triangle background-gradient"></div>-->
-<div class="fake-triangle"></div>
-<div class="message-box">
-  <ng-content></ng-content>
+<div class="fake-triangle" [class.hidden]="followingMessage" [class.not-received]="!sent"></div>
+<div class="message-box" [class.not-received]="!sent" [innerHTML]="text">
+<!--  <ng-content></ng-content>-->
 </div>
 
 

src/app/components/chat-row/chat-row.component.scss

@@ -2,6 +2,7 @@
   position: relative;
   display: flex;
   width: 70%;
+  margin-top: 1.2rem;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: flex-start;
@@ -49,6 +50,10 @@
       transform: translateX(-1.4rem) rotateZ(-45deg);
     }
   }
+
+  &.following-message {
+    margin-top: 0.3rem;
+  }
 }
 
 .img-container {
@@ -70,15 +75,15 @@
   background: linear-gradient(90deg, #a445b2, #fa4299);
   border-radius: 1rem;
   padding: 1.5rem;
-  font-family: 'Noto Sans', sans-serif;
-  font-size: 1.7rem;
-  line-height: 1.7rem;
   text-align: left;
+
+  &.not-received {
+    filter: brightness(0.5);
+  }
 }
 
 .triangle {
   margin-top: calc((var(--1-row-height) - var(--triangle-height))  / 2);
-  //margin-top: -0.5rem;
   width: 0;
   height: 0;
 }
@@ -91,6 +96,14 @@
   flex-shrink: 0;
   background: #a445b2;
   border-radius: 0.4rem;
+
+  &.not-received {
+    filter: brightness(0.5);
+  }
+}
+
+.hidden {
+  visibility: hidden;
 }
 
 // for real gradient on multiple elements, see: https://codepen.io/axherrm/pen/YzgYEeL

src/app/components/chat-row/chat-row.component.ts

@@ -12,7 +12,16 @@ import {NgIf} from "@angular/common";
 })
 export class ChatRowComponent {
 
+  @Input() text: string;
   @Input() side: "left" | "right" = "left";
+  /**
+   * Whether a message is not the first message on the same side of the chat.
+   */
+  @Input() @HostBinding("class.following-message") followingMessage: boolean = false;
+  /**
+   * Whether the message is sent successfully. Not sent message are styled differently.
+   */
+  @Input() sent: boolean = true;
 
   // @HostBinding("style.flex-direction") flexDirection: string = "row";
   @HostBinding("class.left") get left() { return this.isLeft() }

src/app/components/social-media-card/social-media-card.component.html

@@ -0,0 +1,11 @@
+<a [href]="input.link" target="_blank" class="container">
+  <div class="icon-container">
+    <span *ngIf="input.primeIcon" [class]="'pi icon ' + input.primeIcon"></span>
+    <div *ngIf="input.iconRef" class="icon">
+      <img [src]="input.iconRef" alt="" height="32">
+    </div>
+  </div>
+
+  <div class="username" [innerHTML]="input.username"></div>
+  <div class="category">{{ input.category }}</div>
+</a>

src/app/components/social-media-card/social-media-card.component.scss

@@ -0,0 +1,39 @@
+.container {
+  border-radius: 1.5rem;
+  padding: 3rem;
+  background: #262626;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  color: white;
+  //max-width: 20vw;
+}
+
+.icon-container {
+  background: black;
+  height: 4rem;
+  width: 4rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .icon {
+    aspect-ratio: 1;
+    color: white;
+    font-size: 1.7rem;
+    //display: flex;
+    //align-items: center;
+  }
+  margin-bottom: 3rem;
+}
+
+.username {
+  font-size: 1.6rem;
+  text-align: right;
+}
+
+.category {
+  margin-top: 1rem;
+}

src/app/components/social-media-card/social-media-card.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {SocialMediaItem} from "../../data/model";
+import {NgIf} from "@angular/common";
+
+@Component({
+  selector: 'social-media-card',
+  standalone: true,
+  imports: [
+    NgIf
+  ],
+  templateUrl: './social-media-card.component.html',
+  styleUrl: './social-media-card.component.scss'
+})
+export class SocialMediaCardComponent {
+
+  @Input({required: true}) input: SocialMediaItem;
+
+}

src/app/data/data.service.ts

@@ -1,5 +1,14 @@
 import {EventEmitter, Injectable} from '@angular/core';
-import {AboutCard, EducationItem, ExperienceItem, LanguagePack, Skill, SkillCategory} from "./model";
+import {
+  AboutCard,
+  ContactMessages,
+  EducationItem,
+  ExperienceItem,
+  LanguagePack,
+  MailSettings,
+  Skill,
+  SkillCategory, SocialMediaItem
+} from "./model";
 import {MenuItem} from "primeng/api";
 import * as educationJson from '../../data/education.json';
 import * as generalJson from '../../data/general.json';
@@ -8,6 +17,10 @@ import * as skillsJson from '../../data/skills.json';
 import * as aboutJson from '../../data/about.json';
 import * as contactJson from '../../data/contact.json';
 
+/**
+ * Service that imports all the customizable JSON data and stores them.
+ * Access user data through this service.
+ */
 @Injectable({
   providedIn: 'root'
 })
@@ -16,16 +29,24 @@ export class DataService {
   defaultLang: string = generalJson.defaultLanguage;
   loadedLanguages: string[] = generalJson.languages;
   languagesMenuItems: MenuItem[] = [];
+  mailSettings: MailSettings = contactJson["mail-settings"];
+  socialMedia: SocialMediaItem[] = contactJson["social-media"];
 
+  /**
+   * Language specific data
+   */
   lang: string;
   languagePack: LanguagePack;
   education: EducationItem[];
   experience: ExperienceItem[];
   skillCategories: SkillCategory[];
   skills: Skill[];
   about: AboutCard[];
-  contact: string[];
+  contact: ContactMessages;
 
+  /**
+   * Emitted when the user switches language
+   */
   langChange: EventEmitter<void> = new EventEmitter<void>(true);
 
   constructor() {
@@ -35,10 +56,10 @@ export class DataService {
   loadData(): void {
     console.log("Loading data for lang", this.lang);
     // @ts-ignore
-    this.education = educationJson[this.lang];
-    // @ts-ignore
     this.languagePack = new LanguagePack(generalJson[this.lang]);
     // @ts-ignore
+    this.education = educationJson[this.lang];
+    // @ts-ignore
     this.experience = experienceJson[this.lang];
     // @ts-ignore
     this.skillCategories = skillsJson[this.lang];

src/app/data/model.ts

@@ -99,3 +99,26 @@ export interface AboutCard {
   heading?: string;
   text?: string;
 }
+
+export interface MailSettings {
+  enabled: boolean;
+  publicKey: string;
+  serviceId: string;
+  templateId: string;
+  ownMessageDelay: number;
+}
+
+export interface ContactMessages {
+  conversationStart: string[];
+  successMessages: string[];
+  failedMessages: string[];
+  tooManyMessages: string[];
+}
+
+export interface SocialMediaItem {
+  category: string;
+  username: string;
+  primeIcon?: string;
+  iconRef?: string;
+  link: string;
+}

src/app/sections/about/about.component.html

@@ -10,6 +10,7 @@
       <badge iconClass="pi-prime" iconColor="#1D4ED8" link="https://primeng.org/icons">PrimeIcons</badge>
       <badge iconRef="assets/svg/gsap.svg" link="https://gsap.com/">GSAP</badge>
       <badge iconRef="assets/svg/lenis.svg" link="https://lenis.studiofreight.com/">Lenis</badge>
+      <badge iconRef="assets/svg/EmailJS.svg" link="https://www.emailjs.com">EmailJS</badge>
     </div>
     <div style="margin-top: 3rem; display: flex; justify-content: space-between; align-items: flex-end">
       <custom-button [link]="githubURL">

src/app/sections/contact/contact.component.html

@@ -1,14 +1,21 @@
-<div class="card">
+<div class="card alarm-clock-animated">
   <div class="card-content">
     <div class="chat-rows">
-      <chat-row *ngFor="let message of dataService.contact">{{ message }}</chat-row>
-      <chat-row side="right"> Das ist eine Testmessage  </chat-row>
+      <chat-row *ngFor="let message of messages; index as i; first as isFirst" [text]="message.text" [side]="message.side"
+                [followingMessage]="!isFirst && messages[i-1].side === message.side" [sent]="message.sent">
+      </chat-row>
     </div>
-    <form>
+    <form (submit)="sendMessage()" (keydown.enter)="$event.preventDefault(); sendMessage()" (keydown.shift.enter)="noop.prototype(); // noop">
+      <div class="icon-container invisible"></div>
       <div class="gradient-border">
-        <textarea id="chat-input" pInputTextarea [autoResize]="true"></textarea>
+        <textarea #chat_input rows="1" id="chat-input"  [formControl]="text"></textarea>
       </div>
-      <div class="icon-container"><i class="pi pi-send icon"></i></div>
+      <button type="submit" class="icon-container invisible" [class.invisible]="text.hasError('required')"><i class="pi pi-send icon"></i></button>
     </form>
   </div>
 </div>
+
+<div #social_media_container class="social-media-container alarm-clock-animated">
+  <social-media-card *ngFor="let item of dataService.socialMedia" [input]="item"></social-media-card>
+</div>
+<div #spacer></div>