small style changes

axherrm · Jan 15, 2024 · 32fe234 · 32fe234
1 parent 092cadc
commit 32fe234
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 85 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -31,7 +31,7 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
     </div>
   </div>
 
-  <div style="text-align: center">
+  <div style="text-align: center; display: flex; flex-direction: column; align-items: center">
     <heading-card #education_card [heading]="dataService.languagePack.education" type="light" styleClass="alarm-clock-animated"></heading-card>
     <p-timeline id="eduction-tl" [value]="dataService.education" align="alternate" [style]="{'width': '70%', 'display': 'inline-block'}">
       <ng-template pTemplate="marker">
@@ -66,5 +66,7 @@ <h2 id="main-subheading" [innerHTML]="dataService.languagePack.subheading"></h2>
     <div style="width: var(--main-content-width); margin: 0 var(--main-content-side-margin); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1rem">
       <skills-card class="alarm-clock-animated" *ngFor="let skillCategory of dataService.skillCategories" [category]="skillCategory"></skills-card>
     </div>
+
+    <div class="spacer" style="width: 100vw; height: 50vh"></div>
   </div>
 </main>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -36,7 +36,7 @@
     width: 100%;
     height: 0.5vh;
     transform-origin: 0 50%;
-    background-color: wheat;
+    background-image: linear-gradient(to right, #a445b2, #fa4299);
   }
 }
 
@@ -55,18 +55,16 @@
   }
 
   .timeline-date-light {
-    background: var(--background-light);
-    border: var(--border-dark);
+    background: white;
     color: #4B5563;
   }
 
   .timeline-date-dark {
-    background: var(--background-dark);
-    border: var(--border-light);
+    background: rgb(75,75,75);
   }
 
   .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) {
-    .p-timeline-event-content timeline-card p-card div {
+    .p-timeline-event-content > timeline-card > div {
       transform-origin: right top;
     }
     .p-timeline-event-opposite p-badge span {
@@ -75,7 +73,7 @@
   }
 
   .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n + 1) {
-    .p-timeline-event-content timeline-card p-card div {
+    .p-timeline-event-content > timeline-card > div {
       transform-origin: left top;
     }
     .p-timeline-event-opposite p-badge span {

diff --git a/src/app/components/heading-card/heading-card.component.html b/src/app/components/heading-card/heading-card.component.html
@@ -1,5 +1,3 @@
-<p-card [styleClass]="cardStyleClass">
-  <ng-template pTemplate="content">
-    <h1 style="margin: 0">{{ heading }}</h1>
-  </ng-template>
-</p-card>
+<div [class]="cardStyleClass">
+  <h1 style="margin: 0">{{ heading }}</h1>
+</div>
diff --git a/src/app/components/heading-card/heading-card.component.scss b/src/app/components/heading-card/heading-card.component.scss
@@ -1,28 +1,32 @@
-:host ::ng-deep {
-  .p-card-content {
-    padding: 0;
-  }
+:host {
+  width: 80%;
+  margin-bottom: 5vh;
+  display: block;
+}
 
-  .heading-card {
-    width: 80%;
-    display: inline-block;
-    margin-bottom: 5vh;
-  }
+.card {
+  border-radius: 20px;
+  width: 100%;
+  padding: 1.25rem;
+  display: inline-block;
+  text-align: center;
+}
 
-  .heading-card-light {
-    @extend .heading-card;
-  }
+.heading-card-light {
+  @extend .card;
+  background: white;
+  color: #4b5563;
+}
 
-  .heading-card-dark {
-    @extend .heading-card;
-    background: rgb(75,75,75);
-    color: white;
-  }
+.heading-card-dark {
+  @extend .card;
+  background: rgb(75,75,75);
+  color: white;
+}
 
-  .heading-card-3 {
-    @extend .heading-card;
-    background: #262626;
-    color: wheat;
-    border-radius: 20px;
-  }
+.heading-card-3 {
+  @extend .card;
+  background: #262626;
+  color: white;
+  border-radius: 20px;
 }
diff --git a/src/app/components/heading-card/heading-card.component.ts b/src/app/components/heading-card/heading-card.component.ts
@@ -1,12 +1,9 @@
 import {Component, Input} from '@angular/core';
-import {CardModule} from "primeng/card";
 
 @Component({
   selector: 'heading-card',
   standalone: true,
-  imports: [
-    CardModule
-  ],
+  imports: [],
   templateUrl: './heading-card.component.html',
   styleUrl: './heading-card.component.scss'
 })

diff --git a/src/app/components/skill-card/skill-card.component.html b/src/app/components/skill-card/skill-card.component.html
@@ -4,8 +4,18 @@
       <circle-progress [value]="rating" max="100" text-format="percent"></circle-progress>
       <div class="skill-title">{{ name }}</div>
     </div>
-    <div class="card-content back" style="transform: rotateY(-180deg);">
+    <div class="card-content back">
       <span [innerHTML]="description"></span>
     </div>
   </div>
 </div>
+
+<!-- TODO Add gradient to circle: https://github.com/tigrr/circle-progress/issues/8 -->
+
+<!--    <svg>-->
+<!--      &lt;!&ndash; Gradient (just need to insert in the <svg> tag. The ID must be unique) &ndash;&gt;-->
+<!--      <linearGradient id="linear-gradient">-->
+<!--        <stop offset="0%" stop-color="gold"/>-->
+<!--        <stop offset="100%" stop-color="teal"/>-->
+<!--      </linearGradient>-->
+<!--    </svg>-->
diff --git a/src/app/components/skill-card/skill-card.component.scss b/src/app/components/skill-card/skill-card.component.scss
@@ -30,7 +30,14 @@
 
 
   &:hover {
-    transform: scale(1.2);
+    width: 13.2rem;
+    height: 20.4rem;
+    margin: -1.7rem -1.1rem;
+
+    .skill-title {
+      margin: 2.04rem 0 0;
+      font-size: 1.8rem;
+    }
 
     circle-progress::part(circle) {
       stroke-width: 0.2rem;
@@ -54,7 +61,7 @@
   width: 100%;
   position: absolute;
   background: #000000;
-  border: 2px solid wheat;
+  border: 4px solid #262626;
   border-radius: 1.5rem;
   top: 0;
   left: 0;
@@ -63,6 +70,7 @@
   transition: all 0.3s ease-in-out;
 
   .skill-title {
+    transition: all 0.3s ease-in-out;
     text-align: center;
     margin: 1.7rem 0 0;
     font-size: 1.5rem;
@@ -77,6 +85,7 @@
     font-size: 0.8rem;
     text-align: justify;
     padding: 0.67rem;
+    transform: rotateY(-180deg);
     span {
       height: 100%;
       width: 100%;

diff --git a/src/app/components/skills-card/skills-card.component.html b/src/app/components/skills-card/skills-card.component.html
@@ -11,14 +11,3 @@ <h2 #title class="category-title">{{ category.name }}</h2>
     <skill-card #skills *ngFor="let skill of category.skills" [name]="skill.name" [description]="skill.text" [rating]="skill.rating"></skill-card>
   </div>
 </div>
-
-
-<!-- Add gradient: https://github.com/tigrr/circle-progress/issues/8 -->
-
-<!--    <svg>-->
-<!--      &lt;!&ndash; Gradient (just need to insert in the <svg> tag. The ID must be unique) &ndash;&gt;-->
-<!--      <linearGradient id="linear-gradient">-->
-<!--        <stop offset="0%" stop-color="gold"/>-->
-<!--        <stop offset="100%" stop-color="teal"/>-->
-<!--      </linearGradient>-->
-<!--    </svg>-->
diff --git a/src/app/components/timeline-card/timeline-card.component.html b/src/app/components/timeline-card/timeline-card.component.html
@@ -1,8 +1,9 @@
-<p-card [header]="heading" [subheader]="subheading"
-        [styleClass]="cardStyleClass">
-  <div [innerHTML]="content" style="margin-top: 1rem"></div>
-  <div *ngIf="bulletPoints" style="margin-top: 1rem">
+<div [class]="cardStyleClass">
+  <h3 class="heading" [innerHTML]="heading"></h3>
+  <h4 class="subheading" [innerHTML]="subheading"></h4>
+  <div class="content" [innerHTML]="content"></div>
+  <div class="bullet-point-container" *ngIf="bulletPoints">
     <p-badge *ngFor="let bulletPoint of bulletPoints" [value]="bulletPoint"
              [style]="{'margin': '0 0.3vh', 'background': 'rgba(75,85,93,0.7)'}"></p-badge>
   </div>
-</p-card>
+</div>
diff --git a/src/app/components/timeline-card/timeline-card.component.scss b/src/app/components/timeline-card/timeline-card.component.scss
@@ -1,30 +1,42 @@
-:host ::ng-deep {
-  .p-card-content {
-    padding: 0;
-  }
+.card {
+  margin-bottom: 3vh;
+  border-radius: 20px;
+  padding: 1.25rem;
+}
 
-  .timeline-card {
-    margin-bottom: 3vh;
+.timeline-card-light {
+  @extend .card;
+  background: white;
+  color: #4b5563;
+  .subheading {
+    color: #6b7280;
   }
+}
 
-  .timeline-card-light {
-    @extend .timeline-card;
-    border: var(--border-dark);
-    background: var(--background-light);
+.timeline-card-dark {
+  @extend .card;
+  background: rgb(75,75,75);
+  color: #dcdcdc;
+  .subheading {
+    color: #dedede;
   }
+}
 
-  .timeline-card-dark {
-    @extend .timeline-card;
-    border: var(--border-light);
-    background: var(--background-dark);
-    color: #dcdcdc;
+.heading {
+  margin: 0 0 .5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
 
-    & > div.p-card-body > div.p-card-title {
-      color: white;
-    }
+.subheading {
+  font-weight: 400;
+  margin: 0 0 .5rem;
+}
 
-    & > div.p-card-body > div.p-card-subtitle {
-      color: #ffffff;
-    }
-  }
+.content {
+  margin-top: 1rem;
+}
+
+.bullet-point-container {
+  margin-top: 1rem;
 }
diff --git a/src/styles.scss b/src/styles.scss
@@ -37,10 +37,10 @@ html {
   .text-color-grey-medium-1 { color: var(--color-grey-medium-1); }
   .color-white-darker { color: var(--color-white-darker); }
 
-  --border-light: 1px solid #7a7a7a;
-  --border-dark: 1px solid #232323;
-  --background-light: rgba(255, 255, 255, 0.8);
-  --background-dark: rgba(75, 75, 75, 0.9);
+  //--border-light: 1px solid #7a7a7a;
+  //--border-dark: 1px solid #232323;
+  //--background-light: rgba(255, 255, 255, 0.8);
+  //--background-dark: rgba(75, 75, 75, 0.9);
 
   @media (max-width: 1000px) {
     --main-content-width: 100vw;