Added components architecture and order to main layout

This commit is contained in:
AdamBtech
2025-05-20 11:13:00 +02:00
parent 4517ca0201
commit 7b1e02d8bf
32 changed files with 173 additions and 76 deletions

View File

@@ -6,7 +6,7 @@
<title>{{title}}</title>
</head>
<body>
<app-main-layout />
<app-main-layout/>
</body>
</html>

View File

@@ -1 +1,3 @@
<p>about-display works!</p>
<section>
<p>ABOUT SECTION</p>
</section>

View File

@@ -0,0 +1,3 @@
<section>
<p>CONTACT FORM AND LINKS</p>
</section>

View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-contact-display',
imports: [],
templateUrl: './contact-display.component.html',
styleUrl: './contact-display.component.css'
})
export class ContactDisplayComponent {
}

View File

@@ -0,0 +1,3 @@
<footer class="bg-nier-bg">
<p>FOOTER</p>
</footer>

View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-footer-display',
imports: [],
templateUrl: './footer-display.component.html',
styleUrl: './footer-display.component.css'
})
export class FooterDisplayComponent {
}

View File

@@ -0,0 +1 @@
<p>SIDEBAR</p>

View File

@@ -0,0 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-sidebar-display',
imports: [],
templateUrl: './sidebar-display.component.html',
styleUrl: './sidebar-display.component.css'
})
export class SidebarDisplayComponent {
}

View File

@@ -1 +0,0 @@
<p>about works!</p>

View File

@@ -1,11 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-about',
imports: [],
templateUrl: './about.component.html',
styleUrl: './about.component.css'
})
export class AboutComponent {
}

View File

@@ -0,0 +1 @@
<app-about-display />

View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import {AboutDisplayComponent} from '../../../features/about-display/about-display.component';
@Component({
selector: 'app-about',
imports: [AboutDisplayComponent],
templateUrl: './about.component.html',
styleUrl: './about.component.css',
})
export class AboutComponent {}

View File

@@ -0,0 +1 @@
<app-contact-display />

View File

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

View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import {ContactDisplayComponent} from '../../../features/contact-display/contact-display.component';
@Component({
selector: 'app-contact',
imports: [ContactDisplayComponent],
templateUrl: './contact.component.html',
styleUrl: './contact.component.css',
})
export class ContactComponent {}

View File

@@ -1,3 +1 @@
<footer>
<p>footer works!</p>
</footer>
<app-footer-display />

View File

@@ -1,11 +1,10 @@
import { Component } from '@angular/core';
import {FooterDisplayComponent} from '../../../features/footer-display/footer-display.component';
@Component({
selector: 'app-footer',
imports: [],
imports: [FooterDisplayComponent],
templateUrl: './footer.component.html',
styleUrl: './footer.component.css'
styleUrl: './footer.component.css',
})
export class FooterComponent {
}
export class FooterComponent {}

View File

@@ -1,5 +1,5 @@
<header>
<section class="grid grid-cols-[1fr_5fr_4fr_4fr] gap-1 bg-nier-dark font-terminal text-nier-light divide-x divide-nier-accent/30 border border-nier-accent h-32">
<section class="grid grid-cols-[1fr_5fr_4fr_4fr] gap-1 bg-nier-bg font-terminal text-nier-dark divide-x divide-nier-accent/30 border border-nier-accent h-32">
<app-header-logo />
<app-header-text-animate-section />
<app-header-nav-links />

View File

@@ -1,4 +1,9 @@
<app-header />
<app-hero />
<app-sidebar />
<main class="bg-nier-bg">
<app-hero />
<app-about />
<app-projects />
<app-contact />
<app-sidebar />
</main>
<app-footer />

View File

@@ -1,12 +1,23 @@
import { Component } from '@angular/core';
import {FooterComponent} from '../footer/footer.component';
import {SidebarComponent} from '../sidebar/sidebar.component';
import {HeaderComponent} from '../header/header.component';
import {HeroComponent} from '../hero/hero.component';
import { FooterComponent } from '../footer/footer.component';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { HeaderComponent } from '../header/header.component';
import { HeroComponent } from '../hero/hero.component';
import { AboutComponent } from '../about/about.component';
import { ProjectsComponent } from '../projects/projects.component';
import { ContactComponent } from '../contact/contact.component';
@Component({
selector: 'app-main-layout',
imports: [FooterComponent, SidebarComponent, HeaderComponent, HeroComponent],
imports: [
FooterComponent,
SidebarComponent,
HeaderComponent,
HeroComponent,
AboutComponent,
ProjectsComponent,
ContactComponent,
],
templateUrl: './main-layout.component.html',
styleUrl: './main-layout.component.css',
})

View File

@@ -0,0 +1 @@
<app-projects-list />

View File

@@ -0,0 +1,12 @@
import { Component } from '@angular/core';
import {
ProjectsListComponent
} from '../../../features/project-display/components/projects-list/projects-list.component';
@Component({
selector: 'app-projects',
imports: [ProjectsListComponent],
templateUrl: './projects.component.html',
styleUrl: './projects.component.css',
})
export class ProjectsComponent {}

View File

@@ -1,7 +1 @@
<div>
<nav>
<li>sidebar works</li>
<li>sidebar works</li>
<li>sidebar works</li>
</nav>
</div>
<app-sidebar-display />

View File

@@ -1,11 +1,10 @@
import { Component } from '@angular/core';
import {SidebarDisplayComponent} from '../../../features/sidebar-display/sidebar-display.component';
@Component({
selector: 'app-sidebar',
imports: [],
imports: [SidebarDisplayComponent],
templateUrl: './sidebar.component.html',
styleUrl: './sidebar.component.css'
styleUrl: './sidebar.component.css',
})
export class SidebarComponent {
}
export class SidebarComponent {}