Refactor topbar HTML, projects TS and styles
Minor markup and formatting cleanup plus layout adjustments. - topbar.component.html: removed mat-toolbar color attribute, compacted/normalized element attributes and spacing, fixed small markup spacing issues. - projects.component.ts: code formatting and whitespace normalization (imports, property spacing, object literals, small function signature/timeout formatting); no logic changes. - styles.scss: reorganized topbar rules (added app-topbar wrapper, display and color), switched .hero from grid to flex with responsive flex-basis, adjusted photo and intro flex behavior, increased project grid column min width and centered grid with max-width, removed featured card full-width grid span. These changes improve consistency, readability and adjust layout/responsiveness of the topbar/hero/project grid.
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
import {Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
import {Subscription} from "rxjs";
|
||||
import {MatCardModule} from "@angular/material/card";
|
||||
import {MatChipsModule} from "@angular/material/chips";
|
||||
import {MatIcon} from "@angular/material/icon";
|
||||
import {TranslatePipe} from "@ngx-translate/core";
|
||||
import {MatButtonModule} from "@angular/material/button";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {ProjectDialogComponent} from "./dialog/project-dialog.component";
|
||||
import {AssetsConstants} from "../../constants/AssetsConstants";
|
||||
import { Component, computed, inject, CUSTOM_ELEMENTS_SCHEMA, OnDestroy, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Subscription } from "rxjs";
|
||||
import { MatCardModule } from "@angular/material/card";
|
||||
import { MatChipsModule } from "@angular/material/chips";
|
||||
import { MatIcon } from "@angular/material/icon";
|
||||
import { TranslatePipe } from "@ngx-translate/core";
|
||||
import { MatButtonModule } from "@angular/material/button";
|
||||
import { MatDialog } from "@angular/material/dialog";
|
||||
import { ProjectDialogComponent } from "./dialog/project-dialog.component";
|
||||
import { AssetsConstants } from "../../constants/AssetsConstants";
|
||||
|
||||
export interface Projects {
|
||||
identifier: string;
|
||||
@@ -46,124 +46,124 @@ export interface Projects {
|
||||
})
|
||||
export class ProjectsComponent implements OnInit, OnDestroy {
|
||||
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly dialog = inject(MatDialog);
|
||||
private readonly router = inject(Router);
|
||||
private queryParamSub: Subscription | undefined;
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly dialog = inject(MatDialog);
|
||||
private readonly router = inject(Router);
|
||||
private queryParamSub: Subscription | undefined;
|
||||
|
||||
allProjects: Projects[] = [
|
||||
{
|
||||
identifier: "playground",
|
||||
title: 'PROJECTS.PLAYGROUND.TITLE',
|
||||
shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
|
||||
images: [],
|
||||
icon: 'web',
|
||||
assets: '',
|
||||
links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://andreas-dahm.eu'}],
|
||||
bulletPoints: [
|
||||
'PROJECTS.PLAYGROUND.BULLET_1',
|
||||
'PROJECTS.PLAYGROUND.BULLET_2',
|
||||
'PROJECTS.PLAYGROUND.BULLET_3',
|
||||
'PROJECTS.PLAYGROUND.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
|
||||
},
|
||||
{
|
||||
identifier: "elmucho",
|
||||
title: 'PROJECTS.EL_MUCHO.TITLE',
|
||||
shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
|
||||
images: AssetsConstants.EL_MUCHO_IMAGES.map(url => ({ url, source: '' })),
|
||||
icon: 'sports_esports',
|
||||
assets: '',
|
||||
links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://store.steampowered.com/app/1532640/El_Mucho/'}],
|
||||
bulletPoints: [
|
||||
'PROJECTS.EL_MUCHO.BULLET_1',
|
||||
'PROJECTS.EL_MUCHO.BULLET_2',
|
||||
'PROJECTS.EL_MUCHO.BULLET_3',
|
||||
'PROJECTS.EL_MUCHO.BULLET_4',
|
||||
],
|
||||
isFeatured: true,
|
||||
technologies: ['Unity', 'C#', 'Steamworks', 'Git']
|
||||
},
|
||||
{
|
||||
identifier: "gamejams",
|
||||
title: 'PROJECTS.GAME_JAMS.TITLE',
|
||||
shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
|
||||
images: AssetsConstants.GAME_JAMS_IMAGES.map(url => ({ url, source: '' })),
|
||||
icon: 'videogame_asset',
|
||||
assets: '',
|
||||
links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://itch.io/c/6628860/lobos-collection'}],
|
||||
bulletPoints: [
|
||||
'PROJECTS.GAME_JAMS.BULLET_1',
|
||||
'PROJECTS.GAME_JAMS.BULLET_2',
|
||||
'PROJECTS.GAME_JAMS.BULLET_3',
|
||||
'PROJECTS.GAME_JAMS.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['Unity', 'C#', 'Git']
|
||||
},
|
||||
{
|
||||
identifier: "diploma",
|
||||
title: 'PROJECTS.DIPLOMA.TITLE',
|
||||
shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
|
||||
images: AssetsConstants.DIPLOMA_IMAGES.map(url => ({ url, source: '' })),
|
||||
icon: 'history_edu',
|
||||
assets: AssetsConstants.DIPLOMA,
|
||||
links: [{name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://www.th-bingen.de'}],
|
||||
bulletPoints: [
|
||||
'PROJECTS.DIPLOMA.BULLET_1',
|
||||
'PROJECTS.DIPLOMA.BULLET_2',
|
||||
'PROJECTS.DIPLOMA.BULLET_3',
|
||||
'PROJECTS.DIPLOMA.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
|
||||
},
|
||||
{
|
||||
identifier: "tribble-the-homeserver",
|
||||
title: 'PROJECTS.TRIBBLE.TITLE',
|
||||
shortDescription: 'PROJECTS.TRIBBLE.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.TRIBBLE.INTRODUCTION',
|
||||
images: [
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[0], source: 'https://upload.wikimedia.org/wikipedia/commons/0/03/Hostinger_Logo.png'},
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[1], source: 'https://dashboardicons.com/icons/docker-engine'},
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[2], source: 'https://dashboardicons.com/icons/gitea'},
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[3], source: 'https://commons.wikimedia.org/wiki/File:Traefik.logo.png'}
|
||||
],
|
||||
icon: 'dns',
|
||||
assets: '',
|
||||
links: [
|
||||
{name: 'Ubuntu Server', url: 'https://ubuntu.com/server'},
|
||||
{name: 'Docker', url: 'https://www.docker.com/'},
|
||||
{name: 'Traefik', url: 'https://traefik.io/'},
|
||||
{name: 'Gitea', url: 'https://gitea.io/'},
|
||||
{name: 'Jellyfin', url: 'https://jellyfin.org/'},
|
||||
{name: 'AdGuard Home', url: 'https://adguard.com/en/adguard-home/overview.html'},
|
||||
{name: 'Paperless-ngx', url: 'https://paperless-ngx.com/'},
|
||||
{name: 'Tailscale', url: 'https://tailscale.com/'}
|
||||
],
|
||||
bulletPoints: [
|
||||
'PROJECTS.TRIBBLE.BULLET_1',
|
||||
'PROJECTS.TRIBBLE.BULLET_2',
|
||||
'PROJECTS.TRIBBLE.BULLET_3',
|
||||
'PROJECTS.TRIBBLE.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['Ubuntu Server', 'Docker', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale']
|
||||
}
|
||||
]
|
||||
allProjects: Projects[] = [
|
||||
{
|
||||
identifier: "playground",
|
||||
title: 'PROJECTS.PLAYGROUND.TITLE',
|
||||
shortDescription: 'PROJECTS.PLAYGROUND.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.PLAYGROUND.INTRODUCTION',
|
||||
images: [],
|
||||
icon: 'web',
|
||||
assets: '',
|
||||
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://andreas-dahm.eu' }],
|
||||
bulletPoints: [
|
||||
'PROJECTS.PLAYGROUND.BULLET_1',
|
||||
'PROJECTS.PLAYGROUND.BULLET_2',
|
||||
'PROJECTS.PLAYGROUND.BULLET_3',
|
||||
'PROJECTS.PLAYGROUND.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['Angular', 'TypeScript', 'SCSS', 'HTML', 'GitHub Actions', 'Docker']
|
||||
},
|
||||
{
|
||||
identifier: "elmucho",
|
||||
title: 'PROJECTS.EL_MUCHO.TITLE',
|
||||
shortDescription: 'PROJECTS.EL_MUCHO.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.EL_MUCHO.INTRODUCTION',
|
||||
images: AssetsConstants.EL_MUCHO_IMAGES.map(url => ({ url, source: '' })),
|
||||
icon: 'sports_esports',
|
||||
assets: '',
|
||||
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://store.steampowered.com/app/1532640/El_Mucho/' }],
|
||||
bulletPoints: [
|
||||
'PROJECTS.EL_MUCHO.BULLET_1',
|
||||
'PROJECTS.EL_MUCHO.BULLET_2',
|
||||
'PROJECTS.EL_MUCHO.BULLET_3',
|
||||
'PROJECTS.EL_MUCHO.BULLET_4',
|
||||
],
|
||||
isFeatured: true,
|
||||
technologies: ['Unity', 'C#', 'Steamworks', 'Git']
|
||||
},
|
||||
{
|
||||
identifier: "gamejams",
|
||||
title: 'PROJECTS.GAME_JAMS.TITLE',
|
||||
shortDescription: 'PROJECTS.GAME_JAMS.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.GAME_JAMS.INTRODUCTION',
|
||||
images: AssetsConstants.GAME_JAMS_IMAGES.map(url => ({ url, source: '' })),
|
||||
icon: 'videogame_asset',
|
||||
assets: '',
|
||||
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://itch.io/c/6628860/lobos-collection' }],
|
||||
bulletPoints: [
|
||||
'PROJECTS.GAME_JAMS.BULLET_1',
|
||||
'PROJECTS.GAME_JAMS.BULLET_2',
|
||||
'PROJECTS.GAME_JAMS.BULLET_3',
|
||||
'PROJECTS.GAME_JAMS.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['Unity', 'C#', 'Git']
|
||||
},
|
||||
{
|
||||
identifier: "diploma",
|
||||
title: 'PROJECTS.DIPLOMA.TITLE',
|
||||
shortDescription: 'PROJECTS.DIPLOMA.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.DIPLOMA.INTRODUCTION',
|
||||
images: AssetsConstants.DIPLOMA_IMAGES.map(url => ({ url, source: '' })),
|
||||
icon: 'history_edu',
|
||||
assets: AssetsConstants.DIPLOMA,
|
||||
links: [{ name: 'PROJECTS.LINK_TO_PROJECT', url: 'https://www.th-bingen.de' }],
|
||||
bulletPoints: [
|
||||
'PROJECTS.DIPLOMA.BULLET_1',
|
||||
'PROJECTS.DIPLOMA.BULLET_2',
|
||||
'PROJECTS.DIPLOMA.BULLET_3',
|
||||
'PROJECTS.DIPLOMA.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['C++', 'OpenGL', 'Qt', '3D-Scanner']
|
||||
},
|
||||
{
|
||||
identifier: "tribble-the-homeserver",
|
||||
title: 'PROJECTS.TRIBBLE.TITLE',
|
||||
shortDescription: 'PROJECTS.TRIBBLE.SHORT_DESCRIPTION',
|
||||
introduction: 'PROJECTS.TRIBBLE.INTRODUCTION',
|
||||
images: [
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[0], source: 'https://upload.wikimedia.org/wikipedia/commons/0/03/Hostinger_Logo.png' },
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[1], source: 'https://dashboardicons.com/icons/docker-engine' },
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[2], source: 'https://dashboardicons.com/icons/gitea' },
|
||||
{ url: AssetsConstants.TRIBBLE_IMAGES[3], source: 'https://commons.wikimedia.org/wiki/File:Traefik.logo.png' }
|
||||
],
|
||||
icon: 'dns',
|
||||
assets: '',
|
||||
links: [
|
||||
{ name: 'Ubuntu Server', url: 'https://ubuntu.com/server' },
|
||||
{ name: 'Docker', url: 'https://www.docker.com/' },
|
||||
{ name: 'Traefik', url: 'https://traefik.io/' },
|
||||
{ name: 'Gitea', url: 'https://gitea.io/' },
|
||||
{ name: 'Jellyfin', url: 'https://jellyfin.org/' },
|
||||
{ name: 'AdGuard Home', url: 'https://adguard.com/en/adguard-home/overview.html' },
|
||||
{ name: 'Paperless-ngx', url: 'https://paperless-ngx.com/' },
|
||||
{ name: 'Tailscale', url: 'https://tailscale.com/' }
|
||||
],
|
||||
bulletPoints: [
|
||||
'PROJECTS.TRIBBLE.BULLET_1',
|
||||
'PROJECTS.TRIBBLE.BULLET_2',
|
||||
'PROJECTS.TRIBBLE.BULLET_3',
|
||||
'PROJECTS.TRIBBLE.BULLET_4',
|
||||
],
|
||||
isFeatured: false,
|
||||
technologies: ['Ubuntu Server', 'Docker', 'Traefik', 'Gitea', 'Jellyfin', 'AdGuard Home', 'Paperless-ngx', 'Tailscale']
|
||||
}
|
||||
]
|
||||
|
||||
featuredProject = computed(() => this.allProjects.find(p => p.isFeatured));
|
||||
otherProjects = computed(() => this.allProjects.filter(p => !p.isFeatured));
|
||||
|
||||
ngOnInit(): void {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
setTimeout(() =>{ this.dialogOpenFunction(); },10);
|
||||
setTimeout(() => { this.dialogOpenFunction(); }, 10);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@@ -172,8 +172,7 @@ export class ProjectsComponent implements OnInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
private dialogOpenFunction() : void
|
||||
{
|
||||
private dialogOpenFunction(): void {
|
||||
this.queryParamSub = this.route.queryParamMap.subscribe(params => {
|
||||
const projectIdentifier = params.get('project');
|
||||
if (projectIdentifier) {
|
||||
|
||||
Reference in New Issue
Block a user