Skip to content

Commit

Permalink
Migrate angular flex layout to css
Browse files Browse the repository at this point in the history
  • Loading branch information
tka-andrew committed Jul 29, 2023
1 parent 8b613c1 commit 6d7fcc3
Show file tree
Hide file tree
Showing 59 changed files with 5,754 additions and 5,721 deletions.
8 changes: 0 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~12.2.0",
"@angular/material": "^12.2.0",
"@angular/platform-browser": "~12.2.0",
Expand Down
17 changes: 8 additions & 9 deletions src/app/main-contents/achievements/achievements.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@

<div class="flexContainer" fxLayout="column" style="height:100%; background-color: lightblue;" style="background-image: url('assets/images/lubo-minar-B-gb_8fgmz8-unsplash.jpeg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; overflow: auto;" appBackgroundImageLoaded (imageLoaded)="loaded()">
<!-- <div [ngStyle.lt-md]="{visibility: 'hidden'}" class="vertical"></div> -->
<div class="flexContainer" style="background-image: url('assets/images/lubo-minar-B-gb_8fgmz8-unsplash.jpeg'); background-attachment: fixed; background-size: 100% 100%;" appBackgroundImageLoaded (imageLoaded)="loaded()">
<mgl-timeline style="height:100%; padding: 30px 0px 0px" [alternate]="true" side="right" [mobileWidthThreshold]=959>
<mgl-timeline-entry>
<mgl-timeline-entry-header id="entry0"><h3>My first time with robotics</h3></mgl-timeline-entry-header>
Expand All @@ -21,7 +20,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2016</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2016</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
<mgl-timeline-entry>
<mgl-timeline-entry-header><h3>RoboCup Asia Pacific 2017<br>RoboCup@Home Education League - Champion</h3></mgl-timeline-entry-header>
Expand All @@ -36,7 +35,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2017</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2017</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
<mgl-timeline-entry>
<mgl-timeline-entry-header><h3>President of UTM Airost Team</h3></mgl-timeline-entry-header>
Expand All @@ -51,7 +50,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2018</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2018</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
<mgl-timeline-entry>
<mgl-timeline-entry-header><h3>The Great Lab Grand Design Challenge<br>Silver Award</h3></mgl-timeline-entry-header>
Expand All @@ -63,7 +62,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2018</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2018</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
<mgl-timeline-entry>
<mgl-timeline-entry-header><h3>NI Autonomous Robotics Competition 2019<br>Champion</h3></mgl-timeline-entry-header>
Expand All @@ -81,7 +80,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2019</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2019</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
<mgl-timeline-entry>
<mgl-timeline-entry-header><h3>Agile Project Management Training</h3></mgl-timeline-entry-header>
Expand All @@ -93,7 +92,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2021</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2021</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
<mgl-timeline-entry>
<mgl-timeline-entry-header><h3>Udacity Nanodegree<br>Robotics Software Engineer</h3></mgl-timeline-entry-header>
Expand All @@ -105,7 +104,7 @@
</swiper>
</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
<mgl-timeline-entry-side style="color: white;"><h2>2022</h2></mgl-timeline-entry-side>
<mgl-timeline-entry-side><h2>2022</h2></mgl-timeline-entry-side>
</mgl-timeline-entry>
</mgl-timeline>
</div>
14 changes: 9 additions & 5 deletions src/app/main-contents/achievements/achievements.component.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@

@import "~swiper/css";
@import "~swiper/css/navigation";

mgl-timeline-entry-header {
cursor: pointer;
}

mgl-timeline-entry-side {
color: white;
}

.swiper {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -40,10 +48,6 @@
height: 500px;
}

mgl-timeline-entry-header {
cursor: pointer;
}

.vertical {
border-left: 12px solid rgb(105, 174, 238);
height: calc(100% - 78px);
Expand Down
22 changes: 11 additions & 11 deletions src/app/main-contents/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<div class="flexContainer" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="10px" style="background-image: url('assets/images/scott-webb-OxHPDs4WV8Y-unsplash.jpeg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; overflow: auto;" appBackgroundImageLoaded (imageLoaded)="loaded()">
<div fxLayout.lt-md="column" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px" fxLayoutGap.lt-md="5px">
<div fxLayout="column" fxLayout.lt-md="row" fxLayoutAlign="center center" fxLayoutGap="40px">
<a style="text-decoration: none; color:black" href="mailto: [email protected]" rel="noopener noreferrer">
<div class="flexContainer align-justify-center" style="min-width: fit-content; background-image: url('assets/images/scott-webb-OxHPDs4WV8Y-unsplash.jpeg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;" appBackgroundImageLoaded (imageLoaded)="loaded()">
<div class="home-div flex-row align-justify-center">
<div class="flex-col icon-div" style="gap: 40px">
<a style="color:black" href="mailto: [email protected]" rel="noopener noreferrer">
<fa-icon [icon]="faEnvelope" size="3x"></fa-icon>
</a>
<a style="text-decoration: none; color:black" href="https://www.linkedin.com/in/kui-an-andrew-tan/" target="_blank" rel="noopener noreferrer">
<a style="color:black" href="https://www.linkedin.com/in/kui-an-andrew-tan/" target="_blank" rel="noopener noreferrer">
<fa-icon [icon]="faLinkedin" size="3x"></fa-icon>
</a>
<a style="text-decoration: none; color:black" href="https://github.com/TKA-Andrew" target="_blank" rel="noopener noreferrer">
<a style="color:black" href="https://github.com/TKA-Andrew" target="_blank" rel="noopener noreferrer">
<fa-icon [icon]="faGithub" size="3x"></fa-icon>
</a>
</div>
<img [ngStyle.lt-md]="{width: '200px'}" style="border-radius: 40%; width: 300px; height: auto;" src="assets/images/myNewProfilePic.jpg">
<div fxLayout="column" fxLayoutAlign="center center">
<p style="color: black; font-size: 50px; align-items: center; margin:0px; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '30px'}">About Me</p>
<p style="color: black; font-size: 22px; align-self: center; text-align: justify; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '15px'}">
<img id="profile-img" src="assets/images/myNewProfilePic.jpg">
<div class="flex-col align-justify-center">
<p id="about-me-title">About Me</p>
<p id="about-me-description">
A robotics enthusiast with education background in Mechatronics and working experience as Software Engineer in a Robotics Company.

<br><br>Looking forward to keep improving myself and becoming a top-tier Robotics Software Engineer.
</p>
</div>
</div>
</div>
48 changes: 48 additions & 0 deletions src/app/main-contents/home/home.component.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,51 @@
fa-icon:hover {
color: rgb(30, 30, 255)
}

.home-div {
gap: 20px;
}

#profile-img {
width: 300px;
border-radius: 40%;
}

#about-me-title {
font-size: 50px;
align-items: center;
margin: 0px;
max-width: 400px;
}

#about-me-description {
font-size: 22px;
align-self: center;
text-align: justify;
max-width: 400px;
margin-left: 10px;
margin-right: 10px;
}

@media screen and (max-width: 959px) {
.home-div {
flex-direction: column;
gap: 5px;
}

.icon-div {
flex-direction: row;
}

#profile-img {
width: 200px;
}

#about-me-title {
font-size: 30px;
}

#about-me-description {
font-size: 15px;
}
}
2 changes: 1 addition & 1 deletion src/app/main-contents/main-contents.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="flexContainer">
<mat-drawer-container class="flexContainer" hasBackdrop="true">
<mat-drawer id="sideMenu" #sideMenu mode="over" hasBackdrop="true" position="end" style="background-color: rgb(61, 61, 61);">
<div fxLayout="column" style="z-index: 3;">
<div class="flex-col" style="z-index: 3;">
<button mat-button class="menuItem" (click)="toggleSideNav()" [routerLink]="['home']" routerLinkActive="sideNavRouterLinkActive">Home</button>
<button mat-button class="menuItem" (click)="toggleSideNav()" [routerLink]="['resume']" routerLinkActive="sideNavRouterLinkActive">Resume</button>
<button mat-button class="menuItem" (click)="toggleSideNav()" [routerLink]="['projects']" routerLinkActive="sideNavRouterLinkActive">Projects</button>
Expand Down
2 changes: 0 additions & 2 deletions src/app/main-contents/main-contents.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { MainContentsComponent } from './main-contents.component';
import { TopbarComponent } from './topbar/topbar.component';
import { RouterModule } from '@angular/router';
import { MatToolbarModule } from '@angular/material/toolbar';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
Expand Down Expand Up @@ -40,7 +39,6 @@ import { ProjectsComponent } from './projects/projects.component';
imports: [
CommonModule,
MainContentsRoutingModule,
FlexLayoutModule,
RouterModule,
MatToolbarModule,
MatButtonModule,
Expand Down
34 changes: 17 additions & 17 deletions src/app/main-contents/projects/projects.component.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="flexContainer" fxLayout="column" fxLayoutAlign="center center" style="background-color: rgb(110, 110, 110)">
<div class="flexContainer" fxLayout="column" fxLayoutAlign="center center" style="background-color: whitesmoke">
<div class="project-container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="center center" fxFlexAlign="stretch">
<div fxLayout="column" fxFlex='60' fxFlex.lt-md='80'>
<div class="flexContainer align-justify-center" style="background-color: rgb(110, 110, 110)">
<div class="flexContainer align-justify-center" style="background-color: whitesmoke">
<div class="project-container">
<div class="project-slide-section">
<div class="slideshow-container">
<div class="slide--path-finding-visualizer fade">
<img src="assets/images/Projects/path-finding-visualizer/demo_bfs.jpeg" style="width:100%">
Expand All @@ -27,20 +27,20 @@
</ng-container>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxFlex='40' fxFlex.lt-md='80'>
<p style="color: black; font-size: 50px; align-items: center; margin:0px; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '30px'}">
<div class="project-text-section" >
<p class="project-title">
<a href="https://github.com/tka-andrew/PathFindingVisualizer_CPP" target="_blank" rel="noopener noreferrer">Path Finding Visualizer</a>
<br><span class="CLI-font" style="text-align: left; font-size: 20px">C++ / wxWidgets / CMake / Docker</span>
</p>
<p style="color: black; font-size: 22px; align-self: center; text-align: justify; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '15px'}">
<p class="project-description">
A desktop application developed using wxWidgets to visualize some path finding algorithms written in C++, such as Dijkstra, BFS, A* Search,
Greedy Best First Search & Bi-directional BFS.
</p>
</div>
</div>

<div class="project-container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="center center" fxFlexAlign="stretch">
<div fxLayout="column" fxFlex='60' fxFlex.lt-md='100'>
<div class="project-container">
<div class="project-slide-section">
<div class="slideshow-container">
<div class="slide--path-planning-visualizer fade">
<img src="assets/images/Projects/path-planning-visualizer/step1.jpeg" style="width:100%">
Expand Down Expand Up @@ -69,20 +69,20 @@
</ng-container>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxFlex='40' fxFlex.lt-md='100'>
<p style="color: black; font-size: 50px; align-items: center; margin:0px; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '30px'}">
<div class="project-text-section">
<p class="project-title">
<a href="https://github.com/tka-andrew/path-planning-visualizer" target="_blank" rel="noopener noreferrer">Path Planning Visualizer</a>
<br><span class="CLI-font" style="text-align: left; font-size: 20px">C++ / wxWidgets / OpenCV / Docker</span>
</p>
<p style="color: black; font-size: 22px; align-self: center; text-align: justify; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '15px'}">
<p class="project-description">
A desktop application developed using wxWidgets to visualize the path planning process, starting from defining environment geometry and robot geometry,
till generating a path using the graph generated based on the type of decomposition method selected.
</p>
</div>
</div>

<div class="project-container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="center center" fxFlexAlign="stretch">
<div fxLayout="column" fxFlex='60' fxFlex.lt-md='100'>
<div class="project-container">
<div class="project-slide-section">
<div class="slideshow-container">
<div class="slide--image-based-sudoku-solver fade">
<img src="assets/images/Projects/image-based-sudoku-solver/demo.jpeg" style="width:100%">
Expand All @@ -96,12 +96,12 @@
</ng-container>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="center center" fxFlex='40' fxFlex.lt-md='100'>
<p style="color: black; font-size: 50px; align-items: center; margin:0px; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '30px'}">
<div class="project-text-section">
<p class="project-title">
<a href="https://github.com/tka-andrew/image-based-sudoku-solver" target="_blank" rel="noopener noreferrer">Image-based Sudoku Solver</a>
<br><span class="CLI-font" style="text-align: left; font-size: 20px">Python / OpenCV / Docker</span>
</p>
<p style="color: black; font-size: 22px; align-self: center; text-align: justify; max-width: 400px; margin-left: 10px; margin-right: 10px;" [ngStyle.lt-md]="{'font-size': '15px'}">
<p class="project-description">
A project that uses some image processing techniques to retrieve the sudoku from an input image, transform it into a 2D vector, and then solve it using the backtracking algorithm.
</p>
</div>
Expand Down
50 changes: 50 additions & 0 deletions src/app/main-contents/projects/projects.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
.project-container {
padding: 10px;
margin: 10px;
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
}

/* Slideshow container */
Expand Down Expand Up @@ -52,6 +56,7 @@
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
opacity: 1;
}

/* The dots/bullets/indicators */
Expand Down Expand Up @@ -89,4 +94,49 @@
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

.project-slide-section {
flex:60
}

.project-text-section {
display: flex;
flex-direction: column;
align-items: center;
flex:40
}

.project-title {
color: black;
font-size: 50px;
align-items: center;
margin:0px;
max-width: 400px;
margin-left: 10px;
margin-right: 10px;
}

.project-description {
color: black;
font-size: 22px;
align-self: center;
text-align: justify;
max-width: 400px;
margin-left: 10px;
margin-right: 10px;
}

@media screen and (max-width: 959px) {
.project-container {
flex-direction: column;
}

.project-title {
font-size: 30px;
}

.project-description {
font-size: 15px;
}
}
Loading

0 comments on commit 6d7fcc3

Please sign in to comment.