changes: api integration,
components, styles, fontawesome icons added
This commit is contained in:
@@ -0,0 +1,232 @@
|
||||
<article class="projects" data-page="projects">
|
||||
|
||||
<header>
|
||||
<h2 class="h2 article-title">Projects</h2>
|
||||
</header>
|
||||
|
||||
<section class="projects">
|
||||
|
||||
<ul class="filter-list">
|
||||
|
||||
<li class="filter-item">
|
||||
<button class="active" data-filter-btn>All</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Web design</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Applications</button>
|
||||
</li>
|
||||
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>Web development</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="filter-select-box">
|
||||
|
||||
<button class="filter-select" data-select>
|
||||
|
||||
<div class="select-value" data-selecct-value>Select category</div>
|
||||
|
||||
<div class="select-icon">
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
||||
<ul class="select-list">
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>All</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Web design</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Applications</button>
|
||||
</li>
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>Web development</button>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="project-list">
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-1.jpg" alt="finance" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Finance</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-2.png" alt="orizon" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Orizon</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Fundo</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="applications">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-4.png" alt="brawlhalla" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Brawlhalla</h3>
|
||||
|
||||
<p class="project-category">Applications</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-5.png" alt="dsm." loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">DSM.</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web design">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-6.png" alt="metaspark" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">MetaSpark</h3>
|
||||
|
||||
<p class="project-category">Web design</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-7.png" alt="summary" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Summary</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="applications">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-8.jpg" alt="task manager" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Task Manager</h3>
|
||||
|
||||
<p class="project-category">Applications</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="project-item active" data-filter-item data-category="web development">
|
||||
<a href="#">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">Arrival</h3>
|
||||
|
||||
<p class="project-category">Web development</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
</article>
|
||||
@@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PortfolioComponent } from './projects.component';
|
||||
|
||||
describe('PortfolioComponent', () => {
|
||||
let component: PortfolioComponent;
|
||||
let fixture: ComponentFixture<PortfolioComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [PortfolioComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(PortfolioComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { ISideBar } from '../contact-sidebar/side-bar.model';
|
||||
import { CvService } from '../services/cv.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-projects',
|
||||
templateUrl: './projects.component.html',
|
||||
styleUrl: './projects.component.scss'
|
||||
})
|
||||
export class ProjectsComponent extends BaseComponent<ISideBar> implements OnInit{
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user