Skip to content

Commit c9d4087

Browse files
ADarko22ADarko22
committed
Polishing styling and data
1 parent b2d16bd commit c9d4087

16 files changed

Lines changed: 259 additions & 215 deletions

‎.github/workflows/deploy-to-pages.yml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,7 @@ jobs:
2727
run: npm run build
2828

2929
- name: Create 404.html for redirect
30-
run: |
31-
cp dist/index.html dist/404.html
32-
sed -i 's/<title>.*<\/title>/<title>My Awesome Resume<\/title>/' dist/404.html
30+
run: cp dist/index.html dist/404.html
3331

3432
- name: Deploy to GitHub Pages
3533
uses: JamesIves/github-pages-deploy-action@v4

‎src/app/app.component.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@
99
<button mat-button routerLink="education" routerLinkActive="active">Education</button>
1010
<button mat-button routerLink="hall-of-fame" routerLinkActive="active">Hall of Fame</button>
1111
<button mat-button routerLink="contacts" routerLinkActive="active">Contacts</button>
12-
</nav>
13-
<div class="toolbar__theme-toggle">
1412
<theme-toggle />
15-
</div>
13+
</nav>
1614
</div>
1715
</mat-toolbar>
1816

‎src/app/app.component.scss‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
background: var(--logo-color);
2626
background-clip: text;
2727
-webkit-background-clip: text;
28-
font-size: clamp(1.4em, 1.4em, 1.6em);
28+
font-size: clamp(1.2em, 1.2em, 1.4em);
2929
font-weight: bold;
3030
letter-spacing: 0.0625em;
3131
text-transform: uppercase;
@@ -56,7 +56,7 @@
5656
.toolbar__nav-links button {
5757
cursor: pointer;
5858
font-family: "Gill Sans", sans-serif;
59-
font-size: clamp(0.7em, 0.7em, 0.7em);
59+
font-size: clamp(0.6em, 0.6em, 0.7em);
6060
text-transform: capitalize;
6161
color: inherit;
6262
background: none;
@@ -95,6 +95,15 @@
9595
overflow: hidden;
9696
}
9797

98+
.toolbar__logo {
99+
font-size: clamp(1.4em, 1.4em, 1.6em);
100+
}
101+
102+
.toolbar__nav-links button {
103+
cursor: pointer;
104+
font-size: clamp(0.7em, 0.7em, 0.7em);
105+
}
106+
98107
.toolbar__left {
99108
width: auto;
100109
}
@@ -111,11 +120,6 @@
111120
width: auto;
112121
justify-content: flex-end;
113122
}
114-
115-
.toolbar__theme-toggle {
116-
margin-top: 0;
117-
margin-left: 1em;
118-
}
119123
}
120124

121125
.router-container {

‎src/app/contacts/contacts.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div *ngIf="contacts">
2-
<section>
1+
<div *ngIf="contacts" class="info-container">
2+
<section class="info-section">
33
<h2>Contacts</h2>
44
<div class="contact-card">
55
<span class="material-symbols-outlined">mail</span>

‎src/app/contacts/contacts.component.scss‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1+
.info-container {
2+
display: flex;
3+
justify-content: center;
4+
width: 95%;
5+
}
6+
17
section {
28
text-align: center;
39
background: var(--primary-bg-color);
410
padding: 1.5em;
511
border-radius: 1em;
612
box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.1);
7-
max-width: 90vw;
8-
width: 95%;
13+
max-width: 95%;
914
margin: 1.5em auto;
1015
animation: fadeIn 0.5s ease-in-out;
1116

@@ -38,7 +43,7 @@ section {
3843
}
3944

4045
p {
41-
font-size: 0.9em;
46+
font-size: 0.7em;
4247
line-height: 1.5;
4348
margin: 0;
4449
word-break: break-word;
@@ -59,13 +64,17 @@ section {
5964

6065
/* Media query for larger screens (tablets and desktops) */
6166
@media (min-width: 769px) {
67+
.info-section {
68+
max-width: 40vw;
69+
padding: 0 1em;
70+
}
71+
6272
section {
6373
text-align: center;
6474
background: var(--primary-bg-color);
6575
padding: 1em;
6676
border-radius: 1.1em;
6777
box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.1);
68-
max-width: 40vw;
6978
width: 90%;
7079
margin: 2em auto 2em;
7180
animation: fadeIn 0.5s ease-in-out;

‎src/app/education/education.component.html‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
<mat-expansion-panel-header>
99
<mat-panel-title>
1010
<mat-icon class="education-icon">school</mat-icon>
11-
{{ education.degree }} from {{ education.institution }}
11+
<div class="education-text">
12+
<div class="institution">{{ education.institution }}</div>
13+
<div class="degree">{{ education.degree }}</div>
14+
</div>
1215
</mat-panel-title>
1316
<mat-panel-description>
1417
<mat-icon class="calendar-icon">calendar_today</mat-icon>
@@ -20,23 +23,23 @@
2023
<div class="education-details">
2124
<div class="thesis-section">
2225
<h5>
23-
<mat-icon class="thesis-icon">description</mat-icon>
24-
Thesis: <strong>{{ education.thesis }}</strong>
26+
<mat-icon class="thesis-icon">description</mat-icon> Thesis:
2527
</h5>
28+
<p><strong>{{ education.thesis }}</strong></p>
2629
</div>
2730
<div *ngIf="education.publications && education.publications.length > 0" class="publications-section">
2831
<h5>
2932
<mat-icon class="publications-icon">library_books</mat-icon>
3033
Publications:
3134
</h5>
32-
<mat-list>
33-
<mat-list-item *ngFor="let publication of education.publications; trackBy: trackByPublication">
34-
<a [href]="publication.link" target="_blank">
35+
<div *ngIf="education.publications && education.publications.length > 0">
36+
<div *ngFor="let publication of education.publications; trackBy: trackByPublication" class="publication-card">
37+
<span class="material-symbols-outlined">
3538
<mat-icon class="publication-link-icon">link</mat-icon>
36-
{{ publication.title }}
37-
</a>
38-
</mat-list-item>
39-
</mat-list>
39+
</span>
40+
<p><a [href]="publication.link" target="_blank">{{ publication.title }}</a></p>
41+
</div>
42+
</div>
4043
</div>
4144
</div>
4245
</mat-expansion-panel>

‎src/app/education/education.component.scss‎

Lines changed: 54 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,30 @@ mat-panel-title {
4949
flex: 1;
5050
margin-right: 0.5em;
5151
word-wrap: break-word;
52+
53+
.mat-icon {
54+
margin-right: 0.3em;
55+
font-size: 1em;
56+
flex-shrink: 0;
57+
}
58+
59+
.education-text {
60+
display: flex;
61+
flex-direction: column;
62+
line-height: 1.2;
63+
64+
.institution {
65+
font-weight: bold;
66+
}
67+
68+
.degree {
69+
font-style: italic;
70+
}
71+
}
5272
}
5373

5474
mat-panel-description {
55-
font-size: 0.6em;
75+
font-size: 0.5em;
5676
color: var(--text-color);
5777
flex: 1;
5878
width: 100%;
@@ -71,10 +91,8 @@ mat-panel-description {
7191

7292
.education-details {
7393
width: 100%;
74-
padding: 0.8em;
7594

7695
h5 {
77-
margin: 0.8em 0 0.4em;
7896
font-size: 0.9em;
7997
}
8098

@@ -92,22 +110,24 @@ mat-panel-description {
92110
}
93111
}
94112

95-
mat-list-item {
96-
background-color: var(--secondary-bg-color);
97-
border-radius: 0.3em;
98-
margin-bottom: 0.5em;
99-
padding: 0.6em;
113+
.publication-card {
114+
display: flex;
115+
width: fit-content;
116+
align-items: center;
117+
padding: 0.2em 0.3em;
118+
border-radius: 0.8em;
119+
background: var(--secondary-bg-color);
120+
overflow: auto;
121+
}
100122

101-
&:hover {
102-
background: var(--hover-bg-color);
103-
}
123+
.publication-card:hover {
124+
background: var(--hover-bg-color);
125+
}
104126

105-
a {
106-
display: flex;
107-
align-items: center;
108-
text-decoration: none;
109-
color: inherit;
110-
}
127+
.publication-card span.material-symbols-outlined {
128+
color: var(--icon-bg-color);
129+
font-size: 1em;
130+
flex-shrink: 0;
111131
}
112132

113133
.education-icon,
@@ -167,25 +187,26 @@ mat-list-item {
167187
mat-panel-title {
168188
font-size: clamp(1rem, 1.1vw, 1.2rem);
169189
margin-right: 1em;
190+
191+
.mat-icon {
192+
font-size: 1.2rem;
193+
margin-right: 0.3em;
194+
}
170195
}
171196

172197
mat-panel-description {
173-
font-size: clamp(0.9rem, 1vw, 1.1rem);
198+
font-size: clamp(0.8rem, 0.9vw, 1rem);
174199
justify-content: flex-end;
175200

176-
.calendar-icon,
177-
.location-icon {
178-
font-size: 1.2em;
179-
margin-left: 0.2em;
201+
.mat-icon {
202+
font-size: 1rem;
203+
margin-left: 1.2em;
180204
margin-right: 0.2em;
181205
}
182206
}
183207

184208
.education-details {
185-
padding: 1em;
186-
187209
h5 {
188-
margin: 1em 0 0.5em;
189210
font-size: clamp(1rem, 1.1vw, 1.2rem);
190211
}
191212

@@ -197,25 +218,16 @@ mat-list-item {
197218
}
198219
}
199220

200-
mat-list-item {
201-
margin-bottom: 0.6em;
202-
padding: 0.8em;
203-
}
221+
.thesis-section {
204222

205-
.education-icon,
206-
.calendar-icon,
207-
.location-icon,
208-
.thesis-icon,
209-
.publications-icon,
210-
.publication-link-icon {
211-
margin-left: 0.2em;
212-
margin-right: 0.2em;
213-
font-size: 1.2em;
214-
}
223+
h5 {
224+
margin-bottom: 0.3em;
225+
}
215226

216-
.thesis-section {
217-
padding-bottom: 0.5em;
218-
margin-bottom: 0.5em;
227+
p {
228+
font-size: clamp(1rem, 1vw, 1.2rem);
229+
line-height: 1.4;
230+
}
219231
}
220232

221233
.publications-section {

‎src/app/hall-of-fame/hall-of-fame.component.scss‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
}
116116

117117
.achievement-display {
118-
width: 95%;
118+
max-width: 100%;
119119
padding: 0.5em;
120120
display: flex;
121121
flex-direction: column;
@@ -164,7 +164,6 @@
164164
display: flex;
165165
align-items: center;
166166
text-decoration: none;
167-
color: inherit;
168167
}
169168

170169
.link-icon {
@@ -186,7 +185,7 @@
186185

187186
.category-menu {
188187
max-width: 20vw;
189-
width: 95%;
188+
width: 100%;
190189
border-right: 1px solid rgba(0, 0, 0, 0.1);
191190
padding: 0.5em;
192191
height: auto;
@@ -287,18 +286,17 @@
287286
}
288287

289288
.achievement-display {
290-
max-width: 7vw;
291-
min-width: fit-content;
289+
max-width: 100%;
292290
width: 95%;
293291
flex-grow: 1;
294292
padding: 0.5em;
295293
display: flex;
296-
justify-content: center;
297-
align-items: center;
298-
align-content: center;
294+
flex-direction: column;
295+
justify-content: flex-start;
296+
align-items: stretch;
297+
align-content: stretch;
299298

300299
.achievement-details {
301-
max-width: 75vw;
302300
width: 100%;
303301
padding: 0.5em;
304302
line-height: 1.6;
@@ -310,6 +308,7 @@
310308
.hall-of-fame-slideshow {
311309
margin-top: 1em;
312310
margin-bottom: 2em;
311+
width: 100%;
313312
}
314313

315314
.achievement-links {

‎src/app/photo-slideshow/photo-slideshow.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<mat-spinner></mat-spinner>
44
</div>
55

6-
<div class="photo-wrapper" #photoWrapper>
6+
<div class="photo-wrapper">
77
<img *ngIf="photoUrls.length > 1 && prevPhotoUrl" [src]="prevPhotoUrl" class="side-photo prev-photo" alt="Previous Photo">
88
<img *ngIf="currentPhoto" [src]="currentPhoto" class="slideshow-image" [class.loading]="isLoading" alt="Slideshow Image" (click)="openFullscreen()">
99
<img *ngIf="photoUrls.length > 1 && nextPhotoUrl" [src]="nextPhotoUrl" class="side-photo next-photo" alt="Next Photo">
@@ -17,7 +17,7 @@
1717
</button>
1818
</div>
1919

20-
<div class="fullscreen-overlay" *ngIf="isFullscreen">
20+
<div class="fullscreen-overlay" *ngIf="isFullscreen" #fullscreenOverlay>
2121
<button mat-icon-button class="close-fullscreen" (click)="closeFullscreen()">
2222
<mat-icon>close</mat-icon>
2323
</button>

0 commit comments

Comments
 (0)