style: reduce in-your-face-ness of headshot photo

This commit is contained in:
Oliver Booth 2024-02-27 13:01:10 +00:00
parent d655b46db5
commit f1f711fa1f
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
2 changed files with 40 additions and 9 deletions

View File

@ -1,12 +1,15 @@
@page
<main class="container">
<div class="row align-items-center mb-3">
<div id="landing-page-intro" class="col-sm-12 col-md-6">
<h1 class="display-4">Hi, I'm Oliver.</h1>
<p class="lead">I'm a tech enthusiast, coffee drinker, and software developer.</p>
<p class="text-center">
<img src="~/img/headshot_512x512_2023.jpg" style="width: 512px; max-width: 100%;">
</p>
</div>
<div id="landing-page-headshot" class="col-sm-12 col-md-6 justify-content-right">
<img src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
</div>
</div>
<p>
My primary focus is C#, though I have dabbled in several other languages such as Java, Kotlin, VB, C/C++,

View File

@ -367,6 +367,7 @@ td.trim-p p:last-child {
background-size: cover;
border-radius: 10px;
cursor: pointer;
* {
cursor: pointer;
}
@ -384,6 +385,7 @@ td.trim-p p:last-child {
&:first-child {
border-left: none;
}
&:last-child {
border-right: none;
}
@ -416,3 +418,29 @@ td.trim-p p:last-child {
background-color: #6364FF;
}
}
#landing-page-intro {
text-align: left;
}
#landing-page-headshot {
text-align: right;
img {
transition: border-radius .4s;
&:hover {
border-radius: 5px !important;
}
}
}
@media (max-width: 768px) {
#landing-page-intro {
text-align: center;
}
#landing-page-headshot {
text-align: center;
}
}