From 78070a9607be7296744663b97679bb7fdc15304d Mon Sep 17 00:00:00 2001
From: Mehmet Ali <mehmetali345@mehmetali345.xyz>
Date: Tue, 3 Aug 2021 17:19:03 +0300
Subject: [PATCH] Add Skills, Icons

---
 src/assets/icons/c.svg          |  1 +
 src/assets/icons/dotnet.svg     |  1 +
 src/assets/icons/figma.svg      |  1 +
 src/assets/icons/github.svg     |  1 +
 src/assets/icons/html.svg       |  1 +
 src/assets/icons/javascript.svg |  1 +
 src/assets/icons/nodejs.svg     |  1 +
 src/assets/icons/nuxtjs.svg     |  1 +
 src/assets/icons/sass.svg       |  1 +
 src/assets/icons/vuejs.svg      |  2 ++
 src/assets/icons/windicss.svg   | 28 +++++++++++++++++++++++++++
 src/components/Skills.vue       | 34 +++++++++++++++++++++++++++++++++
 src/pages/index.vue             | 31 +++++++++++++++++++++++++++++-
 13 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/icons/c.svg
 create mode 100755 src/assets/icons/dotnet.svg
 create mode 100755 src/assets/icons/figma.svg
 create mode 100755 src/assets/icons/github.svg
 create mode 100755 src/assets/icons/html.svg
 create mode 100755 src/assets/icons/javascript.svg
 create mode 100755 src/assets/icons/nodejs.svg
 create mode 100755 src/assets/icons/nuxtjs.svg
 create mode 100755 src/assets/icons/sass.svg
 create mode 100644 src/assets/icons/vuejs.svg
 create mode 100644 src/assets/icons/windicss.svg
 create mode 100644 src/components/Skills.vue

diff --git a/src/assets/icons/c.svg b/src/assets/icons/c.svg
new file mode 100644
index 0000000..d8a67e8
--- /dev/null
+++ b/src/assets/icons/c.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="204.925 153.577 757.617 860.543" xmlns="http://www.w3.org/2000/svg"><path d="m962.541 407.983c0-14.237-3.034-27.074-9.336-37.811-6.068-10.736-15.171-19.605-27.307-26.607-100.829-58.117-201.891-116.233-302.72-174.35-27.308-15.638-53.449-15.171-80.523.7-40.145 23.574-241.336 138.873-301.086 173.65-24.741 14.237-36.644 36.177-36.644 64.652v351.033c0 14.004 3.034 26.374 8.869 37.111 6.069 10.97 15.405 20.306 27.775 27.541 59.984 34.777 260.941 149.843 301.086 173.65 27.074 15.868 53.448 16.568 80.523.7 100.829-58.35 201.891-116.233 302.72-174.35 12.603-7.235 21.706-16.338 27.774-27.541 5.835-10.737 8.869-23.107 8.869-37.111z" fill="#9a4993"/><path d="m584.667 582.333-371.34 213.794c6.069 10.97 15.405 20.306 27.775 27.542 59.984 34.776 260.941 149.842 301.086 173.649 27.074 15.872 53.449 16.572 80.523.7 100.829-58.35 201.891-116.233 302.72-174.349 12.603-7.236 21.706-16.338 27.774-27.542z" fill="#6a1577"/><path d="m474.735 645.584c21.707 37.811 62.318 63.252 108.765 63.252 46.913 0 87.758-25.674 109.231-63.952l-108.064-62.551z" fill="#6a1577"/><path d="m962.542 407.983c0-14.237-3.035-27.074-9.336-37.811l-368.539 212.161 369.005 213.795c5.835-10.737 8.87-23.107 8.87-37.111z" fill="#813084"/><g fill="#fff"><path d="m692.731 644.884c-21.472 38.044-62.317 63.952-109.231 63.952-46.68 0-87.291-25.441-108.764-63.252-10.503-18.438-16.572-39.444-16.572-62.084 0-69.32 56.016-125.336 125.336-125.336 46.213 0 86.592 25.207 108.298 62.551l109.464-63.018c-43.645-75.154-124.869-125.802-217.995-125.802-139.107 0-251.605 112.732-251.605 251.605 0 45.513 12.136 88.459 33.376 125.336 43.412 75.388 125.102 126.269 218.462 126.269 93.594 0 175.284-51.114 218.696-126.969zm138.406-120.901h-24.974v120.668h24.974zm55.316 0h-24.974v120.668h24.974z"/><path d="m906.759 544.289h-120.668v24.974h120.668zm0 55.082h-120.668v24.974h120.668z"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/dotnet.svg b/src/assets/icons/dotnet.svg
new file mode 100755
index 0000000..c71ac53
--- /dev/null
+++ b/src/assets/icons/dotnet.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>.NET icon</title><path style="fill:#512BD4" d="M24 8.77h-2.468v7.565h-1.425V8.77h-2.462V7.53H24zm-6.852 7.565h-4.821V7.53h4.63v1.24h-3.205v2.494h2.953v1.234h-2.953v2.604h3.396zm-6.708 0H8.882L4.78 9.863a2.896 2.896 0 0 1-.258-.51h-.036c.032.189.048.592.048 1.21v5.772H3.157V7.53h1.659l3.965 6.32c.167.261.275.442.323.54h.024c-.04-.233-.06-.629-.06-1.185V7.529h1.372zm-8.703-.693a.868.829 0 0 1-.869.829.868.829 0 0 1-.868-.83.868.829 0 0 1 .868-.828.868.829 0 0 1 .869.829Z"/></svg>
diff --git a/src/assets/icons/figma.svg b/src/assets/icons/figma.svg
new file mode 100755
index 0000000..1196fcf
--- /dev/null
+++ b/src/assets/icons/figma.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.25 19c1.794 0 3.25-1.344 3.25-3v-3H7.25c-1.793 0-3.249 1.344-3.249 3s1.456 3 3.25 3z" fill="#0ACF83"/><path d="M4.001 10c0-1.656 1.456-3 3.25-3H10.5v6H7.25c-1.793 0-3.249-1.344-3.249-3z" fill="#A259FF"/><path d="M4.002 4c0-1.656 1.455-3 3.249-3h3.25v6H7.25C5.457 7 4 5.656 4 4z" fill="#F24E1E"/><path d="M10.5 1h3.25c1.793 0 3.249 1.344 3.249 3s-1.456 3-3.25 3H10.5V1z" fill="#FF7262"/><path d="M16.999 10c0 1.656-1.456 3-3.25 3-1.793 0-3.249-1.344-3.249-3s1.456-3 3.25-3c1.793 0 3.249 1.344 3.249 3z" fill="#1ABCFE"/></svg>
diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg
new file mode 100755
index 0000000..7f1430e
--- /dev/null
+++ b/src/assets/icons/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9a17.56 17.56 0 003.8.4c8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1a102.4 102.4 0 01-22.6 2.7c-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1a63 63 0 0025.6-6c2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8a18.64 18.64 0 015-.5c8.1 0 26.4 3.1 56.6 24.1a208.21 208.21 0 01112.2 0c30.2-21 48.5-24.1 56.6-24.1a18.64 18.64 0 015 .5c12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5a19.35 19.35 0 004-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/html.svg b/src/assets/icons/html.svg
new file mode 100755
index 0000000..615f142
--- /dev/null
+++ b/src/assets/icons/html.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#dd4b25'><path d='M64 32l34.94 403.21L255.77 480 413 435.15 448 32zm308 132H188l4 51h176l-13.51 151.39L256 394.48l-98.68-28-6.78-77.48h48.26l3.42 39.29L256 343.07l53.42-14.92L315 264H148l-12.59-149.59H376.2z'/></svg>
diff --git a/src/assets/icons/javascript.svg b/src/assets/icons/javascript.svg
new file mode 100755
index 0000000..51dca8c
--- /dev/null
+++ b/src/assets/icons/javascript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#EFD81D"><path d="M0 0v512h512V0H0zm274.286 397.714c0 49.84-29.44 74.137-72.057 74.137-38.492 0-60.835-19.931-72.172-43.988l39.177-23.714c7.555 13.405 13.292 24.742 29.783 24.742 13.714 0 24.983-6.182 24.983-30.24V237.714h50.286v160zm113.543 72.995c-44.675 0-73.543-20.16-87.635-48L339.429 400c10.285 16.846 23.714 28.069 47.428 28.069 19.932 0 31.509-8.823 31.509-22.572 0-16.491-11.92-22.331-33.92-32l-12.023-5.166c-34.72-14.765-57.737-33.325-57.737-72.514 0-36.08 27.485-62.434 70.445-62.434 30.595 0 52.572 9.508 68.4 37.348L416 294.857c-8.251-14.777-17.143-20.571-30.926-20.571-14.091 0-23.028 8.937-23.028 20.571 0 14.434 8.937 20.274 29.554 29.212l12.023 5.154c40.903 17.531 63.931 35.428 63.931 75.611.012 43.315-34.011 65.875-79.725 65.875z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/nodejs.svg b/src/assets/icons/nodejs.svg
new file mode 100755
index 0000000..af91cb9
--- /dev/null
+++ b/src/assets/icons/nodejs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#6FA660" viewBox="0 0 512 512"><path d="M429.76 130.07L274.33 36.85a37 37 0 00-36.65 0L82.24 130.06A38.2 38.2 0 0064 162.83V349a38.26 38.26 0 0018.24 32.8L123 406.14l.23.13c20.58 10.53 28.46 10.53 37.59 10.53 32.14 0 52.11-20.8 52.11-54.29V182a8.51 8.51 0 00-8.42-8.58h-22.38a8.51 8.51 0 00-8.42 8.58v180.51a15 15 0 01-6.85 13.07c-5.9 3.6-14.47 2.84-24.14-2.15l-39.06-23.51a1.1 1.1 0 01-.48-.92V165.46a1.32 1.32 0 01.59-1.06l151.84-93a.82.82 0 01.73 0l151.93 93a1.34 1.34 0 01.55 1.1V349a1.28 1.28 0 01-.45 1l-152.06 90.65a1.22 1.22 0 01-.8 0l-38.83-23.06a7.8 7.8 0 00-7.83-.41l-.34.2c-10.72 6.35-13.6 8-23.54 11.62-1.62.59-5.43 2-5.76 5.77s3.29 6.45 6.51 8.32l51.9 31.87a35.67 35.67 0 0018.3 5.07h.58a35.87 35.87 0 0017.83-5.07l155.43-93.13A38.37 38.37 0 00448 349V162.83a38.21 38.21 0 00-18.24-32.76z"/><path d="M307.88 318.05c-37.29 0-45.24-10.42-47.6-27.24a8.43 8.43 0 00-8.22-7.32h-19.8a8.44 8.44 0 00-8.26 8.58c0 14.58 5.12 62.17 83.92 62.17 24.38 0 44.66-5.7 58.63-16.49S388 311.26 388 292.55c0-37.55-24.5-47.83-72.75-54.55-49.05-6.82-49.05-10.29-49.05-17.89 0-5.47 0-18.28 35.46-18.28 25.23 0 38.74 3.19 43.06 20a8.35 8.35 0 008.06 6.67h19.87a8.24 8.24 0 006.16-2.86 8.91 8.91 0 002.12-6.44c-2.57-35.55-28.56-53.58-79.24-53.58-46.06 0-73.55 20.75-73.55 55.5 0 38.1 28.49 48.87 71.29 53.33 50 5.17 50 12.71 50 19.37.03 10.38-4.28 24.23-41.55 24.23z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/nuxtjs.svg b/src/assets/icons/nuxtjs.svg
new file mode 100755
index 0000000..ca6e037
--- /dev/null
+++ b/src/assets/icons/nuxtjs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path d="M224.093 141.297l-11.838 20.842-40.483-71.297L47.494 309.683h84.144c0 11.511 9.178 20.842 20.498 20.842H47.494c-7.322 0-14.088-3.975-17.749-10.423a21.145 21.145 0 01.001-20.84l124.278-218.84C157.685 73.971 164.453 70 171.776 70c7.324 0 14.091 3.973 17.752 10.421l34.565 60.876z" fill="#00C58E"/><path d="M314.164 299.4l-77.876-137.123-11.837-20.842-11.838 20.842L134.746 299.4a21.147 21.147 0 00-.001 20.84c3.661 6.448 10.427 10.422 17.749 10.422H296.39c7.324 0 14.093-3.97 17.755-10.419a21.14 21.14 0 00.001-20.843h.018zm-161.67 10.421l71.957-126.702 71.939 126.702H152.494z" fill="#2D3748"/><path d="M369.484 320.104c-3.661 6.447-10.426 10.421-17.748 10.421h-55.704c11.321 0 20.498-9.331 20.498-20.842h35.163l-99.774-175.706-15.988 28.162-11.838-20.841 10.078-17.742c3.662-6.449 10.429-10.422 17.752-10.422 7.324 0 14.091 3.973 17.752 10.422l99.809 175.706a21.148 21.148 0 010 20.842z" fill="#108775"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/sass.svg b/src/assets/icons/sass.svg
new file mode 100755
index 0000000..e44f35a
--- /dev/null
+++ b/src/assets/icons/sass.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512' fill="#cf649a"><path d='M511.78 328.07c-1.47-11.92-7.51-22.26-18-30.77a3.58 3.58 0 00-.43-.44l-.53-.38-.17-.12-5.57-4-.19-.14-.71-.5a3.5 3.5 0 00-.83-.35c-17.62-10.49-46.79-17.84-91.42-2.09-10.65-17.92-11.86-32.28-4.73-54.28 1.27-3.83.09-6.36-3.71-8-7.64-3.25-18.1-1.59-25.52.37-3.46.9-5.54 2.86-6.2 5.83-4.7 22-18.36 42.1-31.57 61.5l-.78 1.14c-8.14-17.26-6.45-30.63-.78-47.38 1.13-3.34.24-5.56-2.89-7.22-8.74-4.51-21.85-1.41-27.07.13-6.62 1.93-13.72 19.82-21.65 41.24-2 5.39-3.72 10-4.75 12.15-2.45 5-4.79 10.7-7.27 16.75-5.6 13.69-11.91 29.1-20.93 38.78-3.28-7.25 1.88-18.68 6.89-29.77 5.93-13.11 11.53-25.5 5.08-33.41a11.82 11.82 0 00-8.33-4.32 13.26 13.26 0 00-6.15 1c.67-5.65.7-10.11-.95-15.5-2.36-7.69-8.49-12-16.93-11.77-19.22.56-35.48 14.88-45.75 26.8-6.84 8-22 14.1-35.31 19.45-5.26 2.23-10.26 4.23-14.43 6.23-6.65-5.62-15.1-11.29-24-17.28-25-16.78-53.33-35.81-54.31-61.61-1.4-38.11 42-65.14 79.88-84.43 28.71-14.6 53.67-24.28 76.31-29.57 31.8-7.43 58.66-5.93 79.82 4.44 11.58 5.67 17 18 13.56 30.68-9 32.95-46.29 55.53-78.18 65.69-19.21 6.12-35.56 8.68-50 7.84-18.1-1.05-32.88-10.13-39.2-14a21.18 21.18 0 00-3.2-1.8l-.29-.07a3.21 3.21 0 00-3.19 1c-1.3 1.55-.84 4-.37 5.24 6.15 16.07 18.85 26.22 37.74 30.17a92.09 92.09 0 0018.78 1.79c44.21 0 100.62-25.49 121.34-46.48 14.13-14.3 24.42-29 28.68-54.35 4.45-26.55-13.55-45-31.89-53.5-44.57-20.57-95.19-12.44-129.81-2-40.5 12.21-82.4 34.41-114.94 60.93-40.12 32.67-54.62 63-43.12 90.25 11.81 27.93 40.61 45.4 68.46 62.3 9 5.45 17.56 10.64 25.27 16-2.32 1.13-4.69 2.28-7.1 3.43-23.38 11.33-49.9 24.08-64.61 45.15-10.68 15.35-12.68 30.63-5.94 45.42 3.6 7.87 10 13.21 18.89 15.87A50 50 0 0053 432c17.31 0 36.36-7 46.73-13.47 18.32-11.5 30.19-26.94 35.29-45.89 4.54-16.86 3.45-33.61-3.15-48.56l22.45-11.32c-10.83 36-2.53 57.5 6.59 69.36 3.36 4.37 9.42 7 16.19 7.12s13-2.43 16.52-6.77c6.66-8.25 11.58-17.9 16.11-27.55-.24 6.3.06 12.68 2.21 18.09 1.93 4.87 5.11 8.1 9.21 9.34 4.36 1.33 9.47.21 14.39-3.15 22.17-15.17 37.33-51.58 49.51-80.85 1.73-4.16 3.39-8.16 5-11.9a152.5 152.5 0 0012.5 31.07c1.18 2.14 1.08 3.08-.52 4.84-2.41 2.64-5.77 5.83-9.33 9.21-10.78 10.23-24.2 23-26 34.23-.7 4.5 2.4 8.6 7.21 9.53 14.47 2.88 31.9-1.33 46.64-11.25 13.4-9 18.44-21.55 15-37.19-3.33-15.06 4.27-33.76 22.59-55.62 3 12.53 7 22.66 12.52 31.53l-.15.12c-13.34 11.65-31.62 27.6-28.78 46.95a13.35 13.35 0 005.58 9.22 14.22 14.22 0 0011.2 2.06c17.47-3.67 30.62-11.06 40.18-22.57s6.07-24.27 2.85-34.17c25-6.78 47.26-6.61 68.1.5 11.7 4 20.09 10.57 24.93 19.64 6.09 11.41 2.8 21.94-9.29 29.65-3.71 2.37-5.5 3.82-5.61 5.65a2.65 2.65 0 001 2.23c1.4 1.15 5.72 3.15 15.49-3 9-5.65 14.28-13.34 15.63-23a39 39 0 00-.01-8.01zm-399.73 25.06l-.1 1.28c-1.56 14.64-9 27.4-22.15 38-8.26 6.66-17.23 10.75-25.25 11.53-5.6.54-9.67-.22-12.09-2.27-1.81-1.53-2.78-3.82-3-7-1.64-25.48 38.32-50.8 60.81-59.13a51.39 51.39 0 011.78 17.59zm102.35-71.86c-3.7 21.09-14.49 60.9-31.45 76.35-.81.74-1.49 1-1.8.93s-.55-.44-.8-1c-5.66-13.12-3.57-35.28 5-52.69 6.59-13.42 16-22.31 26.52-25a5.29 5.29 0 011.34-.19 1.58 1.58 0 011 .27 1.64 1.64 0 01.19 1.33zm83.49 76.88c-3.19 3.33-7.56 2.88-6.53 1.66l16.24-17.24c-1.31 5.93-5.18 10.84-9.71 15.58zm67.37-14.91a14.07 14.07 0 01-4.93 1.39c-.46-9.07 8.33-19.28 17-26.09 2.33 9.46-2.44 19.46-12.07 24.7z'/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/vuejs.svg b/src/assets/icons/vuejs.svg
new file mode 100644
index 0000000..271db25
--- /dev/null
+++ b/src/assets/icons/vuejs.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/windicss.svg b/src/assets/icons/windicss.svg
new file mode 100644
index 0000000..4f1b63b
--- /dev/null
+++ b/src/assets/icons/windicss.svg
@@ -0,0 +1,28 @@
+<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M67.0788 31.5813C67.0788 21.8864 59.1923 14 49.4975 14C39.2803 14 33.1721 21.6604 33.1721 29.0696H43.2185C43.2185 26.985 45.1675 24.0464 49.4975 24.0464C53.6517 24.0464 57.0323 27.4271 57.0323 31.5813C57.0323 35.7355 54 39.1161 46.3533 39.1161H19V49.1625H46.3533C59.259 49.1625 67.0788 41.2761 67.0788 31.5813ZM67.0788 31.5813C67.0788 21.8864 59.1923 14 49.4975 14C39.2803 14 33.1721 21.6604 33.1721 29.0696H43.2185C43.2185 26.985 45.1675 24.0464 49.4975 24.0464C53.6517 24.0464 57.0323 27.4271 57.0323 31.5813C57.0323 35.7355 54 39.1161 46.3533 39.1161H19V49.1625H46.3533C59.259 49.1625 67.0788 41.2761 67.0788 31.5813Z" fill="url(#paint0_linear)"/>
+<path d="M89.3667 96.4187C89.3667 106.114 81.4802 114 71.7854 114C61.5682 114 55.4599 106.34 55.4599 98.9304H65.5064C65.5064 101.015 67.4554 103.954 71.7854 103.954C75.9396 103.954 79.3202 100.573 79.3202 96.4187C79.3202 92.2645 75.5 88.8839 68.6412 88.8839L38.2879 88.8839L38.2879 78.8375L68.6412 78.8375C81.5469 78.8375 89.3667 86.7239 89.3667 96.4187ZM89.3667 96.4187C89.3667 106.114 81.4802 114 71.7854 114C61.5682 114 55.4599 106.34 55.4599 98.9304H65.5064C65.5064 101.015 67.4554 103.954 71.7854 103.954C75.9396 103.954 79.3202 100.573 79.3202 96.4187C79.3202 92.2645 75.5 88.8839 68.6412 88.8839L38.2879 88.8839L38.2879 78.8375L68.6412 78.8375C81.5469 78.8375 89.3667 86.7239 89.3667 96.4187Z" fill="url(#paint1_linear)"/>
+<path d="M92 29.5C80.9188 29.5 73.102 37.9269 73.102 49.0081H82C82 43.5 86 39.5 92 39.5C98 39.5 101 43.5 101 49.0081C101 54.5162 97.1036 59.0545 86.5 59.0545H19V69.101H88C103.703 69.101 111 59.0081 111 49.0081C111 37.9269 103.5 29.5 92 29.5Z" fill="url(#paint2_linear)"/>
+<path d="M32.1701 78.8375H19V88.9683H32.1701V78.8375Z" fill="url(#paint3_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="27" y1="22.5" x2="85" y2="114" gradientUnits="userSpaceOnUse">
+<stop offset="0.078225" stop-color="#54C8F1"/>
+<stop offset="0.572917" stop-color="#41A2EF"/>
+<stop offset="1" stop-color="#3386EE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="27" y1="22.5" x2="85" y2="114" gradientUnits="userSpaceOnUse">
+<stop offset="0.078225" stop-color="#54C8F1"/>
+<stop offset="0.572917" stop-color="#41A2EF"/>
+<stop offset="1" stop-color="#3386EE"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="27" y1="22.5" x2="85" y2="114" gradientUnits="userSpaceOnUse">
+<stop offset="0.078225" stop-color="#54C8F1"/>
+<stop offset="0.572917" stop-color="#41A2EF"/>
+<stop offset="1" stop-color="#3386EE"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="27" y1="22.5" x2="85" y2="114" gradientUnits="userSpaceOnUse">
+<stop offset="0.078225" stop-color="#54C8F1"/>
+<stop offset="0.572917" stop-color="#41A2EF"/>
+<stop offset="1" stop-color="#3386EE"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Skills.vue b/src/components/Skills.vue
new file mode 100644
index 0000000..2b66d66
--- /dev/null
+++ b/src/components/Skills.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex space-x-2 w-full p-3 items-center bg-gray-300 rounded-xl dark:(bg-gray-800 text-gray-100)">
+    <icon :name="getIconName" class="w-10 h-10" />
+    <h1>{{ skill }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    skill: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    getIconName() {
+      if (this.icon) return this.icon;
+      else
+        return (
+          this.skill?.toLowerCase()?.replace(/[^a-zA-Z]/g, "")
+        );
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/index.vue
index a5beff4..0bb1717 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -2,12 +2,26 @@
   <div class="grid justify-items-center dark:bg-gray-900">
     <Navbar />
     <AboutMe />
+    <section id="skills" class="grid w-8/12 justify-items-center">
+      <h2 class="mt-10 text-xl font-semibold text-gray-900 dark:text-gray-100">
+        My Skills
+      </h2>
+      <div class="grid grid-cols-5 skills mt-4 gap-2">
+        <Skills
+          v-for="(skill, index) in skills"
+          :key="`skill-${index}`"
+          :skill="skill"
+        />
+      </div>
+    </section>
     <section class="grid justify-items-center w-10/12" id="projects">
       <h2 class="mt-10 text-xl font-semibold text-gray-900 dark:text-gray-100">
         My Projects
       </h2>
       <div class="mx-2 grid gap-2 mt-4">
-        <div class="grid gap-4 w-full justify-items-center sm:grid-cols-3 projects">
+        <div
+          class="grid gap-4 w-full justify-items-center sm:grid-cols-3 projects"
+        >
           <ProjectCard
             v-for="(project, index) in getProjects.featured"
             :key="`project-featured-${index}`"
@@ -70,6 +84,18 @@ export default {
           link: "/",
         },
       ],
+      skills: [
+        "Vue.js",
+        "Javascript",
+        "C#",
+        "Nuxt.js",
+        "WindiCSS",
+        "Node.js",
+        "Sass",
+        "Dotnet",
+        "Github",
+        "Figma",
+      ],
     };
   },
   computed: {
@@ -91,5 +117,8 @@ html {
   .projects {
     @apply sm:grid-cols-2;
   }
+  .skills {
+    @apply sm:grid-cols-3;
+  }
 }
 </style>
\ No newline at end of file