Skip to content

Commit

Permalink
Redesign portfolio (#2)
Browse files Browse the repository at this point in the history 
* Redesign homepage

* Completing the homepage

* Blog post redesign

* Completing about page

* Changing some copies

* Completing blog page layout

* Completing all existing page
  • Loading branch information
@bepitulaz
bepitulaz authored Oct 1, 2024
1 parent 8d8bceb commit 96136a1
Show file tree
Hide file tree
Showing 25 changed files with 5,129 additions and 5,640 deletions.
4 changes: 3 additions & 1 deletion astro.config.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@ import mdx from "@astrojs/mdx";

import sitemap from "@astrojs/sitemap";

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
site: "https://www.asepbagja.com",
integrations: [mdx(), sitemap()],
integrations: [mdx(), sitemap(), tailwind()],
});
9,038 changes: 4,016 additions & 5,022 deletions package-lock.json
View file

Large diffs are not rendered by default.

14 changes: 10 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,15 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/mdx": "^2.1.1",
"@astrojs/sitemap": "^3.0.5",
"astro": "^4.3.2",
"astro-seo": "^0.7.4"
"@astrojs/mdx": "^3.1.7",
"@astrojs/sitemap": "^3.1.6",
"@astrojs/tailwind": "^5.1.1",
"astro": "^4.15.9",
"astro-seo": "^0.7.4",
"preline": "^2.5.0",
"tailwindcss": "^3.4.13"
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.9"
}
}
Binary file added public/portfolio-img/3d-printed-case.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/portfolio-img/mini.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/portfolio-img/sonastik.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/portfolio-img/uksed.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 27 additions & 18 deletions src/components/Footer.astro
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,33 @@
---
const currentYear = new Date().getFullYear();
---
<footer class="mt-5 pt-3">
<div class="container">
<div class="row">
<div class="col-12">
<p class="text-center">© 2014-{currentYear} <a href="https://www.asepbagja.com/about">Asep Bagja Priandana</a>. All rights reserved.</p>
</div>
<footer class="bg-emerald-300 dark:bg-emerald-900 mt-auto w-full py-10 px-4 sm:px-6 lg:px-8">
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 items-center gap-5">
<div>
<a class="flex-none text-xl font-semibold text-black focus:outline-none dark:text-white" href="/" aria-label="asep.bagja">asep.bagja</a>
</div>
</div>
</footer>
<!-- End Col -->

<style>
footer {
background-color: var(--bs-dark);
color: var(--bs-body-bg);
}
<div class="text-left md:text-center">
<p>All rights reserved © 2014-{currentYear} Asep Bagja Priandana</p>
</div>
<!-- End Col -->

footer a {
color: var(--bs-body-bg);
text-decoration: underline;
}
</style>
<!-- Social Brands -->
<div class="md:text-end space-x-2">
<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="https://www.x.com/bepitulaz">
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
</a>
<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-full border border-transparent text-gray-500 hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" href="https://www.github.com/bepitulaz">
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</div>
<!-- End Social Brands -->
</div>
<!-- End Grid -->
</footer>
123 changes: 123 additions & 0 deletions src/components/Hero.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,128 @@
import heroImg from "../assets/web/hero.jpg";
---

<!-- Hero -->
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
<!-- Grid -->
<div class="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
<div>
<h1
class="block text-3xl font-bold text-gray-800 sm:text-4xl lg:text-4xl lg:leading-tight dark:text-white"
>
I make software and hardware products for fun 🎉 and profit 💶
</h1>
<p class="mt-3 text-xl text-gray-800 dark:text-neutral-400">
Hey there 👋🏼
</p>
<p class="mt-3 text-xl text-gray-800 dark:text-neutral-400">
I’m Asep, a software developer in Tallinn, Estonia 🇪🇪, focused on
creating both digital products and hardware. I design and build
electronic music instruments under the name <a
class="underline"
href="https://www.nanassound.com"
target="_blank"
rel="noopener">Nanas Sound</a
>.
</p>
<p class="mt-3 text-xl italic text-gray-800 dark:text-neutral-400">
Oh, and sometimes I drop my own tunes on streaming platforms 🎧. Feel
free to check out my <a href="/discography" class="underline"
>discography</a
>.
</p>
<p class="mt-3 text-xl text-gray-800 dark:text-neutral-400">
Looking to collaborate on software or hardware projects? Hit me up below
👇🏼👇🏼👇🏼
</p>

<!-- Buttons -->
<div class="mt-7 grid gap-3 w-full sm:inline-flex">
<a
class="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
href="/about"
>
Contact me
<svg
class="shrink-0 size-4"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
>
</a>
</div>
<!-- End Buttons -->
</div>
<!-- End Col -->

<div class="relative ms-4">
<img
class="w-full rounded-md"
src={heroImg.src}
alt="Hero Image of Asep"
/>
<div
class="absolute inset-0 -z-[1] bg-gradient-to-tr from-gray-200 via-white/0 to-white/0 size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6 dark:from-neutral-800 dark:via-neutral-900/0 dark:to-neutral-900/0"
>
</div>

<!-- SVG-->
<div class="absolute bottom-0 start-0">
<svg
class="w-2/3 ms-auto h-auto text-white dark:text-neutral-900"
width="630"
height="451"
viewBox="0 0 630 451"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="531" y="352" width="99" height="99" fill="currentColor"
></rect>
<rect x="140" y="352" width="106" height="99" fill="currentColor"
></rect>
<rect x="482" y="402" width="64" height="49" fill="currentColor"
></rect>
<rect x="433" y="402" width="63" height="49" fill="currentColor"
></rect>
<rect x="384" y="352" width="49" height="50" fill="currentColor"
></rect>
<rect x="531" y="328" width="50" height="50" fill="currentColor"
></rect>
<rect x="99" y="303" width="49" height="58" fill="currentColor"
></rect>
<rect x="99" y="352" width="49" height="50" fill="currentColor"
></rect>
<rect x="99" y="392" width="49" height="59" fill="currentColor"
></rect>
<rect x="44" y="402" width="66" height="49" fill="currentColor"
></rect>
<rect x="234" y="402" width="62" height="49" fill="currentColor"
></rect>
<rect x="334" y="303" width="50" height="49" fill="currentColor"
></rect>
<rect x="581" width="49" height="49" fill="currentColor"></rect>
<rect x="581" width="49" height="64" fill="currentColor"></rect>
<rect x="482" y="123" width="49" height="49" fill="currentColor"
></rect>
<rect x="507" y="124" width="49" height="24" fill="currentColor"
></rect>
<rect x="531" y="49" width="99" height="99" fill="currentColor"
></rect>
</svg>
</div>
<!-- End SVG-->
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Hero -->
<!--
<section class="row">
<div class="col-xs-12 col-sm-6 d-flex align-items-center">
<div class="container-fluid">
Expand Down Expand Up @@ -75,3 +197,4 @@ import heroImg from "../assets/web/hero.jpg";
gap: 1.5rem;
}
</style>
-->
136 changes: 65 additions & 71 deletions src/components/LatestBlog.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,97 +3,91 @@ import { getCollection } from "astro:content";
export interface Props {
title: string;
lang: string;
}
const { title, lang } = Astro.props;
const { title } = Astro.props;
const articles = await getCollection("blog", ({ id }) => {
return id.startsWith(`${lang}/`);
});
const articles = await getCollection("blog");
// Sort array of articles descending by date (newest first) in immutable way
const sortedArticles = [...articles].sort((a, b) => {
return new Date(b.data.date) - new Date(a.data.date);
return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
});
// Get first 4 articles from sortedArticles array
const latestArticles = sortedArticles.slice(0, 4).map((article) => {
const category = article.data.categories[0].toLowerCase();
const replaceLang = article.slug.replace(`${lang}/`, "");
const splittedSlug = article.slug.split("/");
const lang = splittedSlug[0];
const articleSlug = splittedSlug[1];
return {
...article,
lang,
slug:
lang === "en"
? `/${category}/${replaceLang}`
: `/${lang}/${category}/${replaceLang}`,
? `/${category}/${articleSlug}`
: `/${lang}/${category}/${articleSlug}`,
};
});
---

<section class="music container pt-5">
<div class="row">
<div class="col-12">
<h2 class="section-title text-center fs-1">{title}</h2>
</div>
</div>
<div class="row pt-5">
{
latestArticles.map((article) => (
<article class="post col-sm-6 col-lg-3">
<div class="post-image">
<img
src={article.data.images[0]}
alt={article.data.title}
class="img-fluid"
/>
</div>
<h3 class="mt-3">
<a href={article.slug}>{article.data.title}</a>
</h3>
<p>{article.data.summary}</p>
</article>
))
}
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="mx-auto max-w-2xl mb-8 lg:mb-14 text-center">
<h2
class="text-5xl lg:text-4xl text-gray-800 font-bold dark:text-neutral-200"
>
{title}
</h2>
<p class="mt-3 text-xl text-gray-800 dark:text-neutral-200">
My writings on software, electronics, and personal development.
</p>
</div>
</section>

<script>
// Make the whole article.post clickable. The link is coming from article > h3 > a.
const posts = document.querySelectorAll("article.post");
posts.forEach((post) => {
post.addEventListener("click", () => {
const link = post.querySelector("h3 > a").href;

// navigate to the link without opening a new tab
window.location.href = link;
});
});
</script>
<!-- End Title -->

<style>
article.post {
cursor: pointer;
}
<!-- Grid -->
<div class="grid lg:grid-cols-2 gap-6">
{latestArticles.map((article) => {
return (
<a class="group relative block rounded-xl focus:outline-none" href={article.slug}>
<div class="shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-gray-900/70">
<img class="size-full absolute top-0 start-0 object-cover" src={article.data.images[0]} alt={article.data.title}>
</div>

article.post a {
color: var(--primary);
text-decoration: none;
}

article.post a:hover {
color: var(--asep-primary);
}

article.post p {
font-family: "Source Serif 4", serif;
font-size: 1.2rem;
}
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="shrink-0">
{article.lang === "en" ? "🇬🇧" : "🇮🇩"}
</div>
<div class="ms-2.5 sm:ms-4">
<h4 class="font-semibold text-white">
{article.data.categories[0]}
</h4>
<p class="text-xs text-white/80">
{new Date(article.data.date).toLocaleDateString()}
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>

@media (min-width: 768px) {
.post-image {
height: 205px;
overflow: hidden;
}
}
</style>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-2xl sm:text-3xl font-semibold text-white group-hover:text-white/80 group-focus:text-white/80">
{article.data.title}
</h3>
<p class="text-xl mt-2 text-white/80">
{article.data.summary}
</p>
</div>
</div>
</a>
)
})}
</div>
<!-- End Grid -->
</div>
Loading

0 comments on commit 96136a1

Please sign in to comment.