Initial commit, v1.0.0HEADmaster

3 files changed, 468 insertions, 0 deletions

diff --git a/src/routes/About.svelte b/src/routes/About.svelte
new file mode 100644
index 0000000..8978723
--- /dev/null
+++ b/src/routes/About.svelte
@@ -0,0 +1,37 @@
+<script></script>
+
+<section class="text-gray-600 body-font">
+  <div
+    class="container mx-auto flex px-5 py-24 items-center justify-center flex-col"
+  >
+    <img
+      class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded"
+      alt="hero"
+      src="https://dummyimage.com/720x600"
+    />
+    <div class="text-center lg:w-2/3 w-full">
+      <h1
+        class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900"
+      >
+        Microdosing synth tattooed vexillologist
+      </h1>
+      <p class="mb-8 leading-relaxed">
+        Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
+        tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt
+        ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over
+        meditation PBR&B pickled ennui celiac mlkshk freegan photo booth af
+        fingerstache pitchfork.
+      </p>
+      <div class="flex justify-center">
+        <button
+          class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg"
+          >Button</button
+        >
+        <button
+          class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg"
+          >Button</button
+        >
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/Blog.svelte b/src/routes/Blog.svelte
new file mode 100644
index 0000000..3a7fe84
--- /dev/null
+++ b/src/routes/Blog.svelte
@@ -0,0 +1,236 @@
+<script></script>
+
+<section class="text-gray-600 body-font">
+  <div class="container px-5 py-24 mx-auto">
+    <div class="flex flex-wrap -m-4">
+      <div class="p-4 md:w-1/3">
+        <div
+          class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"
+        >
+          <img
+            class="lg:h-48 md:h-36 w-full object-cover object-center"
+            src="https://dummyimage.com/720x400"
+            alt="blog"
+          />
+          <div class="p-6">
+            <h2
+              class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"
+            >
+              CATEGORY
+            </h2>
+            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
+              The Catalyzer
+            </h1>
+            <p class="leading-relaxed mb-3">
+              Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+              microdosing tousled waistcoat.
+            </p>
+            <div class="flex items-center flex-wrap ">
+              <a
+                class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0"
+                >Learn More
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span
+                class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200"
+              >
+                <svg
+                  class="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>1.2K
+              </span>
+              <span
+                class="text-gray-400 inline-flex items-center leading-none text-sm"
+              >
+                <svg
+                  class="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+                  />
+                </svg>6
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="p-4 md:w-1/3">
+        <div
+          class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"
+        >
+          <img
+            class="lg:h-48 md:h-36 w-full object-cover object-center"
+            src="https://dummyimage.com/721x401"
+            alt="blog"
+          />
+          <div class="p-6">
+            <h2
+              class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"
+            >
+              CATEGORY
+            </h2>
+            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
+              The 400 Blows
+            </h1>
+            <p class="leading-relaxed mb-3">
+              Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+              microdosing tousled waistcoat.
+            </p>
+            <div class="flex items-center flex-wrap">
+              <a
+                class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0"
+                >Learn More
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span
+                class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200"
+              >
+                <svg
+                  class="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>1.2K
+              </span>
+              <span
+                class="text-gray-400 inline-flex items-center leading-none text-sm"
+              >
+                <svg
+                  class="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+                  />
+                </svg>6
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="p-4 md:w-1/3">
+        <div
+          class="h-full border-2 border-gray-200 border-opacity-60 rounded-lg overflow-hidden"
+        >
+          <img
+            class="lg:h-48 md:h-36 w-full object-cover object-center"
+            src="https://dummyimage.com/722x402"
+            alt="blog"
+          />
+          <div class="p-6">
+            <h2
+              class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1"
+            >
+              CATEGORY
+            </h2>
+            <h1 class="title-font text-lg font-medium text-gray-900 mb-3">
+              Shooting Stars
+            </h1>
+            <p class="leading-relaxed mb-3">
+              Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
+              microdosing tousled waistcoat.
+            </p>
+            <div class="flex items-center flex-wrap ">
+              <a
+                class="text-indigo-500 inline-flex items-center md:mb-2 lg:mb-0"
+                >Learn More
+                <svg
+                  class="w-4 h-4 ml-2"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M5 12h14" />
+                  <path d="M12 5l7 7-7 7" />
+                </svg>
+              </a>
+              <span
+                class="text-gray-400 mr-3 inline-flex items-center lg:ml-auto md:ml-0 ml-auto leading-none text-sm pr-3 py-1 border-r-2 border-gray-200"
+              >
+                <svg
+                  class="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+                  <circle cx="12" cy="12" r="3" />
+                </svg>1.2K
+              </span>
+              <span
+                class="text-gray-400 inline-flex items-center leading-none text-sm"
+              >
+                <svg
+                  class="w-4 h-4 mr-1"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  fill="none"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"
+                  />
+                </svg>6
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
new file mode 100644
index 0000000..8092ee1
--- /dev/null
+++ b/src/routes/Home.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+  // interface PokemonsJson {
+  //   count: number;
+  //   next?: string;
+  //   previous?: string;
+  //   results: [{ name: string; url: string }];
+  // }
+  const getPokemons = async () /*: Promise<PokemonsJson>*/ => {
+    const ps = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100").then(
+      (res) => res.json()
+    );
+    console.log(ps);
+    const pokemons = [];
+    for (const poke of ps.results) {
+      const name = poke.name;
+      const pokeData = await fetch(
+        "https://pokeapi.co/api/v2/pokemon/" + name
+      ).then((res) => res.json());
+
+      console.log();
+      pokemons.push({ name, pokeData });
+    }
+    return pokemons;
+  };
+
+  let pokemonName = "";
+  function filterPokemons(pokemons, pokeName /*: { name: string }[]*/) {
+    return pokemons.filter((p) => p.name.includes(pokeName));
+  }
+</script>
+
+<section class="text-gray-600 body-font">
+  <div class="container px-5 py-24 mx-auto">
+    <div class="flex flex-col text-center w-full mb-20">
+      <h2
+        class="text-xs text-indigo-500 tracking-widest font-medium title-font mb-1"
+      >
+        I ❤️ SERIES
+      </h2>
+      <h1
+        class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900"
+      >
+        List of pokemons
+      </h1>
+      <p class="lg:w-2/3 mx-auto leading-relaxed text-base">
+        Data is taken from pokeapi.co, so they are the one to blame for any
+        errors
+      </p>
+    </div>
+    <div class="w-full flex justify-center flex-col items-center">
+      <label
+        for="name"
+        class="leading-7 text-lg text-gray-600 flex justify-center items-center mr-3"
+        >Name of pokemon to find</label
+      >
+      <input
+        type="text"
+        id="name"
+        name="name"
+        bind:value={pokemonName}
+        class="w-3/5 bg-gray-100 bg-opacity-50 rounded border border-gray-300 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+      />
+    </div>
+    <div class="flex flex-wrap justify-center">
+      {#await getPokemons()}
+        <h1>Downolading pokemons</h1>
+      {:then pokemons}
+        {#each filterPokemons(pokemons, pokemonName) as pokemon}
+          <div class="m-5">
+            <img
+              src={pokemon.pokeData.sprites.back_default}
+              width="250"
+              alt="{pokemon.name} image"
+            />
+            <p class="text-4xl text-black text-center mt-3">{pokemon.name}</p>
+          </div>
+        {/each}
+      {/await}
+
+      <!--   <div -->
+      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+      <!--   > -->
+      <!--     <h2 -->
+      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+      <!--     > -->
+      <!--       Shooting Stars -->
+      <!--     </h2> -->
+      <!--     <p class="leading-relaxed text-base mb-4"> -->
+      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+      <!--       hexagon disrupt edison bulbche. -->
+      <!--     </p> -->
+      <!--     <a class="text-indigo-500 inline-flex items-center" -->
+      <!--       >Learn More -->
+      <!--       <svg -->
+      <!--         fill="none" -->
+      <!--         stroke="currentColor" -->
+      <!--         stroke-linecap="round" -->
+      <!--         stroke-linejoin="round" -->
+      <!--         stroke-width="2" -->
+      <!--         class="w-4 h-4 ml-2" -->
+      <!--         viewBox="0 0 24 24" -->
+      <!--       > -->
+      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
+      <!--       </svg> -->
+      <!--     </a> -->
+      <!--   </div> -->
+      <!--   <div -->
+      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+      <!--   > -->
+      <!--     <h2 -->
+      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+      <!--     > -->
+      <!--       The Catalyzer -->
+      <!--     </h2> -->
+      <!--     <p class="leading-relaxed text-base mb-4"> -->
+      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+      <!--       hexagon disrupt edison bulbche. -->
+      <!--     </p> -->
+      <!--     <a class="text-indigo-500 inline-flex items-center" -->
+      <!--       >Learn More -->
+      <!--       <svg -->
+      <!--         fill="none" -->
+      <!--         stroke="currentColor" -->
+      <!--         stroke-linecap="round" -->
+      <!--         stroke-linejoin="round" -->
+      <!--         stroke-width="2" -->
+      <!--         class="w-4 h-4 ml-2" -->
+      <!--         viewBox="0 0 24 24" -->
+      <!--       > -->
+      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
+      <!--       </svg> -->
+      <!--     </a> -->
+      <!--   </div> -->
+      <!--   <div -->
+      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+      <!--   > -->
+      <!--     <h2 -->
+      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+      <!--     > -->
+      <!--       Neptune -->
+      <!--     </h2> -->
+      <!--     <p class="leading-relaxed text-base mb-4"> -->
+      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+      <!--       hexagon disrupt edison bulbche. -->
+      <!--     </p> -->
+      <!--     <a class="text-indigo-500 inline-flex items-center" -->
+      <!--       >Learn More -->
+      <!--       <svg -->
+      <!--         fill="none" -->
+      <!--         stroke="currentColor" -->
+      <!--         stroke-linecap="round" -->
+      <!--         stroke-linejoin="round" -->
+      <!--         stroke-width="2" -->
+      <!--         class="w-4 h-4 ml-2" -->
+      <!--         viewBox="0 0 24 24" -->
+      <!--       > -->
+      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
+      <!--       </svg> -->
+      <!--     </a> -->
+      <!--   </div> -->
+      <!--   <div -->
+      <!--     class="xl:w-1/4 lg:w-1/2 md:w-full px-8 py-6 border-l-2 border-gray-200 border-opacity-60" -->
+      <!--   > -->
+      <!--     <h2 -->
+      <!--       class="text-lg sm:text-xl text-gray-900 font-medium title-font mb-2" -->
+      <!--     > -->
+      <!--       Melanchole -->
+      <!--     </h2> -->
+      <!--     <p class="leading-relaxed text-base mb-4"> -->
+      <!--       Fingerstache flexitarian street art 8-bit waistcoat. Distillery -->
+      <!--       hexagon disrupt edison bulbche. -->
+      <!--     </p> -->
+      <!--     <a class="text-indigo-500 inline-flex items-center" -->
+      <!--       >Learn More -->
+      <!--       <svg -->
+      <!--         fill="none" -->
+      <!--         stroke="currentColor" -->
+      <!--         stroke-linecap="round" -->
+      <!--         stroke-linejoin="round" -->
+      <!--         stroke-width="2" -->
+      <!--         class="w-4 h-4 ml-2" -->
+      <!--         viewBox="0 0 24 24" -->
+      <!--       > -->
+      <!--         <path d="M5 12h14M12 5l7 7-7 7" /> -->
+      <!--       </svg> -->
+      <!--     </a> -->
+      <!--   </div> -->
+      <!-- </div> -->
+      <!-- <button -->
+      <!--   class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg" -->
+      <!--   >Button</button -->
+      <!-- > -->
+    </div>
+  </div>
+</section>