Added routing for nav links and SPA mounting of components using Angular router

This commit is contained in:
AdamBtech
2025-05-22 11:56:39 +02:00
parent a9dedcb1f6
commit 11fd702957
37 changed files with 269 additions and 147 deletions

View File

@@ -30,15 +30,15 @@
</div>
</article>
<!-- Rest of your layout remains unchanged -->
<article class="border-r-0 md:border-r-1 grid grid-rows-2 w-full h-full my-4 md:my-0">
<article class="border-r-0 md:border-r-1 grid grid-rows-2 w-full h-full my-4 md:my-0 mb-6 md:mb-0">
<div class="border-b-1 w-full h-full">
<p class="flex items-center justify-center h-full w-full text-sm sm:text-lg md:text-lg lg:text-lg xl:text-lg text-center px-2">
Based in unknown french-hideout
</p>
</div>
<div class="w-full h-full">
<p class="flex items-center justify-center h-full w-full text-sm sm:text-lg md:text-lg lg:text-lg xl:text-lg text-center px-2 flex-wrap">
<p class="flex items-center justify-center h-full w-full text-sm sm:text-lg md:text-lg lg:text-lg xl:text-lg text-center px-2 flex-wrap ">
<span class="whitespace-nowrap mb-1 sm:mb-0">Tech operative ready /</span>
<a href="https://www.linkedin.com/in/adambnk/" target="_blank" class="text-nier-mid ml-1 sm:ml-2 whitespace-nowrap" data-label="Deploy my skills">
<span class="relative z-10">Deploy my skills</span>
@@ -48,7 +48,7 @@
</div>
</article>
<article class="flex items-center justify-center w-full h-full">
<article class="flex items-center justify-center w-full h-full mt-2">
<a href="mailto:your.email@example.com?subject=Initialize%20Connection%20-&body=System%20message%3A%20Your%20connection%20request%20has%20been%20received.%20Please%20provide%20your%20message%20to%20establish%20communication.">
<div class="icon-email"></div>
</a>

View File

@@ -1,4 +1,4 @@
<!-- header-switch-theme-button.component.html -->
<!-- header-switch-theme-nav-button.html -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-10 h-10 svg-icon">
<!-- Outer ring -->
<circle cx="12" cy="12" r="11" fill="none" stroke="currentColor" stroke-width="0.8" />

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -1,4 +1,4 @@
// header-switch-theme-button.component.ts
// header-switch-theme-nav-button.component.ts
import { Component, OnInit } from '@angular/core';
@Component({

View File

@@ -1,5 +1,6 @@
<div class="nier-logo-container">
<div class="nier-logo-container"><a [routerLink]="routerLink()">
<p class="font-terminal-nier text-8xl nier-logo nier-dark" data-text="AB">AB</p>
<div class="nier-scan-line nier-dark"></div>
<div class="nier-blocks nier-dark"></div>
</a>
</div>

View File

@@ -1,23 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderLogoComponent } from './header-logo.component';
describe('HeaderLogoComponent', () => {
let component: HeaderLogoComponent;
let fixture: ComponentFixture<HeaderLogoComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HeaderLogoComponent]
})
.compileComponents();
fixture = TestBed.createComponent(HeaderLogoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -1,9 +1,12 @@
import { Component } from '@angular/core';
import { Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-header-logo',
imports: [],
imports: [RouterLink],
templateUrl: './header-logo.component.html',
styleUrl: './header-logo.component.css',
})
export class HeaderLogoComponent {}
export class HeaderLogoComponent {
routerLink = input<string>('');
}

View File

@@ -1,8 +1,8 @@
<nav class="flex items-center justify-center">
<section class="grid grid-cols-2 gap-x-4 gap-y-5 my-4">
<app-button class="flex items-center h-10" label="Neural Profile" (click)="onClick()"/>
<app-button class="flex items-center h-10" label="Execute//Directory" (click)="onClick()"/>
<app-button class="flex items-center h-10" label="Operative History" (click)="onClick()"/>
<app-button class="flex items-center h-10" label="Transmission Link" (click)="onClick()"/>
<app-nav-button class="flex items-center h-10" label="Neural Profile" (click)="onClick()" routerLink="about"/>
<app-nav-button class="flex items-center h-10" label="Execute//Directory" (click)="onClick()" routerLink="projects"/>
<app-nav-button class="flex items-center h-10" label="Operative History" (click)="onClick()" routerLink="experience"/>
<app-nav-button class="flex items-center h-10" label="Transmission Link" (click)="onClick()" routerLink="contact"/>
</section>
</nav>

View File

@@ -1,10 +1,9 @@
import { Component } from '@angular/core';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { NavButtonComponent } from '../../../shared/ui/button/nav-button.component';
@Component({
selector: 'app-header-nav-links',
imports: [ButtonComponent],
imports: [NavButtonComponent],
templateUrl: './header-nav-links.component.html',
styleUrl: './header-nav-links.component.css',
})