mirror of
https://github.com/BradNut/personal-website-sveltekit
synced 2025-09-08 23:20:18 +00:00
Adding turnip svg, changing main max width, and changing portfolio widths so there's no layout shift.
This commit is contained in:
parent
0397e406ba
commit
293ba89223
6 changed files with 72 additions and 10 deletions
48
src/lib/assets/images/turnip.svg
Normal file
48
src/lib/assets/images/turnip.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 512 512" xml:space="preserve">
|
||||
<g>
|
||||
<path style="fill:#00A653;" d="M292.93,104.046c3.158,5.102,4.956,10.926,4.956,17.116c0,15.224-10.843,28.252-26.202,33.626
|
||||
v77.436h-31.367v-77.436c-15.36-5.374-26.202-18.402-26.202-33.626c0-6.19,1.798-12.014,4.956-17.116
|
||||
c-8.95-8.009-14.46-18.904-14.46-30.928c0-11.48,5.029-21.947,13.279-29.841c-0.91-2.886-1.412-5.918-1.412-9.055
|
||||
C216.477,15.318,234.168,0,256,0s39.523,15.318,39.523,34.222c0,3.137-0.502,6.169-1.412,9.055
|
||||
c8.25,7.894,13.279,18.36,13.279,29.841C307.39,85.142,301.88,96.037,292.93,104.046z"/>
|
||||
<path style="fill:#00A653;" d="M267.104,214.93l-10.341,10.309l-11.867,11.846l-50.47-50.606
|
||||
c-14.272,7.915-31.252,7.33-42.628-2.844c-4.611-4.12-7.758-9.347-9.452-15.098c-11.93,1.328-23.735-1.83-32.695-9.839
|
||||
c-8.563-7.654-13.007-18.381-13.394-29.799c-2.76-1.244-5.353-2.896-7.685-4.987c-14.094-12.589-13.708-35.999,0.836-52.269
|
||||
c14.554-16.269,37.766-19.239,51.85-6.639c2.342,2.091,4.266,4.486,5.813,7.089c11.386-0.889,22.532,2.342,31.096,9.996
|
||||
c8.961,8.009,13.404,19.385,13.415,31.399c5.908,1.035,11.449,3.586,16.06,7.716c11.313,10.111,13.812,26.798,7.664,41.792
|
||||
L267.104,214.93z"/>
|
||||
<path style="fill:#00A653;" d="M423.429,123.912c-2.332,2.091-4.925,3.743-7.685,4.987c-0.387,11.418-4.831,22.145-13.394,29.799
|
||||
c-8.961,8.009-20.765,11.167-32.695,9.839c-1.694,5.751-4.841,10.979-9.452,15.098c-10.999,9.849-27.258,10.707-41.227,3.586
|
||||
l-49.728,49.864l-13.321-13.289l-8.887-8.867l50.303-50.428c-6.964-15.37-4.674-32.842,7.016-43.298
|
||||
c4.611-4.13,10.153-6.681,16.06-7.716c0.01-12.014,4.454-23.39,13.415-31.399c8.563-7.654,19.709-10.884,31.096-9.996
|
||||
c1.547-2.603,3.471-4.998,5.813-7.089c14.084-12.599,37.296-9.63,51.85,6.639C437.136,87.912,437.523,111.323,423.429,123.912z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path style="fill:#008040;" d="M292.93,104.046c3.158,5.102,4.956,10.926,4.956,17.116c0,15.224-10.843,28.252-26.202,33.626
|
||||
v77.436H256V0c21.832,0,39.523,15.318,39.523,34.222c0,3.137-0.502,6.169-1.412,9.055c8.25,7.894,13.279,18.36,13.279,29.841
|
||||
C307.39,85.142,301.88,96.037,292.93,104.046z"/>
|
||||
<path style="fill:#008040;" d="M423.429,123.912c-2.332,2.091-4.925,3.743-7.685,4.987c-0.387,11.418-4.831,22.145-13.394,29.799
|
||||
c-8.961,8.009-20.765,11.167-32.695,9.839c-1.694,5.751-4.841,10.979-9.452,15.098c-10.999,9.849-27.258,10.707-41.227,3.586
|
||||
l-49.728,49.864l-13.321-13.289L422.592,71.643C437.136,87.912,437.523,111.323,423.429,123.912z"/>
|
||||
<path style="fill:#008040;" d="M267.104,214.93l-10.341,10.309L89.408,71.643c14.554-16.269,37.766-19.239,51.85-6.639
|
||||
c2.342,2.091,4.266,4.486,5.813,7.089c11.386-0.889,22.532,2.342,31.096,9.996c8.961,8.009,13.404,19.385,13.415,31.399
|
||||
c5.908,1.035,11.449,3.586,16.06,7.716c11.313,10.111,13.812,26.798,7.664,41.792L267.104,214.93z"/>
|
||||
</g>
|
||||
<path style="fill:#B857D0;" d="M355.027,403.082c-20.891,38.007-53.576,75.177-89.679,101.975L256,512l-9.347-6.943
|
||||
c-16.332-12.129-31.974-26.38-46.131-41.865c-9.159-10.017-17.702-20.556-25.408-31.367c-6.723-9.421-12.819-19.061-18.141-28.743
|
||||
c-1.286-2.332-2.52-4.653-3.691-6.974c-5.489-10.707-9.881-21.194-13.164-31.367c-3.764-11.585-6.096-22.773-7.005-33.479
|
||||
c-0.941-10.999-0.376-21.487,1.715-31.367c1.14-5.447,2.75-10.707,4.82-15.767c12.014-29.423,36.282-50.46,70.179-60.832
|
||||
c22.585-6.911,42.367-6.849,46.173-6.765c3.816-0.084,23.588-0.146,46.173,6.765c33.898,10.372,58.166,31.409,70.179,60.832
|
||||
C385.757,316.936,379.765,358.07,355.027,403.082z"/>
|
||||
<g>
|
||||
<path style="fill:#EDCFF3;" d="M192.565,299.893v31.367h-59.452c-0.941-10.999-0.376-21.487,1.715-31.367H192.565z"/>
|
||||
<path style="fill:#EDCFF3;" d="M210.904,364.74v31.367h-57.622c-5.489-10.707-9.881-21.194-13.164-31.367H210.904z"/>
|
||||
<path style="fill:#EDCFF3;" d="M231.952,431.825v31.367h-31.43c-9.159-10.017-17.702-20.556-25.408-31.367H231.952z"/>
|
||||
</g>
|
||||
<path style="fill:#9331B2;" d="M355.027,403.082c-20.891,38.007-53.576,75.177-89.679,101.975L256,512V216.529
|
||||
c3.816-0.084,23.588-0.146,46.173,6.765c33.898,10.372,58.166,31.409,70.179,60.832C385.757,316.936,379.765,358.07,355.027,403.082
|
||||
z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -51,6 +51,10 @@
|
|||
|
||||
:global(.portfolio-details) {
|
||||
margin: 0 1.5rem;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin: 1rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.portfolio-details ul) {
|
||||
|
|
|
|||
|
|
@ -77,10 +77,10 @@
|
|||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0rem;
|
||||
max-width: 85vw;
|
||||
max-width: 65vw;
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
max-width: 70vw;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
import space_needle from '$lib/assets/images/space-needle.png?run';
|
||||
import tortie_derp from '$lib/assets/images/tortie_derp.jpg?run';
|
||||
import orange_derp from '$lib/assets/images/orange_derp.jpg?run';
|
||||
import turnip from '$lib/assets/images/turnip.svg';
|
||||
import Tag from '$root/lib/components/Tag.svelte';
|
||||
import ExternalLink from '$root/lib/components/ExternalLink.svelte';
|
||||
</script>
|
||||
|
|
@ -273,7 +274,7 @@
|
|||
<div class="cat-pics">
|
||||
<figure>
|
||||
<Img class="portfolio-image better-blur" src={tortie_derp} alt="Turnip Cat" />
|
||||
<p class="center">Turnip</p>
|
||||
<p class="center">Turnip <img class="icon" src={turnip} width="25px" height="25px" alt="Turnip" /></p>
|
||||
</figure>
|
||||
<figure>
|
||||
<Img class="portfolio-image better-blur" src={orange_derp} alt="Taco Cat" />
|
||||
|
|
@ -290,6 +291,11 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: grid;
|
||||
grid-gap: 2.5rem;
|
||||
|
|
@ -366,6 +372,6 @@
|
|||
grid-template-columns: repeat(2, minmax(200px, 0.3fr));
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
import {
|
||||
Tab,
|
||||
TabGroup,
|
||||
|
|
@ -19,8 +18,6 @@
|
|||
import MarkShellnutArchitect from '$lib/content/portfolio/professional/mark-shellnut-architect.md?run';
|
||||
import OldWebsite from '$lib/content/portfolio/personal/old-website.md';
|
||||
import ExternalLink from '$lib/components/ExternalLink.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<SEO title="Portfolio" />
|
||||
|
|
|
|||
|
|
@ -20,12 +20,19 @@
|
|||
<div class="uses-image">
|
||||
<Img class="uses-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
|
||||
</div>
|
||||
<HardwareAccessories />
|
||||
<Development />
|
||||
<PrivacyHardwareSoftware />
|
||||
<div>
|
||||
<HardwareAccessories />
|
||||
<Development />
|
||||
<PrivacyHardwareSoftware />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.uses {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue