my website, hosted on wisp.place

feat: image optimization

- replace the pngs with svgs
- replace the gif with a horribly optimized webp (it looks funny)
- fix height for images in blogpost.astro, blog.astro, and index.astro

+52 -12
public/blog/fish-and-starship.png

This is a binary file and will not be displayed.

+29
public/blog/fish-and-starship.svg
··· 1 + <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 + <g clip-path="url(#clip0_1_5)"> 3 + <g clip-path="url(#clip1_1_5)"> 4 + <path d="M33.7863 14.2452H12.2081V33.7549H33.7863V14.2452Z" fill="url(#paint0_linear_1_5)"/> 5 + <path fill-rule="evenodd" clip-rule="evenodd" d="M18.0441 20.4042C18.8225 20.555 19.2641 21.016 19.3982 21.7586C19.3844 20.9895 19.842 20.5417 20.7523 20.4042C19.9318 20.3175 19.4956 19.8502 19.3982 19.0497C19.304 19.8226 18.8847 20.3037 18.0441 20.4042ZM24.9259 26.1704L24.6307 26.9581L22.2061 26.2502L22.4513 25.4054L20.5986 24.6699C21.1893 23.9481 21.7799 23.5937 22.6964 23.1437C22.6146 21.7268 23.7585 20.7117 25.1209 19.7113C26.2037 21.0405 26.6831 22.2201 25.9428 23.8753C26.556 24.5399 26.8189 25.6072 26.8091 26.6047L24.9259 26.1704ZM25.3474 22.4133C25.3474 22.8026 25.0318 23.1183 24.6425 23.1183C24.2533 23.1183 23.9377 22.8026 23.9377 22.4133C23.9377 22.0239 24.2533 21.7083 24.6425 21.7083C25.0318 21.7083 25.3474 22.0239 25.3474 22.4133Z" fill="white"/> 6 + <path d="M24.0056 28.5965C24.0056 28.5965 23.4597 31.8654 21.1388 32.6951L17.4947 30.3742C20.7043 30.3742 21.8547 27.8945 21.8547 27.8945L24.0056 28.5965Z" fill="white"/> 7 + </g> 8 + <path d="M9.25 21.75V24.75H12.25V26.25H9.25V29.25H7.75V26.25H4.75V24.75H7.75V21.75H9.25Z" fill="white" stroke="black" stroke-width="0.5"/> 9 + <g clip-path="url(#clip2_1_5)"> 10 + <path d="M31.5298 10.7046C31.2164 10.3103 30.7643 10.0358 30.1737 9.8813C30.7001 9.74663 31.1009 9.51668 31.3761 9.19167C31.6513 8.86675 31.789 8.46043 31.789 7.97299C31.789 7.25568 31.5268 6.67992 31.0024 6.24596C30.4781 5.81197 29.7779 5.59497 28.902 5.59497C28.6086 5.59497 28.2722 5.62673 27.8924 5.69007C27.5128 5.75355 27.0797 5.84865 26.5937 5.97547V7.08122C27.0114 6.92277 27.4112 6.80381 27.793 6.7245C28.1747 6.64527 28.5444 6.60562 28.902 6.60562C29.4404 6.60562 29.8552 6.72747 30.1466 6.97126C30.4379 7.215 30.5836 7.56476 30.5836 8.02054C30.5836 8.45258 30.4268 8.78943 30.1135 9.03118C29.8 9.27293 29.364 9.39376 28.8055 9.39376H27.8774V10.3806H28.8055C29.4163 10.3806 29.9004 10.5322 30.2581 10.8354C30.6157 11.1386 30.7945 11.5479 30.7945 12.063C30.7945 12.6219 30.6157 13.05 30.2581 13.3472C29.9004 13.6444 29.3881 13.7931 28.7212 13.7931C28.3274 13.7931 27.9317 13.7416 27.5338 13.6385C27.1361 13.5355 26.7323 13.3789 26.3223 13.1688V14.3637C26.7347 14.5061 27.158 14.6154 27.5881 14.6907C28.018 14.766 28.4399 14.8037 28.8538 14.8037C29.8382 14.8037 30.6086 14.5709 31.1652 14.1052C31.7217 13.6395 32 12.9984 32 12.182C32 11.5914 31.8432 11.0991 31.5298 10.7046Z" fill="#5BA7E0"/> 11 + <path d="M13.1814 0.000427246L9.70609 3.32091H11.294L13.5223 1.18983L15.7507 3.32091H17.3387L13.8631 0.000427246H13.1814ZM10.3234 4.09793C9.42741 4.09793 8.52534 4.24457 7.61729 4.53787C6.70924 4.8312 5.78104 5.277 4.8327 5.87543V6.82659C5.75289 6.29953 6.66903 5.90617 7.58109 5.64654C8.49327 5.38696 9.40726 5.25721 10.3234 5.25721C11.2355 5.25721 12.1476 5.38696 13.0597 5.64654C13.9719 5.90617 14.894 6.29949 15.8262 6.82659V5.87543C14.8779 5.27704 13.9497 4.83125 13.0416 4.53787C12.1337 4.24457 11.2275 4.09793 10.3234 4.09793ZM25.552 6.3544L21.5305 9.88971V10.5832L25.552 14.1185V12.5031L22.971 10.2365L25.552 7.96982V6.3544ZM3.95617 6.39166L0 9.86966V10.552L3.95622 14.0299V12.4408L1.41712 10.2108L3.95617 7.98091V6.39166ZM16.6752 6.41522V8.00446L19.2142 10.2344L16.6751 12.4643V14.0534L20.6313 10.5755V9.89326L16.6752 6.41522ZM5.50195 8.62046V10.2196H6.8415V8.62046H5.50195ZM4.83265 13.5904V14.5416C5.78099 15.14 6.70919 15.5859 7.61724 15.8792C8.52529 16.1725 9.42736 16.3192 10.3233 16.3192C11.2275 16.3192 12.1336 16.1725 13.0416 15.8792C13.9497 15.5859 14.8778 15.14 15.8262 14.5416V13.5905C14.8939 14.1175 13.9718 14.5109 13.0597 14.7705C12.1476 15.0301 11.2355 15.16 10.3233 15.16C9.40721 15.16 8.49323 15.0301 7.58104 14.7705C6.66899 14.5109 5.75284 14.1176 4.83265 13.5905V13.5904ZM8.56963 16.9069V17.9921L9.61678 20.0002H10.4352L9.90909 17.9921V16.9069H8.56963Z" fill="#4ABC39"/> 12 + </g> 13 + </g> 14 + <defs> 15 + <linearGradient id="paint0_linear_1_5" x1="15.6305" y1="35.5423" x2="28.2604" y2="11.3593" gradientUnits="userSpaceOnUse"> 16 + <stop stop-color="#ED0A62"/> 17 + <stop offset="1" stop-color="#890CEA"/> 18 + </linearGradient> 19 + <clipPath id="clip0_1_5"> 20 + <rect width="32" height="32" fill="white"/> 21 + </clipPath> 22 + <clipPath id="clip1_1_5"> 23 + <rect x="15" y="16" width="16" height="16" rx="8" fill="white"/> 24 + </clipPath> 25 + <clipPath id="clip2_1_5"> 26 + <rect width="32" height="20" fill="white"/> 27 + </clipPath> 28 + </defs> 29 + </svg>
public/blog/git-bisect.png

This is a binary file and will not be displayed.

+10
public/blog/git-bisect.svg
··· 1 + <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 + <g clip-path="url(#clip0_6_3)"> 3 + <path d="M30.5847 14.6501L17.3496 1.4156C16.5875 0.653213 15.3514 0.653213 14.5887 1.4156L11.8407 4.16431L15.3267 7.65033C16.1369 7.37651 17.0659 7.56026 17.7115 8.2062C18.3611 8.8561 18.5432 9.79301 18.2624 10.6062L21.6228 13.9662C22.436 13.6858 23.3735 13.8672 24.0228 14.5175C24.93 15.4247 24.93 16.8947 24.0228 17.8026C23.1149 18.7101 21.6449 18.7101 20.7367 17.8026C20.0544 17.1197 19.8855 16.1168 20.2316 15.2762L17.0976 12.1425V20.389C17.3186 20.4985 17.5274 20.6443 17.7115 20.8284C18.6187 21.7356 18.6187 23.2056 17.7115 24.1138C16.8043 25.0207 15.3333 25.0207 14.4267 24.1138C13.5195 23.2053 13.5195 21.7353 14.4267 20.8284C14.6511 20.6044 14.9107 20.4348 15.1878 20.3213V11.998C14.9107 11.8846 14.6517 11.7166 14.4267 11.491C13.7395 10.8041 13.5743 9.79532 13.9266 8.95144L10.4901 5.51424L1.4146 14.5887C0.652206 15.3518 0.652206 16.5879 1.4146 17.3503L14.6504 30.5851C15.4125 31.3475 16.6482 31.3475 17.4113 30.5851L30.5847 17.4116C31.3471 16.6493 31.3471 15.4125 30.5847 14.6501Z" fill="#F05133"/> 4 + </g> 5 + <defs> 6 + <clipPath id="clip0_6_3"> 7 + <rect width="32" height="32" fill="white"/> 8 + </clipPath> 9 + </defs> 10 + </svg>
public/blog/welcome.gif

This is a binary file and will not be displayed.

public/blog/welcome.webp

This is a binary file and will not be displayed.

+1 -1
src/content/blog/fish-and-starship.md
··· 1 1 --- 2 2 title: "check out fish shell (+ starship)" 3 3 description: "a smart, user-friendly command line shell w/ a really good out-of-box experience" 4 - image: "/blog/fish-and-starship.png" 4 + image: "/blog/fish-and-starship.svg" 5 5 imageAlt: "a picture of the fish and starship icons, with a plus symbol" 6 6 pubDate: 2025-06-24 7 7 categories: ["terminal", "fish", "starship", "productivity"]
+1 -1
src/content/blog/git-bisect.md
··· 1 1 --- 2 2 title: "git bisect is very useful" 3 3 description: "using binary search to find the commit that broke things" 4 - image: "/blog/git-bisect.png" 4 + image: "/blog/git-bisect.svg" 5 5 imageAlt: "the git logo" 6 6 pubDate: 2025-06-25 7 7 categories: ["git", "debugging", "productivity"]
+1 -1
src/content/blog/welcome.md
··· 1 1 --- 2 2 title: "the blog is up" 3 3 description: "this is my first blog post! this is just a test post so i can make sure everything works" 4 - image: "/blog/welcome.gif" 4 + image: "/blog/welcome.webp" 5 5 imageAlt: "uh oh" 6 6 pubDate: 2025-06-23 7 7 categories: ["meta"]
+1 -1
src/layouts/BlogPost.astro
··· 19 19 <img 20 20 src={image} 21 21 alt={imageAlt || ""} 22 - style="float: right; margin-left: 1rem; margin-block: 1rem; max-height: 128px" 22 + style="float: right; margin-left: 1rem; margin-block: 1rem; height: 128px" 23 23 transition:name={`blog-image-${post.slug}`} 24 24 /> 25 25 )
+5 -1
src/layouts/Layout.astro
··· 23 23 <meta property="og:type" content="website" /> 24 24 <meta property="og:url" content={Astro.url.pathname} /> 25 25 26 - <link rel="icon" type="image/png" href="https://github.com/intergrav.png?size=64" /> 26 + <link 27 + rel="icon" 28 + type="image/png" 29 + href="https://github.com/intergrav.png?size=64" 30 + /> 27 31 <link rel="sitemap" href="/sitemap-index.xml" /> 28 32 <link 29 33 rel="alternate"
+1 -1
src/pages/blog.astro
··· 18 18 <img 19 19 src={post.data.image} 20 20 alt={post.data.imageAlt || ""} 21 - style="float: right; margin-left: 1rem; margin-block: 1rem; max-height: 64px" 21 + style="float: right; margin-left: 1rem; margin-block: 1rem; height: 64px" 22 22 transition:name={`blog-image-${post.slug}`} 23 23 /> 24 24 )}
+3 -6
src/pages/index.astro
··· 3 3 import Badges from "../components/Badges.astro"; 4 4 --- 5 5 6 - <Layout 7 - title="home" 8 - description="hi, i'm devin! :)" 9 - > 6 + <Layout title="home" description="hi, i'm devin! :)"> 10 7 <img 11 - src="https://github.com/intergrav.png?size=256" 8 + src="https://github.com/intergrav.png?size=128" 12 9 alt="my current profile picture on github" 13 - style="float: right; margin-left: 1rem; margin-block: 1rem; max-height: 128px" 10 + style="float: right; margin-left: 1rem; margin-block: 1rem; height: 128px" 14 11 /> 15 12 16 13 <h1>home</h1>