mirror of
https://github.com/adam-benyekkou/my_portfolio.git
synced 2026-01-15 20:20:09 +00:00
Added components architecture and order to main layout
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<title>{{title}}</title>
|
||||
</head>
|
||||
<body>
|
||||
<app-main-layout />
|
||||
<app-main-layout/>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -1 +1,3 @@
|
||||
<p>about-display works!</p>
|
||||
<section>
|
||||
<p>ABOUT SECTION</p>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<section>
|
||||
<p>CONTACT FORM AND LINKS</p>
|
||||
</section>
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<footer class="bg-nier-bg">
|
||||
<p>FOOTER</p>
|
||||
</footer>
|
||||
11
src/app/features/footer-display/footer-display.component.ts
Normal file
11
src/app/features/footer-display/footer-display.component.ts
Normal 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 {
|
||||
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<p>SIDEBAR</p>
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<p>about works!</p>
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
0
src/app/layout/components/about/about.component.css
Normal file
0
src/app/layout/components/about/about.component.css
Normal file
1
src/app/layout/components/about/about.component.html
Normal file
1
src/app/layout/components/about/about.component.html
Normal file
@@ -0,0 +1 @@
|
||||
<app-about-display />
|
||||
10
src/app/layout/components/about/about.component.ts
Normal file
10
src/app/layout/components/about/about.component.ts
Normal 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 {}
|
||||
1
src/app/layout/components/contact/contact.component.html
Normal file
1
src/app/layout/components/contact/contact.component.html
Normal file
@@ -0,0 +1 @@
|
||||
<app-contact-display />
|
||||
23
src/app/layout/components/contact/contact.component.spec.ts
Normal file
23
src/app/layout/components/contact/contact.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
||||
10
src/app/layout/components/contact/contact.component.ts
Normal file
10
src/app/layout/components/contact/contact.component.ts
Normal 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 {}
|
||||
@@ -1,3 +1 @@
|
||||
<footer>
|
||||
<p>footer works!</p>
|
||||
</footer>
|
||||
<app-footer-display />
|
||||
|
||||
@@ -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 {}
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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',
|
||||
})
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<app-projects-list />
|
||||
12
src/app/layout/components/projects/projects.component.ts
Normal file
12
src/app/layout/components/projects/projects.component.ts
Normal 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 {}
|
||||
@@ -1,7 +1 @@
|
||||
<div>
|
||||
<nav>
|
||||
<li>sidebar works</li>
|
||||
<li>sidebar works</li>
|
||||
<li>sidebar works</li>
|
||||
</nav>
|
||||
</div>
|
||||
<app-sidebar-display />
|
||||
|
||||
@@ -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 {}
|
||||
|
||||
Reference in New Issue
Block a user