Adding analytics component, about me page, images for about and other pages, prerender about.

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"cSpell.words": ["iconify", "Obispo"]
+}

package.json

@@ -16,6 +16,7 @@
 	"devDependencies": {
 		"@iconify-icons/material-symbols": "^1.2.25",
 		"@iconify-icons/radix-icons": "^1.2.8",
+		"@iconify-icons/simple-icons": "^1.2.41",
 		"@leveluptuts/svelte-side-menu": "^1.0.5",
 		"@leveluptuts/svelte-toy": "^2.0.3",
 		"@playwright/test": "^1.28.1",

pnpm-lock.yaml

@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@iconify-icons/material-symbols': ^1.2.25
   '@iconify-icons/radix-icons': ^1.2.8
+  '@iconify-icons/simple-icons': ^1.2.41
   '@leveluptuts/svelte-side-menu': ^1.0.5
   '@leveluptuts/svelte-toy': ^2.0.3
   '@playwright/test': ^1.28.1
@@ -38,6 +39,7 @@ specifiers:
 devDependencies:
   '@iconify-icons/material-symbols': 1.2.25
   '@iconify-icons/radix-icons': 1.2.8
+  '@iconify-icons/simple-icons': 1.2.41
   '@leveluptuts/svelte-side-menu': 1.0.5
   '@leveluptuts/svelte-toy': 2.0.3
   '@playwright/test': 1.29.2
@@ -561,6 +563,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-icons/simple-icons/1.2.41:
+    resolution: {integrity: sha512-3eunPmb3RkOuyaFmPOCPlD4ViW7S+tMPNPwDbri8UFTGk12hhJ4B0p8QAqXxfGcB/F8PcTNpn306raLFNdqdFg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types/2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true

src/lib/assets/images/acorn.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 552.47 552.47" height="512" viewBox="0 0 552.47 552.47" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m293.5 69.716v-69.716h-34.53v69.716c-108.189 6.647-189.911 74.366-189.911 133.144v21.581c0 9.543 7.722 17.265 17.265 17.265h17.265v47.629c0 178.75 77.236 216.804 133.633 244.606 10.571 5.193 20.704 10.167 29.842 15.882 2.799 1.77 5.985 2.647 9.172 2.647s6.373-.877 9.172-2.647c9.138-5.716 19.271-10.689 29.842-15.882 56.397-27.802 133.633-65.855 133.633-244.606v-47.63h17.265c9.543 0 17.265-7.722 17.265-17.265v-21.58c-.001-58.778-81.724-126.497-189.913-133.144zm120.853 219.619c0 157.271-60.764 187.214-114.379 213.634-8.227 4.046-16.202 8.009-23.739 12.207-7.536-4.198-15.511-8.16-23.739-12.207-53.615-26.42-114.378-56.363-114.378-213.634v-47.629h276.235zm34.529-82.159h-345.294v-4.316c0-39.975 72.498-99.272 172.647-99.272s172.647 59.297 172.647 99.272z"/></svg>

src/lib/assets/images/bee.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m256 110.326c-8.284 0-15-6.708-15-14.993v-.015c0-36.08-29.182-65.318-65.317-65.318-8.284 0-15.008-6.716-15.008-15s6.708-15 14.992-15c52.655 0 95.333 42.572 95.333 95.318 0 8.285-6.716 15.008-15 15.008z" fill="#ff823c"/><path d="m256 110.326c-8.284 0-15-6.708-15-14.993v-.015c0-52.646 42.587-95.318 95.317-95.318 8.284 0 15.008 6.716 15.008 15s-6.708 15-14.992 15c-36.088 0-65.333 29.169-65.333 65.318 0 8.285-6.716 15.008-15 15.008z" fill="#d26432"/><path d="m352.4 206.733h-192.8c-8.284 0-15-6.716-15-15 0-61.426 49.974-111.4 111.4-111.4s111.4 49.974 111.4 111.4c0 8.285-6.715 15-15 15z" fill="#fdb442"/><path d="m367.4 191.733c0-61.426-49.974-111.4-111.4-111.4v126.4h96.4c8.285 0 15-6.715 15-15z" fill="#ff8c28"/><path d="m256 232.967c-61.427 0-111.4 49.974-111.4 111.4v.003s0 .002 0 .003c0 40.268 15.68 78.124 44.151 106.595l56.643 56.64c2.928 2.928 6.767 4.392 10.606 4.392s7.678-1.464 10.606-4.393l56.643-56.64c28.472-28.471 44.151-66.327 44.151-106.6 0-61.427-49.973-111.4-111.4-111.4z" fill="#fadc5c"/><path d="m323.249 450.967c28.472-28.471 44.151-66.327 44.151-106.6 0-61.426-49.974-111.4-111.4-111.4v279.033c3.839 0 7.678-1.464 10.606-4.393z" fill="#fdb442"/><path d="m144.6 344.367v.003s0 .002 0 .003c0 2.329.058 4.65.163 6.961h222.475c.104-2.314.163-4.636.163-6.967 0-7.895-.831-15.598-2.4-23.033h-218.001c-1.569 7.434-2.4 15.138-2.4 23.033z" fill="#a54628"/><path d="m162.41 415.6h187.18c5.122-9.53 9.181-19.58 12.125-30h-211.431c2.944 10.42 7.003 20.47 12.126 30z" fill="#a54628"/><path d="m367.4 344.367c0-7.895-.831-15.598-2.4-23.033h-109v30h111.238c.104-2.314.162-4.636.162-6.967z" fill="#78281e"/><path d="m361.716 385.6h-105.716v30h93.59c5.122-9.53 9.181-19.58 12.126-30z" fill="#78281e"/><path d="m416.667 176.733h-321.334c-52.566 0-95.333 42.767-95.333 95.334s42.767 95.333 95.35 95.333c86.503 0 140.022-57.927 160.65-104.393 20.498 46.17 73.966 104.393 160.667 104.393 52.566 0 95.333-42.766 95.333-95.333s-42.767-95.334-95.333-95.334z" fill="#f5f5fa"/><path d="m416.667 367.4c52.566 0 95.333-42.766 95.333-95.333s-42.767-95.333-95.333-95.333h-160.667v86.273c20.498 46.17 73.966 104.393 160.667 104.393z" fill="#e1e1eb"/></g></svg>

src/lib/assets/images/distros_pop-os-logo.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="496"
+   height="496"
+   version="1"
+   id="svg6">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <path
+     id="circle2-5"
+     d="M 248.06491,3.543497 A 245.38458,245.38578 0 0 0 2.6937594,248.9162 245.38458,245.38578 0 0 0 248.06491,494.28925 245.38458,245.38578 0 0 0 493.43951,248.9162 245.38458,245.38578 0 0 0 248.06491,3.543497 Z m -54.45702,61.376614 c 21.91828,-0.488223 31.10504,4.366142 43.85029,12.154644 19.3706,12.169427 33.10949,31.144715 38.20828,53.050015 5.09536,21.90533 3.56537,38.99994 -2.54424,51.1697 v 0.93863 c -12.23641,24.82604 -32.62812,44.79155 -61.17518,54.52743 l 24.51064,60.83956 c 4.58651,11.19608 8.67104,22.86664 5.10223,33.57587 -3.5688,10.70924 -19.9035,14.1677 -31.62764,2.4858 C 187.50174,310.78275 112.05818,166.68704 106.45054,155.97781 100.8429,145.26858 94.698919,136.46855 94.698919,125.75933 95.214647,109.69548 121.23807,93.139288 133.98333,84.863939 146.72858,76.5886 171.69307,65.406611 193.61478,64.919764 Z m -21.55725,44.521639 c -13.70794,2.41703 -5.53888,32.17548 -2.40672,40.69425 3.56881,9.73554 13.26786,30.13563 23.97429,40.35835 2.54424,2.43423 5.06442,4.4153 8.12437,4.90182 3.05996,0.48821 9.20395,-2.41705 11.75164,-6.31216 2.54424,-3.89408 3.09434,-6.84987 3.09434,-10.74429 a 65.251047,62.308329 0 0 0 -1.06583,-23.36895 c -4.58996,-15.09016 -14.25117,-29.68248 -26.99643,-39.41802 -2.54423,-1.946 -5.63171,-4.3988 -9.20052,-5.37214 -2.92244,-0.91112 -5.29133,-1.08303 -7.25108,-0.73921 z m 198.70157,17.32531 a 45.993002,48.02967 0 0 1 24.98167,12.82612 c 6.13023,5.87034 6.67691,12.27497 4.6312,20.27974 -2.02851,8.0051 -9.2177,25.06225 -14.8391,37.33653 l -14.30273,28.27076 c -27.59812,51.23192 -33.22982,56.58792 -40.89692,53.38594 -9.19708,-3.73556 -6.13367,-54.94309 2.54424,-117.38142 2.54424,-17.07743 6.68378,-25.61338 11.28403,-29.88256 4.59683,-4.26954 18.41479,-6.43592 26.59073,-4.83511 z m -48.14799,184.13052 c 13.54291,-3.73488 19.65597,9.58118 16.85385,19.54123 -0.92829,3.73488 -3.30063,7.05754 -7.04821,9.13248 -3.73728,2.07323 -12.59399,2.05604 -17.73059,-1.67783 -5.13318,-3.73489 -6.0993,-9.92773 -4.69998,-14.90759 1.40964,-4.97986 6.08898,-10.4273 12.62493,-12.08725 z M 145.19173,371.60272 H 351.0103 c 10.96086,0 19.74191,6.88152 19.74191,15.37793 0,8.49643 -8.78105,15.31055 -19.74191,15.31055 H 145.19173 c -10.96086,0 -19.81068,-6.81412 -19.81068,-15.31055 0,-8.49641 8.84982,-15.37793 19.81068,-15.37793 z"
+     style="fill:#cccccc;stroke-width:30.6731472" />
+</svg>

src/lib/assets/images/hazelnut.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="-61 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m360 226v96.398438c0 74.402343-50.398438 138.902343-122.402344 156.902343-3.296875.898438-6.296875 2.398438-8.398437 4.800781l-23.699219 23.398438c-2.699219 3-6.601562 4.5-10.5 4.5s-7.800781-1.5-10.5-4.5l-23.699219-23.398438c-2.101562-2.402343-5.101562-3.902343-8.398437-4.800781-72.003906-18-122.402344-82.5-122.402344-156.902343v-96.398438c0-8.402344 6.597656-15 15-15h300c8.402344 0 15 6.597656 15 15zm0 0" fill="#ffbd86"/><path d="m360 226v96.398438c0 74.402343-50.398438 138.902343-122.402344 156.902343-3.296875.898438-6.296875 2.398438-8.398437 4.800781l-23.699219 23.398438c-2.699219 3-6.601562 4.5-10.5 4.5v-301h150c8.402344 0 15 6.597656 15 15zm0 0" fill="#f6a96c"/><path d="m219.390625 421.546875c-6.726563 0-12.832031-4.542969-14.53125-11.367187-2.019531-8.027344 2.871094-16.171876 10.914063-18.179688 31.929687-7.984375 54.226562-36.546875 54.226562-69.464844 0-8.289062 6.710938-15 15-15s15 6.710938 15 15c0 46.699219-31.640625 87.234375-76.964844 98.558594-1.214844.304688-2.445312.453125-3.644531.453125zm0 0" fill="#ffbd86"/><path d="m270 15c0 8.402344-6.597656 15-15 15h-30c-8.402344 0-15 6.597656-15 15v30c0 8.402344-6.597656 15-15 15s-15-6.597656-15-15v-30c0-13.199219 5.699219-25.199219 15-33.300781 7.800781-7.199219 18.300781-11.699219 30-11.699219h30c8.402344 0 15 6.597656 15 15zm0 0" fill="#99503d"/><path d="m270 15c0 8.402344-6.597656 15-15 15h-30c-8.402344 0-15 6.597656-15 15v30c0 8.402344-6.597656 15-15 15v-78.300781c7.800781-7.199219 18.300781-11.699219 30-11.699219h30c8.402344 0 15 6.597656 15 15zm0 0" fill="#804231"/><path d="m195 60c-118.5 0-195 65.800781-195 166 0 8.402344 6.597656 15 15 15h360c8.402344 0 15-6.597656 15-15 0-100.199219-76.5-166-195-166zm0 0" fill="#b35f49"/><path d="m390 226c0 8.402344-6.597656 15-15 15h-180v-181c118.5 0 195 65.800781 195 166zm0 0" fill="#99503d"/></svg>

src/lib/assets/images/seashell.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M277.422,0c-61.228,0-118.79,23.843-162.084,67.138C72.043,110.432,48.2,167.995,48.2,229.222
+			c0,75.533,29.414,146.544,82.823,199.954C184.434,482.586,255.444,512,330.978,512h15V334.585
+			C413.394,318.998,463.8,258.463,463.8,186.378C463.8,83.609,380.191,0,277.422,0z M311.698,308.48
+			c-52.208,0-94.683-42.474-94.683-94.682c0-40.112,32.634-72.746,72.746-72.746c30.436,0,55.196,24.761,55.196,55.196
+			c0,22.694-18.463,41.157-41.157,41.157c-16.501,0-29.926-13.425-29.926-29.926h-30c0,33.043,26.883,59.926,59.926,59.926
+			c39.236,0,71.157-31.921,71.157-71.157c0-46.978-38.219-85.196-85.196-85.196c-56.654,0-102.746,46.091-102.746,102.746
+			c0,68.75,55.933,124.682,124.683,124.682c1.434,0,2.855-0.02,4.279-0.059v143.145c-61.879-3.597-119.55-29.411-163.74-73.603
+			C104.493,360.22,78.2,296.742,78.2,229.222C78.2,119.371,167.57,30,277.422,30C363.649,30,433.8,100.151,433.8,186.378
+			C433.8,253.705,379.025,308.48,311.698,308.48z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/lib/assets/images/shell.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
+<path style="fill:#FFC850;" d="M508.081,408.426L365.99,280.274l-0.001-0.002c54.379-63.154,51.627-158.538-8.261-218.426
+	c-78.469-78.469-205.693-78.469-284.162,0c-98.086,98.087-98.086,257.116,0,355.203c119.511,119.511,311.402,122.53,434.57,9.056
+	C513.307,421.339,513.286,413.157,508.081,408.426z"/>
+<path style="fill:#F9B428;" d="M94.169,417.049c-98.086-98.087-98.086-257.117,0-355.203C130.783,25.233,178.01,5.71,225.947,3.264
+	c-54.8-2.796-110.527,16.727-152.383,58.582c-98.086,98.087-98.086,257.116,0,355.203c63.945,63.945,148.611,94.525,232.385,91.77
+	C229.042,506.329,152.873,475.753,94.169,417.049z"/>
+<path style="fill:#ED9D0F;" d="M289.393,331.045c34.26-4.103,65.72-18.428,88.095-40.399l-11.5-10.372l-0.001-0.002
+	c0.012-0.014,0.023-0.028,0.035-0.041c-6.562,6.34-13.991,11.959-22.106,16.769c-0.044-0.024-0.085-0.052-0.13-0.075
+	c-33.376-17.038-41.526-47.451-43.352-57.531c13.121-14.595,19.358-33.214,18.738-51.646c28.342,0.662,59.158-7.183,85.165-24.456
+	c-0.44-5.803-1.196-11.585-2.263-17.322c-33.937,25.609-71.464,26.765-85.09,26.202c-6.373-25.319-25.745-43.844-47.779-53.191
+	c21.37-27.921,31.526-63.721,24.108-100.41c-5.736-2.401-11.559-4.525-17.453-6.371c0.039,0.184,0.077,0.369,0.13,0.553
+	c11.14,38.48-0.477,75.416-22.593,101.19c-26.076-5.707-54.035,0.364-75.637,17.704c-22.337-34.511-59.954-60.753-105.447-68.519
+	c-4.438,4.501-8.675,9.125-12.704,13.865c48.079,4.979,85.911,31.452,106.719,65.522c-18.723,20.817-28.144,47.085-28.267,73.391
+	c-46.687-7.439-99.217-1.042-138.021,27.016c0.087,6.315,0.407,12.627,0.968,18.923c48.674-42.115,118.657-33.493,138.114-30.059
+	c2.048,14.727,7.059,29.115,15.029,42.197c0.131,0.243,0.273,0.48,0.43,0.709c6.664,10.753,15.117,20.279,25.25,28.374
+	c-38.226,26.195-71.599,72.864-84.976,133.403c4.45,3.709,8.973,7.287,13.574,10.711c12.168-64.185,48.028-111.871,85.163-134.617
+	c21.472,12.757,47.676,19.698,75.514,19.698c1.438,0,2.887-0.034,4.334-0.071c-10.022,56.448-5.295,124.321,22.654,176.808
+	c5.81-0.01,11.618-0.189,17.421-0.519C271.771,437.642,285.857,349.306,289.393,331.045z M294.112,158.083
+	c14.998,22.563,12.558,53.375-7.32,73.252c-17.525,17.523-46.039,17.524-63.564,0.001c-10.403-10.404-13-26.575-6.483-39.673
+	c9.856,14.726,23.133,21.248,37.492,18.377C280.191,204.85,293.547,187.407,294.112,158.083z M254.184,130.049
+	c8.244,2.303,16.191,6.054,23.444,11.292c5.544,41.582-11.128,50.486-26.423,53.546c-8.239,1.644-15.668-2.571-22.088-12.535
+	c-6.102-9.469-20.178-8.857-25.509,1.074c-7.563,14.089-7.649,30.855-1.075,44.882c-17.208,2.021-31.056,12.184-41.084,26.23
+	C133.833,191.167,182.085,112.678,254.184,130.049z M169.934,269.921c16.462-28.721,38.019-27.163,44.035-26.071
+	c20.33,18.852,50.57,21.105,73.277,6.769c4.171,14.529,14.598,38.018,40.17,54.663c-16.32,6.847-34.491,10.829-53.319,11.444
+	C233.673,318.02,192.604,303.239,169.934,269.921z"/>
+<path style="fill:#FFC850;" d="M253.587,129.882c-67.18-18.162-120.968,58.496-92.137,124.656
+	c10.029-14.047,23.878-24.209,41.084-26.23c-6.574-14.027-6.488-30.793,1.075-44.882c5.329-9.926,19.404-10.548,25.509-1.074
+	c6.42,9.964,13.849,14.179,22.088,12.535c15.295-3.06,31.967-11.964,26.423-53.546C268.097,134.458,261.172,132.369,253.587,129.882
+	z"/>
+<path style="fill:#F9B428;" d="M244.164,127.98c-64.602-8.759-109.508,65.076-82.715,126.558
+	c4.794-6.715,9.866-11.727,14.859-15.491C164.003,188.479,195.186,134.577,244.164,127.98z"/>
+<path style="fill:#FFC850;" d="M287.247,250.619c-22.707,14.336-52.947,12.083-73.277-6.769c-6.017-1.092-27.574-2.65-44.035,26.071
+	c22.664,33.308,63.724,48.099,104.164,46.805c18.828-0.614,36.999-4.597,53.319-11.444
+	C301.844,288.637,291.417,265.148,287.247,250.619z"/>
+<path style="fill:#F9B428;" d="M276.667,311.454c-38.07-4.652-75.367-23.9-93.639-57.973c-4.468,3.885-8.943,9.198-13.094,16.44
+	c22.664,33.308,63.724,48.099,104.164,46.805c11.162-0.364,22.088-1.921,32.539-4.548
+	C296.818,312.901,286.763,312.681,276.667,311.454z"/>
+<path style="fill:#FFC850;" d="M216.744,191.664c-6.517,13.097-3.92,29.268,6.483,39.673c17.525,17.523,46.039,17.522,63.564-0.001
+	c19.878-19.878,22.318-50.689,7.32-73.252c-0.564,29.324-13.92,46.767-39.876,51.958C239.878,212.912,226.6,206.39,216.744,191.664z
+	"/>
+<path style="fill:#F9B428;" d="M233.804,207.452c-6.347-3.112-12.131-8.424-17.06-15.789
+	c-14.676,29.494,16.121,59.207,48.567,51.619C248.21,239.284,234.096,225.735,233.804,207.452z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/lib/components/analytics/index.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { PUBLIC_UMAMI_DO_NOT_TRACK, PUBLIC_UMAMI_URL, PUBLIC_UMAMI_ID } from '$env/static/public';
+	const analyticsURL = `https://${PUBLIC_UMAMI_URL}/umami.js`;
+</script>
+
+<svelte:head>
+	<script
+		async
+		defer
+		data-website-id={PUBLIC_UMAMI_ID}
+		data-do-not-track={PUBLIC_UMAMI_DO_NOT_TRACK}
+		src={analyticsURL}
+	></script>
+</svelte:head>

src/routes/+layout.svelte

@@ -3,9 +3,16 @@
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
 	import '$root/styles/styles.pcss';
-	import SEO from '$root/lib/components/SEO.svelte';
+	import Analytics from '$lib/components/analytics/index.svelte';
+	import SEO from '$lib/components/SEO.svelte';
+
+	const dev = process.env.NODE_ENV !== 'production';
 </script>
 
+{#if !dev}
+	<Analytics />
+{/if}
+
 <SEO />
 
 <div class="wrapper">

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
-	import SEO from '$lib/components/SEO.svelte';
+	import SEO from '$root/lib/components/SEO.svelte';
 
 	export let data: PageData;
   const userNames = {
@@ -18,12 +18,11 @@
 	</div>
 	<div>
 		<p>
-			I'm a full stack software engineer currently working on Java Spring,
+			I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.
-			PostgreSQL, and React / Angular JS.
 		</p>
 		<p>
 			At home you can usually find me learning new things and working with
-			Gatsby, Svelte Kit, and NextJS.
+			SvelteKit, Next.js, and Gatsby.
 		</p>
 		<p>
 			Or you may find me jamming out to music 🎶, hiking ⛰️, making{' '}

src/routes/about/+page.svelte

@@ -1,5 +1,400 @@
 <script lang="ts">
+	export const prerender = true;
 	import SEO from "$root/lib/components/SEO.svelte";
+	import Graphql from '@iconify-icons/simple-icons/graphql';
+	import Nextdotjs from '@iconify-icons/simple-icons/next-dot-js';
+	import Prisma from '@iconify-icons/simple-icons/prisma';
+	import Gatsby from '@iconify-icons/simple-icons/gatsby';
+	import Docker from '@iconify-icons/simple-icons/docker';
+	import React from '@iconify-icons/simple-icons/react';
+	import Remix from '@iconify-icons/simple-icons/remix';
+	import Svelte from '@iconify-icons/simple-icons/svelte';
+	import TypeScript from '@iconify-icons/simple-icons/typescript';
+
+	import adventure from '$lib/assets/images/adventure.png';
+	import orange_derp from '$lib/assets/images/orange_derp.jpg';
+	import tortie_derp from '$lib/assets/images/tortie_derp.jpg';
 </script>
 
 <SEO title="About" />
+
+<div class="about">
+	<div>
+		<h1>About</h1>
+		<p>Hey! My name is Bradley Shellnut.</p>
+		<p>
+			I'm {new Date().getFullYear() - 1991} years old and I am a full stack
+			software engineer who's interested in new tech and not afraid to
+			discover new interests.
+		</p>
+	</div>
+	<div>
+		<h2>More deets</h2>
+		<p>
+			I graduated from Cal Poly San Luis Obispo in 2013 with a Bachelor's
+			degree in Computer Engineering.{' '}
+			<span class="emoji" title="Software + Hardware">
+				💻
+			</span>
+		</p>
+		<p>
+			At work I develop in Java Spring, Spring Boot, PostgreSQL, and React /
+			Angular.
+		</p>
+		<p>
+			At home I delve into other frameworks, languages, and platforms such
+			as:
+		</p>
+		<div
+			class="tech-list"
+		>
+			<a
+				target="_blank"
+				aria-label="React"
+				href="https://reactjs.org/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={React} width="24" height="24" role="img" title="React" />
+				<p>React</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="TypeScript"
+				href="https://typescriptlang.org/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={TypeScript} width="24" height="24" role="img" title="TypeScript" />
+				<p>TypeScript</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="Svelte"
+				href="https://svelte.dev"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Svelte} width="24" height="24" role="img" title="Svelte" />
+				<p>Svelte</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="Remix"
+				href="https://remix.run/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Remix} width="24" height="24" role="img" title="Remix" />
+				<p>Remix</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="GraphQL"
+				href="https://graphql.org/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Graphql} width="24" height="24" role="img" title="GraphQL" />
+				<p>GraphQL</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="Prisma"
+				href="https://prisma.io/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Prisma} width="24" height="24" role="img" title="Prisma" />
+				<p>Prisma</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="NextJS"
+				href="https://nextjs.org/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Nextdotjs} width="24" height="24" role="img" title="NextJS" />
+				<p>NextJS</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="GatsbyJS"
+				href="https://gatsbyjs.com/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Gatsby} width="24" height="24" role="img" title="Gatsby" />
+				<p>Gatsby</p>
+			</a>
+			<a
+				target="_blank"
+				aria-label="Docker"
+				href="https://docker.com/"
+				class="center"
+				rel="noreferrer"
+			>
+				<iconify-icon icon={Docker} width="24" height="24" role="img" title="Docker" />
+				<p>Docker</p>
+			</a>
+		</div>
+	</div>
+	<div>
+		<h2>Extracurricular</h2>
+		<p>
+			Outside of work I like to take tutorials from many instructors like
+			those below:
+		</p>
+		<div class="extracurricular">
+			<div class="card">
+				<h3>
+					<a
+						target="_blank"
+						aria-label="Wes Bos Courses"
+						href="https://wesbos.com/courses"
+						rel="noreferrer"
+					>
+						Wes Bos
+					</a>
+				</h3>
+				<div class="tags">
+					<p>React</p>
+					<p>GraphQL</p>
+					<p>Gatsby</p>
+				</div>
+			</div>
+			<div class="card">
+				<h3>
+					<a
+						target="_blank"
+						aria-label="Levelup Tutorials"
+						href="https://leveluptutorials.com"
+						rel="noreferrer"
+					>
+						LevelupTutorials
+					</a>{' '}
+					-{' '}
+					<a
+						target="_blank"
+						aria-label="Scott Tolinski"
+						href="https://www.scotttolinski.com"
+						rel="noreferrer"
+					>
+						Scott Tolinski
+					</a>
+				</h3>
+				<div class="tags">
+					<p>React</p>
+					<p>TypeScript</p>
+					<p>Svelte Kit</p>
+					<p>Remix</p>
+					<p>Figma</p>
+					<p>Design Systems</p>
+				</div>
+			</div>
+			<div class="card">
+				<h3>
+					<a
+						target="_blank"
+						aria-label="Levelup Tutorials"
+						href="https://leveluptutorials.com"
+						rel="noreferrer"
+					>
+						LevelupTutorials
+					</a>{' '}
+					-{' '}
+					<a
+						target="_blank"
+						aria-label="Amy Kapernick"
+						href="https://www.amyskapers.dev/"
+						rel="noreferrer"
+					>
+						Amy Kapernick
+					</a>
+				</h3>
+				<div class="tags">
+					<p>Accessibility for Everyone</p>
+				</div>
+			</div>
+			<div class="card">
+				<h3>
+					<a
+						target="_blank"
+						aria-label="Andrew Mead on Udemy"
+						href="https://www.udemy.com/user/andrewmead/"
+						rel="noreferrer"
+					>
+						Andrew Mead
+					</a>
+				</h3>
+				<div class="tags">
+					<p>GraphQL</p>
+					<p>Apollo</p>
+					<p>Prisma</p>
+				</div>
+			</div>
+			<div class="card">
+				<h3>
+					<a
+						target="_blank"
+						aria-label="Steven Grider on Udemy"
+						href="https://www.udemy.com/user/sgslo/"
+						rel="noreferrer"
+					>
+						Steven Grider
+					</a>
+				</h3>
+				<div class="tags">
+					<p>React</p>
+					<p>Redux</p>
+					<p>Docker</p>
+					<p>GraphQL</p>
+					<p>CSS</p>
+					<p>HTML</p>
+					<p>JS</p>
+				</div>
+			</div>
+			<div class="card">
+				<h3>
+					<a
+						target="_blank"
+						aria-label="Jonas Schmedtmann on Udemy"
+						href="https://www.udemy.com/user/jonasschmedtmann/"
+						rel="noreferrer"
+					>
+						Jonas Schmedtmann
+					</a>
+				</h3>
+				<div class="tags">
+					<p>CSS</p>
+					<p>HTML</p>
+					<p>JS</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div>
+		<h2>Other fun things about me&hellip;</h2>
+		<div style="display: grid;">
+			<p>
+				Currently on a road trip around the U.S. vaguely following Route 66!
+			</p>
+			<div
+				style="
+					display: grid;
+					grid-template-columns: minmax(400px, 0.5fr);
+					align-items: center;
+					justify-content: center;
+				"
+			>
+				<figure>
+					<img src={adventure} alt="Road Trip Adventure" />
+					<p class="center">Route 66 Road Trip</p>
+				</figure>
+			</div>
+		</div>
+		<div>
+			<p>Bringing these two cats, Turnip and Taco, along for the ride.</p>
+			<div class="cat-pics">
+				<figure>
+					<img src={tortie_derp} alt="Turnip Cat" />
+					<p class="center">Turnip</p>
+				</figure>
+				<figure>
+					<img src={orange_derp} alt="Taco Cat" />
+					<p class="center">Taco 🌮</p>
+				</figure>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.about {
+		display: grid;
+		grid-gap: 2.5rem;
+
+		p {
+			margin: 1rem;
+			padding: 0.2rem;
+		}
+	}
+
+	.tech-list {
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: row;
+		grid-gap: 1rem;
+		margin-top: 1rem;
+		font-size: 2rem;
+
+		a {
+			display: grid;
+			justify-items: center;
+
+			font-weight: bold;
+			margin-right: 0;
+			padding: 0;
+			text-decoration: none;
+			padding: 0.3rem;
+			margin-left: 1rem;
+			color: var(--lightGrey);
+
+			p {
+				font-size: 1.5rem;
+				padding-top: 0.3rem;
+				margin: 0;
+			}
+
+			&:hover {
+				color: var(--shellYellow);
+				p {
+					color: var(--shellYellow);
+				}
+			}
+		}
+	}
+
+	.extracurricular {
+		display: grid;
+		grid-template-columns: repeat(3, auto);
+		justify-content: center;
+		align-items: center;
+		gap: 1.5rem;
+
+		@media (max-width: 1000px) {
+			grid-template-columns: repeat(2, auto);
+			--cardHeightMin: 20rem;
+		}
+
+		@media (max-width: 700px) {
+			--cardHeightMin: 10rem;
+			grid-template-columns: 0.8fr;
+		}
+	}
+
+	.tags {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: left;
+		align-items: center;
+
+		p {
+			background-color: var(--linkHover);
+			color: var(--buttonTextColor);
+			padding: 0.25rem 0.5rem;
+			margin: 0.5rem 0.25rem;
+			border-radius: 2px;
+			font-weight: 800;
+			font-size: 1.2rem;
+		}
+	}
+
+	.cat-pics {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(200px, 0.3fr));
+		align-items: center;
+		justify-content: center;
+	}
+</style>