Skip to content

Commit

Permalink
style: dynamic background
Browse files Browse the repository at this point in the history
  • Loading branch information
JohannThapa committed Nov 16, 2024
1 parent a369685 commit bb6e01e
Show file tree
Hide file tree
Showing 12 changed files with 1,161 additions and 43 deletions.
12 changes: 11 additions & 1 deletion src/app/core/services/theme.service.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
import { Injectable, signal } from '@angular/core';
import { Theme } from '../models/theme.model';
import { effect } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';


@Injectable({
providedIn: 'root',
})
export class ThemeService {
public theme = signal<Theme>({ mode: 'dark', color: 'base' });

private themeSubject: BehaviorSubject<Theme> = new BehaviorSubject<Theme>({
mode: 'dark',
color: 'base',
});
public theme$: Observable<Theme> = this.themeSubject.asObservable();

constructor() {
this.loadTheme();
effect(() => {
Expand All @@ -23,7 +31,9 @@ export class ThemeService {
}

private setTheme() {
localStorage.setItem('theme', JSON.stringify(this.theme()));
const theme: Theme = this.theme();
this.themeSubject.next(theme);
localStorage.setItem('theme', JSON.stringify(theme));
this.setThemeClass();
}

Expand Down
83 changes: 43 additions & 40 deletions src/app/modules/dashboard/pages/index/index.component.html
Original file line number Diff line number Diff line change
@@ -1,47 +1,50 @@
<div tmr-bg-a1 class="p-12">
<!-- Header -->
<app-idx-header></app-idx-header>

<div class="grid grid-cols-1 lg:grid-cols-8 pt-12 lg:pt-24 gap-2 relative z-10">
<div class="col-start-2 col-span-6">
<div class="flex flex-col-reverse lg:flex-row">
<div class="lg:basis-grow">
<!-- Introduction -->
<div class="flex justify-center items-center">
<div class="grid grid-rows-3 grid-flow-col">
<div class="col-span-2">
<div
tmr-text-a1
text="Hi, I'm Johann,"
[highlightIndex]="7"
fontSize="text-4xl md:text-5xl lg:text-[70px]"
class="text-center"></div>
</div>
<div class="row-span-2 col-span-2">
<div
tmr-text-a2
[stacks]="techStacks"
[skills]="skillSet"
class="text-base md:text-lg lg:text-xl"></div>
<div tmr-bg-l1 dark="/assets/bg/everest.svg" light="/assets/bg/top.jpg" >
<div tmr-bg-a1 class="p-12">
<!-- Header -->
<app-idx-header></app-idx-header>

<div class="grid grid-cols-1 lg:grid-cols-8 pt-12 lg:pt-24 gap-2 relative z-10">
<div class="col-start-2 col-span-6">
<div class="flex flex-col-reverse lg:flex-row">
<div class="lg:basis-grow">
<!-- Introduction -->
<div class="flex justify-center items-center">
<div class="grid grid-rows-3 grid-flow-col">
<div class="col-span-2">
<div
tmr-text-a1
text="Hi, I'm Johann,"
[highlightIndex]="7"
fontSize="text-4xl md:text-5xl lg:text-[70px]"
class="text-center"></div>
</div>
<div class="row-span-2 col-span-2">
<div
tmr-text-a2
[stacks]="techStacks"
[skills]="skillSet"
class="text-base md:text-lg lg:text-xl"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Image Card -->
<div
tmr-bubble-card
[width]="300"
[height]="300"
customClass="flex-none w-full h-[300px] md:h-[400px] lg:w-[300px]">
<tmr-custom-img
src="./assets/images/rupak.png"
alt="Sample Image"
[width]="600"
[height]="400"
[fill]="false"
[priority]="true"
loading="eager"
customClass="custom-image-class"></tmr-custom-img>
<!-- Image Card -->
<div
tmr-bubble-card
[width]="300"
[height]="300"
customClass="flex-none w-full h-[300px] md:h-[400px] lg:w-[300px]">
<tmr-custom-img
src="./assets/images/rupak.png"
alt="Sample Image"
[width]="600"
[height]="400"
[fill]="false"
[priority]="true"
loading="eager"
customClass="custom-image-class"></tmr-custom-img>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/app/modules/dashboard/pages/index/index.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { IdxHeaderComponent } from '../../components/index/idx-header/idx-header.component';
import { TextA1Component } from 'src/app/shared/components/texts/text-a1/text-a1.component';
import { BgA1Component } from 'src/app/shared/components/backgrounds/bg-a1/bg-a1.component';
import { BgL1Component } from 'src/app/shared/components/backgrounds/bg-l1/bg-l1.component';
import { TextA2Component } from 'src/app/shared/components/texts/text-a2/text-a2.component';
import { TECH_SKILLS, TECH_STACKS } from 'src/app/core/constants/tech-stacks';
import { CommonModule } from '@angular/common';
Expand All @@ -14,6 +15,7 @@ import { CustomImgComponent } from 'src/app/shared/components/images/custom-img/
imports: [
CommonModule,
BgA1Component,
BgL1Component,
IdxHeaderComponent,
TextA1Component,
TextA2Component,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { ThemeService } from 'src/app/core/services/theme.service';
styleUrls: ['./toggle-menu.component.scss'],
})
export class ToggleMenuComponent implements OnInit {
public currentMode: string;
public currentMode: string;

constructor(public themeService: ThemeService) {
this.currentMode = this.themeService.theme().mode;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
transform: rotate(360deg);
}
}

.card {
position: absolute;
z-index: 10;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { AfterViewInit, Component } from '@angular/core';
standalone: true,
imports: [],
template: `
<div class="absolute inset-0 overflow-hidden bg-card z-0">
<div class="absolute inset-0 overflow-hidden bg-transparent z-0">
<svg xmlns="http://www.w3.org/2000/svg" class="absolute inset-0 w-full h-full opacity-30 mix-blend-soft-light">
<filter id="noiseFilterBg">
<feTurbulence type="fractalNoise" baseFrequency="0.6" stitchTiles="stitch" />
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
:host {
display: block;
min-height: 100%;
background-blend-mode: luminosity;
width: 100%;
transition: background 0.3s ease;
}
48 changes: 48 additions & 0 deletions src/app/shared/components/backgrounds/bg-l1/bg-l1.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Component, Input, HostBinding, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { Theme } from 'src/app/core/models/theme.model';
import { ThemeService } from 'src/app/core/services/theme.service';

@Component({
selector: '[tmr-bg-l1]',
standalone: true,
imports: [],
template: `<div class="relative w-full -mt-4">
<ng-content></ng-content>
</div> `,
styleUrl: './bg-l1.component.scss',
})
export class BgL1Component implements OnInit, OnDestroy {
@Input() light: string = `/assets/bg/top.jpg`;
@Input() dark: string = `/assets/bg/everest.svg`;
public imageUrl: string = '';
// 'https://images.unsplash.com/photo-1439723680580-bfd9d28ef9b6?crop=entropy&fit=crop&fm=jpg&h=950&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925';

@HostBinding('class') hostClass = '';
@HostBinding('style.background') backgroundStyle = '';
private themeSubscription!: Subscription;

constructor(public themeService: ThemeService) {}

ngOnInit(): void {
this.themeSubscription = this.themeService.theme$.subscribe((theme: Theme) => {
this.updateBackground(theme.mode);
});
}
private updateBackground(mode: string): void {
const gradient =
mode === 'dark'
? 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7))'
: 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))';

const position = '50% 50% no-repeat';
this.imageUrl = mode === 'dark' ? this.dark : this.light;
this.backgroundStyle = `${gradient}, black url('${this.imageUrl}') ${position}`;
}

ngOnDestroy(): void {
if (this.themeSubscription) {
this.themeSubscription.unsubscribe();
}
}
}
Binary file added src/assets/bg/everest-cover.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/assets/bg/everest.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit bb6e01e

Please sign in to comment.