diff --git a/astro.config.mjs b/astro.config.mjs index 11d0982..b16b187 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,6 +1,16 @@ import { defineConfig } from "astro/config"; +import icon from "astro-icon"; // https://astro.build/config export default defineConfig({ site: "https://jaster.xyz", + integrations: [ + icon({ + include: { + // Include only three `mdi` icons in the bundle + // Otherwise, Astro Icons could include every single icon in the mdi package and result in a huge bundle size + mdi: ["github", "linkedin"], + }, + }), + ], }); diff --git a/bun.lockb b/bun.lockb index 89c44be..024bda9 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 2251baf..033ffb1 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,11 @@ "dependencies": { "@astrojs/check": "^0.9.4", "astro": "^5.8.1", + "astro-icon": "^1.1.5", "typescript": "^5.8.3" }, "devDependencies": { + "@iconify-json/mdi": "^1.2.3", "prettier": "^3.1.1", "prettier-plugin-astro": "^0.12.3", "sass": "^1.70.0" diff --git a/src/assets/night.jpg b/src/assets/blog-bg.jpg similarity index 100% rename from src/assets/night.jpg rename to src/assets/blog-bg.jpg diff --git a/src/assets/background-mario.jpg b/src/assets/home-bg.jpg similarity index 100% rename from src/assets/background-mario.jpg rename to src/assets/home-bg.jpg diff --git a/src/assets/profile.jpeg b/src/assets/profile.jpeg new file mode 100644 index 0000000..5ac6206 Binary files /dev/null and b/src/assets/profile.jpeg differ diff --git a/src/components/Hamburger.astro b/src/components/Hamburger.astro deleted file mode 100644 index faab7a5..0000000 --- a/src/components/Hamburger.astro +++ /dev/null @@ -1,5 +0,0 @@ -
- - - -
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro deleted file mode 100644 index c3d2a36..0000000 --- a/src/components/LinkButton.astro +++ /dev/null @@ -1,28 +0,0 @@ ---- -interface Props { - href: string | URL; - text: string; -} - -const { href, text } = Astro.props; ---- - -{text} - - diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro deleted file mode 100644 index d63ed49..0000000 --- a/src/components/Navigation.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -import LinkButton from "./LinkButton.astro"; ---- - - diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro index 7674531..4be216a 100644 --- a/src/components/PostCard.astro +++ b/src/components/PostCard.astro @@ -37,4 +37,8 @@ const { post } = Astro.props; border: 1px solid var(--text-color); padding: 1rem; } + + a { + text-decoration: none; + } diff --git a/src/components/PostCards.astro b/src/components/PostCards.astro deleted file mode 100644 index c8d7aa2..0000000 --- a/src/components/PostCards.astro +++ /dev/null @@ -1,25 +0,0 @@ ---- -import PostCard from "@components/PostCard.astro"; -import type { BlogPost } from "../types/BlogPost.ts"; - -interface Props { - posts: BlogPost[]; -} - -const { posts } = Astro.props; ---- - -
- {posts.map((post) => )} -
- - diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 5ecddc6..8326024 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -1,8 +1,8 @@ --- -import Hamburger from "@components/Hamburger.astro"; -import Navigation from "@components/Navigation.astro"; import type { ImageMetadata } from "astro"; -import { getImage } from "astro:assets"; +import { getImage, Image } from "astro:assets"; +import profileImage from "@assets/profile.jpeg"; +import { Icon } from "astro-icon/components"; import "@styles/global.scss"; @@ -13,10 +13,9 @@ interface Props { const { title, backgroundImage } = Astro.props; -// Optimize for common screen width -const optimizedImage = await getImage({ src: backgroundImage }); +const optimizedBgImage = await getImage({ src: backgroundImage }); -const backgroundImageUrl = `url('${optimizedImage.src}')`; +const backgroundImageUrl = `url('${optimizedBgImage.src}')`; --- @@ -30,19 +29,46 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`;
- - +
+ +
+ profile image +
+ +
+

Victor Martinez

+ +
+
+ +
+
+ @@ -62,12 +88,16 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`; font-size: var(--font-size-m); } - header { + .wrapper { display: flex; flex-direction: column; - justify-content: center; - gap: 1rem; - margin-bottom: 1rem; + width: 80ch; + min-height: calc(100vh - 1rem); + border: 2px solid white; + background: rgba(29, 31, 33, 0.95); + backdrop-filter: blur(10px); + padding: 2rem 1.5rem; + margin: 0.5rem; } main { @@ -85,26 +115,50 @@ const backgroundImageUrl = `url('${optimizedImage.src}')`; gap: 0.5rem; } - .wrapper { + header { display: flex; flex-direction: column; - width: 80ch; - min-height: calc(100vh - 1rem); - border: 2px solid white; - background: rgba(29, 31, 33, 0.95); - backdrop-filter: blur(10px); - padding: 2rem 1.5rem; - margin: 0.5rem; + gap: 1rem; + margin-bottom: 1rem; } - .page-title { - font-size: 3rem; - text-align: center; + .social-media { + display: flex; + flex-direction: row; + gap: 1rem; + } + + nav { + padding-top: 0.3rem; + display: flex; + flex-direction: row; + gap: 1rem; + } + + .profile { + display: flex; + flex-direction: row; + gap: 1.5rem; + align-items: start; + } + + .profile-image-wrapper { + width: 50px; + height: 50px; + border: 2px solid white; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .profile-image-wrapper:hover { + border-color: var(--violet300); + cursor: pointer; + } + + .profile-image { + width: 100%; + height: auto; + margin-top: -35%; } - - diff --git a/src/layouts/PostLayout.astro b/src/layouts/PostLayout.astro index ee6f1de..a7f6330 100644 --- a/src/layouts/PostLayout.astro +++ b/src/layouts/PostLayout.astro @@ -1,7 +1,7 @@ --- import type { Frontmatter } from "../types/BlogPost.ts"; import BaseLayout from "./BaseLayout.astro"; -import backgroundImage from "../assets/night.jpg"; +import backgroundImage from "@assets/blog-bg.jpg"; interface Props { frontmatter: Frontmatter; diff --git a/src/pages/blog.astro b/src/pages/blog.astro index 05ccd7e..0572949 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -1,14 +1,27 @@ --- import type { BlogPost } from "../types/BlogPost.ts"; -import PostCards from "@components/PostCards.astro"; +import PostCard from "@components/PostCard.astro"; import Layout from "@layouts/BaseLayout.astro"; -import backgroundImage from "../assets/night.jpg"; +import backgroundImage from "@assets/blog-bg.jpg"; -const allPosts = Object.values( +const posts = Object.values( import.meta.glob("../pages/posts/*.md", { eager: true }), ); --- - +
+ {posts.map((post) => )} +
+ + diff --git a/src/pages/index.astro b/src/pages/index.astro index 4de2144..a5856d1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,6 @@ --- import Layout from "@layouts/BaseLayout.astro"; -import backgroundImage from "../assets/background-mario.jpg"; +import backgroundImage from "@assets/home-bg.jpg"; --- @@ -26,23 +26,4 @@ import backgroundImage from "../assets/background-mario.jpg"; public because I hope that whatever I write might be useful to someone else :)

- -
- -

Find me:

- - - -
- - diff --git a/src/styles/global.scss b/src/styles/global.scss index e070980..53380fb 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -157,56 +157,14 @@ ol { } a { - text-decoration: none; color: var(--violet100); + font-weight: bold; } a:hover { color: var(--violet300); } -/* nav */ - -.hamburger { - cursor: pointer; - display: flex; - flex-direction: column; - margin: 0 auto 0 0; - gap: 10px; -} - -.hamburger .line { - display: block; - width: 40px; - height: 5px; - background-color: var(--text-color); -} - -.nav-links { - display: none; - flex-direction: column; -} - -.expanded { - display: flex; - flex-direction: row; - justify-content: center; -} - -@media screen and (min-width: 636px) { - .hamburger { - display: none; - } - - .nav-links { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 1rem; - } -} - /* Posts */ .post-content { diff --git a/tsconfig.json b/tsconfig.json index b06e8ad..e1ad4a8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,8 @@ "paths": { "@components/*": ["src/components/*"], "@layouts/*": ["src/layouts/*"], - "@styles/*": ["src/styles/*"] + "@styles/*": ["src/styles/*"], + "@assets/*": ["src/assets/*"] }, "verbatimModuleSyntax": true, "plugins": [