{title}
+ ) : ( +{title}
+ )} + +{description}
+
+
+ Posted on:
+
+
+ );
+}
+
+const FormattedDatetime = ({ datetime }: { datetime: string | Date }) => {
+ const myDatetime = new Date(datetime);
+
+ const date = myDatetime.toLocaleDateString(LOCALE, {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+
+ const time = myDatetime.toLocaleTimeString(LOCALE, {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+
+ return (
+ <>
+ {date}
+
+ at
+ {time}
+
+ );
+};
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..9d2ea1b
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,50 @@
+---
+import Hr from "./Hr.astro";
+import Socials from "./Socials.astro";
+
+const currentYear = new Date().getFullYear();
+
+export interface Props {
+ noMarginTop?: boolean;
+}
+
+const { noMarginTop = false } = Astro.props;
+---
+
+
+
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..597bb62
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,214 @@
+---
+import { LOGO_IMAGE, SITE } from "@config";
+import Hr from "./Hr.astro";
+import LinkButton from "./LinkButton.astro";
+
+export interface Props {
+ activeNav?: "posts" | "tags" | "buy me a coffee" | "search";
+}
+
+const { activeNav } = Astro.props;
+---
+
+
+ ) : (
+ SITE.title
+ )
+ }
+ +
+
+
diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro
new file mode 100644
index 0000000..c37608a
--- /dev/null
+++ b/src/components/LinkButton.astro
@@ -0,0 +1,28 @@
+---
+export interface Props {
+ href: string;
+ className?: string;
+ ariaLabel?: string;
+ title?: string;
+ disabled?: boolean;
+}
+
+const { href, className, ariaLabel, title, disabled = false } = Astro.props;
+---
+
+
+ +
+ Found {searchResults?.length}
+ {searchResults?.length && searchResults?.length === 1
+ ? " result"
+ : " results"}{" "}
+ for '{inputVal}'
+
+ )}
+
+ -
+ {searchResults &&
+ searchResults.map(({ item, refIndex }) => (
+
+ {props.pageTitle[0]} + + {props.pageTitle[1]} + +
+ ) : ( +{props.pageTitle}
+ ) + } +{props.pageDesc}
+
+
+
+ {title}
+-
+ {
+ posts.map(({ data }) => (
+
+
+ Go back home
+
+
+ 404
+ +Page Not Found
+Yo!
+
+
+ +
++ +
My name is Thuan
+ +I sit in front of my computer daily, edit, and watch stuff. Sometimes I go out to smell humans or touch grass
+ +I have a background in Front-end Dev aka I know how to build a website, but I think most of the time this skill helps me build stuff I want
+ +In Sep, 2023 I thought again well i am kinda boring, i don't level up the programming skill i know how to do that, but i didn't. So again 4 years ago i in high school i had the option to do programming or design. I take programming maybe that time like want to be the Mr. Robot :D, but through many years I didn't see myself improve much in programming
+ +So i took a switch to video editing, again i didn't do anything related to video editing in my uni life so yeah keep going hopefully i can enjoy, level up, and live the life i want
+ +Random thought i will post it on my Twitter/X
+ +Freedom
+ +Contact licitfree@gmail.com for prices and to get your edit 😊
++ + +
Timeline for context
+
+ -
+ Dead: Last will | Di chúc
+
+ - 2023+: Finding the video editor position
+ - 2019-2023: Studying in Saigon Technology University
+ -
+ 2007-2019: Spent 12 years study in Nguyễn Văn Trân Primary School, Đa Phước Middle School
+ and Đa Phước High School
+
+ - 2001: Born in Ho Chi Minh city, Vietnam
+
+
+ +
Links
+-
+
- +Pay + + +
- +Portfolio + + +
- +Resume + + +
- +Photos + + +
- +Music i like + + +
- +Chat with me + + +
- +Meeting + + +
+ +{ + featuredPosts.length > 0 && ( + <> +
Featured
+-
+ {featuredPosts.map(({ data }) => (
+
+ + ) +} + +
+ +
Tags
+-
+ {tags.map(tag =>
+ +
Recent Posts
+-
+{
+ sortedPosts
+ .filter(({ data }) => !data.featured)
+ .map(
+ ({ data }, index) =>
+ index < 9999 && (
+
Paypal
+ paypal.me/licitfree ++
+
Bank
+Domestis (Vietnam)
+-
+
- Account number: 9017041176921 +
- Account name: Pham Tan Thuan +
- Bank name: Viet Capital Bank Ngân hàng TMCP Bản Việt +
- Branch: Hồ Chí Minh +
- City/ Province: Hồ Chí Minh +
Oversea
+-
+
- Account number: 9017041176921 +
- Account name: Pham Tan Thuan +
- Bank name: VIET CAPITAL COMMERCIAL JOINT STOCK BANK +
- + Bank Address: 412 Nguyen Thi Minh Khai Street, Ward 5, District 3, Ho Chi Minh City, Vietnam + +
- SWIFT code: VCBCVNVX +
{`Tag:${tag}`}
+-
+ {
+ sortTagsPost.map(({ data }) => (
+
-
+ {tags.map(tag =>
+
+
+
+ );
+};
diff --git a/src/utils/og-templates/site.tsx b/src/utils/og-templates/site.tsx
new file mode 100644
index 0000000..33bddc6
--- /dev/null
+++ b/src/utils/og-templates/site.tsx
@@ -0,0 +1,87 @@
+import { SITE } from "@config";
+
+export default () => {
+ return (
+
+
+
+
+ + {post.data.title} +
+
+
+ by{" "}
+
+ "
+
+
+ {post.data.author}
+
+
+
+
+ {SITE.title}
+
+
+
+
+
+
+ );
+};
diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts
new file mode 100644
index 0000000..167ff8e
--- /dev/null
+++ b/src/utils/slugify.ts
@@ -0,0 +1,11 @@
+import { slug as slugger } from "github-slugger";
+import type { CollectionEntry } from "astro:content";
+
+export const slugifyStr = (str: string) => slugger(str);
+
+const slugify = (post: CollectionEntry<"blog">["data"]) =>
+ post.postSlug ? slugger(post.postSlug) : slugger(post.title);
+
+export const slugifyAll = (arr: string[]) => arr.map(str => slugifyStr(str));
+
+export default slugify;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..38b212c
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,65 @@
+function withOpacity(variableName) {
+ return ({ opacityValue }) => {
+ if (opacityValue !== undefined) {
+ return `rgba(var(${variableName}), ${opacityValue})`;
+ }
+ return `rgb(var(${variableName}))`;
+ };
+}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+ theme: {
+ // Remove the following screen breakpoint or add other breakpoints
+ // if one breakpoint is not enough for you
+ screens: {
+ sm: "640px",
+ },
+
+ // Uncomment the following extend
+ // if existing Tailwind color palette will be used
+
+ // extend: {
+ textColor: {
+ skin: {
+ base: withOpacity("--color-text-base"),
+ accent: withOpacity("--color-accent"),
+ inverted: withOpacity("--color-fill"),
+ },
+ },
+ backgroundColor: {
+ skin: {
+ fill: withOpacity("--color-fill"),
+ accent: withOpacity("--color-accent"),
+ inverted: withOpacity("--color-text-base"),
+ card: withOpacity("--color-card"),
+ "card-muted": withOpacity("--color-card-muted"),
+ },
+ },
+ outlineColor: {
+ skin: {
+ fill: withOpacity("--color-accent"),
+ },
+ },
+ borderColor: {
+ skin: {
+ line: withOpacity("--color-border"),
+ fill: withOpacity("--color-text-base"),
+ accent: withOpacity("--color-accent"),
+ },
+ },
+ fill: {
+ skin: {
+ base: withOpacity("--color-text-base"),
+ accent: withOpacity("--color-accent"),
+ },
+ transparent: "transparent",
+ },
+ fontFamily: {
+ mono: ["IBM Plex Mono", "monospace"],
+ },
+ // },
+ },
+ plugins: [require("@tailwindcss/typography")],
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..63eb0e2
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "baseUrl": "src",
+ "jsx": "react-jsx",
+ "paths": {
+ "@assets/*": ["assets/*"],
+ "@config": ["config.ts"],
+ "@components/*": ["components/*"],
+ "@content/*": ["content/*"],
+ "@layouts/*": ["layouts/*"],
+ "@pages/*": ["pages/*"],
+ "@styles/*": ["styles/*"],
+ "@utils/*": ["utils/*"]
+ }
+ }
+}
+
+
+
+
+
+
+ {SITE.title}
+{SITE.desc}
+
+
+ {new URL(SITE.website).hostname}
+
+
+