210 lines
3.9 KiB
SCSS
210 lines
3.9 KiB
SCSS
.about {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Hero block: Photo + Intro */
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 240px 1fr;
|
|
gap: 1.25rem;
|
|
border-radius: 16px;
|
|
background: var(--app-card-background);
|
|
|
|
.photo {
|
|
align-items:flex-start; justify-content:center;
|
|
img {
|
|
display:block;
|
|
width: 100%; height: auto;
|
|
max-width: 220px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 6px 24px rgba(0,0,0,.25);
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.intro {
|
|
display:flex; flex-direction:column; gap:.5rem;
|
|
h1 { margin-top: .25rem }
|
|
.lead { opacity:.9; margin: .25rem 0 0.5rem; }
|
|
|
|
.meta {
|
|
display:flex; flex-direction:column; gap:.25rem; margin-bottom: 0.5rem;
|
|
.row {
|
|
display:flex; align-items:center; gap:.4rem;
|
|
a { color: inherit; }
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;
|
|
.mat-icon { margin-right:.25rem; }
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Skills block */
|
|
.skills {
|
|
padding: 5px;
|
|
|
|
h2 { margin-top: .25rem; margin-left: .25rem; }
|
|
.chip-groups {
|
|
margin-left: .25rem;
|
|
display:grid; gap:1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
margin-bottom: .5rem;
|
|
h3 { margin: .2rem 0 .4rem; font-size: .95rem; opacity:.85; }
|
|
mat-chip-set {
|
|
display:flex; flex-wrap:wrap; gap:.4rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Experience block */
|
|
.experience {
|
|
padding: 5px;
|
|
h2 { margin-top: .25rem;margin-left: .25rem; }
|
|
.xp-list {
|
|
margin-left: .25rem;
|
|
display: grid; gap: .75rem;
|
|
}
|
|
.xp-item {
|
|
.xp-head {
|
|
display:flex; align-items:baseline; gap:.5rem;
|
|
.time { opacity:.75; font-size:.9rem; }
|
|
}
|
|
.xp-sub { opacity:.9; margin-bottom:.25rem; }
|
|
ul { margin: .25rem 0 .5rem 1.15rem; }
|
|
}
|
|
}
|
|
|
|
/* Experience block */
|
|
.projects {
|
|
padding: 5px;
|
|
h2 { margin-top: .25rem;margin-left: .25rem; }
|
|
.xp-list {
|
|
margin-left: .25rem;
|
|
display: grid; gap: .75rem;
|
|
}
|
|
.xp-item {
|
|
.xp-head {
|
|
display:flex; align-items:baseline; gap:.5rem;
|
|
.time { opacity:.75; font-size:.9rem; }
|
|
}
|
|
.xp-sub { opacity:.9; margin-bottom:.25rem; }
|
|
ul { margin: .25rem 0 .5rem 1.15rem; }
|
|
}
|
|
}
|
|
|
|
/* Experience block */
|
|
.education {
|
|
padding: 5px;
|
|
h2 { margin-top: .25rem;margin-left: .25rem; }
|
|
.xp-list {
|
|
margin-left: .25rem;
|
|
display: grid; gap: .75rem;
|
|
}
|
|
.xp-item {
|
|
.xp-head {
|
|
display:flex; align-items:baseline; gap:.5rem;
|
|
.time { opacity:.75; font-size:.9rem; }
|
|
}
|
|
.xp-sub { opacity:.9; margin-bottom:.25rem; }
|
|
ul { margin: .25rem 0 .5rem 1.15rem; }
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 900px) {
|
|
.hero { grid-template-columns: 1fr; }
|
|
.hero .photo { justify-content: flex-start; }
|
|
.skills .chip-groups { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
.xp-head-grid {
|
|
display: grid;
|
|
grid-template-columns: calc(48px + .75rem) 1fr; /* 1: Logo, 2: Text */
|
|
grid-template-rows: auto auto; /* 1: Role/Time, 2: Company */
|
|
column-gap: .75rem;
|
|
}
|
|
|
|
.logo-wrap {
|
|
grid-row: 1 / span 2;
|
|
grid-column: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.company-logo {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
opacity: .9;
|
|
border-radius: 10%;
|
|
background-color: var(--app-logo-bg);
|
|
}
|
|
|
|
|
|
.head-row {
|
|
grid-row: 1;
|
|
grid-column: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: .5rem 1rem;
|
|
|
|
strong {
|
|
font-size: 1rem;
|
|
}
|
|
.time {
|
|
opacity: .75; font-size: .9rem;
|
|
}
|
|
}
|
|
|
|
.company-row {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
margin-top: .1rem;
|
|
opacity: .85;
|
|
}
|
|
|
|
.link-row {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
margin-top: .1rem;
|
|
opacity: .85;
|
|
vertical-align: center;
|
|
}
|
|
|
|
.link-with-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: .35rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.link-with-icon mat-icon {
|
|
font-size: 18px;
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
|
|
.highlights {
|
|
margin-top: .4rem;
|
|
margin-left: .75rem;
|
|
padding-left: 1.2rem;
|
|
|
|
li {
|
|
margin: .2rem 0;
|
|
}
|
|
}
|
|
|
|
.highlights-noMargin {
|
|
margin-top: .4rem;
|
|
|
|
li {
|
|
margin: .2rem 0;
|
|
}
|
|
}
|