add tech stacks

frullah · Mar 28, 2021 · 43c4a5b · 43c4a5b
1 parent 8b09441
commit 43c4a5b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/src/components/Sections/TechnologiesSection.svelte b/src/components/Sections/TechnologiesSection.svelte
@@ -0,0 +1,36 @@
+<script>
+  import Tag from "../Tag.svelte";
+
+  const usedTechnologies = [
+    "HTML",
+    "CSS",
+    "Javascript",
+    "Bootstrap",
+    "Stimulus.js",
+    "Turbo",
+    "Tailwind CSS",
+    "Python",
+    "Ruby",
+    "Ruby on rails",
+    "PostgreSQL",
+    "OracleDB",
+    "MariaDB",
+    "Git",
+    "Github",
+    "Docker",
+    "AWS",
+  ];
+</script>
+
+<section id="technologies">
+  <div class="container my-4 p-4">
+    <h2 class="text-xl text-center mb-4">My Tech Stacks</h2>
+    <ul class="flex flex-wrap justify-center">
+      {#each usedTechnologies as usedTechnology}
+        <li class="mx-1 mb-2">
+          <Tag text={usedTechnology} />
+        </li>
+      {/each}
+    </ul>
+  </div>
+</section>
diff --git a/src/components/Tag.svelte b/src/components/Tag.svelte
@@ -0,0 +1,11 @@
+<script>
+  export let text;
+</script>
+
+<div class="tag">{text}</div>
+
+<style global lang="scss">
+  .tag {
+    @apply text-sm inline-block font-medium border border-primary-500 rounded py-1.5 px-3;
+  }
+</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -1,9 +1,11 @@
 <script>
   import HomeSection from "../components/Sections/HomeSection.svelte";
+  import TechnologiesSection from "../components/Sections/TechnologiesSection.svelte";
 </script>
 
 <svelte:head>
   <title>Fajarullah</title>
 </svelte:head>
 
 <HomeSection />
+<TechnologiesSection />