Skip to content

Commit c78eb7a

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

16 files changed

Lines changed: 262 additions & 216 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: 16 additions & 5 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

@@ -31,20 +36,21 @@ section {
3136
}
3237

3338
span.material-symbols-outlined {
34-
margin-right: 0.8em;
39+
margin-right: 0.em;
3540
color: var(--icon-bg-color);
3641
font-size: 1em;
3742
flex-shrink: 0;
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;
4550
}
4651

4752
a {
53+
font-size: 0.7em;
4854
text-decoration: none;
4955
border-bottom: 0.1em solid transparent;
5056
transition: border-bottom 0.3s ease, color 0.3s ease;
@@ -59,13 +65,17 @@ section {
5965

6066
/* Media query for larger screens (tablets and desktops) */
6167
@media (min-width: 769px) {
68+
.info-section {
69+
max-width: 40vw;
70+
padding: 0 1em;
71+
}
72+
6273
section {
6374
text-align: center;
6475
background: var(--primary-bg-color);
6576
padding: 1em;
6677
border-radius: 1.1em;
6778
box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.1);
68-
max-width: 40vw;
6979
width: 90%;
7080
margin: 2em auto 2em;
7181
animation: fadeIn 0.5s ease-in-out;
@@ -105,6 +115,7 @@ section {
105115
}
106116

107117
a {
118+
font-size: 1em;
108119
text-decoration: none;
109120
border-bottom: 0.1em solid transparent;
110121
transition: border-bottom 0.3s ease, color 0.3s ease;

‎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 {

0 commit comments

Comments
 (0)