Skip to content

Commit

Permalink
📄 Add classes directly to host elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@c-o-l-i-n
c-o-l-i-n committed Apr 4, 2024
1 parent 0233309 commit f15681b
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 214 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
"prefix": "colin",
"style": "kebab-case"
}
]
],
"@angular-eslint/no-host-metadata-property": "off"
}
},
{
Expand Down
10 changes: 6 additions & 4 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import { expandImageUrl } from './shared/util';
@Component({
selector: 'colin-root',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `<div
class="mx-auto max-w-3xl bg-[url('/assets/images/bg.png')] bg-top bg-no-repeat px-4 py-5"
>
host: {
class:
"block mx-auto max-w-3xl bg-[url('/assets/images/bg.png')] bg-top bg-no-repeat px-4 py-5",
},
template: `
<!-- Header -->
<colin-header />
Expand All @@ -21,7 +23,7 @@ import { expandImageUrl } from './shared/util';
<!-- Footer -->
<colin-footer />
</div> `,
`,
})
export class AppComponent implements OnInit {
private readonly meta = inject(Meta);
Expand Down
234 changes: 116 additions & 118 deletions src/app/home/feature/home-page/home-page.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,136 +14,134 @@ import { Title } from '@angular/platform-browser';
@Component({
selector: 'colin-home-page',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'flex flex-col gap-5',
},
template: `
<div class="flex flex-col gap-5">
<colin-card header="About Me">
<h3
class="flex flex-col justify-center text-center font-mono text-xl font-medium sm:flex-row md:justify-start md:text-left md:text-2xl"
>
<span class="sm:mr-3 md:mr-4">
<span class="text-slate-400">&lcub;&lcub;</span>Software
Engineer<span class="text-slate-400">&rcub;&rcub;</span>
</span>
<span class="whitespace-nowrap">&amp; Frontend Architect</span>
</h3>
<colin-card header="About Me">
<h3
class="flex flex-col justify-center text-center font-mono text-xl font-medium sm:flex-row md:justify-start md:text-left md:text-2xl"
>
<span class="sm:mr-3 md:mr-4">
<span class="text-slate-400">&lcub;&lcub;</span>Software Engineer<span
class="text-slate-400"
>&rcub;&rcub;</span
>
</span>
<span class="whitespace-nowrap">&amp; Frontend Architect</span>
</h3>
<!-- Skill Pills -->
<div class="flex flex-wrap gap-1">
@for (pill of skillPills; track pill.text) {
<a href="#experience">
<colin-pill [model]="pill" />
</a>
}
</div>
<!-- Skill Pills -->
<div class="flex flex-wrap gap-1">
@for (pill of skillPills; track pill.text) {
<a href="#experience">
<colin-pill [model]="pill" />
</a>
}
</div>
<p>
As a software engineer, I'm passionate about crafting exceptional user
experiences. Architecting robust Angular applications is where I truly
shine.
</p>
<p>
As a software engineer, I'm passionate about crafting exceptional user
experiences. Architecting robust Angular applications is where I truly
shine.
</p>
<p>
As a person, I'm passionate about music, cats, skiing, and cashews.
</p>
</colin-card>
<p>As a person, I'm passionate about music, cats, skiing, and cashews.</p>
</colin-card>
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Featured Article -->
@if (featuredArticle$ | async; as featuredArticle) {
<colin-blog-post-card
[post]="featuredArticle"
header="Featured Article"
/>
}
<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
<!-- Featured Article -->
@if (featuredArticle$ | async; as featuredArticle) {
<colin-blog-post-card
[post]="featuredArticle"
header="Featured Article"
/>
}
<!-- Latest Article -->
@if (latestArticle$ | async; as latestArticle) {
<colin-blog-post-card
[post]="latestArticle"
header="Latest Article"
/>
}
</div>
<!-- Latest Article -->
@if (latestArticle$ | async; as latestArticle) {
<colin-blog-post-card [post]="latestArticle" header="Latest Article" />
}
</div>
<!-- Experience -->
<colin-card styleClass="bg-white" id="experience">
<h2
class="mb-4 text-center font-mono text-xl font-medium md:text-left md:text-2xl"
>
Experience ({{ yearsOfExperience | number: '1.0-1' }} yrs)
</h2>
<!-- Experience -->
<colin-card styleClass="bg-white" id="experience">
<h2
class="mb-4 text-center font-mono text-xl font-medium md:text-left md:text-2xl"
>
Experience ({{ yearsOfExperience | number: '1.0-1' }} yrs)
</h2>
<div>
@for (
row of workExperienceRows;
track row.jobTitle;
let first = $first;
let last = $last
) {
<div
class="border-slate-200 py-4 md:border-b"
[class.border-none]="last"
[class.pt-0]="first"
>
<colin-work-experience-row [model]="row" />
</div>
}
</div>
</colin-card>
<div>
@for (
row of workExperienceRows;
track row.jobTitle;
let first = $first;
let last = $last
) {
<div
class="border-slate-200 py-4 md:border-b"
[class.border-none]="last"
[class.pt-0]="first"
>
<colin-work-experience-row [model]="row" />
</div>
}
</div>
</colin-card>
<!-- Leadership & Mentoring -->
<colin-card styleClass="bg-white" id="leadership">
<h2
class="mb-4 text-center font-mono text-xl font-medium md:text-left md:text-2xl"
>
Leadership & Mentoring
</h2>
<!-- Leadership & Mentoring -->
<colin-card styleClass="bg-white" id="leadership">
<h2
class="mb-4 text-center font-mono text-xl font-medium md:text-left md:text-2xl"
>
Leadership & Mentoring
</h2>
<div>
@for (
row of leadershipRows;
track row.jobTitle;
let first = $first;
let last = $last
) {
<div
class="border-slate-200 py-4 md:border-b"
[class.border-none]="last"
[class.pt-0]="first"
>
<colin-work-experience-row [model]="row" />
</div>
}
</div>
</colin-card>
<div>
@for (
row of leadershipRows;
track row.jobTitle;
let first = $first;
let last = $last
) {
<div
class="border-slate-200 py-4 md:border-b"
[class.border-none]="last"
[class.pt-0]="first"
>
<colin-work-experience-row [model]="row" />
</div>
}
</div>
</colin-card>
<!-- Side Projects -->
<colin-card styleClass="bg-white" id="projects">
<h2
class="mb-4 text-center font-mono text-xl font-medium md:text-left md:text-2xl"
>
Side Projects
</h2>
<!-- Side Projects -->
<colin-card styleClass="bg-white" id="projects">
<h2
class="mb-4 text-center font-mono text-xl font-medium md:text-left md:text-2xl"
>
Side Projects
</h2>
<div>
@for (
row of sideProjectRows;
track row.name;
let first = $first;
let last = $last
) {
<div
class="border-slate-200 py-4 md:border-b"
style="text-wrap: balance"
[class.border-none]="last"
[class.pt-0]="first"
>
<colin-side-project-row [model]="row" />
</div>
}
</div>
</colin-card>
</div>
<div>
@for (
row of sideProjectRows;
track row.name;
let first = $first;
let last = $last
) {
<div
class="border-slate-200 py-4 md:border-b"
style="text-wrap: balance"
[class.border-none]="last"
[class.pt-0]="first"
>
<colin-side-project-row [model]="row" />
</div>
}
</div>
</colin-card>
`,
})
export class HomePageComponent implements OnInit {
Expand Down
57 changes: 29 additions & 28 deletions src/app/home/ui/side-project-row/side-project-row.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,43 @@ export interface SideProjectRowModel {
@Component({
selector: 'colin-side-project-row',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class: 'flex flex-col items-center justify-end gap-1 md:flex-row',
},
template: `
<div class="flex flex-col items-center justify-end gap-1 md:flex-row">
<div class="flex w-full flex-row items-center gap-3 md:w-auto md:gap-2">
<div class="flex w-full flex-row items-center gap-3 md:w-auto md:gap-2">
<a
[href]="model().url"
target="_blank"
[attr.aria-label]="'Go to ' + model().name + ' website'"
class="flex-shrink-0"
>
<img
[src]="model().logoSrc"
alt=""
height="32"
width="32"
class="h-12 w-12 rounded-lg md:h-8 md:w-8 md:rounded-md"
/>
</a>
<p class="flex flex-col md:mt-0 md:flex-row md:gap-1.5">
<a
[href]="model().url"
target="_blank"
class="nobreak -mt-0.5 whitespace-nowrap font-medium hover:underline md:m-0"
[attr.aria-label]="'Go to ' + model().name + ' website'"
class="flex-shrink-0"
>{{ model().name }}</a
>
<img
[src]="model().logoSrc"
alt=""
height="32"
width="32"
class="h-12 w-12 rounded-lg md:h-8 md:w-8 md:rounded-md"
/>
</a>
<p class="flex flex-col md:mt-0 md:flex-row md:gap-1.5">
<a
[href]="model().url"
target="_blank"
class="nobreak -mt-0.5 whitespace-nowrap font-medium hover:underline md:m-0"
[attr.aria-label]="'Go to ' + model().name + ' website'"
>{{ model().name }}</a
>
<span class="text-sm text-slate-400 md:hidden md:text-base">
{{ model().notes }}
</span>
</p>
</div>
<p
class="hidden flex-grow text-sm text-slate-500 md:block md:text-right md:text-base"
>
{{ model().notes }}
<span class="text-sm text-slate-400 md:hidden md:text-base">
{{ model().notes }}
</span>
</p>
</div>
<p
class="hidden flex-grow text-sm text-slate-500 md:block md:text-right md:text-base"
>
{{ model().notes }}
</p>
`,
})
export class SideProjectRowComponent {
Expand Down
Loading

0 comments on commit f15681b

Please sign in to comment.