A bit about me
I'm a Software Developer from Jakarta, Indonesia 🇮🇩,{' '}
diff --git a/src/components/blocks/home/contact-section.tsx b/src/components/blocks/home/contact-section.tsx
index 9890eba..e98770d 100644
--- a/src/components/blocks/home/contact-section.tsx
+++ b/src/components/blocks/home/contact-section.tsx
@@ -5,7 +5,7 @@ import Anchor from '@/components/anchor'
export default function ContactSection() {
return (
-
+
Contact
diff --git a/src/components/blocks/home/introduction-section.tsx b/src/components/blocks/home/introduction-section.tsx
index 4500cc0..f962838 100644
--- a/src/components/blocks/home/introduction-section.tsx
+++ b/src/components/blocks/home/introduction-section.tsx
@@ -5,6 +5,7 @@ import { Mail } from 'lucide-react'
import { siteConfig } from '@/config/site'
import { Button } from '@/components/ui/button'
+import TermWord from '@/components/term-word'
export default function IntroductionSection() {
return (
@@ -21,7 +22,11 @@ export default function IntroductionSection() {
- A Passionate, self-taught Software Developer
+ A Passionate,{' '}
+
+ self-taught
+ {' '}
+ Software Developer
And a Patron of Open Source Software.
diff --git a/src/components/layouts/DefaultLayout.tsx b/src/components/layouts/default-layout.tsx
similarity index 100%
rename from src/components/layouts/DefaultLayout.tsx
rename to src/components/layouts/default-layout.tsx
diff --git a/src/components/mdx-components.tsx b/src/components/mdx-components.tsx
new file mode 100644
index 0000000..004aaff
--- /dev/null
+++ b/src/components/mdx-components.tsx
@@ -0,0 +1,46 @@
+import { MDXComponents } from 'mdx/types'
+
+import Anchor from '@/components/anchor'
+import TermWord from '@/components/term-word'
+import { Heading } from '@/components/ui/heading'
+
+export const components: MDXComponents = {
+ Anchor,
+ TermWord,
+ Heading,
+ p(props) {
+ return {props.children}
+ },
+ h1(props) {
+ return {props.children as string}
+ },
+ h2(props) {
+ return {props.children as string}
+ },
+ h3(props) {
+ return {props.children as string}
+ },
+ h4(props) {
+ return {props.children as string}
+ },
+ h5(props) {
+ return {props.children as string}
+ },
+ h6(props) {
+ return {props.children as string}
+ },
+ code(props) {
+ return (
+
+ {props.children}
+
+ )
+ },
+ blockquote(props) {
+ return (
+
+ {props.children}
+
+ )
+ },
+}
diff --git a/src/components/term-word.tsx b/src/components/term-word.tsx
index 2e69fd2..2b3e3b3 100644
--- a/src/components/term-word.tsx
+++ b/src/components/term-word.tsx
@@ -1,8 +1,8 @@
-import { ReactNode } from 'react'
+import { HTMLAttributes, ReactNode } from 'react'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-export interface Props {
+export interface Props extends HTMLAttributes {
children: ReactNode
/**
* The description of the term word.
@@ -10,14 +10,16 @@ export interface Props {
description: string
}
-export default function TermWord({ children, description }: Props) {
+export default function TermWord({ children, description, ...rest }: Props) {
return (
- {children}
+
+ {children}
+
- {description}
+ {description}
)
diff --git a/src/contents/posts/the-weird-state-of-web-development.mdx b/src/contents/posts/the-weird-state-of-web-development.mdx
new file mode 100644
index 0000000..a47abc7
--- /dev/null
+++ b/src/contents/posts/the-weird-state-of-web-development.mdx
@@ -0,0 +1,20 @@
+---
+siteTitle: 'What the heck is going on with web development?'
+postTitle: 'The Weird State of Web Development'
+siteDescription: 'Javascript, the mother of all frameworks.'
+postDescription: 'A never ending solution to a never ending problem...'
+publishedOn: '03 August, 2024'
+updatedOn: '04 August, 2024'
+isPublished: true
+tags: ['web-development', 'personal-thought']
+---
+
+I still remember the first time I tried to dip my toe into the world of programming. On that time, I still can't wrap my head around some of the general-purpose language
+like C, C++, Java or the likes (*Yes, I'm just that stupid at the time*) actually works, this was in my early days when I start learning how to code in junior high school.
+Everytime I tried C, I keep shooting my foot with **`segmentation fault`** errors, so I say to myself,
+
+> You know what? Let me just learn how to create a website, it look simple enough. It won't be too hard isn't it? (*But boy do I was wrong...*)
+
+I start off with just HTML, CSS, and a little bit of javascript, it was just a simple personal website. But then I start comparing my work with others.
+I keep mumbling to myself, how do I do this? How do I do that? It was more complicated than I imagined. I thought browser just support HTML, CSS, and JS, so I did my research. But to my surprise,
+**THEY DO JUST THAT***.
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 89dea28..f83f431 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,15 +4,15 @@
@layer base {
:root {
- --background: 0 0% 100%;
+ --background: 0 0% 90%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
- --popover: 0 0% 100%;
+ --popover: 0 0% 95%;
--popover-foreground: 240 10% 3.9%;
- --primary: 33 44% 22%;
+ --primary: 33 44% 42%;
--primary-foreground: 355.7 100% 97.3%;
- --secondary: 240 4.8% 95.9%;
+ --secondary: 240 4.8% 80.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
@@ -65,11 +65,13 @@
}
html {
@apply scroll-smooth;
+ scrollbar-color: hsl(var(--primary)) hsl(var(--secondary));
+ scrollbar-width: thin;
}
body {
- @apply bg-background text-foreground;
+ @apply bg-background text-foreground/90;
}
*::selection {
- @apply bg-primary/20;
+ @apply bg-primary/30;
}
}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 082c11e..4bd55c7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,10 +4,10 @@ import TailwindCSSAnimate from 'tailwindcss-animate'
const config = {
darkMode: ['class'],
content: [
- './pages/**/*.{ts,tsx}',
- './components/**/*.{ts,tsx}',
- './app/**/*.{ts,tsx}',
- './src/**/*.{ts,tsx}',
+ './pages/**/*.{ts,tsx,mdx}',
+ './components/**/*.{ts,tsx,mdx}',
+ './app/**/*.{ts,tsx,mdx}',
+ './src/**/*.{ts,tsx,mdx}',
],
prefix: '',
theme: {