darkicewolf50/darkicewolf50_site
1
0
Fork 0
generated from darkicewolf50/ssg-sveltekit-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects, home): converted over from dioxus completely, todo blogs and rewrite projects to get data from backend, possibly rewrite techCat as well

Browse Source
This commit is contained in:
darkicewolf50
2025-07-15 18:08:37 -06:00
parent 4734a4cd57
commit 2d17aaa0e7
12 changed files with 1543 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/lib/components/contact.svelte Normal file
View File

@ -0,0 +1,177 @@
<!-- const: Asset = asset!("assets/professional_photo_2023.jpg"); -->
<script>
import PROFESSIONAL_PHOTO_JPG from '$lib/professional_photo_2023.jpg';
</script>
<!-- document::Stylesheet { href: asset!("/assets/styling/contact.css") } -->
<h2>Contact</h2>
<div>
<div>
<div>
<img src={PROFESSIONAL_PHOTO_JPG} alt="Brock's professional headshot" />
</div>
</div>
<div>
<div>
<h4>Brock Tomlinson</h4>
<ul>
<li>FullStack Webdev and Student Software Engineer</li>
<li>
<a href="mailto:darkicewolf50@gmail.com">
<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email icon/logo" />
<div>
<p>Email I check:</p>
<p>darkicewolf50@gmail.com</p>
</div>
</a>
</li>
<li>
<a href="mailto:brock@eatsleepski.com">
<img src="https://www.svgrepo.com/show/491226/email.svg" alt="Email icon/logo" />
<div>
<p>Professional Email:</p>
<p>brock@eatsleepski.com</p>
</div>
</a>
</li>
<li>
<a href="https://github.com/darkicewolf50">
<img src="https://www.svgrepo.com/show/512317/github-142.svg" alt="Github logo" />
<p>darkicewolf50</p>
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/brock-tomlinson/">
<img src="https://www.svgrepo.com/show/521725/linkedin.svg" alt="LinkedIn logo" />
<p>Brock Tomlinson</p>
</a>
</li>
<li>
<a href="https://www.twitch.tv/darkicewolf50">
<img src="https://www.svgrepo.com/show/519925/twitch.svg" alt="Twitch logo" />
<p>darkicewolf50</p>
</a>
</li>
<li>
<a href="https://www.youtube.com/@darkicewolf50">
<img src="https://www.svgrepo.com/show/521936/youtube.svg" alt="Youtube logo" />
<p>@darkicewolf50</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<style>
div {
display: flex;
flex-direction: row;
gap: 2svw;
align-items: center;
justify-content: center;
}
img {
border-radius: 100%;
max-height: 250px;
display: block;
background-color: var(--card-background-color);
padding: 0.5rem;
}
div div {
display: flex;
justify-content: center;
/* flex: 0 0 48%; */
}
div div div {
display: flex;
flex-direction: column;
flex-basis: auto;
}
div div ul {
display: flex;
flex-direction: column;
}
div div ul div {
display: flex;
flex-direction: row;
}
a {
text-decoration: none;
color: inherit;
}
h4 {
text-align: center;
margin-bottom: 0px;
}
div div ul {
list-style-type: none;
gap: 1svh;
padding: 0px;
}
div div ul li {
/* display: flex;
justify-content: flex-start; */
/* text-wrap: nowrap; */
padding-right: 1svw;
background-color: var(--card-background-color);
border-radius: var(--card-border-radius);
/* border: 1px solid whitesmoke; */
padding: 0.5svh 1svw;
}
div div ul li a {
display: flex;
flex-direction: row;
align-items: center;
}
div div ul li a div {
display: flex;
flex-direction: column;
}
ul li p {
padding: 0px;
margin: 0px;
}
ul li img {
height: var(--img-width);
width: var(--img-height);
object-fit: contain;
border-radius: 0px;
background-color: transparent;
filter: invert() hue-rotate(180deg);
}
ul li a:hover {
cursor: pointer;
color: #91a4d2;
filter: brightness(0) saturate(100%) invert(65%) sepia(13%) saturate(733%) hue-rotate(187deg)
brightness(95%) contrast(90%);
}
@media only screen and (max-width: 500px) {
ul li img {
display: none;
}
img {
border-radius: 100%;
max-width: 100%;
max-height: 250px;
display: block;
}
}
</style>