Skip to content

Commit

Permalink
New design of the site
Browse files Browse the repository at this point in the history
  • Loading branch information
Dev-Siri committed Nov 19, 2024
1 parent 9c18b5c commit 0df53f8
Show file tree
Hide file tree
Showing 23 changed files with 227 additions and 74 deletions.
8 changes: 7 additions & 1 deletion .prettierrc
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,19 @@
"printWidth": 150,
"arrowParens": "avoid",
"tabWidth": 2,
"plugins": ["prettier-plugin-astro"],
"plugins": ["prettier-plugin-astro", "prettier-plugin-svelte"],
"overrides": [
{
"files": "*.astro",
"options": {
"parser": "astro"
}
},
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ My personal portfolio built with Astro and TailwindCSS.

Deployed at siri-dev.vercel.app. I am too cheap to buy the siri.dev domain :(

Design heavily inspired by [nexxel](https://nexxel.dev)'s site

## Technologies

- Astro
Expand Down
19 changes: 13 additions & 6 deletions astro.config.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
import { defineConfig } from "astro/config";

import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import tailwind from "@astrojs/tailwind";
import vercel from "@astrojs/vercel/static";
import icon from "astro-icon";
import svelte from "@astrojs/svelte";

// https://astro.build/config
export default defineConfig({
integrations: [tailwind(), mdx(), sitemap(), icon({ iconDir: "src/components/icons" })],
build: { format: "file" },
integrations: [tailwind(), mdx(), sitemap(), icon({
iconDir: "src/components/icons"
}), svelte()],
build: {
format: "file"
},
site: "https://siri-dev.vercel.app",
adapter: vercel({
webAnalytics: { enabled: true },
}),
});
webAnalytics: {
enabled: true
}
})
});
Binary file modified bun.lockb
Binary file not shown.
26 changes: 15 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,23 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/mdx": "^2.0.1",
"@iconify-json/mdi": "^1.1.66",
"@vercel/analytics": "^1.2.2",
"astro": "^4.0.6",
"astro-icon": "^1.1.0",
"@astrojs/mdx": "^3.1.9",
"@astrojs/svelte": "^6.0.1",
"@iconify-json/mdi": "^1.2.1",
"@vercel/analytics": "^1.4.1",
"astro": "^4.16.13",
"astro-icon": "^1.1.2",
"astro-tweet": "github:Dev-Siri/astro-tweet"
},
"devDependencies": {
"@astrojs/sitemap": "^3.0.3",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/vercel": "^6.1.0",
"prettier": "^3.1.1",
"prettier-plugin-astro": "^0.12.3",
"tailwindcss": "^3.4.1"
"@astrojs/sitemap": "^3.2.1",
"@astrojs/tailwind": "^5.1.2",
"@astrojs/vercel": "^7.8.2",
"prettier": "^3.3.3",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-svelte": "^3.2.8",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
"svelte": "^5.2.3"
}
}
13 changes: 2 additions & 11 deletions src/components/BookItem.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import { Image } from "astro:assets";
import SocialMediaLink from "../components/SocialMediaLink.astro";
import ProceedToCheckout from "../islands/ProceedToCheckout.svelte";
export interface Props {
title: string;
Expand All @@ -24,21 +25,11 @@ const { title, authors, imageUrl, price, imageSize } = Astro.props;
<h5 class="text-balance">{authors} "{title}" O'Rly Book</h5>
<p class="text-md text-gray-400 mt-2">${price}</p>
<div class="flex flex-col w-fit">
<button type="button" class="bg-white text-black p-2 px-4 rounded-full my-4 hover:bg-gray-200 duration-200" data-id="checkout-btn">
Proceed to Checkout
</button>
<ProceedToCheckout client:load />
<div class="flex gap-2">
<span class="text-md">By</span>
<SocialMediaLink username="@IroncladDev" variant="twitter">IroncladDev</SocialMediaLink>
</div>
</div>
</section>
</article>

<script>
const checkoutButtons = document.querySelectorAll<HTMLButtonElement>("[data-id=checkout-btn]");

const RICKROLL_URL = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";

checkoutButtons.forEach(checkoutButton => checkoutButton.addEventListener("click", () => window.open(RICKROLL_URL)));
</script>
12 changes: 9 additions & 3 deletions src/components/GalleryPicture.astro
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,15 @@ const { index, location, height, width } = Astro.props;
{width}
/>
<div class="hidden absolute justify-center inset-0 h-full items-center group-hover:flex">
<Icon name="mdi:map-marker" height={25} width={25} color="red" />
<p>
{location}
<Icon name="mdi:map-marker-outline" height={25} width={25} />
<p aria-label={location} class="gallery-picture-location ml-1">
{location.toLowerCase()}
</p>
</div>
</a>

<style>
.gallery-picture-location {
word-spacing: -5px;
}
</style>
13 changes: 10 additions & 3 deletions src/components/Navbar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,16 @@ import AnimatedSiriLogo from "./AnimatedSiriLogo.astro";
<section class="items-center hidden lg:flex justify-around ml-auto">
{
links.map(navLink => (
<a class="hover:text-white text-gray-300 duration-200 rounded-md p-2 transform-gpu px-10" href={`/${navLink}`}>
{`${navLink.charAt(0).toUpperCase()}${navLink.slice(1)}`}
</a>
<div class="relative">
<a class="hover:text-white text-gray-300 duration-200 rounded-md p-2 transform-gpu px-10" href={`/${navLink}`}>
{navLink}
</a>
{Astro.url.pathname === `/${navLink}` && (
<span transition:name="indicator" class={`absolute inset-0 left-[37%] top-[90%] text-gray-300`}>
^^^
</span>
)}
</div>
))
}
</section>
Expand Down
8 changes: 4 additions & 4 deletions src/components/ProjectCard.astro
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ const linkProps = link?.includes("http")
}
</section>
<section class="p-4 absolute z-10 mt-auto bottom-0 h-32">
<p class="text-4xl font-bold leading-normal">
{name}
<p class="text-3xl mt-3 font-bold leading-normal">
{name.toString()}
</p>
<p class="ml-1 text-gray-400 w-full" title={description}>
{description.length >= 60 ? `${description.slice(0, 60)}...` : description}
<p class="ml-1 text-sm text-gray-400 w-full" title={description}>
{description.length >= 55 ? `${description.slice(0, 55)}...` : description}
</p>
</section>
<section class="relative h-full">
Expand Down
4 changes: 2 additions & 2 deletions src/components/SideMenu.astro
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { links } from "../data";

<aside
id="side-menu"
class="flex animate-slide flex-col items-center bg-dark-gray w-2/4 sm:w-1/4 pt-10 ml-[50%] sm:ml-[75%] h-screen gap-2 mt-[100px] fixed z-50 border-l-2 border-t-2 border-semi-dark-gray rounded-l-md"
class="flex animate-slide pr-[4%] flex-col items-center bg-dark-gray w-2/4 sm:w-1/4 pt-4 ml-[50%] sm:ml-[75%] h-screen gap-2 mt-[100px] fixed z-50 border-l-2 border-t-2 border-semi-dark-gray rounded-l-md"
>
{
links.map(navLink => (
<a class="p-4 bg-black w-3/4 rounded-full justify-center hover:scale-105 duration-200 flex" href={`/${navLink}`}>
<a class="p-4 w-3/4 rounded-full justify-center hover:scale-105 duration-200 flex" href={`/${navLink}`}>
{`${navLink.charAt(0).toUpperCase()}${navLink.slice(1)}`}
</a>
))
Expand Down
6 changes: 6 additions & 0 deletions src/data.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
export const links = ["blog", "projects", "gallery", "book"];

export const location = "Kolkata, India";
export const designation = {
default: "CEO @ htmx.org (multi-billion)",
alternative: "CTO @ Twitter Shitposting Org™",
};

export const socialLinks = [
{
name: "Youtube",
Expand Down
37 changes: 37 additions & 0 deletions src/islands/AnimatedText.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<script lang="ts">
const { text, animationSpeed = 90, staticText = "" } = $props();
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";
let currentText = $state("");
let resolved = 0;
function scrambleText() {
let output = "";
for (let i = 0; i < text.length; i++) {
if (i < resolved) {
output += text[i];
} else {
output += chars[Math.floor(Math.random() * chars.length)];
}
}
currentText = output;
if (resolved < text.length) {
setTimeout(() => {
resolved++;
scrambleText();
}, animationSpeed);
}
}
$effect(() => {
scrambleText();
});
</script>

{`${currentText}${staticText}`}
<!-- In case of no JS, the text can still be shown -->
<noscript>{text}{staticText}</noscript>
25 changes: 25 additions & 0 deletions src/islands/HoverTextAnimation.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script>
import AnimatedText from "./AnimatedText.svelte";
const { defaultText, replaceText, staticText = "" } = $props();
let showingDefault = $state(true);
let hoveredOnce = $state(false);
function handleMouseEnter() {
showingDefault = false;
hoveredOnce = true;
}
</script>

<span role="presentation" onmouseenter={handleMouseEnter} onmouseleave={() => (showingDefault = true)}>
{#if showingDefault}
{#if !hoveredOnce}
{`${defaultText}${staticText}`}
{:else}
<AnimatedText text={defaultText} {staticText} animationSpeed={20} />
{/if}
{:else}
<AnimatedText text={replaceText} {staticText} animationSpeed={20} />
{/if}
</span>
11 changes: 11 additions & 0 deletions src/islands/ProceedToCheckout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script lang="ts">
const RICKROLL_URL = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
</script>

<button
type="button"
class="bg-white text-black p-2 px-4 rounded-full my-4 hover:bg-gray-200 duration-200"
on:click={() => window.open(RICKROLL_URL)}
>
Proceed to Checkout
</button>
13 changes: 10 additions & 3 deletions src/pages/blog.astro
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
---
import BaseLayout from "../layouts/BaseLayout.astro";
import AnimatedText from "../islands/AnimatedText.svelte";
const blogPosts = await Astro.glob("./blog/**/*.mdx");
---

<BaseLayout title="Blog" path="/blog" description="I like to post about my life, comparison of the technologies I use and other cool stuff here.">
<h4>Dev-Siri's Blog</h4>
<h4>
dev-siri's
<span class="font-semibold">
<AnimatedText client:load text="blog" animationSpeed={50} />
</span>
</h4>
<ul class="list-[none!important]">
{
blogPosts
Expand All @@ -17,8 +24,8 @@ const blogPosts = await Astro.glob("./blog/**/*.mdx");
.map(({ frontmatter, url }) => (
<li class="py-0">
<a href={url} class="text-start">
<h6 transition:name={frontmatter.title}>{frontmatter.title}</h6>
<p class="text-gray-400 -mt-5">{frontmatter.publishdate}</p>
<h6 transition:name={frontmatter.title}>{frontmatter.title.toLowerCase()}</h6>
<p class="text-gray-400 -mt-5">{frontmatter.publishdate.toLowerCase()}</p>
</a>
</li>
))
Expand Down
8 changes: 7 additions & 1 deletion src/pages/book.astro
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
---
import BookItem from "../components/BookItem.astro";
import AnimatedText from "../islands/AnimatedText.svelte";
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="Get My Book" description="Get my O'Rly Book" path="/book" class="text-start">
<h4 class="mt-2">Get my O'Rly Books</h4>
<h4 class="mt-2">
dev-siri's
<span class="font-semibold">
<AnimatedText client:load text="books" animatedSpeed={50} />
</span>
</h4>
<BookItem
title="BaguetteMaxxing Deepfakes 🥖🇫🇷"
authors="Dev-Siri"
Expand Down
8 changes: 7 additions & 1 deletion src/pages/gallery.astro
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
---
import GalleryPicture from "../components/GalleryPicture.astro";
import AnimatedText from "../islands/AnimatedText.svelte";
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title="Gallery" description="Pictures I took, when touching grass." path="/gallery">
<h4 class="mt-2">Dev-Siri's Gallery</h4>
<h4 class="mt-2">
dev-siri's
<span class="font-semibold">
<AnimatedText client:load text="gallery" animationSpeed={50} />
</span>
</h4>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-4">
<div class="grid gap-4">
<GalleryPicture index={1} location="Varanasi, India" height={575} width={1280} />
Expand Down
Loading

0 comments on commit 0df53f8

Please sign in to comment.