Add files via upload

astro.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig } from 'astro/config';
 
 import tailwind from "@astrojs/tailwind";
 
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://onrirr.github.io',

package.json

@@ -11,9 +11,8 @@
   },
   "dependencies": {
     "@astrojs/tailwind": "^4.0.0",
-    "astro": "^2.10.12",
+    "astro": "^3.6.0",
     "boxicons": "^2.1.4",
-    "highlight.js": "^11.9.0",
     "tailwindcss": "^3.3.3"
   }
 }

public/index.css

@@ -1,66 +1,116 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&display=swap");
+
 :root {
-  --selection: rgba(224, 146, 58, 0.35);
-  --background: #242424;
-  --text: #ffffff;
-  --string: #67b26d;
-  --number: #e8a04e;
-  --title: #9e4ee8;
-  --built_in: #e25158;
-  --keyword: #e5b742;
-  --function: #e0923a;
-  --params: #508be5;
-  --comment: #7f7f7f;
+  --color-primary: #a7a1fa;
+  --color-secondary: hsl(160, 100%, 65%);
+  --background: #282c34;
+  --text: #ddc5d9;
+
+  --border-rgb: 255 255 255;
+  --border: 1px solid rgb(var(--border-rgb) / 20%);
+
+  --logo-size: calc(900px * 0.3);
 }
 
-pre code {
-  display: block;
-  overflow-x: auto;
-  padding: 10px;
-  -webkit-text-size-adjust: none;
+body {
+  background-color: var(--background);
 }
 
-::selection {
-  background: var(--selection) !important;
+*, .mono {
+  font-family: "JetBrains Mono", monospace;
 }
 
-.hljs {
-  color: var(--text);
+.card {
+  font-size: 4dvh;
 }
 
-.hljs-string {
-  color: var(--string);
+::selection {
+  background-color: var(--color-primary);
+  color: var(--background);
+  -webkit-text-fill-color: var(--background);
 }
 
-.hljs-number {
-  color: var(--number) !important;
+.ico {
+  color: var(--color-primary);
 }
 
-.hljs-title {
-  color: var(--title) !important;
+.ico:hover {
+  color: var(--color-secondary);
 }
 
-.hljs-built_in {
-  color: var(--built_in) !important;
+.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;
 }
 
-.hljs-keyword {
-  color: var(--keyword) !important;
+.card-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 4;
 }
 
-.hljs-function > .hljs-keyword {
-  color: var(--function) !important;
-  font-style: italic;
+.card-image > img {
+  width: var(--logo-size);
 }
 
-.hljs-params {
-  color: var(--params);
+.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;
 }
 
-.hljs-comment {
-  color: var(--comment);
+.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;
 }
 
-#code {
+.card:hover .card-letters {
   opacity: 1;
-  transition: opacity 0.5s ease;
+}
+
+@media (max-width: 600px) {
+  :root {
+    --card-size: 480px;
+  }
+
+  .card {
+    border-radius: 1rem;
+  }
 }

src/components/details.astro

@@ -0,0 +1,32 @@
+<section class="p-6" id="whoami">
+	<div class="container mx-auto">
+		<h2 class="text-5xl font-bold ml-[-10px] text-primary">::whoAmI</h2>
+		<p class="mt-4 text-xl text-text">
+			Heya! I'm <b>Onrir</b>, a 16 year old Full-stack developer from Türkiye who has been programming for better or worse since I was 12.<br>
+		  I also make programming related videos on Youtube. I'm currently struggling with Typescript.
+		</p>
+
+		<div class="grid gap-6 my-8 lg:grid-cols-3">
+			<div class="flex flex-col p-8 space-y-4 rounded-md bg-primary">
+				<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full bg-background text-text">
+          <box-icon name='globe' color='white'></box-icon>
+        </div>
+				<p class="text-2xl color-background">
+					<b>Web Developer.</b> I am a web developer with over 3 years of experience.
+				</p>
+			</div>
+			<div class="flex flex-col p-8 space-y-4 rounded-md bg-primary">
+				<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full bg-background text-text"><box-icon name='youtube' type='logo' color='white'></box-icon></div>
+				<p class="text-2xl color-background">
+					<b class="font-bold">Youtuber.</b> I make programming related videos in Turkish on Youtube.
+				</p>
+			</div>
+			<div class="flex flex-col p-8 space-y-4 rounded-md bg-primary">
+				<div class="flex items-center justify-center flex-shrink-0 w-12 h-12 text-xl font-bold rounded-full bg-background text-text"><box-icon name='podcast' color='white'></box-icon></div>
+				<p class="text-2xl color-background">
+					<b>Community Manager.</b> I manage the Community of Turkish Programmers, "TÜYAZ".
+				</p>
+			</div>
+		</div>
+	</div>
+</section>

src/components/hero.astro

@@ -0,0 +1,55 @@
+<script>
+  const chars = "@$½#()abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+
+  const randomChar = () =>
+      chars[Math.floor(Math.random() * (chars.length - 1))],
+    randomString = (length) =>
+      Array.from(Array(length)).map(randomChar).join("");
+
+  const card = document.querySelector(".card") as HTMLElement,
+    letters = card.querySelector(".card-letters") as HTMLElement;
+
+  const handleOnMove = (e) => {
+    const rect = card.getBoundingClientRect(),
+      x = e.clientX - rect.left,
+      y = e.clientY - rect.top;
+
+    letters.style.setProperty("--x", `${x}px`);
+    letters.style.setProperty("--y", `${y}px`);
+    letters.innerText = randomString(1500);
+  };
+
+  card.onmousemove = (e) => handleOnMove(e);
+  card.ontouchmove = (e) => handleOnMove(e.touches[0]);
+</script>
+
+<section class="">
+  <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 items-center">
+    <div class="mr-auto place-self-center lg:col-span-7">
+      <h1 class="mono mt-0 ml-[-4px] text-6xl font-bold tracking-tight md:text-8xl xl:text-8xl text-primary">
+        ONRIR<span class="mono md:align-super bg-primary text-background font-semibold px-2.5 ml-4 text-4xl sm:text-5xl mb-0 rounded">
+          .dev</span>
+      </h1>
+      <p class="mono max-w-2xl text-text md:text-lg lg:text-xl">
+        Web Developer, YouTuber, Tech Enthusiast and Highschool Student from
+        Türkiye.
+      </p>
+      <a href="https://www.youtube.com/@onrir" target="_blank">
+        <box-icon name="youtube" type="logo" color="#a7a1fa" size="md"></box-icon>
+      </a>
+      <a href="https://github.com/onrirr" target="_blank">
+        <box-icon name="github" type="logo" color="#a7a1fa" size="md"></box-icon>
+      </a>
+
+    </div>
+    <div class="lg:mt-0 lg:col-span-5 lg:flex">
+      <div class="card">
+        <div class="card-image">
+          <img class="ico" src="/logo.png"/>
+        </div>
+        <div class="card-gradient"></div>
+        <div class="card-letters"></div>
+      </div>
+    </div>
+  </div>
+</section>

src/components/navbar.astro

@@ -0,0 +1,11 @@
+<nav>
+  <center>
+    <ul class="nav nav-pills nav-justified inline-flex items-center text-primary mt-4">
+      <li><a href="#">Home</a></li>
+      <div class="w-1 h-1 bg-primary rounded-full inline-block mx-2 my-auto"></div>
+      <li><a href="#whoami">WhoAmI?</a></li>
+      <div class="w-1 h-1 bg-primary rounded-full inline-block mx-2 my-auto"></div>
+      <li><a href="#projects">Projects</a></li>
+    </ul>
+  </center>
+</nav>