final commit, major overhaul

README.md

@@ -1,4 +1,8 @@
 <center><h1>Onrir.dev</h1></center>
 <center>Simple Portfolio website made with Astro and Tailwind.</center>
 
-![mockup](mockup.png)
+stack: 
+-alpine.js
+-astro
+-tailwindcss
+-merakiui

public/index.css

@@ -1,12 +1,116 @@
 :root {
-  --primary: #9137A8;
-  --secondary: #CB384A;
-  --accent: #C95C85;
-  --background: #1E1C45;
+  --primary: #9137a8;
+  --secondary: #cb384a;
+  --background: #040713;
   --background-gray: #323239;
-  --text: #D1CFEC;
+  --text: #d1cfec;
+
+  --waves-height: 50px;
+  --waves-width: 0px;
+}
+
+.hero {
+  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmRldi9zdmdqcyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIG9wYWNpdHk9IjAuMiI+PGRlZnM+PGZpbHRlciBpZD0ibm5ub2lzZS1maWx0ZXIiIHg9Ii0yMCUiIHk9Ii0yMCUiIHdpZHRoPSIxNDAlIiBoZWlnaHQ9IjE0MCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgcHJpbWl0aXZlVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9ImxpbmVhclJHQiI+Cgk8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4yIiBudW1PY3RhdmVzPSI0IiBzZWVkPSIxNSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiByZXN1bHQ9InR1cmJ1bGVuY2UiLz4KCTxmZVNwZWN1bGFyTGlnaHRpbmcgc3VyZmFjZVNjYWxlPSI2IiBzcGVjdWxhckNvbnN0YW50PSIxIiBzcGVjdWxhckV4cG9uZW50PSIyMCIgbGlnaHRpbmctY29sb3I9IiNhYmFiYWIiIHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgaW49InR1cmJ1bGVuY2UiIHJlc3VsdD0ic3BlY3VsYXJMaWdodGluZyI+CiAgICAJCTxmZURpc3RhbnRMaWdodCBhemltdXRoPSIzIiBlbGV2YXRpb249Ijg5Ii8+CiAgCTwvZmVTcGVjdWxhckxpZ2h0aW5nPgogIDxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiIHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgaW49InNwZWN1bGFyTGlnaHRpbmciIHJlc3VsdD0iY29sb3JtYXRyaXgiLz4KPC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSJ0cmFuc3BhcmVudCIvPjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSIjYWJhYmFiIiBmaWx0ZXI9InVybCgjbm5ub2lzZS1maWx0ZXIpIi8+PC9zdmc+),
+    linear-gradient(-20deg, var(--primary), var(--secondary)),
+    linear-gradient(45deg, var(--accent), var(--primary) 80%);
+}
+
+nav {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+}
+
+.card {
+  font-size: 4dvh;
+}
+
+
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  position: relative;
+  margin: 1rem;
+  border-radius: 2rem;
+  overflow: hidden;
+  cursor: pointer;
+  width: 300px;
+}
+
+.card-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 4;
+}
+
+.card-image > img {
+  width: var(--logo-size);
+}
+
+.card-gradient {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background: radial-gradient(
+    rgb(85, 108, 240) 40%,
+    rgb(97, 128, 233) 50%,
+    rgb(56, 136, 255),
+    rgb(140, 42, 252)
+  );
+  mix-blend-mode: darken;
+  pointer-events: none;
+  z-index: 3;
+}
+
+.card-letters {
+  --x: 0px;
+  --y: 0px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100%;
+  color: white;
+  font-size: 0.8rem;
+  font-weight: 500;
+  word-wrap: break-word;
+  opacity: 0;
+  transition: opacity 400ms;
+  -webkit-mask-image: radial-gradient(
+    calc(480px * 0.8) circle at var(--x) var(--y),
+    rgb(255 255 255) 20%,
+    rgb(255 255 255 / 25%),
+    transparent
+  );
+  scale: 1.03;
+}
+
+.card:hover .card-letters {
+  opacity: 1;
+}
+
+@media (max-width: 600px) {
+  :root {
+    --card-size: 480px;
+  }
+
+  .card {
+    border-radius: 1rem;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
-* {
-  color: var(--text);
+::-webkit-scrollbar {
+  width: 11px;
+  background-color: transparent;
+}::-webkit-scrollbar-thumb {
+  background-color: var(--neutral-three);
+  background-clip: content-box;
 }

src/components/description.astro

@@ -0,0 +1,87 @@
+<center  id="about" class="about">
+  <div
+    class="flex flex-col justify-center w-full h-full px-4 mx-auto sm:max-w-3xl md:max-w-4xl lg:max-w-5xl xl:max-w-6xl"
+  >
+    <h1 class="text-5xl font-extrabold text-center lg:text-7xl 2xl:text-8xl">
+      <span
+        class="text-transparent bg-gradient-to-br bg-clip-text from-teal-500 via-indigo-500 to-sky-500 dark:from-teal-200 dark:via-indigo-300 dark:to-sky-500"
+      >
+        I am,
+      </span>
+
+      <span
+        class="text-transparent bg-gradient-to-tr bg-clip-text from-blue-500 via-pink-500 to-red-500 dark:from-sky-300 dark:via-pink-300 dark:to-red-500"
+      >
+        Onrir
+      </span>
+    </h1>
+
+    <p class="mt-4 text-xl text-justify text-gray-500 dark:text-gray-400">
+      <span
+        class="text-transparent bg-gradient-to-br bg-clip-text from-teal-500 via-indigo-500 to-sky-500 dark:from-teal-200 dark:via-indigo-300 dark:to-sky-500"
+      >
+        A Full-Stack Developer
+      </span> that loves to create web applications using Astro, Vue.js, TailwindCSS,
+      AlpineJS and Golang. I've been creating websites since 2019 and I'm still actively
+      learning and experiementing with new things.
+
+      <br /><br />
+
+      <span
+        class="text-transparent bg-gradient-to-br bg-clip-text from-blue-500 via-pink-500 to-red-500 dark:from-sky-300 dark:via-pink-300 dark:to-red-500"
+      >
+        A Youtuber
+      </span> Despite arguebly not being that great at it I've been challenging myself
+      to create videos on Youtube. What I originally started as a basic <a
+        class="text-gray-500"
+        href="https://www.youtube.com/@Fireship">Fireship</a
+      > has now become a channel where I can freely talk about topics that peak my
+      interest.
+
+      <br /><br />
+
+      <span
+        class="text-transparent bg-gradient-to-br bg-clip-text from-teal-500 via-indigo-500 to-sky-500 dark:from-teal-200 dark:via-indigo-300 dark:to-sky-500"
+      >
+        A Community Maintainer
+      </span> I'm a maintainer of the <a
+        class="text-gray-500"
+        href="https://discord.gg/RJBY2gTfbJ">Türkiye Developers Community</a
+      > on Discord where a variety of programming related topics are discussed.
+    </p>
+  </div>
+</center>
+
+<figure class="max-w-screen-md mx-auto text-center">
+  <svg
+    class="w-10 h-10 mx-auto mb-3 text-gray-400 dark:text-gray-600"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 18 14"
+  >
+    <path
+      d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z"
+    ></path>
+  </svg>
+  <blockquote>
+    <p class="text-2xl italic font-medium text-gray-900 dark:text-white">
+      "I do not leave any rigid scripture, dogma, or frozen and set rule as my
+      spiritual legacy. My spiritual legacy is science and reason."
+    </p>
+  </blockquote>
+  <figcaption
+    class="flex items-center justify-center mt-6 space-x-3 rtl:space-x-reverse"
+  >
+    <div class="flex items-center">
+      <img src="/Ataturk.svg" width="200px" height="200px" />
+    </div>
+  </figcaption>
+</figure>
+<br /><br />
+<div
+  class="px-6 relative z-10 mx-auto min-w-[85rem] 2xl:max-w-[90rem] w-full flex items-end gap-6"
+>
+</div>
+<div></div>
+<br /><br />

src/components/footer.astro

@@ -0,0 +1,38 @@
+<footer class="bg-background">
+  <div class="container px-6 py-8 mx-auto">
+      <div class="flex flex-col items-center text-center">
+          <a href="#">
+              <img class="w-auto h-7" src="/logo.png" alt="">
+          </a>
+
+          <div class="flex flex-wrap justify-center mt-6 -mx-4">
+            <a class="my-2  transition-colors duration-300 transform text-gray-200  hover:text-blue-400 md:mx-4 md:my-0" href="#">Home</a>
+            <a class="my-2  transition-colors duration-300 transform text-gray-200  hover:text-blue-400 md:mx-4 md:my-0" href="#">About Me</a>
+            <a class="my-2  transition-colors duration-300 transform text-gray-200  hover:text-blue-400 md:mx-4 md:my-0" href="#">Projects</a>
+          </div>
+
+      </div>
+
+      <hr class="my-6  md:my-10 border-gray-700" />
+
+      <div class="flex flex-col items-center sm:flex-row sm:justify-between">
+          <p class="text-sm text-gray-300">© Copyright 2024. All Rights Reserved.</p>
+
+          <div class="flex justify-center ">
+            <a class="relative" href="https://github.com/onrirr">
+                <box-icon name='github' type='logo' color='#ffffff' ></box-icon>
+            </a>
+            <a class="relative" href="https://youtube.com/@onrir">
+                <box-icon name='youtube' type='logo' color='#ffffff' ></box-icon>
+            </a>
+            <a class="relative" href="https://reddit.com/user/ulughann">
+                <box-icon name='reddit' type='logo' color='#ffffff' ></box-icon>
+            </a>
+            <a class="relative" href="https://discord.gg/RJBY2gTfbJ">
+                <box-icon name='discord' type='logo' color='#ffffff' ></box-icon>
+            </a>
+
+          </div>
+      </div>
+  </div>
+</footer>