I am seeking to adjust the positioning of my circular image in the sidebar so that it aligns with my name in the header. The contact and tech skills sections may also require some tweaking.
Although I have a grasp of the concepts of absolute and relative, I am struggling to implement a functional solution.
This is the current code I am working with:
<div style="position:relative; height:60px;">
<img src="profile_pic_circular.png"
style="position:absolute; top:-10px; left:-30px; width:80px; height:80px; border:none;"
alt="profile"
title="profile photo" />
</div>
Access my resume with picture here.
Code:
@import url("https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display&display=swap");
/* Set Montserrat as main text font */
body {
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
}
/* Use Playfair Display font for headers */
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
color: #000;
}
/* Style superscripts for PDF export */
sup {
font-size: 0.45rem;
font-style: italic;
}
/* Prevent section breaking */
.blocks {
break-inside: avoid;
}
* {
/* Adjust sidebar margins */
--pagedjs-margin-right: 0.2in;
--pagedjs-margin-left: 0.2in;
}
/* Customize sizes */
:root {
--sidebar-width: 12rem; /* Narrow sidebar width */
--sidebar-background-color: #f7fbff; /* Blue sidebar */
--sidebar-horizontal-padding: 0.01in; /* Decrease sidebar padding */
--decorator-outer-dim: 10px; /* Increase position circles */
--decorator-border: 2px solid #bdd7e7; /* Blue timeline */
}
.details .place {
margin-top: 0.25rem;
}
.main-block:not(.concise) .details div {
padding-top: 0.009rem;
}
.fa-laptop {
margin-left: -3px;
}
#links li {
list-style-type: decimal;
}
.aside li::before {
display: none;
}
.aside ul {
padding-left: 1rem;
}
.aside li::before {
position: relative;
margin-left: -4.25pt;
content: "• ";
}
.aside {
width: calc(var(--sidebar-width) + 9px);
line-height: 1.2;
font-size: 0.75rem;
}
.decorator::after {
background-color: #08306b;
}
.aside li::before {
content: auto;
}
.skill-bar {
color: white;
padding: 0.1rem 0.25rem;
margin-top: 3px;
position: relative;
width: 100%;
}
.section.no-timeline h2::after {
content: none;
}
.section.no-timeline h2 {
padding-bottom: 1rem;
}
.info-card{
width: 220px;
float: left;
padding: 0.5rem;
margin: 0.5rem;
box-shadow: 1px 1px 4px black;
}