diff --git a/assets/png/obsidian-garden.png b/assets/png/obsidian-garden.png
new file mode 100644
index 0000000..c6eae41
Binary files /dev/null and b/assets/png/obsidian-garden.png differ
diff --git a/assets/png/orchid-map.png b/assets/png/orchid-map.png
new file mode 100644
index 0000000..e0c8c9b
Binary files /dev/null and b/assets/png/orchid-map.png differ
diff --git a/assets/png/vault48.png b/assets/png/vault48.png
new file mode 100644
index 0000000..77c1702
Binary files /dev/null and b/assets/png/vault48.png differ
diff --git a/components/bio/BioHeading.vue b/components/bio/BioHeading.vue
index bac404c..cecf4a5 100644
--- a/components/bio/BioHeading.vue
+++ b/components/bio/BioHeading.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="$style.grid">
+  <div :class="$style.grid">
     <div>
       <img src="~/assets/svg/howdy.svg" />
     </div>
@@ -17,7 +17,7 @@
         of doing <b>Typescript</b> and <b>Golang</b> backend.
       </p>
     </div>
-  </section>
+  </div>
 </template>
 
 <script lang="ts" setup></script>
diff --git a/components/bio/BioProjectCard.vue b/components/bio/BioProjectCard.vue
new file mode 100644
index 0000000..cd8c3dc
--- /dev/null
+++ b/components/bio/BioProjectCard.vue
@@ -0,0 +1,106 @@
+<template>
+  <UiCard>
+    <div :class="$style.card">
+      <div :class="$style.thumbnail">
+        <img :src="image" :class="$style.image" :alt="name" />
+      </div>
+
+      <div :class="$style.content">
+        <div :class="$style.head">
+          <h3 :class="$style.title">{{ name }}</h3>
+
+          <div :class="$style.url">
+            <NuxtLink :to="url">{{ url }}</NuxtLink>
+          </div>
+        </div>
+
+        <div :class="$style.description">
+          {{ description }}
+        </div>
+      </div>
+
+      <div :class="$style.buttons">
+        <UiActionButton :href="source" variant="outline" _target="blank">
+          View Code
+
+          <template v-slot:prefix>
+            <IconsCode width="22" height="22" fill="currentColor" />
+          </template>
+        </UiActionButton>
+
+        <UiActionButton :href="url" variant="primary" _target="blank">
+          Visit Page
+          <template v-slot:suffix>
+            <IconsArrowRight width="22" height="22" fill="currentColor" />
+          </template>
+        </UiActionButton>
+      </div>
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  name: string;
+  description: string;
+  url: string;
+  source: string;
+  image: string;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" module>
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.thumbnail {
+  height: 250px;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 1px solid var(--color-line);
+  overflow: hidden;
+}
+
+.image {
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+}
+
+.content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.head {
+  margin-bottom: 16px;
+}
+.title {
+  margin: 0 0 4px 0;
+}
+
+.url {
+  font-size: 0.9em;
+}
+
+.description {
+  font-size: 0.9em;
+  line-height: 1.5em;
+  color: var(--color-text-secondary);
+  white-space: pre-line;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 10px;
+  column-gap: 10px;
+  padding: 16px;
+}
+</style>
diff --git a/components/bio/BioProjects.vue b/components/bio/BioProjects.vue
index 06f3f26..aca517a 100644
--- a/components/bio/BioProjects.vue
+++ b/components/bio/BioProjects.vue
@@ -1,20 +1,30 @@
 <template>
-  <section :class="$style.projects">
-    <h2>My Projects</h2>
+  <div :class="$style.projects">
+    <h2>Projects</h2>
 
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat natus
-      perspiciatis ad voluptatum nisi saepe, molestiae autem dolores est modi
-      quod inventore similique omnis asperiores. Qui beatae magnam ab
-      consequatur.
-    </p>
-  </section>
+    <div :class="$style.grid">
+      <BioProjectCard
+        v-for="project in projects"
+        :key="project.name"
+        :name="project.name"
+        :description="project.description"
+        :url="project.pageUrl"
+        :source="project.codeUrl"
+        :image="project.image"
+      />
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { projects } from "~~/constants/projects";
+</script>
 
 <style lang="scss" module>
-.projects {
-  text-align: center;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  column-gap: 16px;
+  row-gap: 16px;
 }
 </style>
diff --git a/components/bio/BioSkills.vue b/components/bio/BioSkills.vue
index 8e9a456..5f4f1e9 100644
--- a/components/bio/BioSkills.vue
+++ b/components/bio/BioSkills.vue
@@ -3,7 +3,7 @@
     <h2>Skills</h2>
 
     <div :class="$style.list">
-      <SkillsCard
+      <BioSkillsCard
         :title="skill.title"
         :level="skill.level"
         :description="skill.description ?? ''"
@@ -11,7 +11,7 @@
         v-for="skill in skills"
       >
         <img :src="skill.icon" width="48" height="48" />
-      </SkillsCard>
+      </BioSkillsCard>
     </div>
   </div>
 </template>
diff --git a/components/skills/SkillsCard.vue b/components/bio/BioSkillsCard.vue
similarity index 78%
rename from components/skills/SkillsCard.vue
rename to components/bio/BioSkillsCard.vue
index e681256..0961a23 100644
--- a/components/skills/SkillsCard.vue
+++ b/components/bio/BioSkillsCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="$style.card">
+  <UiCard>
     <div :class="$style.grid">
       <div :class="$style.icon">
         <slot />
@@ -14,7 +14,7 @@
     <div :class="$style.description">
       {{ description }}
     </div>
-  </div>
+  </UiCard>
 </template>
 
 <script lang="ts" setup>
@@ -28,21 +28,6 @@ defineProps<Props>();
 </script>
 
 <style lang="scss" module>
-.card {
-  border-radius: 8px;
-  border: 1px solid var(--color-line);
-  transition: all 0.25s;
-
-  &:hover {
-    background-color: var(--color-line);
-
-    &,
-    & > .grid {
-      border-color: var(--color-text-secondary);
-    }
-  }
-}
-
 .grid {
   display: grid;
   grid-template-columns: 48px 1fr;
diff --git a/components/icons/IconsCode.vue b/components/icons/IconsCode.vue
new file mode 100644
index 0000000..60bd2c8
--- /dev/null
+++ b/components/icons/IconsCode.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="48"
+    width="48"
+    viewBox="0 0 48 48"
+  >
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="m16 35.9-12-12 12.1-12.1 2.15 2.15L8.3 23.9l9.85 9.85Zm15.9.1-2.15-2.15 9.95-9.95-9.85-9.85L32 11.9l12 12Z"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module></style>
diff --git a/components/ui/UiActionButton.vue b/components/ui/UiActionButton.vue
index b3cf413..f454062 100644
--- a/components/ui/UiActionButton.vue
+++ b/components/ui/UiActionButton.vue
@@ -30,7 +30,7 @@
 interface Props {
   href: string;
   size?: "md";
-  variant?: "outline";
+  variant?: "outline" | "text" | "primary";
 }
 
 withDefaults(defineProps<Props>(), {
@@ -44,11 +44,15 @@ withDefaults(defineProps<Props>(), {
   color: white;
   border-radius: 8px;
   text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.variant-primary {
+    background-color: var(--color-primary);
+  }
 
   &.variant-outline {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
     box-shadow: var(--color-text) 0 0 0 1px;
     color: var(--color-text);
     overflow: hidden;
@@ -68,7 +72,6 @@ withDefaults(defineProps<Props>(), {
     }
 
     &:hover {
-      color: var(--color-background);
       box-shadow: var(--color-background) 0 0 0 1px;
 
       &::after {
@@ -96,6 +99,8 @@ withDefaults(defineProps<Props>(), {
 .title {
   z-index: 1;
   position: relative;
+  flex: 1;
+  text-align: center;
 
   .size-md.prefixed & {
     padding-left: 10px;
diff --git a/components/ui/UiCard.vue b/components/ui/UiCard.vue
new file mode 100644
index 0000000..8d289f9
--- /dev/null
+++ b/components/ui/UiCard.vue
@@ -0,0 +1,20 @@
+<template>
+  <div :class="[$style.card, $attrs.class]">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.card {
+  border-radius: 8px;
+  border: 1px solid var(--color-line);
+  transition: all 0.25s;
+
+  &:hover {
+    background-color: var(--color-code-background);
+    border-color: var(--color-text-secondary);
+  }
+}
+</style>
diff --git a/constants/projects.ts b/constants/projects.ts
new file mode 100644
index 0000000..3971833
--- /dev/null
+++ b/constants/projects.ts
@@ -0,0 +1,55 @@
+import { Technology } from "./technologies";
+import vault from "~~/assets/png/vault48.png";
+import orchid from "~~/assets/png/orchid-map.png";
+import obsidian from "~~/assets/png/obsidian-garden.png";
+
+interface Project {
+  name: string;
+  description: string;
+  pageUrl: string;
+  codeUrl: string;
+  image: string;
+  technologies: Technology[];
+}
+
+export const projects: Project[] = [
+  {
+    name: "Vault48",
+    description: `Community blog with a long 13-year history, features photo, video and audio embedding.\n\nBeeing initially written with Drupal 5, went through refactoring to Laravel + Vue and then, nowadays works on React and Golang stack.`,
+    pageUrl: "https://vault48.org",
+    codeUrl: "https://github.com/muerwre/vault-frontend",
+    image: vault,
+    technologies: [
+      Technology.React,
+      Technology.ReactSSR,
+      Technology.GoLang,
+      Technology.Postgres,
+    ],
+  },
+  {
+    name: "Orchid Map",
+    description: `Local cycling community Web Maps made with React, Leaflet, and Golang.\n\nImplements automatic route building with OSRM and map rasterization with canvas. Used by users in local cycling communities for ride sharing.`,
+    pageUrl: "https://map.vault48.org",
+    codeUrl: "https://github.com/muerwre/orchidmap-front",
+    image: orchid,
+    technologies: [
+      Technology.React,
+      Technology.ReactSSR,
+      Technology.GoLang,
+      Technology.Postgres,
+    ],
+  },
+  {
+    name: "Obsidian Garden",
+    description: `Frontend for personal knowledge database managed by Obsidian.md software.\n\nMade with nuxt3, nuxt-content plugin and some customizations. Deployed with drone-ci directly to github-pages.`,
+    pageUrl: "https://muerwre.github.io",
+    codeUrl: "https://github.com/muerwre/muerwre.github.io",
+    image: obsidian,
+    technologies: [
+      Technology.React,
+      Technology.ReactSSR,
+      Technology.GoLang,
+      Technology.Postgres,
+    ],
+  },
+];
diff --git a/constants/skills.ts b/constants/skills.ts
index 7a34325..dc8ed8b 100644
--- a/constants/skills.ts
+++ b/constants/skills.ts
@@ -1,16 +1,4 @@
-import ReactLogo from "@/assets/svg/react-logo.svg";
-import ReactNativeLogo from "@/assets/svg/react-native-logo.svg";
-import ReactSSR from "@/assets/svg/react-ssr-logo.svg";
-import TsLogo from "@/assets/svg/ts-logo.svg";
-import GoLangLogo from "@/assets/svg/golang-logo.svg";
-import HTMLLogo from "@/assets/svg/html-logo.svg";
-import SVGLogo from "@/assets/svg/svg-logo.svg";
-import ArchLogo from "@/assets/svg/arch-logo.svg";
-import GQLLogo from "@/assets/svg/gql-logo.svg";
-import SwaggerLogo from "@/assets/svg/swagger-logo.svg";
-import VueLogo from "@/assets/svg/vue-logo.svg";
-import PostgresLogo from "@/assets/svg/postgres-logo.svg";
-import DockerLogo from "@/assets/svg/docker-logo.svg";
+import { Technology, technologyIcons, technologyTitles } from "./technologies";
 
 interface Skill {
   title: string;
@@ -21,80 +9,80 @@ interface Skill {
 
 export const skills: Skill[] = [
   {
-    title: "React",
+    title: technologyTitles[Technology.React],
     description: "Classes and FC-s, hooks, context, redux, redux-saga, mobx",
     level: 5,
-    icon: ReactLogo,
+    icon: technologyIcons[Technology.React],
   },
   {
-    title: "Typescript",
+    title: technologyTitles[Technology.ReactNative],
     description:
       "For both frontend and backend development: generics, guards, infers",
     level: 4,
-    icon: TsLogo,
+    icon: technologyIcons[Technology.Ts],
   },
   {
-    title: "SSR (Next, Gatsby)",
+    title: technologyTitles[Technology.ReactSSR],
     description: `Automated generation, incremental, static, and dynamic rendering`,
     level: 4,
-    icon: ReactSSR,
+    icon: technologyIcons[Technology.ReactSSR],
   },
   {
-    title: "Vue.js & Nuxt",
+    title: technologyTitles[Technology.Ts],
     description: `Common SPA-s and SSR blogs like this one, with composition API, and Vuex`,
     level: 3,
-    icon: VueLogo,
+    icon: technologyIcons[Technology.Vue],
   },
   {
-    title: "React Native",
+    title: technologyTitles[Technology.GoLang],
     description: `Basic developing and releasing experience without native modules`,
     level: 3,
-    icon: ReactNativeLogo,
+    icon: technologyIcons[Technology.ReactNative],
   },
   {
-    title: "Golang",
+    title: technologyTitles[Technology.HTML],
     description: "Monolith and microservice apps with REST, GraphQL, and GRPC",
     level: 2,
-    icon: GoLangLogo,
+    icon: technologyIcons[Technology.GoLang],
   },
   {
-    title: "Docker",
+    title: technologyTitles[Technology.Arch],
     description:
       "Docker, docker-compose, private registries, gitlab-ci, and drone-ci",
     level: 4,
-    icon: DockerLogo as string,
+    icon: technologyIcons[Technology.Docker],
   },
   {
-    title: "HTML, CSS, SVG",
+    title: technologyTitles[Technology.GQL],
     description:
       "Adaptive markup, all modern techniques, preprocessors, and CSS-in-JS",
     level: 5,
-    icon: HTMLLogo,
+    icon: technologyIcons[Technology.HTML],
   },
   {
-    title: "Linux Shell",
+    title: technologyTitles[Technology.Swagger],
     description:
       "Linux user since 2003, can write scripts to automate my work. BTW, I use Arch!",
     level: 4,
-    icon: ArchLogo as string,
+    icon: technologyIcons[Technology.Arch],
   },
   {
-    title: "GraphQL",
+    title: technologyTitles[Technology.Vue],
     description:
       "Both server- and client-side. Queries, mutations, cache manipulation",
     level: 4,
-    icon: GQLLogo as string,
+    icon: technologyIcons[Technology.GQL],
   },
   {
-    title: "REST API",
+    title: technologyTitles[Technology.Postgres],
     description: "With Axios, fetch, express, gorilla-mux, and gin-gonic",
     level: 4,
-    icon: SwaggerLogo as string,
+    icon: technologyIcons[Technology.Swagger],
   },
   {
-    title: "SQL",
+    title: technologyTitles[Technology.Docker],
     description: "Base queries, JOIN-s, indexes and simpl query optimizations",
     level: 2,
-    icon: PostgresLogo as string,
+    icon: technologyIcons[Technology.Postgres],
   },
 ];
diff --git a/constants/technologies.ts b/constants/technologies.ts
new file mode 100644
index 0000000..2929bbd
--- /dev/null
+++ b/constants/technologies.ts
@@ -0,0 +1,57 @@
+import ReactLogo from "@/assets/svg/react-logo.svg";
+import ReactNativeLogo from "@/assets/svg/react-native-logo.svg";
+import ReactSSRLogo from "@/assets/svg/react-ssr-logo.svg";
+import TsLogo from "@/assets/svg/ts-logo.svg";
+import GoLangLogo from "@/assets/svg/golang-logo.svg";
+import HTMLLogo from "@/assets/svg/html-logo.svg";
+import ArchLogo from "@/assets/svg/arch-logo.svg";
+import GQLLogo from "@/assets/svg/gql-logo.svg";
+import SwaggerLogo from "@/assets/svg/swagger-logo.svg";
+import VueLogo from "@/assets/svg/vue-logo.svg";
+import PostgresLogo from "@/assets/svg/postgres-logo.svg";
+import DockerLogo from "@/assets/svg/docker-logo.svg";
+
+export enum Technology {
+  React = "React",
+  ReactNative = "ReactNative",
+  ReactSSR = "ReactSSR",
+  Ts = "Ts",
+  GoLang = "GoLang",
+  HTML = "HTML",
+  Arch = "Arch",
+  GQL = "GQL",
+  Swagger = "Swagger",
+  Vue = "Vue",
+  Postgres = "Postgres",
+  Docker = "Docker",
+}
+
+export const technologyIcons: Record<Technology, string> = {
+  [Technology.React]: ReactLogo,
+  [Technology.ReactNative]: ReactNativeLogo,
+  [Technology.ReactSSR]: ReactSSRLogo,
+  [Technology.Ts]: TsLogo,
+  [Technology.GoLang]: GoLangLogo,
+  [Technology.HTML]: HTMLLogo,
+  [Technology.Arch]: ArchLogo,
+  [Technology.GQL]: GQLLogo,
+  [Technology.Swagger]: SwaggerLogo,
+  [Technology.Vue]: VueLogo,
+  [Technology.Postgres]: PostgresLogo,
+  [Technology.Docker]: DockerLogo,
+};
+
+export const technologyTitles: Record<Technology, string> = {
+  [Technology.React]: "React",
+  [Technology.ReactNative]: "Typescript",
+  [Technology.ReactSSR]: "SSR (Next, Gatsby)",
+  [Technology.Ts]: "Vue.js & Nuxt",
+  [Technology.GoLang]: "React Native",
+  [Technology.HTML]: "Golang",
+  [Technology.Arch]: "Docker",
+  [Technology.GQL]: "HTML, CSS, SVG",
+  [Technology.Swagger]: "Linux Shell",
+  [Technology.Vue]: "GraphQL",
+  [Technology.Postgres]: "REST API",
+  [Technology.Docker]: "SQL",
+};
diff --git a/custom.d.ts b/custom.d.ts
index 5e52f80..e4d7e6d 100644
--- a/custom.d.ts
+++ b/custom.d.ts
@@ -2,3 +2,8 @@ declare module "*.svg" {
   const content: string;
   export default content;
 }
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
diff --git a/pages/bio.vue b/pages/bio.vue
index 8eeda18..9d6fa49 100644
--- a/pages/bio.vue
+++ b/pages/bio.vue
@@ -7,6 +7,10 @@
     <section :class="$style.section">
       <BioSkills />
     </section>
+
+    <section :class="$style.section">
+      <BioProjects />
+    </section>
   </article>
 </template>