feat: add many more icons and tech to about section

michaelbrusegard · Jan 8, 2025 · bc755d4 · bc755d4
1 parent db84701
commit bc755d4
Show file tree

Hide file tree

Showing 15 changed files with 861 additions and 1 deletion.
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -26,6 +26,18 @@ import {
   Trpc,
   Sql,
   Kotlin,
+  SpringBoot,
+  Angular,
+  MySql,
+  FireStore,
+  Sqlite,
+  Aws,
+  Nginx,
+  Azure,
+  AffinityDesigner,
+  AffinityPhoto,
+  Figma,
+  Neovim,
 } from '@/constants/tech-icons';
 
 import {
@@ -93,6 +105,176 @@ const skills = [
       },
     ],
   },
+  {
+    title: 'FRAMEWORKS',
+    tech: [
+      {
+        name: 'React',
+        Icon: React,
+        link: 'https://react.dev',
+      },
+      {
+        name: 'Next.js',
+        Icon: Next,
+        link: 'https://nextjs.org',
+      },
+      {
+        name: 'Express',
+        Icon: Express,
+        link: 'https://expressjs.com',
+      },
+      {
+        name: 'Django',
+        Icon: Django,
+        link: 'https://www.djangoproject.com',
+      },
+      {
+        name: 'Springboot',
+        Icon: SpringBoot,
+        link: 'https://docs.spring.io/spring-boot/index.html',
+      },
+      {
+        name: 'Jetpack Compose',
+        Icon: JetpackCompose,
+        link: 'https://developer.android.com/compose',
+      },
+      {
+        name: 'Angular',
+        Icon: Angular,
+        link: 'https://angular.dev',
+      },
+    ],
+  },
+  {
+    title: 'DATABASES & API',
+    tech: [
+      {
+        name: 'PostgreSQL',
+        Icon: Postgres,
+        link: 'https://www.postgresql.org',
+      },
+      {
+        name: 'MySQL',
+        Icon: MySql,
+        link: 'https://www.mysql.com',
+      },
+      {
+        name: 'SQLite',
+        Icon: Sqlite,
+        link: 'https://www.sqlite.org/index.html',
+      },
+      {
+        name: 'Firestore',
+        Icon: FireStore,
+        link: 'https://firebase.google.com/docs/firestore',
+      },
+      {
+        name: 'Drizzle ORM',
+        Icon: DrizzleOrm,
+        link: 'https://orm.drizzle.team',
+      },
+      {
+        name: 'tRPC',
+        Icon: Trpc,
+        link: 'https://trpc.io',
+      },
+      {
+        name: 'GraphQL',
+        Icon: GraphQl,
+        link: 'https://graphql.org',
+      },
+    ],
+  },
+  {
+    title: 'INFRASTRUCTURE',
+    tech: [
+      {
+        name: 'Nginx',
+        Icon: Nginx,
+        link: 'https://nginx.org',
+      },
+      {
+        name: 'Docker',
+        Icon: Docker,
+        link: 'https://docs.docker.com',
+      },
+      {
+        name: 'Stripe',
+        Icon: Stripe,
+        link: 'https://stripe.com',
+      },
+      {
+        name: 'Google Cloud Platform',
+        Icon: Gcp,
+        link: 'https://cloud.google.com',
+      },
+      {
+        name: 'Amazon Web Services',
+        Icon: Aws,
+        link: 'https://aws.amazon.com',
+      },
+      {
+        name: 'Azure',
+        Icon: Azure,
+        link: 'https://azure.microsoft.com',
+      },
+      {
+        name: 'Vite',
+        Icon: Vite,
+        link: 'https://vitejs.dev',
+      },
+    ],
+  },
+  {
+    title: 'STYLING & UI',
+    tech: [
+      {
+        name: 'Tailwind CSS',
+        Icon: Tailwind,
+        link: 'https://tailwindcss.com',
+      },
+      {
+        name: 'Motion',
+        Icon: Motion,
+        link: 'https://motion.dev/docs',
+      },
+      {
+        name: 'Three.js',
+        Icon: Three,
+        link: 'https://threejs.org',
+      },
+    ],
+  },
+  {
+    title: 'TOOLS',
+    tech: [
+      {
+        name: 'WezTerm',
+        Icon: WezTerm,
+        link: 'https://wezfurlong.org/wezterm/index.html',
+      },
+      {
+        name: 'Neovim',
+        Icon: Neovim,
+        link: 'https://neovim.io',
+      },
+      {
+        name: 'Affinity Designer',
+        Icon: AffinityDesigner,
+        link: 'https://affinity.serif.com/designer',
+      },
+      {
+        name: 'Affinity Photo',
+        Icon: AffinityPhoto,
+        link: 'https://affinity.serif.com/photo',
+      },
+      {
+        name: 'Figma',
+        Icon: Figma,
+        link: 'https://www.figma.com',
+      },
+    ],
+  },
 ];
 
 const positions = [

diff --git a/src/constants/tech-icons/AffinityDesigner.tsx b/src/constants/tech-icons/AffinityDesigner.tsx
@@ -0,0 +1,36 @@
+function AffinityDesigner({ ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='100%'
+      height='100%'
+      viewBox='0 0 256 256'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M256,24.999c0,-13.797 -11.202,-24.999 -25,-24.999l-205.998,0c-13.798,0 -25.002,11.202 -25.002,24.999l-0,205.999c-0,13.798 11.204,25.002 25.002,25.002l205.999,0c13.797,0 24.999,-11.204 24.999,-25.002l0,-205.999Z'
+        fill='#134881'
+      />
+      <path
+        d='M237.253,227.327c-0.044,5.482 -4.509,9.923 -10.001,9.923l-100.921,-0l-43.138,-74.718l154.06,-0l-0,64.795Zm-218.5,-0.078l-0,-43.871l95.047,-164.628l37.145,-0l-80.297,139.083l45.848,79.416l-87.744,-0c-5.519,-0 -9.999,-4.481 -9.999,-10Zm121.792,-73.239l-37.554,0c-4.194,0 -8.068,-2.199 -10.161,-5.832c-2.1,-3.629 -2.1,-8.104 -0,-11.734l18.785,-32.543l28.93,50.109Zm86.708,-135.26c5.492,-0 9.956,4.439 10.001,9.923l-0,125.337l-86.871,0l-33.851,-58.623l44.246,-76.637l66.475,-0Z'
+        fill='url(#_Radial6)'
+      />
+      <defs>
+        <radialGradient
+          id='_Radial6'
+          cx='0'
+          cy='0'
+          r='1'
+          gradientUnits='userSpaceOnUse'
+          gradientTransform='matrix(259.547,0,0,-259.547,185.854,-22.4529)'
+        >
+          <stop offset='0' stopColor='#6be1fb' />
+          <stop offset='1' stopColor='#134881' />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export { AffinityDesigner };
diff --git a/src/constants/tech-icons/AffinityPhoto.tsx b/src/constants/tech-icons/AffinityPhoto.tsx
@@ -0,0 +1,36 @@
+function AffinityPhoto({ ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='100%'
+      height='100%'
+      viewBox='0 0 256 256'
+      version='1.1'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M256,25c0,-13.798 -11.202,-25 -25,-25l-206,0c-13.798,0 -25,11.202 -25,25l0,205.999c0,13.798 11.202,25 25,25l206,0c13.798,0 25,-11.202 25,-25l0,-205.999Z'
+        fill='#4e3188'
+      />
+      <path
+        d='M237.25,162.521l-0,64.728c-0,5.453 -4.373,9.892 -9.8,9.998l-66.105,0l-43.16,-74.726l119.065,0Zm-85.74,74.726l-116.945,0l58.505,-101.178l58.44,101.178Zm-126.335,-0.657c-3.538,-1.356 -6.11,-4.663 -6.398,-8.599l-0.027,-44.616l47.542,-82.312l37.16,-0l-78.277,135.527Zm112.262,-135.681c3.238,0.013 6.335,1.915 8.008,4.733c0.017,0.029 0.05,0.086 0.05,0.086l9.825,17.013c-0,0 0.057,0.096 0.085,0.141c1.605,2.809 1.667,6.348 0.062,9.207c-3.292,5.761 -6.637,11.493 -9.957,17.24c-1.63,2.795 -4.715,4.618 -7.995,4.659c-6.258,0.026 -18.805,0.012 -18.823,0.012c-3.237,-0.014 -6.385,-1.74 -8.06,-4.558c-0.037,-0.061 -0.107,-0.186 -0.107,-0.186c-0,-0 -9.83,-17.015 -9.85,-17.054c-1.608,-2.809 -1.605,-6.437 -0,-9.297c0.022,-0.042 0.072,-0.126 0.072,-0.126c0,0 6.578,-11.409 9.87,-17.114c1.63,-2.794 4.723,-4.717 8,-4.758c0.055,-0 0.165,-0.003 0.165,-0.003l18.543,0.005l0.112,-0Zm93.035,-81.628l-77.812,134.719l84.59,-0l-0,-125.25c-0,-4.392 -2.838,-8.126 -6.778,-9.469Zm-116.637,-0.531l107.107,-0l-57.925,100.289l-53.552,-92.72l4.37,-7.569Zm24.045,73.798l-66.67,-0l33.335,-57.714l33.335,57.714Z'
+        fill='url(#_Radial7)'
+      />
+      <defs>
+        <radialGradient
+          id='_Radial7'
+          cx='0'
+          cy='0'
+          r='1'
+          gradientUnits='userSpaceOnUse'
+          gradientTransform='matrix(259.563,0,0,259.562,185.757,-22.3146)'
+        >
+          <stop offset='0' fill='#f9a6ff' />
+          <stop offset='1' fill='#ea73ff' />
+        </radialGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export { AffinityPhoto };