add portfolio links

2021-06-07 20:55:11 +03:00 · 2021-06-07 20:55:11 +03:00 · f8d5be6d40
parent 735159aaa3
commit f8d5be6d40
22 changed files with 393 additions and 14 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+*#
+*~
--- a/archetypes/portfolio.md
+++ b/archetypes/portfolio.md
@ -0,0 +1,9 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+type: portfolio
+description: ""
+githug: ""
+site: ""
+---
+
--- a/archetypes/posts.md
+++ b/archetypes/posts.md
@ -0,0 +1,6 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+type: post
+---
+
--- a/assets/basic.scss
+++ b/assets/basic.scss
@ -0,0 +1,60 @@
+@import "variables";
+@import "fonts";
+
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family:  'Mononoki', 'Ubuntu', 'Twemoji' sans-serif;
+  max-width: 1000px;
+  margin: 0 auto;
+  box-shadow: 0px -30px 20px rgba(0, 0, 0, 0.5);
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding:10px 0;
+
+
+
+
+}
+a, .link{
+  transition: 0.3s;
+  color: $link-color;
+  text-decoration: none;
+   &:hover, &:focus{
+     color: var(--pink)
+   }
+ }
+
+@media (min-width: 1000px) {
+  box-shadow: 4px 4px 32px rgba(0, 0, 0, 0.34);
+}
+
+.h1{
+  font-family: 'Mononoki Bold', 'Fira Code SemiBold', 'Twemoji' ;
+  font-size: 2em;
+}
+
+// Highlighting one line code (which uses ` not ```)
+p code, quote code, q code{
+  font-family: $main-font;
+  background: var(--selection);
+  color: var(--cyan);
+  border-radius: 3px;
+  padding: 0 6px;
+}
+
+img {
+    width: 100%;
+}
+
+@import "logo";
+@import "page-404";
+@import "elements/page-links";
+@import "elements/recent-list";
+@import "elements/contacts";
+@import "elements/portfolio-project";
+@import "elements/blog-post-preview";
+@import "elements/blog-post";
--- a/assets/css/elements/portfolio-project.scss
+++ b/assets/css/elements/portfolio-project.scss
@ -21,7 +21,10 @@
  max-width: 70vw;
  transition: 0.3s;
  &:hover, &:focus{
-    box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.5);
+    box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.6);
+  }
+  & h2 {
+      margin-bottom: 0;
  }

 }
@ -48,6 +51,12 @@

 }

+.project-icon{
+    width: 35px;
+    height: auto;
+    margin-right: 10px;
+}
+
 .project-link{
  margin-right: 10px;
  display: flex;
@ -59,22 +68,22 @@
 }
  &--github{
    &::before{
-      content: url("../../svg/github-icon.svg");
+      content: url("./github-icon.svg");
    }
  }
  &--iphone{
    &::before{
-      content: url("../../svg/appstore.svg");
+      content: url("./appstore.svg");
    }
  }
  &--android{
    &::before{
-      content: url("../../svg/googleplay.svg");
+      content: url("./googleplay.svg");
    }
  }
  &--app-page{
    &::before{
-      content: url("../../svg/app-page.svg");
+      content: url("./app-page.svg");
    }
  }
 }
@ -82,4 +91,4 @@
 .project-link__logo{
  margin-right: 10px;
  width: 30px;
-}
+}
--- a/assets/fonts.scss
+++ b/assets/fonts.scss
@ -0,0 +1,33 @@
+@font-face {                    //
+  font-family: 'Mononoki';
+  src: url('../fonts/mononoki-Regular.eot');
+  src: url('../fonts/mononoki-Regular.eot') format('embedded-opentype'),
+       url('../fonts/mononoki-Regular.ttf') format('truetype'),
+       url('../fonts/mononoki-Regular.woff2') format('woff2'),
+       url('../fonts/mononoki-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Mononoki Bold';
+  src: url('../fonts/mononoki-Bold.eot');
+  src: url('../fonts/mononoki-Bold.eot') format('embedded-opentype'),
+url('../fonts/mononoki-Bold.ttf') format('truetype'),
+url('../fonts/mononoki-Bold.woff2') format('woff2'),
+url('../fonts/mononoki-Bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Mononoki';
+  src: url('../fonts/mononoki-Regular.eot');
+  src: url('../fonts/mononoki-Regular.eot') format('embedded-opentype'),
+url('../fonts/mononoki-Regular.ttf') format('truetype'),
+url('../fonts/mononoki-Regular.woff2') format('woff2'),
+url('../fonts/mononoki-Regular.woff') format('woff');
+}
+
+
+@font-face {
+  font-family: 'Twemoji';
+src: url('../fonts/Twemoji.ttf') format('truetype');
+}
+@import url('https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400;0,700;1,400;1,700&display=swap');
--- a/assets/logo.scss
+++ b/assets/logo.scss
@ -0,0 +1,30 @@
+
+.logo--wrapper {
+  display: grid;
+  font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
+}
+.logo-quote {
+  text-align: center;
+  color: var(--foreground);
+  margin: 10px auto 28px;
+  max-width: 300px;
+
+}
+.logo{
+  margin: 0 auto;
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-content: center;
+  font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
+}
+
+.toilet-logo{
+  color: var(--orange);
+  font-size: 0.9em;
+  line-height: $ascii-line-height;
+  margin: 0;
+  font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
+  white-space: pre-line;
+}
--- a/assets/page-404.scss
+++ b/assets/page-404.scss
@ -0,0 +1,18 @@
+.not-found{
+    display: flex;			     
+    justify-content: center;
+    font-size: 25px;
+    line-height: 28px;
+    color: var(--selection);
+    tansition: 0.3s;
+}
+
+
+@media screen and (max-width: 500px) {
+    .not-found {
+	font-size: 14px;
+	line-height: 14px;
+    }
+}
+
+
--- a/assets/variables.scss
+++ b/assets/variables.scss
@ -0,0 +1,37 @@
+/* Dracula theme */
+/*
+:root {
+  --background: #282A36 ;
+  --comment: #6272A4 ;
+  --selection: #44475A ;
+  --foreground: #F8F8F2 ;
+  --cyan: #8BE9FD ;
+  --orange: #FFB86C;
+  --green: #50FA7B ;
+  --pink: #FF79C6 ;
+  --purple: #BD93F9 ;
+  --red: #FF5555 ;
+  --yellow: #F1FA8C;
+}
+*/
+/* Gruvbox theme */
+:root {
+  --background: #282828 ;
+  --comment: #458588 ;
+  --selection: #665c54 ;
+  --foreground: #ebdbb2 ;
+  --cyan: #83a598 ;
+  --orange: #fe8019;
+  --green: #98971a ;
+  --pink: #d3869b ;
+  --purple: #b16286 ;
+  --red: #cc241d ;
+  --yellow: #F1FA8C;
+}
+
+$ascii-line-height: 1.115em;
+$ascii-line-height-mobile: 1.112em;
+$header-color: var(--green);
+$main-font: 'Mononoki', 'Twemoji', monospace;
+$blog-font: 'Cuprum', 'Mononoki', 'Twemoji', monospace;
+$link-color: var(--cyan);
--- a/config.toml
+++ b/config.toml
@ -2,6 +2,7 @@ baseURL = "https://site.horhik.xyz/"
 languageCode = "en-us"
 title = "Horhik.xyz"
 summaryLength=10
+enableEmoji = true

 [markup]
  [markup.highlight]
@ -30,4 +31,11 @@ summaryLength=10
 [[menu.social]]
  name = "LinkedIn"
  url = "https://www.linkedin.com/in/horhik"
-  weight = 100
+  weight = 100
+
+
+[taxonomies]
+  category = "categories"
+  tag = "tags"
+  site = "site"
+  github = "github"
--- a/content/portfolio/AnkiLan.md
+++ b/content/portfolio/AnkiLan.md
@ -3,4 +3,5 @@ title: "AnkiLan ⭐"
 date: 2020-05-01T00:00:00+03:00
 type: portfolio
 description: "App for creating Anki flashcards"
+github: "https://github.com/Horhik/ankilan"
 ---
--- a/content/portfolio/Hole.md
+++ b/content/portfolio/Hole.md
@ -3,4 +3,7 @@ title: "Hole chat 🐰"
 date: 2021-05-01T00:00:00+03:00
 type: portfolio
 description: "Decentralized messenger over Freenet network"
+github: "https://github.com/hole-chat/"
+site: "https://github.com/hole-chat/core/blob/master/README.md"
+icon: "https://avatars.githubusercontent.com/u/80746081?s=400&u=941f96e2a43c02b36318c4efabcb36430467fc31&v=4"
 ---
--- a/content/portfolio/Snake.md
+++ b/content/portfolio/Snake.md
@ -4,6 +4,8 @@ date: 2019-11-01T00:00:00+03:00
 type: portfolio
 description: "Snake game written with P5js"
 tags: ["game", "javascript"]
+github: "https://github.com/horhik/snake"
+site: "https://snake.horhik.xyz/"
 ---

 The simple snake game which working on both desktop 🖥 and mobile 📲
--- a/content/portfolio/Tasquare.md
+++ b/content/portfolio/Tasquare.md
@ -3,4 +3,7 @@ title: "Tasquare ☑"
 date: 2020-01-01T00:00:00+03:00
 type: portfolio
 description: "TODO app with timer written on React"
+github: "https://github.com/horhik/tasquare"
+site: "https://tasquare.horhik.xyz/"
+icon: "https://raw.githubusercontent.com/Horhik/tasquare/master/src/svg/logo.svg"
 ---
--- a/layouts/portfolio/summary.html
+++ b/layouts/portfolio/summary.html
@ -3,7 +3,25 @@
 		<a class="project-name" href="{{ .Permalink }}">{{ .Title }}</a>
 	</h2>
 	<p class="project-description">{{.Description}}</p>
-	<time class="recent-block__time">{{ .Date.Format "02.01.2006 15:04" }}</time>
+	<ul class="project-links">
+	{{if  in .Params.github ""}}
+	<li class="project-link project-link--github" >
+	<a href="{{.Params.github}}">
+		Github 
+	</a>
+	  </li>
+	{{end}}
+	{{if in .Params.site ""}}
+	<li class="project-link" >
+	  <img class="project-icon" src="{{.Params.icon}}">
+	  <a href="{{.Params.github}}">
+		Site 
+	  </a>
+	 </li>
+
+	{{end}}
+	</ul>
+
 	
 	{{ range .Params.tags }}
 	<!-- <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> -->
--- a/resources/_gen/assets/scss/css/basic.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/resources/_gen/assets/scss/css/basic.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
@ -54,7 +54,7 @@ body {
  padding: 0;
  background-color: var(--background);
  color: var(--foreground);
-  font-family: 'Ubuntu', 'Twemoji' sans-serif;
+  font-family: 'Mononoki', 'Ubuntu', 'Twemoji' sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0px -30px 20px rgba(0, 0, 0, 0.5);
@ -113,6 +113,19 @@ img {
  font-family: Mononoki, 'Fira Code',monospace, Ubuntu;
  white-space: pre-line; }

+.not-found {
+  display: flex;
+  justify-content: center;
+  font-size: 25px;
+  line-height: 28px;
+  color: var(--selection);
+  tansition: 0.3s; }
+
+@media screen and (max-width: 500px) {
+  .not-found {
+    font-size: 14px;
+    line-height: 14px; } }
+
 .page-list {
  list-style: none;
  display: flex;
@ -250,7 +263,9 @@ img {
  max-width: 70vw;
  transition: 0.3s; }
  .project:hover, .project:focus {
-    box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.5); }
+    box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.6); }
+  .project h2 {
+    margin-bottom: 0; }

 .project-name {
  color: var(--green);
@ -270,6 +285,11 @@ img {
  flex-wrap: wrap;
  justify-content: space-around; }

+.project-icon {
+  width: 35px;
+  height: auto;
+  margin-right: 10px; }
+
 .project-link {
  margin-right: 10px;
  display: flex;
@ -279,13 +299,13 @@ img {
  .project-link::before {
    margin-right: 10px; }
  .project-link--github::before {
-    content: url("../../svg/github-icon.svg"); }
+    content: url("./github-icon.svg"); }
  .project-link--iphone::before {
-    content: url("../../svg/appstore.svg"); }
+    content: url("./appstore.svg"); }
  .project-link--android::before {
-    content: url("../../svg/googleplay.svg"); }
+    content: url("./googleplay.svg"); }
  .project-link--app-page::before {
-    content: url("../../svg/app-page.svg"); }
+    content: url("./app-page.svg"); }

 .project-link__logo {
  margin-right: 10px;
--- a/static/css/app-page.svg
+++ b/static/css/app-page.svg
@ -0,0 +1,73 @@
+<?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"
+   id="svg16"
+   version="1.1"
+   viewBox="0 0 50.799999 49.477084"
+   height="46.75"
+   width="48">
+  <defs
+     id="defs10">
+    <rect
+       id="rect62"
+       height="59.03009"
+       width="94.342064"
+       y="145.91623"
+       x="126.6591" />
+  </defs>
+  <metadata
+     id="metadata13">
+    <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>
+  <g
+     id="layer1">
+    <text
+       id="text52"
+       y="18.58102"
+       x="1.6502874"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.61345px;line-height:1.13;font-family:'mononoki Nerd Font Mono';-inkscape-font-specification:'mononoki Nerd Font Mono';fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.190337"
+       xml:space="preserve"><tspan
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'mononoki Nerd Font Mono';-inkscape-font-specification:'mononoki Nerd Font Mono';fill:#ffb86c;fill-opacity:1;stroke-width:0.190337"
+         y="18.58102"
+         x="1.6502874"
+         id="tspan50">░█░█░░░░█▀▄</tspan><tspan
+         id="tspan54"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'mononoki Nerd Font Mono';-inkscape-font-specification:'mononoki Nerd Font Mono';fill:#ffb86c;fill-opacity:1;stroke-width:0.190337"
+         y="27.184219"
+         x="1.6502874">░█▀█░░░░█░█</tspan><tspan
+         id="tspan56"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'mononoki Nerd Font Mono';-inkscape-font-specification:'mononoki Nerd Font Mono';fill:#ffb86c;fill-opacity:1;stroke-width:0.190337"
+         y="35.787418"
+         x="1.6502874">░▀░▀░▀░░▀▀░</tspan><tspan
+         id="tspan58"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'mononoki Nerd Font Mono';-inkscape-font-specification:'mononoki Nerd Font Mono';stroke-width:0.190337"
+         y="44.390617"
+         x="1.6502874" /></text>
+    <text
+       style="font-size:10.5833px;line-height:1.125;font-family:sans-serif;white-space:pre;shape-inside:url(#rect62);"
+       id="text60"
+       xml:space="preserve" />
+    <text
+       id="text891"
+       y="33.40794"
+       x="5.8149066"
+       style="font-size:2.28947px;line-height:1.125;font-family:sans-serif;stroke-width:0.0572371"
+       xml:space="preserve"><tspan
+         style="stroke-width:0.0572371"
+         y="33.40794"
+         x="5.8149066"
+         id="tspan889">  </tspan></text>
+  </g>
+</svg>
--- a/static/css/appstore.svg
+++ b/static/css/appstore.svg
@ -0,0 +1,16 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path d="M14.3086 18.5H3.69141C1.65596 18.5 0 16.844 0 14.8086V4.19141C0 2.15596 1.65596 0.5 3.69141 0.5H14.3086C16.344 0.5 18 2.15596 18 4.19141V14.8086C18 16.844 16.344 18.5 14.3086 18.5Z" fill="#6272A4"/>
+        <path d="M14.3086 0.5H9V18.5H14.3086C16.344 18.5 18 16.844 18 14.8086V4.19141C18 2.15596 16.344 0.5 14.3086 0.5Z" fill="#6272A4"/>
+        <path d="M5.54237 14.3697C5.37977 14.6513 5.08372 14.8089 4.77972 14.8089C4.6307 14.8089 4.47981 14.7711 4.34175 14.6914C3.92205 14.4491 3.77773 13.9105 4.02003 13.4908L4.1929 13.1914H6.22264L5.54237 14.3697Z" fill="#282A36"/>
+        <path d="M3.88477 12.4883C3.40014 12.4883 3.00586 12.094 3.00586 11.6094C3.00586 11.1247 3.40014 10.7305 3.88477 10.7305H5.61368L7.98511 6.62302L7.34242 5.50983C7.10012 5.09013 7.2444 4.55154 7.6641 4.30921H7.66413C8.08383 4.06691 8.62242 4.21126 8.86472 4.63092L9 4.86524L9.13528 4.63096C9.37768 4.21123 9.91628 4.06695 10.3359 4.30924C10.5392 4.42663 10.6846 4.61616 10.7454 4.84292C10.8062 5.06967 10.7749 5.30656 10.6575 5.50987L7.64343 10.7305H9.54464L10.5595 12.4883H3.88477Z" fill="#282A36"/>
+        <path d="M14.1153 12.4883H13.4013L13.98 13.4908C14.2224 13.9105 14.0781 14.4491 13.6584 14.6914C13.5229 14.7696 13.3726 14.8096 13.2203 14.8096C13.144 14.8096 13.0672 14.7995 12.9914 14.7792C12.7646 14.7184 12.5751 14.573 12.4577 14.3697L9.40601 9.08398L10.4209 7.32617L12.3864 10.7305H14.1153C14.6 10.7305 14.9942 11.1248 14.9942 11.6094C14.9942 12.0941 14.6 12.4883 14.1153 12.4883Z" fill="#282A36"/>
+        <path d="M9 10.7305V12.4883H10.5595L9.54468 10.7305H9Z" fill="#282A36"/>
+        <path d="M10.7454 4.8429C10.6846 4.61615 10.5392 4.42658 10.3359 4.30923C9.91624 4.06693 9.37765 4.21118 9.13528 4.63095L9 4.86523V8.38085L10.6575 5.50985C10.7749 5.30654 10.8062 5.0697 10.7454 4.8429Z" fill="#282A36"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect y="0.5" width="18" height="18" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/static/css/github-icon.svg
+++ b/static/css/github-icon.svg
@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13 0.541664C5.8175 0.541664 0 6.26167 0 13.3163C0 18.9616 3.7245 23.7488 8.88875 25.4367C9.53875 25.5569 9.77708 25.1615 9.77708 24.8224C9.77708 24.5191 9.76625 23.7153 9.76083 22.6503C6.14467 23.4206 5.382 20.9365 5.382 20.9365C4.7905 19.4621 3.93575 19.0678 3.93575 19.0678C2.75817 18.2758 4.02675 18.2921 4.02675 18.2921C5.33217 18.3809 6.01792 19.6083 6.01792 19.6083C7.17708 21.5616 9.061 20.9972 9.80417 20.6711C9.92117 19.8445 10.2559 19.2823 10.6275 18.9627C7.74042 18.6431 4.706 17.5446 4.706 12.6501C4.706 11.2558 5.20975 10.1162 6.04392 9.22242C5.89767 8.89958 5.45892 7.60067 6.15767 5.84133C6.15767 5.84133 7.24642 5.499 9.73267 7.15108C10.7727 6.86725 11.8777 6.72642 12.9827 6.71992C14.0877 6.72642 15.1927 6.86725 16.2327 7.15108C18.7027 5.499 19.7914 5.84133 19.7914 5.84133C20.4902 7.60067 20.0514 8.89958 19.9214 9.22242C20.7502 10.1162 21.2539 11.2558 21.2539 12.6501C21.2539 17.5576 18.2152 18.6377 15.3227 18.9518C15.7777 19.3353 16.2002 20.1186 16.2002 21.3157C16.2002 23.0252 16.1839 24.3988 16.1839 24.8138C16.1839 25.1485 16.4114 25.5483 17.0777 25.4204C22.2788 23.7434 26 18.9529 26 13.3163C26 6.26167 20.1793 0.541664 13 0.541664Z" fill="#6272A4"/>
+</svg>
--- a/static/css/googleplay.svg
+++ b/static/css/googleplay.svg
@ -0,0 +1,13 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path d="M10.3567 9.0016L1.31756 17.7057C0.894269 17.4164 0.642953 16.9352 0.647397 16.4226V1.58061C0.642953 1.06794 0.894269 0.586767 1.31756 0.297485L10.3567 9.0016Z" fill="#6272A4" stroke="#282A36" stroke-width="0.340909"/>
+        <path d="M13.5196 5.96128L10.3567 9.00159L1.3175 0.297479C1.35156 0.271083 1.38704 0.246526 1.42374 0.223923C1.90147 -0.0656265 2.49819 -0.0749742 2.98477 0.199404L13.5196 5.96128Z" fill="#6272A4" stroke="#282A36" stroke-width="0.340909"/>
+        <path d="M17.3527 9.00162C17.3586 9.58037 17.0441 10.115 16.5354 10.391L13.5196 12.0419L10.3567 9.00162L13.5196 5.9613L16.5354 7.61221C17.0441 7.88828 17.3586 8.42286 17.3527 9.00162Z" fill="#6272A4" stroke="#282A36" stroke-width="0.340909"/>
+        <path d="M13.5196 12.0419L2.98477 17.8038C2.49712 18.0739 1.90266 18.0646 1.42374 17.7793C1.38704 17.7567 1.35156 17.7321 1.3175 17.7057L10.3567 9.00159L13.5196 12.0419Z" fill="#6272A4" stroke="#282A36" stroke-width="0.340909"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="18" height="18" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/static/css/stopwatch.svg
+++ b/static/css/stopwatch.svg
@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path d="M7.43744 5.24994H6.56244L6.56288 8.0561L8.44019 9.93386L9.05885 9.31521L7.43788 7.6938L7.43744 5.24994Z" fill="#6272A4"/>
+        <path d="M13.125 4.01271L10.8623 1.75001L10.0445 2.56775C9.26589 2.11926 8.38107 1.83919 7.43652 1.77211L7.43715 0.875004H8.74997V0H5.24999V0.875004H6.56218L6.56155 1.77221C5.61776 1.83954 4.73356 2.11955 3.95545 2.56775L3.13771 1.75001L0.875 4.01271L1.69275 4.83046C1.1755 5.72849 0.875 6.76636 0.875 7.875C0.875 11.2524 3.62261 14 7 14C10.3774 14 13.125 11.2524 13.125 7.875C13.125 6.76636 12.8245 5.72846 12.3072 4.83046C12.3072 4.83046 13.125 4.01268 13.125 4.01271ZM7 13.125C4.10499 13.125 1.75 10.77 1.75 7.87504C1.75 4.98003 4.10499 2.62504 7 2.62504C9.895 2.62504 12.25 4.98003 12.25 7.87504C12.25 10.77 9.895 13.125 7 13.125Z" fill="#6272A4"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <rect width="14" height="14" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
--- a/static/css/watch.svg
+++ b/static/css/watch.svg
@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 0C3.14027 0 0 3.14027 0 7C0 10.8597 3.14027 14 7 14C10.8597 14 14 10.8597 14 7C14 3.14027 10.8597 0 7 0ZM7 13.125C3.62262 13.125 0.875004 10.3774 0.875004 7C0.875004 3.62262 3.62262 0.875004 7 0.875004C10.3774 0.875004 13.125 3.62262 13.125 7C13.125 10.3774 10.3774 13.125 7 13.125Z" fill="#6272A4"/>
+    <path d="M7.43744 2.625H6.56244V7.18114L9.3156 9.93431L9.93425 9.31566L7.43744 6.81883V2.625Z" fill="#6272A4"/>
+</svg>