changes: api integration,
components, styles, fontawesome icons added
This commit is contained in:
parent
edd2798581
commit
5c04faad2a
@ -68,7 +68,8 @@
|
||||
"buildTarget": "my-portfolio:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "my-portfolio:build:development"
|
||||
"buildTarget": "my-portfolio:build:development",
|
||||
"proxyConfig": "src/proxy.conf.json"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
||||
@ -4,19 +4,9 @@
|
||||
</header>
|
||||
|
||||
<section class="about-text">
|
||||
<p>
|
||||
I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
|
||||
I enjoy
|
||||
turning complex problems into simple, beautiful and intuitive designs.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
My job is to build your website so that it is functional and user-friendly but at the same time attractive.
|
||||
Moreover, I
|
||||
add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
|
||||
across your
|
||||
message and identity in the most creative way. I created web design for many famous brand companies.
|
||||
</p>
|
||||
<pre class="text-style">
|
||||
{{model.about}}
|
||||
</pre>
|
||||
</section>
|
||||
|
||||
|
||||
@ -26,75 +16,22 @@
|
||||
|
||||
<section class="service">
|
||||
|
||||
<h3 class="h3 service-title">What i'm doing</h3>
|
||||
<h3 class="h3 service-title">Interests</h3>
|
||||
|
||||
<ul class="service-list">
|
||||
|
||||
<li class="service-item">
|
||||
|
||||
|
||||
<li class="service-item" *ngFor="let hobby of model.hobbies">
|
||||
<div class="service-icon-box">
|
||||
<img src="./assets/images/icon-design.svg
|
||||
" alt="design icon" width="40">
|
||||
<i class="fa-regular fa-2x " [ngClass]="hobby.icon"></i>
|
||||
</div>
|
||||
|
||||
<div class="service-content-box">
|
||||
<h4 class="h4 service-item-title">Web design</h4>
|
||||
<h4 class="h4 service-item-title">{{hobby.name}}</h4>
|
||||
|
||||
<p class="service-item-text">
|
||||
The most modern and high-quality design made at a professional level.
|
||||
{{hobby.description}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="service-item">
|
||||
|
||||
<div class="service-icon-box">
|
||||
<img src="./assets/images/icon-dev.svg" alt="Web development icon" width="40">
|
||||
</div>
|
||||
|
||||
<div class="service-content-box">
|
||||
<h4 class="h4 service-item-title">Web development</h4>
|
||||
|
||||
<p class="service-item-text">
|
||||
High-quality development of sites at the professional level.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="service-item">
|
||||
|
||||
<div class="service-icon-box">
|
||||
<img src="./assets/images/icon-app.svg" alt="mobile app icon" width="40">
|
||||
</div>
|
||||
|
||||
<div class="service-content-box">
|
||||
<h4 class="h4 service-item-title">Mobile apps</h4>
|
||||
|
||||
<p class="service-item-text">
|
||||
Professional development of applications for iOS and Android.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="service-item">
|
||||
|
||||
<div class="service-icon-box">
|
||||
<img src="./assets/images/icon-photo.svg" alt="camera icon" width="40">
|
||||
</div>
|
||||
|
||||
<div class="service-content-box">
|
||||
<h4 class="h4 service-item-title">Photography</h4>
|
||||
|
||||
<p class="service-item-text">
|
||||
I make high-quality photos of any category at a professional level.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
.text-style {
|
||||
white-space: pre-line;
|
||||
font-family: var(--ff-poppins);
|
||||
}
|
||||
@ -1,10 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { IAbout } from './about.model';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-about',
|
||||
templateUrl: './about.component.html',
|
||||
styleUrl: './about.component.scss'
|
||||
})
|
||||
export class AboutComponent {
|
||||
export class AboutComponent extends BaseComponent<IAbout> implements OnInit {
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
6
src/app/about/about.model.ts
Normal file
6
src/app/about/about.model.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { IHobby } from "../models/hobby.model";
|
||||
|
||||
export interface IAbout{
|
||||
about: string;
|
||||
hobbies: IHobby[];
|
||||
}
|
||||
@ -2,17 +2,16 @@ import { NgModule } from '@angular/core';
|
||||
import { AboutComponent } from './about/about.component';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { ResumeComponent } from './resume/resume.component';
|
||||
import { PortfolioComponent } from './portfolio/portfolio.component';
|
||||
import { ProjectsComponent } from './projects/projects.component';
|
||||
import { BlogComponent } from './blog/blog.component';
|
||||
import { ContactComponent } from './contact/contact.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: 'about', component: AboutComponent, title: "About" },
|
||||
{ path: 'resume', component: ResumeComponent, title: "Resume" },
|
||||
{ path: 'portfolio', component: PortfolioComponent, title: "Portfolio" },
|
||||
{ path: 'blog', component: BlogComponent, title: "Blog" },
|
||||
{ path: 'contact', component: ContactComponent, title: "Contact" },
|
||||
{ path: '', redirectTo: '/about', pathMatch: 'full'}
|
||||
{ path: '', component: AboutComponent, title: "Bangara Raju" },
|
||||
{ path: 'resume', component: ResumeComponent, title: "Bangara Raju - Resume" },
|
||||
{ path: 'projects', component: ProjectsComponent, title: "Bangara Raju - Projects" },
|
||||
{ path: 'blog-posts', component: BlogComponent, title: "Bangara Raju - Posts" },
|
||||
{ path: 'contact', component: ContactComponent, title: "Bangara Raju - Contact" }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
||||
@ -6,10 +6,11 @@ import { ContactSidebarComponent } from './contact-sidebar/contact-sidebar.compo
|
||||
import { NavbarComponent } from './navbar/navbar.component';
|
||||
import { AboutComponent } from './about/about.component';
|
||||
import { ResumeComponent } from './resume/resume.component';
|
||||
import { PortfolioComponent } from './portfolio/portfolio.component';
|
||||
import { ProjectsComponent } from './projects/projects.component';
|
||||
import { BlogComponent } from './blog/blog.component';
|
||||
import { ContactComponent } from './contact/contact.component';
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -18,12 +19,13 @@ import { AppRoutingModule } from './app-routing.module';
|
||||
NavbarComponent,
|
||||
AboutComponent,
|
||||
ResumeComponent,
|
||||
PortfolioComponent,
|
||||
ProjectsComponent,
|
||||
BlogComponent,
|
||||
ContactComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
HttpClientModule,
|
||||
AppRoutingModule
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
|
||||
21
src/app/base/base.component.ts
Normal file
21
src/app/base/base.component.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { ICv } from "../models/cv.model";
|
||||
import { CvService } from "../services/cv.service";
|
||||
|
||||
export abstract class BaseComponent<T extends object> {
|
||||
public model: T = <T>{};
|
||||
candidateId: number = 1;
|
||||
constructor(public svc: CvService) {
|
||||
}
|
||||
|
||||
init(): void {
|
||||
this.svc.getCv(this.candidateId).subscribe((response) => {
|
||||
this.svc.resume = response;
|
||||
this.assignData(response);
|
||||
this.svc.baseSubject.next(response);
|
||||
});
|
||||
}
|
||||
|
||||
assignData(response: Partial<ICv> | unknown){
|
||||
Object.assign(this.model, response);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<article class="blog" data-page="blog">
|
||||
|
||||
<header>
|
||||
<h2 class="h2 article-title">Blog</h2>
|
||||
<h2 class="h2 article-title">Posts</h2>
|
||||
</header>
|
||||
|
||||
<section class="blog-posts">
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { ISideBar } from '../contact-sidebar/side-bar.model';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-blog',
|
||||
templateUrl: './blog.component.html',
|
||||
styleUrl: './blog.component.scss'
|
||||
})
|
||||
export class BlogComponent {
|
||||
export class BlogComponent extends BaseComponent<ISideBar> implements OnInit{
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<aside class="sidebar" [ngClass]="sideBarExpanded ? 'active' : ''" data-sidebar>
|
||||
|
||||
<div class="sidebar-info">
|
||||
<div class="sidebar-info" ng-init="let displayName = ">
|
||||
|
||||
<figure class="avatar-box">
|
||||
<img src="./assets/images/my-avatar.png" alt="Richard hanrick" width="80">
|
||||
<img src="./assets/images/my-avatar.png" alt="{{model.candidate?.displayName}}" width="80">
|
||||
</figure>
|
||||
|
||||
<div class="info-content">
|
||||
<h1 class="name" title="Richard hanrick">Richard hanrick</h1>
|
||||
<h1 class="name" title="{{model.candidate?.displayName}}">{{model.candidate?.displayName}}</h1>
|
||||
|
||||
<p class="title">Web developer</p>
|
||||
<p class="title">{{model.title}}</p>
|
||||
</div>
|
||||
|
||||
<button class="info_more-btn" (click)="sideBarExpanded = !sideBarExpanded" data-sidebar-btn>
|
||||
<span>Show Contacts</span>
|
||||
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
<i class="fa-regular fa-chevron-down"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@ -29,13 +29,13 @@
|
||||
<li class="contact-item">
|
||||
|
||||
<div class="icon-box">
|
||||
<ion-icon name="mail-outline"></ion-icon>
|
||||
<i class="fa-light fa-envelope"></i>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
<p class="contact-title">Email</p>
|
||||
|
||||
<a href="mailto:richard@example.com" class="contact-link">richard.gmail.com</a>
|
||||
<a href="mailto:richard@example.com" class="contact-link">{{model.candidate?.email}}</a>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@ -43,13 +43,13 @@
|
||||
<li class="contact-item">
|
||||
|
||||
<div class="icon-box">
|
||||
<ion-icon name="phone-portrait-outline"></ion-icon>
|
||||
<i class="fa-light fa-mobile-notch"></i>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
<p class="contact-title">Phone</p>
|
||||
|
||||
<a href="tel:+12133522795" class="contact-link">+1 (213) 352-2795</a>
|
||||
<a href="tel:+12133522795" class="contact-link">{{model.candidate?.phone}}</a>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@ -57,13 +57,13 @@
|
||||
<li class="contact-item">
|
||||
|
||||
<div class="icon-box">
|
||||
<ion-icon name="calendar-outline"></ion-icon>
|
||||
<i class="fa-regular fa-cake-candles"></i>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
<p class="contact-title">Birthday</p>
|
||||
|
||||
<time datetime="1982-06-23">June 23, 1982</time>
|
||||
<time>{{model.candidate?.dob}}</time>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@ -71,13 +71,13 @@
|
||||
<li class="contact-item">
|
||||
|
||||
<div class="icon-box">
|
||||
<ion-icon name="location-outline"></ion-icon>
|
||||
<i class="fa-light fa-location-dot"></i>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
<p class="contact-title">Location</p>
|
||||
|
||||
<address>Sacramento, California, USA</address>
|
||||
<address>{{model.candidate?.address}}</address>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
@ -89,32 +89,20 @@
|
||||
<ul class="social-list">
|
||||
|
||||
<li class="social-item">
|
||||
<a href="#" class="social-link">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
<a href="{{model.socialLinks?.linkedin}}" target="_blank" class="social-link">
|
||||
<i class="fa-brands fa-linkedin"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="social-item">
|
||||
<a href="#" class="social-link">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
<a href="{{model.socialLinks?.gitHub}}" target="_blank" class="social-link">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="social-item">
|
||||
<a href="#" class="social-link">
|
||||
<ion-icon name="logo-facebook"></ion-icon>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="social-item">
|
||||
<a href="#" class="social-link">
|
||||
<ion-icon name="logo-twitter"></ion-icon>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="social-item">
|
||||
<a href="#" class="social-link">
|
||||
<ion-icon name="logo-instagram"></ion-icon>
|
||||
<a href="{{model.socialLinks?.blogUrl}}" target="_blank" class="social-link">
|
||||
<i class="fa-duotone fa-blog"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,11 +1,24 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { AfterViewInit, Component, OnInit } from '@angular/core';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { ISideBar } from './side-bar.model';
|
||||
import { ICv } from '../models/cv.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact-sidebar',
|
||||
templateUrl: './contact-sidebar.component.html',
|
||||
styleUrl: './contact-sidebar.component.scss'
|
||||
})
|
||||
export class ContactSidebarComponent {
|
||||
export class ContactSidebarComponent extends BaseComponent<ISideBar> implements OnInit {
|
||||
sideBarExpanded: boolean = false;
|
||||
|
||||
displayName!: string;
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.svc.baseSubject.subscribe((resume: ICv | unknown) =>{
|
||||
this.assignData(resume);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
8
src/app/contact-sidebar/side-bar.model.ts
Normal file
8
src/app/contact-sidebar/side-bar.model.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { ICandidate } from "../models/candidate.model";
|
||||
import { ISocialLinks } from "../models/social-links.model";
|
||||
|
||||
export interface ISideBar{
|
||||
title: string;
|
||||
candidate?: ICandidate;
|
||||
socialLinks?: ISocialLinks;
|
||||
}
|
||||
@ -27,7 +27,7 @@
|
||||
<textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
|
||||
|
||||
<button class="form-btn" type="submit" disabled data-form-btn>
|
||||
<ion-icon name="paper-plane"></ion-icon>
|
||||
<i class="fa-regular fa-paper-plane"></i>
|
||||
<span>Send Message</span>
|
||||
</button>
|
||||
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { CvService } from '../services/cv.service';
|
||||
import { ISideBar } from '../contact-sidebar/side-bar.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-contact',
|
||||
templateUrl: './contact.component.html',
|
||||
styleUrl: './contact.component.scss'
|
||||
})
|
||||
export class ContactComponent {
|
||||
export class ContactComponent extends BaseComponent<ISideBar> implements OnInit{
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
9
src/app/models/academic.model.ts
Normal file
9
src/app/models/academic.model.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export interface IAcademic{
|
||||
academicId: number;
|
||||
institution: string;
|
||||
startYear: number;
|
||||
endYear: number;
|
||||
degree: string;
|
||||
period: string;
|
||||
degreeSpecialization: string;
|
||||
}
|
||||
10
src/app/models/candidate.model.ts
Normal file
10
src/app/models/candidate.model.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export interface ICandidate{
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
dob: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
avatar: string;
|
||||
displayName: string;
|
||||
}
|
||||
22
src/app/models/cv.model.ts
Normal file
22
src/app/models/cv.model.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { IAcademic } from "./academic.model";
|
||||
import { ICandidate } from "./candidate.model";
|
||||
import { IExperience } from "./experience.model";
|
||||
import { IHobby } from "./hobby.model";
|
||||
import { IPost } from "./post.model";
|
||||
import { IProject } from "./project.model";
|
||||
import { ISkill } from "./skill.model";
|
||||
import { ISocialLinks } from "./social-links.model";
|
||||
|
||||
export interface ICv{
|
||||
resumeId: number;
|
||||
title: string;
|
||||
about: string;
|
||||
candidate: ICandidate;
|
||||
socialLinks: ISocialLinks;
|
||||
posts: IPost[];
|
||||
academics: IAcademic[];
|
||||
skills: ISkill[];
|
||||
experiences: IExperience[];
|
||||
hobbies: IHobby[];
|
||||
projects: IProject[];
|
||||
}
|
||||
5
src/app/models/experience-details.model.ts
Normal file
5
src/app/models/experience-details.model.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface IExperienceDetails{
|
||||
id: number;
|
||||
details: string;
|
||||
order: number;
|
||||
}
|
||||
12
src/app/models/experience.model.ts
Normal file
12
src/app/models/experience.model.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { IExperienceDetails } from "./experience-details.model";
|
||||
|
||||
export interface IExperience{
|
||||
experienceId: number;
|
||||
title: string;
|
||||
description: string;
|
||||
company: string;
|
||||
startYear: string;
|
||||
endYear: string;
|
||||
period: string;
|
||||
details: IExperienceDetails[];
|
||||
}
|
||||
6
src/app/models/hobby.model.ts
Normal file
6
src/app/models/hobby.model.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface IHobby{
|
||||
hobbyId: number;
|
||||
name: string;
|
||||
description: string;
|
||||
icon: string;
|
||||
}
|
||||
11
src/app/models/post.model.ts
Normal file
11
src/app/models/post.model.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export interface IPost{
|
||||
postId: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
category: string;
|
||||
postUrl: string;
|
||||
likes: number;
|
||||
views: number;
|
||||
comments: number;
|
||||
}
|
||||
10
src/app/models/project.model.ts
Normal file
10
src/app/models/project.model.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export interface IProject{
|
||||
projectId: number;
|
||||
name: string;
|
||||
description: string;
|
||||
category: string;
|
||||
roles: string[];
|
||||
responsibilities: string[];
|
||||
technologiesUsed: string[];
|
||||
imagePath: string;
|
||||
}
|
||||
6
src/app/models/skill.model.ts
Normal file
6
src/app/models/skill.model.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface ISkill{
|
||||
skillId: number;
|
||||
name: string;
|
||||
description: string;
|
||||
proficiencyLevel: number;
|
||||
}
|
||||
6
src/app/models/social-links.model.ts
Normal file
6
src/app/models/social-links.model.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface ISocialLinks{
|
||||
id: number;
|
||||
gitHub: string;
|
||||
linkedin: string;
|
||||
blogUrl: string;
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
<ul class="navbar-list">
|
||||
|
||||
<li class="navbar-item">
|
||||
<button routerLink="/about" routerLinkActive="active" class="navbar-link" data-nav-link>About</button>
|
||||
<button routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="navbar-link" data-nav-link>About</button>
|
||||
</li>
|
||||
|
||||
<li class="navbar-item">
|
||||
@ -11,11 +11,11 @@
|
||||
</li>
|
||||
|
||||
<li class="navbar-item">
|
||||
<button routerLink="/portfolio" routerLinkActive="active" class="navbar-link" data-nav-link>Portfolio</button>
|
||||
<button routerLink="/projects" routerLinkActive="active" class="navbar-link" data-nav-link>Projects</button>
|
||||
</li>
|
||||
|
||||
<li class="navbar-item">
|
||||
<button routerLink="/blog" routerLinkActive="active" class="navbar-link" data-nav-link>Blog</button>
|
||||
<button routerLink="/blog-posts" routerLinkActive="active" class="navbar-link" data-nav-link>Blog</button>
|
||||
</li>
|
||||
|
||||
<li class="navbar-item">
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-portfolio',
|
||||
templateUrl: './portfolio.component.html',
|
||||
styleUrl: './portfolio.component.scss'
|
||||
})
|
||||
export class PortfolioComponent {
|
||||
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<article class="portfolio" data-page="portfolio">
|
||||
<article class="projects" data-page="projects">
|
||||
|
||||
<header>
|
||||
<h2 class="h2 article-title">Portfolio</h2>
|
||||
<h2 class="h2 article-title">Projects</h2>
|
||||
</header>
|
||||
|
||||
<section class="projects">
|
||||
@ -1,6 +1,6 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PortfolioComponent } from './portfolio.component';
|
||||
import { PortfolioComponent } from './projects.component';
|
||||
|
||||
describe('PortfolioComponent', () => {
|
||||
let component: PortfolioComponent;
|
||||
19
src/app/projects/projects.component.ts
Normal file
19
src/app/projects/projects.component.ts
Normal file
@ -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();
|
||||
}
|
||||
}
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
<div class="title-wrapper">
|
||||
<div class="icon-box">
|
||||
<ion-icon name="book-outline"></ion-icon>
|
||||
<i class="fa-light fa-book-open"></i>
|
||||
</div>
|
||||
|
||||
<h3 class="h3">Education</h3>
|
||||
@ -16,43 +16,14 @@
|
||||
|
||||
<ol class="timeline-list">
|
||||
|
||||
<li class="timeline-item">
|
||||
<li class="timeline-item" *ngFor="let education of model.academics">
|
||||
|
||||
<h4 class="h4 timeline-item-title">University school of the arts</h4>
|
||||
<h4 class="h4 timeline-item-title">{{education.degree}}{{education.degreeSpecialization != null ? " - " + education.degreeSpecialization : ""}}</h4>
|
||||
|
||||
<span>2007 — 2008</span>
|
||||
<span>{{education.period}}</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
||||
quas molestias
|
||||
exceptur.
|
||||
</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="timeline-item">
|
||||
|
||||
<h4 class="h4 timeline-item-title">New york academy of art</h4>
|
||||
|
||||
<span>2006 — 2007</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est
|
||||
omnis..
|
||||
</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="timeline-item">
|
||||
|
||||
<h4 class="h4 timeline-item-title">High school of art and design</h4>
|
||||
|
||||
<span>2002 — 2004</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur
|
||||
magni dolores
|
||||
eos.
|
||||
{{education.institution}}
|
||||
</p>
|
||||
|
||||
</li>
|
||||
@ -65,7 +36,7 @@
|
||||
|
||||
<div class="title-wrapper">
|
||||
<div class="icon-box">
|
||||
<ion-icon name="book-outline"></ion-icon>
|
||||
<i class="fa-light fa-briefcase"></i>
|
||||
</div>
|
||||
|
||||
<h3 class="h3">Experience</h3>
|
||||
@ -73,44 +44,14 @@
|
||||
|
||||
<ol class="timeline-list">
|
||||
|
||||
<li class="timeline-item">
|
||||
<li class="timeline-item" *ngFor="let experience of model.experiences">
|
||||
|
||||
<h4 class="h4 timeline-item-title">Creative director</h4>
|
||||
<h4 class="h4 timeline-item-title">{{experience.title}}</h4>
|
||||
|
||||
<span>2015 — Present</span>
|
||||
<span>{{experience.period}}</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
|
||||
molestias
|
||||
exceptur.
|
||||
</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="timeline-item">
|
||||
|
||||
<h4 class="h4 timeline-item-title">Art director</h4>
|
||||
|
||||
<span>2013 — 2015</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
||||
quas molestias
|
||||
exceptur.
|
||||
</p>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="timeline-item">
|
||||
|
||||
<h4 class="h4 timeline-item-title">Web designer</h4>
|
||||
|
||||
<span>2010 — 2013</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
|
||||
quas molestias
|
||||
exceptur.
|
||||
{{experience.company}}
|
||||
</p>
|
||||
|
||||
</li>
|
||||
@ -125,11 +66,11 @@
|
||||
|
||||
<ul class="skills-list content-card">
|
||||
|
||||
<li class="skills-item">
|
||||
<li class="skills-item" *ngFor="let skill of model.skills">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h5 class="h5">Web design</h5>
|
||||
<data value="80">80%</data>
|
||||
<h5 class="h5">{{skill.name}}</h5>
|
||||
<data value="{{skill.proficiencyLevel}}">{{skill.proficiencyLevel}}%</data>
|
||||
</div>
|
||||
|
||||
<div class="skill-progress-bg">
|
||||
@ -137,46 +78,7 @@
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="skills-item">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h5 class="h5">Graphic design</h5>
|
||||
<data value="70">70%</data>
|
||||
</div>
|
||||
|
||||
<div class="skill-progress-bg">
|
||||
<div class="skill-progress-fill" style="width: 70%;"></div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="skills-item">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h5 class="h5">Branding</h5>
|
||||
<data value="90">90%</data>
|
||||
</div>
|
||||
|
||||
<div class="skill-progress-bg">
|
||||
<div class="skill-progress-fill" style="width: 90%;"></div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="skills-item">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h5 class="h5">WordPress</h5>
|
||||
<data value="50">50%</data>
|
||||
</div>
|
||||
|
||||
<div class="skill-progress-bg">
|
||||
<div class="skill-progress-fill" style="width: 50%;"></div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,10 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { BaseComponent } from '../base/base.component';
|
||||
import { IResume } from './resume.model';
|
||||
import { CvService } from '../services/cv.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-resume',
|
||||
templateUrl: './resume.component.html',
|
||||
styleUrl: './resume.component.scss'
|
||||
})
|
||||
export class ResumeComponent {
|
||||
export class ResumeComponent extends BaseComponent<IResume> implements OnInit {
|
||||
constructor(svc: CvService){
|
||||
super(svc);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
9
src/app/resume/resume.model.ts
Normal file
9
src/app/resume/resume.model.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { IAcademic } from "../models/academic.model";
|
||||
import { IExperience } from "../models/experience.model";
|
||||
import { ISkill } from "../models/skill.model";
|
||||
|
||||
export interface IResume{
|
||||
academics?: IAcademic[];
|
||||
experiences?: IExperience[];
|
||||
skills?: ISkill[];
|
||||
}
|
||||
16
src/app/services/cv.service.spec.ts
Normal file
16
src/app/services/cv.service.spec.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ResumeService } from './cv.service';
|
||||
|
||||
describe('ResumeService', () => {
|
||||
let service: ResumeService;
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({});
|
||||
service = TestBed.inject(ResumeService);
|
||||
});
|
||||
|
||||
it('should be created', () => {
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
20
src/app/services/cv.service.ts
Normal file
20
src/app/services/cv.service.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { ICv } from '../models/cv.model';
|
||||
import { Observable, Subject, of } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class CvService {
|
||||
public resume!: ICv;
|
||||
public baseSubject = new Subject();
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
getCv(candidateId: number): Observable<ICv> {
|
||||
if(this.resume != null){
|
||||
return of(this.resume);
|
||||
}
|
||||
return this.http.get<ICv>(`/api/cv/${candidateId}`);
|
||||
}
|
||||
}
|
||||
BIN
src/favicon.ico
BIN
src/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 948 B After Width: | Height: | Size: 10 KiB |
@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>MyPortfolio</title>
|
||||
<title>My Portfolio</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
@ -39,5 +39,9 @@
|
||||
-->
|
||||
<script type="module" src="https://unpkg.com/ionicons@7.3.1/dist/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule src="https://unpkg.com/ionicons@7.3.1/dist/ionicons/ionicons.js"></script>
|
||||
<!--
|
||||
- Font Awesome Pack
|
||||
-->
|
||||
<link href="https://cdn.jsdelivr.net/gh/eliyantosarage/font-awesome-pro@main/fontawesome-pro-6.5.1-web/css/all.min.css" rel="stylesheet">
|
||||
</body>
|
||||
</html>
|
||||
|
||||
6
src/proxy.conf.json
Normal file
6
src/proxy.conf.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"/api": {
|
||||
"target": "https://localhost:7013",
|
||||
"secure": false
|
||||
}
|
||||
}
|
||||
@ -404,7 +404,7 @@
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
min-width: 100%;
|
||||
// min-width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
@ -540,7 +540,9 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.service-icon-box { margin-bottom: 10px; }
|
||||
.service-icon-box { margin-bottom: 10px; text-align: center;}
|
||||
|
||||
.service-icon-box i { color: hsl(45, 54%, 58%); }
|
||||
|
||||
.service-icon-box img { margin: auto; }
|
||||
|
||||
@ -872,7 +874,7 @@
|
||||
|
||||
|
||||
/*-----------------------------------*\
|
||||
#PORTFOLIO
|
||||
#PROJECTS
|
||||
\*-----------------------------------*/
|
||||
|
||||
.filter-list { display: none; }
|
||||
@ -1244,7 +1246,7 @@
|
||||
|
||||
|
||||
/**
|
||||
* #PORTFOLIO, BLOG
|
||||
* #PROJECTS, BLOG
|
||||
*/
|
||||
|
||||
.project-img,
|
||||
@ -1333,7 +1335,8 @@
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.sidebar.active { max-height: 584px; }
|
||||
// .sidebar.active { max-height: 584px; }
|
||||
.sidebar.active { max-height: max-content; }
|
||||
|
||||
.sidebar-info { gap: 25px; }
|
||||
|
||||
@ -1503,7 +1506,7 @@
|
||||
|
||||
|
||||
/**
|
||||
* #PORTFOLIO, BLOG
|
||||
* #PROJECTS, BLOG
|
||||
*/
|
||||
|
||||
.project-img, .blog-banner-box { border-radius: 16px; }
|
||||
@ -1596,7 +1599,7 @@
|
||||
|
||||
|
||||
/**
|
||||
* PORTFOLIO
|
||||
* PROJECTS
|
||||
*/
|
||||
|
||||
.article-title { padding-bottom: 20px; }
|
||||
@ -1622,7 +1625,7 @@
|
||||
|
||||
.filter-item button.active { color: var(--orange-yellow-crayola); }
|
||||
|
||||
/* portfolio and blog grid */
|
||||
/* projects and blog grid */
|
||||
|
||||
.project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
@ -1741,7 +1744,7 @@
|
||||
|
||||
|
||||
/**
|
||||
* PORTFOLIO
|
||||
* PROJECTS
|
||||
*/
|
||||
|
||||
.project-list { grid-template-columns: repeat(3, 1fr); }
|
||||
@ -1827,7 +1830,7 @@
|
||||
position: sticky;
|
||||
top: 60px;
|
||||
max-height: max-content;
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
margin-bottom: 0;
|
||||
padding-top: 60px;
|
||||
z-index: 1;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user