Pages Component Commit

hoyingwa9798 · May 10, 2024 · e404ad4 · e404ad4
1 parent 63996be
commit e404ad4
Show file tree

Hide file tree

Showing 36 changed files with 1,637 additions and 0 deletions.
diff --git a/src/app/pages/website/about-me/about-me.component.html b/src/app/pages/website/about-me/about-me.component.html
@@ -0,0 +1,41 @@
+<div class="about-me-container d-flex flex-column justify-content-start align-items-center">
+    <h1 style="color: #7f7466; font-size: 20px;">BIOGRAPHY</h1>
+    <h1 style="color: white; font-size: 60px;">Who am I?</h1>
+    <div class="vertical-box"></div>
+    <div class="infro-container d-flex flex-row justify-content-center align-items-start ">
+        <div class="img-box right-animated">
+            <img class="group-img" src="assets/group.png">
+            <img class="intro-me-img" src="assets/intro-me.png">
+            <img class="ellipse-img" src="assets/ellipse.png">
+        </div>
+        <div class="intro-box d-flex flex-column justify-content-start align-items-start left-animated">
+            <span style="color: #dac5a7; font-weight: bold;">About me</span>
+            <span style="font-weight: bold; font-size: 30px; line-height: 2.8;">Lucas Ho's Details</span>
+            <span style="color: #7f7466; font-size: 20px;">
+                I have over 2 years of experience providing excellent Full-Stack software development services. My expertise lies in designing, developing, and deploying diverse software, with a focus on Mobile and Web Applications, Database Management Systems, E-commerce Platforms, API Integrations, and Cloud-Based Solutions.
+            </span>
+            <div class="information-box d-flex flex-column justify-content-around align-items-center">
+                <div class="information-box-s d-flex flex-row justify-content-around align-items-center">
+                    <a class="button">
+                        <span>Name</span>
+                        <span>Lucas Ho</span>
+                    </a>
+                    <a class="button">
+                        <span>Email</span>
+                        <span>hoyingwa9798&#64;gmail.com</span>
+                    </a>
+                </div>
+                <div class="information-box-s d-flex flex-row justify-content-around align-items-center">
+                    <a class="button">
+                        <span>Address</span>
+                        <span>Toronto, Canada</span>
+                    </a>
+                    <a class="button">
+                        <span>Phone No.</span>
+                        <span>+1(437)-663-9930</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/app/pages/website/about-me/about-me.component.scss b/src/app/pages/website/about-me/about-me.component.scss
@@ -0,0 +1,110 @@
+.about-me-container{
+    background-color: #000000;
+    width: 100%;
+    height: 1200px;
+    padding-top: 100px;
+}
+
+.vertical-box{
+    width: 6px;
+    height: 70px;
+    background-color: #dac5a7;
+    border-radius: 5px;
+}
+
+.infro-container{
+    width: 100%;
+    height: 100%;
+    margin-top: 100px;
+}
+
+.img-box{
+    width: 640px;
+    height: 760px;
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.group-img{
+    z-index: 0;
+    margin-top: -20px;
+    vertical-align: top;
+}
+
+.intro-me-img{
+    z-index: 2;
+    height: 712px; 
+    width: 540px;
+    margin-left: -110px;
+    box-shadow: white 0px 2px 10px 0px;
+}
+
+.ellipse-img{
+    z-index: 0;
+    vertical-align: bottom;
+    margin-bottom: -20px;
+    margin-left: -15px;
+}
+
+.intro-box{
+    color: white;
+    width: 50%;
+    height: 85%;
+}
+
+.information-box{
+    width: 100%;
+    height: 60%;
+}
+
+.information-box-s{
+    width: 100%;
+    height: 50%;
+}
+
+.button {
+  display: flex;
+  text-decoration: none; 
+  flex-direction: column;
+  justify-content: center;
+  padding-left: 20px;
+  width: 350px;
+  height: 120px;
+  border-radius: 5px;
+  color: #dac5a7;
+  font-size: 1rem;
+  letter-spacing: .15rem;
+  transition: all .5s;
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #22211e;
+    border-radius: 5px;
+    z-index: -2;
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 3px;
+    height: 100%;
+    background-color: #dac5a7;
+    transition: all .5s;
+    border-radius: 5px;
+    z-index: -1;
+  }
+  &:hover {
+    color: black;
+    &:before {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/app/pages/website/about-me/about-me.component.spec.ts b/src/app/pages/website/about-me/about-me.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutMeComponent } from './about-me.component';
+
+describe('AboutMeComponent', () => {
+  let component: AboutMeComponent;
+  let fixture: ComponentFixture<AboutMeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AboutMeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AboutMeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/website/about-me/about-me.component.ts b/src/app/pages/website/about-me/about-me.component.ts
@@ -0,0 +1,16 @@
+import { Component, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'app-about-me',
+  standalone: true,
+  imports: [],
+  templateUrl: './about-me.component.html',
+  styleUrl: './about-me.component.scss'
+})
+export class AboutMeComponent {
+  constructor(private elementRef: ElementRef) {}
+
+  scrollTo() {
+    this.elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}
diff --git a/src/app/pages/website/back-portfolio/back-portfolio.component.html b/src/app/pages/website/back-portfolio/back-portfolio.component.html
@@ -0,0 +1,48 @@
+<div>
+    <div class="portfolio-container d-flex flex-row justify-content-center align-items-center">
+        <div class="galleria-container right-animated">
+            <img src="assets/sap-word-cloud.png" style="width: 360px; height: 275px;" />
+        </div>
+        <div class="detail-container left-animated">
+            <p class="portfolio-type">Backend & APIs</p>
+            <P class="portfolio-name">E-Commerce System </P>
+            <p class="portfolio-stack-detail">Java / Spring Framework / Oracle Database / MSSQL / Groovy / Maven / JMeter / docker / Jira / Azure / Google Cloud's Apigee API Management</p>
+            <p class="description">
+                Proficient in developing large-scale, cloud-based E-Commerce System Solutions using SAP Hybris and the Java Spring framework, resulting in improved system stability, reliability, and optimal user experience.
+                <br>Adept at evaluating system performance through JMeter testing<br>
+                <br>Utilized Git for code versioning and collaboration, fostering efficient project development, maintenance, and teamwork.<br>
+                <br>Created Docker images for Continuous Integration and Continuous Deployment (CI/CD) pipelines<br>
+                <br>Implemented Google Cloud's Apigee API Management as a middleware and proxy for RESTful APIs<br>
+            </p>
+        </div>
+    </div>
+
+    <div class="portfolio-container d-flex flex-row-reverse justify-content-center align-items-center">
+        <div class="galleria-container right-animated">
+            <img src="assets/bank-and-financial-api-word-cloud.png" style="width: 360px; height: 275px;" />       
+        </div>
+        <div class="detail-container left-animated">
+            <p class="portfolio-type">Backend & APIs</p>
+            <P class="portfolio-name">Bank and Financial API</P>
+            <p class="portfolio-stack-detail">Java / Spring Boot Framework / Gradle / Postman / RSA</p>
+            <p class="description"> 
+                <br>Developed a suite of RESTful APIs using the Spring Boot framework. <br>
+                <br> These APIs are responsible for critical financial operations, including secure authentication mechanisms like login, one-time password (OTP), and biometric authentication. <br>
+                <br>Enable account management functionalities such as creating accounts and changing passwords, fixed deposit, money transfer, foreign currency exchange, as well as facilitating the buying and selling of Exchange-Traded Funds (ETFs).<br>
+                <br>The APIs were built with a strong emphasis on security, scalability, and adherence to RESTful architecture principles.<br></p>
+        </div>
+    </div>
+
+    <div class="portfolio-container d-flex flex-row justify-content-start align-items-center">
+        <div class="galleria-container right-animated">
+            <img src="assets/erp-word-cloud.png" style="width: 400px; height: 400px;" />
+        </div>
+        <div class="detail-container left-animated">
+            <p class="portfolio-type">Backend & APIs</p>
+            <P class="portfolio-name">ERP solution for Printing industry</P>
+            <p class="portfolio-stack-detail">Kotlin / Gradle / Oracle / SQL Script / ERP / Programmable Logic Controller (PLC)</p>
+            <p class="description">For monitoring the productivity of a printing company by tracking the status of numerous printers and print jobs. 
+                These AIPs help gather data on printer uptime, job completion rates, print volumes, and error rates. </p>
+        </div>
+    </div>
+</div>
diff --git a/src/app/pages/website/back-portfolio/back-portfolio.component.scss b/src/app/pages/website/back-portfolio/back-portfolio.component.scss
@@ -0,0 +1,34 @@
+.galleria-container{
+    width: 640px;
+    height: 640px; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.portfolio-container{
+    width: 100%;
+    height: 600px;
+    margin-bottom: 10rem;
+    align-items: center;
+    .detail-container{
+        height: 100%;
+        width: 560px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .portfolio-type{
+            color: #dac5a7;
+        }
+        .portfolio-name{
+            color: white;
+            font-size: 3rem;
+            font-weight: bold;
+        }
+        .description{
+            color: #7f7466;
+        }
+    }
+}
diff --git a/src/app/pages/website/back-portfolio/back-portfolio.component.spec.ts b/src/app/pages/website/back-portfolio/back-portfolio.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackPortfolioComponent } from './back-portfolio.component';
+
+describe('BackPortfolioComponent', () => {
+  let component: BackPortfolioComponent;
+  let fixture: ComponentFixture<BackPortfolioComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BackPortfolioComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BackPortfolioComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/website/back-portfolio/back-portfolio.component.ts b/src/app/pages/website/back-portfolio/back-portfolio.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-back-portfolio',
+  standalone: true,
+  imports: [],
+  templateUrl: './back-portfolio.component.html',
+  styleUrl: './back-portfolio.component.scss'
+})
+export class BackPortfolioComponent {
+
+}
diff --git a/src/app/pages/website/cloud-portfolio/cloud-portfolio.component.html b/src/app/pages/website/cloud-portfolio/cloud-portfolio.component.html
@@ -0,0 +1,16 @@
+<div>
+    <div class="portfolio-container d-flex flex-row justify-content-center align-items-center">
+        <div class="galleria-container right-animated">
+            <img src="assets/potato-disease.png" style="width: 400px; height: 360px;" />
+        </div>
+        <div class="detail-container left-animated">
+            <p class="portfolio-type">Cloud</p>
+            <P class="portfolio-name">Potato Disease Detection</P>
+            <p class="portfolio-stack-detail">Python / FastAPI / Jupyter Notebook / NumPy / TensorFlow / Keras / Google Cloud Platform / Postman</p>
+            <p class="description">
+                <br>Created a Convolutional Neural Network (CNN) model capable of identifying early blight and late blight diseases in images.<br>
+                <br>Offered and hosted the API solution that provides predictions on whether a potato has early blight or late blight disease on the Google Cloud Platform via Cloud Functions.<br>
+            </p>
+        </div>
+    </div>
+</div>
diff --git a/src/app/pages/website/cloud-portfolio/cloud-portfolio.component.scss b/src/app/pages/website/cloud-portfolio/cloud-portfolio.component.scss
@@ -0,0 +1,49 @@
+::ng-deep .p-galleria-indicators .p-galleria-indicator button {
+    /* ::ng-deep is used to penetrate the Shadow DOM and target the internal styles of the PrimeNG Carousel component. */
+    /*.p-carousel-indicators .p-carousel-indicator button targets the buttons representing the navigation dots.*/
+    /*.p-carousel-indicator.p-highlight button targets the button representing the active navigation dot.*/
+    width: 15px; /* Adjust the width of the dots */
+    height: 15px; /* Adjust the height of the dots */
+    border-radius: 50%; /* Make the dots circular */
+    background-color: #ccc; /* Set the background color for inactive dots */
+  }
+
+  /* Style for the active navigation dot */
+::ng-deep .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #dac5a7; /* Set the background color for the active dot */
+}
+
+.galleria-container{
+    width: 640px;
+    height: 640px; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.portfolio-container{
+    width: 100%;
+    height: 600px;
+    margin-bottom: 10rem;
+    align-items: center;
+    .detail-container{
+        height: 100%;
+        width: 560px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .portfolio-type{
+            color: #dac5a7;
+        }
+        .portfolio-name{
+            color: white;
+            font-size: 3rem;
+            font-weight: bold;
+        }
+        .description{
+            color: #7f7466;
+        }
+    }
+}