walcutt/resume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Responsive & dark modes

Browse Source
This commit is contained in:
walcutt 2025-05-05 15:18:31 -04:00
parent 2c77d7a06c
commit 6af2a0d73c
2 changed files with 185 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
site/assets/chloe.css
View File

@ -28,12 +28,32 @@
font-style: italic;
}
:root {
--background-color: #000000;
--text-color: #FFFFFF;
}
.mobile-only {
display: none;
}
.print-only {
display: none;
}
body {
font-family: archer;
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--text-color);
}
.container {
width: 600px;
width: 100%;
max-width: 600px;
margin: 2em auto;
}
@ -43,7 +63,7 @@ body {
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #000;
border-bottom: 1px solid var(--text-color);
}
.header .name {
@ -74,6 +94,8 @@ body {
text-align: right;
font-style: italic;
font-weight: bold;
padding-right: 0.5em;
border-right: 1px solid var(--text-color);
}
ul {
@ -84,4 +106,70 @@ ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.icon {
width: 2em;
height: 2em;
}
@media (prefers-color-scheme:light) {
:root {
--background-color: #FFFFFF;
--text-color: #000000;
}
/*
body {
background-color: #FFF;
color: #000;
}
a {
color: #000;
}
.header, .section .block .title {
border-color: #000;
} */
}
@media (max-width:600px) {
.mobile-only {
display: inherit;
}
.mobile-hide {
display: none;
}
.container {
width: 100%;
margin: 2em 0;
}
.header {
display: block;
}
.header .name {
text-align: center;
}
.header .contact {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
}
@media print {
.print-only {
display: inherit;
}
.print-hide {
display: none;
}
}

101
site/index.html
View File

@ -3,6 +3,8 @@
<head>
<title>Chloe Herd</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@ -15,14 +17,101 @@
Chloe Herd
</div>
<div class="contact">
<!-- Swap email & location for mobile view -->
<div class="method">
Columbus, OH
<span class="mobile-hide">
Columbus, OH
</span>
<span class="mobile-only">
<!-- mail icon -->
<a href="mailto:chloe@chloeherd.codes">
<svg
class="icon"
viewBox="0 0 48 48"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g
id="layer1">
<rect
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:1.03647;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1;-inkscape-stroke:hairline"
id="rect1"
width="32"
height="24"
x="8"
y="12" />
<path
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:1.03213;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1;-inkscape-stroke:hairline"
d="M 8,14 24.270353,32 40,14.588557"
id="path1" />
</g>
</svg>
</a>
</span>
</div>
<div class="method">
chloe@chloeherd.codes
<span class="mobile-hide">
<a href="mailto:chloe@chloeherd.codes">
chloe@chloeherd.codes
</a>
</span>
<span class="mobile-only">
Columbus, OH
</span>
</div>
<div class="method">
Linkedin
<span class="mobile-hide">
<a href="https://www.linkedin.com/in/chloe-herd-021b20139/" target="_blank">
Linkedin
</a>
</span>
<span class="mobile-only">
<!-- linkedin logo -->
<a href="https://www.linkedin.com/in/chloe-herd-021b20139/" target="_blank">
<svg
class="icon"
viewBox="0 0 48 48"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1">
<circle
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #FFF);stroke-width:0.754862;stroke-linecap:square;-inkscape-stroke:hairline"
id="path1"
cx="24"
cy="24"
r="16" />
<circle
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:0.552653;stroke-linecap:square;-inkscape-stroke:hairline"
id="path2"
cx="19.5"
cy="19.5"
r="1.5" />
<path
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:0.883861;stroke-linecap:square;-inkscape-stroke:hairline"
d="m 19.5,22 v 8"
id="path3" />
<path
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:0.905961;stroke-linecap:square;-inkscape-stroke:hairline"
d="M 24,30 V 22"
id="path5" />
<path
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:0.905961;stroke-linecap:square;-inkscape-stroke:hairline"
d="M 30,30 V 25"
id="path6" />
<path
style="vector-effect:non-scaling-stroke;fill:none;stroke:var(--text-color, #fff);stroke-width:0.897183;stroke-linecap:square;-inkscape-stroke:hairline"
id="path7"
d="m 24,25 a 3,3 0 0 1 3,-3 3,3 0 0 1 3,3" />
</g>
</svg>
</a>
</span>
</div>
</div>
</div>
@ -33,7 +122,7 @@
</div>
<div class="block safelite">
<div class="title">
<span class="years">2023 - Present</span> –  Full-Stack Engineer, Safelite, Columbus OH.
<span class="years">2023 - Present</span> ~ Full-Stack Engineer, Safelite
</div>
<div class="content">
<ul>
@ -59,11 +148,11 @@
</div>
<div class="block uva">
<div class="title">
<span class="years">2020</span> – B.S. Computer Science, University of Virginia
<span class="years">2020</span> ~ <span class="mobile-hide">B.S. Computer Science,</span> University of Virginia
</div>
</div>
</div>
<div class="section proficiencies">
<div class="section proficiencies mobile-hide">
<div class="descriptor">
Technologies
</div>