Feature/team

src/app/core/components/header/header.component.html

@@ -6,6 +6,7 @@
         <ul class="desktop">
             <li><a routerLink="/" routerLinkActive="active" class="item">{{ 'navigation.home' | translate }}</a></li>
             <li><a routerLink="/projects" routerLinkActive="active" class="item">{{ 'navigation.projects' | translate }}</a></li>
+            <li><a routerLink="/team" routerLinkActive="active" class="item">{{ 'common.team' | translate }}</a></li>
             @if(isDevMode()) {
                 <li><a routerLink="/news" routerLinkActive="active" class="item">{{ 'navigation.news' | translate }}</a></li>
                 <li><a routerLink="/achievments" routerLinkActive="active" class="item">{{ 'navigation.achievements' | translate }}</a></li>
@@ -20,6 +21,7 @@
         <ul class="mobile-menu" [@slideInOut]="menuState">
             <li><a routerLink="/" routerLinkActive="active" (click)="toggleMenu()" class="item">{{ 'navigation.home' | translate }}</a></li>
             <li><a routerLink="/projects" routerLinkActive="active" (click)="toggleMenu()" class="item">{{ 'navigation.projects' | translate }}</a></li>
+            <li><a routerLink="/team" routerLinkActive="active" (click)="toggleMenu()" class="item">{{ 'common.team' | translate }}</a></li>
             @if(isDevMode()) {
                 <li><a routerLink="/news" routerLinkActive="active" (click)="toggleMenu()" class="item">{{ 'navigation.news' | translate }}</a></li>
                 <li><a routerLink="/achievments" routerLinkActive="active" (click)="toggleMenu()" class="item">{{ 'navigation.achievements' | translate }}</a></li>

src/app/modules/news/components/news-article/news-article.component.ts

@@ -29,17 +29,17 @@ export class NewsArticleComponent {
 
   ngOnInit() {
     this.route.params
-      .pipe(
-        map(params => params['slug']),
-        filter((slug: string) => !!slug),
-        switchMap(slug => this.newsService.getBySlug(slug)),
-      ).subscribe(item => {
-        if (typeof item === 'object') {
-          this.newsItem = item;
-        }
-        else {
-          this.router.navigate(['']);
-        }
+    .pipe(
+      map(params => params['slug']),
+      filter((slug: string) => !!slug),
+      switchMap(slug => this.newsService.getBySlug(slug)),
+    ).subscribe(item => {
+      if (typeof item === 'object') {
+        this.newsItem = item;
+      }
+      else {
+        this.router.navigate(['']);
+      }
     })
   }
 

src/app/modules/team/pages/team/team.component.html

@@ -1 +1,40 @@
-<p>team works!</p>
+<section class="banner">
+    <section class="content">
+        <h1 class="title">Zespół</h1>
+    </section>
+</section>
+<section class="content-container">
+    <main class="main-container">
+        <div class="team-container main-card">
+            <nav class="team-navigation">
+                @for (team of teamMembers; track team.team) {
+                    <div class="team-button" (click)="scrollToTeam(team.team)" [class.active]="activeTeam() === team.team">{{ team.team }}</div>
+                }
+            </nav>
+
+           @for (team of teamMembers; track team.team) {
+            <h1 id="{{ team.team }}">{{team.team}}</h1>
+                <section class="team-section">
+                    @for (member of team.members; track member.name) {
+                        <div class="member-card">
+                            <div class="front"
+                                [class.static]="!member.description"
+                            >
+                                <img class="member-image" [src]="member.image" alt="{{ member.name }}">
+                                <h3 class="member-name">{{ member.name }}</h3>
+                                <div class="member-roles">
+                                    @for (role of member.roles; track role) {
+                                        <p class="member-role">{{ role }}</p>
+                                    }
+                                </div>
+                            </div>
+                            <div class="back">
+                                <p class="member-description">{{ member.description }}</p>
+                            </div>
+                        </div>
+                    }
+                </section>
+           }
+        </div>
+    </main>
+</section>

src/app/modules/team/pages/team/team.component.scss

@@ -0,0 +1,173 @@
+@use '@angular/material' as mat;
+@use './../../../../../assets/styles/theme' as *;
+@use './../../../../../assets/styles/global' as *;
+@use './../../../../../assets/styles/variables' as *;
+
+
+::ng-deep {
+    app-header {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+}
+
+:host {
+    flex-grow: 1;
+    display: grid;
+    grid-template-rows: 40rem 1fr;
+
+    .banner {
+        padding-top: $header-height;
+        background: url('../../../../../assets/images/night-sky.jpeg');
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: relative;
+        background-position-y: 70%;
+        z-index: 1;
+        padding: 10rem 0;
+        user-select: none;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left:0;
+            height: 100%;
+            width: 100%;
+            background-color: #0015D370;
+        }
+
+        .content {
+            max-width: 1600px;
+            margin: 0 auto;
+            color: white;
+            position: relative;
+            padding: 0 6rem;
+
+            .title {
+                font-size: 6rem;
+                font-weight: normal;
+            }
+        }
+    }
+
+    .content-container {
+        background: linear-gradient($primary-3, $primary-1);
+        box-shadow: -10px -50px 62px $primary-3, 10px -50px 62px $primary-3;
+        z-index: 2;
+        position: relative
+    }
+}
+
+.team-container {
+    display: flex;
+    flex-direction: column;
+
+    h1 {
+        text-align: center;
+    }
+
+    .team-navigation {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        width: 100%;
+        align-self: center;
+        font-size: 24px;
+        font-weight: bold;
+        gap: 20px;
+        padding: 2rem;
+        margin-bottom: 3rem;
+
+        .team-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 5px 25px;
+            transition: background-color 0.2s, color 0.2s;
+            color: $cosmo-magenta-light;
+            cursor: pointer;
+            flex-basis: 0;
+
+            @media (max-width: 768px) {
+                flex-grow: 1;
+            }
+
+            &:hover {
+                color: $primary-1;
+            }
+        }
+
+    }
+
+    .team-section {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 24px;
+        margin: 2em 0 3.5em;
+
+        .member-card {
+            display: flex;
+            flex-direction: column;
+            width: min(calc(100vw - 200px), 250px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            height: 330px;
+            padding: 15px;
+            position: relative;            
+
+            .front {
+                position: absolute;
+                inset: 15px;
+                gap: 10px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                opacity: 1;
+                transition: opacity 0.3s ease-in-out;
+
+                .member-name {
+                    font-size: 2rem;
+                    font-weight: bold;
+                    text-align: center;
+                }
+
+                .member-role {
+                    font-size: 1.8rem;
+                    text-align: center;
+                    color: $cosmo-magenta-light;
+                    font-weight: bold;
+                }
+
+                .member-image {
+                    width: 180px;
+                    height: 180px;
+                    object-fit: cover;
+                    border-radius: 50%;
+                }
+            }
+
+            .back {
+                overflow-y: auto;
+                overflow-x: hidden;
+                opacity: 0;
+                z-index: 1;
+                font-size: 1.8rem;
+                text-align: center;
+                transition: opacity 0.3s ease-in-out;
+            }
+
+            &:hover {
+                .front:not(.static) {
+                    opacity: 0;
+                }
+
+                .back {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}

src/app/modules/team/pages/team/team.component.ts

@@ -1,10 +1,19 @@
-import { Component } from '@angular/core';
-
+import { Component, signal } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { teams } from 'src/assets/data/team';
 @Component({
     selector: 'app-team',
     templateUrl: './team.component.html',
-    styleUrl: './team.component.scss'
+    styleUrl: './team.component.scss',
+    imports: [NgClass]
 })
 export class TeamComponent {
+    readonly activeTeam = signal(""); 
+
+    readonly teamMembers = teams;
 
+    scrollToTeam(teamId: string) {
+        const el = document.getElementById(teamId);
+        if (el) el.scrollIntoView({ behavior: 'smooth' });
+    }
 }

src/app/shared/components/news-summary/news-summary.component.ts

@@ -29,5 +29,5 @@ export class NewsSummaryComponent implements OnInit {
   ngOnInit() {
     this.news$ = this.newsService.getNews({ page: 0, size: 4 }).pipe(map(r => r.content));
   }
-  
+
 }