chore: Update avatar image in assets and index pages

RND332 · Jun 16, 2024 · c378095 · c378095
1 parent 998530f
commit c378095
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/pages/assets.astro b/src/pages/assets.astro
@@ -2,7 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import { Image } from "astro:assets";
 import smfigma from "../../public/smicons.jpg"
-import avatarfull from "../../public/avatarfull.jpg"
+import Avatar from "../../public/avatarfull.jpg"
 ---
 
 <Layout page="assets">
@@ -13,7 +13,7 @@ import avatarfull from "../../public/avatarfull.jpg"
                 Social Media icons
                 <a class="text-purple-500" href="https://www.figma.com/community/file/929729132405358534" target="_blank">Figma</a>
             </div>
-            <Image src={avatarfull} loading="eager" alt="avatar" class="rounded" />
+            <Image src={Avatar} loading="eager" alt="avatar" class="rounded" />
             <div class="border border-[#30363d] rounded p-4 text-xs flex flex-col justify-between">
                 No Game No Life: Yuu Kamiya Art Works
                 <a class="text-purple-500" href="https://www.ebay.com/itm/264448308138?itmmeta=01HZWA3BCGQ815RZFYDP7N2DSX&hash=item3d9258f3aa:g:umwAAOSwXF5dac3N&itmprp=enc%3AAQAJAAAA8KYjiL5QX9npNIeIteo0GXYtUvqQdEa4BRvkfZGaAYQz0vmy81h37jSg6ZMycnTtBf3nLb%2BEe5tJ71e1r47z%2FAI%2BP1j1ilePeZ3TtNbKlTkvF1vrSEXp9Lj8bkTrUlHIIYLYEVIvVmTod44cx076cFrylp0wJCCTgEdVyWx45MkNxPTxSdguMQQ3mZ%2BvxD6qmbInvu71sHQYtk8Cn8oJc1ftMlfe9xSSakcDKymfOAAmeyCuWmXx8XEqWlLUxdePcPynyzIdDhzT0HsFBk4HkgZoz0jA1TpH4d2G%2F%2B%2F0jD0hq929aA9uOr0N3UmEYhbyTg%3D%3D%7Ctkp%3ABFBMrraNiv9j" target="_blank">eBay</a>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,12 +1,12 @@
 ---
 import { Image } from 'astro:assets';
-import Avatar from '../../public/avatar.jpg';
 import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout>
   <div class="grid p-2 grid-cols-1 gap-2 grid-rows-[1fr, 2fr]">
-    <Image src={Avatar} loading="eager" alt="avatar" class="rounded-full w-full" />
+    <div class="avatar">
+    </div>
     <div class="border border-[#30363d] rounded p-4">
       <h1 class="text-base font-bold">Hi, I'm <span class="text-purple-500">RND</span></h1>
       <p class="text-xs">I'm a frontend engineer. I'm passionate about web development, open source and cryptocurrencies.</p>
@@ -39,4 +39,12 @@ import Layout from "../layouts/Layout.astro";
   a:hover {
     color: purple;
   }
+
+  .avatar {
+    width: 100%;
+    aspect-ratio: 1/1;
+    background: url("../../public/avatarfull.jpg") no-repeat center -190px;
+    zoom: 160%;
+    border-radius: 100%;
+  }
 </style>