Hello World

Welcome to my developer blog! This is where I'll share my thoughts on software development, tutorials, and more.

What to Expect

I'll be writing about:

• Tutorials - Step-by-step guides on various technologies
• Deep Dives - In-depth exploration of technical topics
• Quick Tips - Short, actionable development tips
• Project Showcases - Walkthroughs of projects I'm working on

Tech Stack

This blog is built with a modern tech stack that prioritizes developer experience and performance:

const techStack = {
  framework: "Next.js 15",
  content: "MDX",
  styling: "Tailwind CSS",
  hosting: "Vercel",
  features: [
    "Server Components",
    "App Router",
    "Static Generation",
    "Dark Mode",
  ],
};

Why Next.js?

Next.js provides an excellent foundation for content-focused websites. With the App Router and React Server Components, we get:

1. Fast initial page loads - Server-rendered HTML
2. Seamless navigation - Client-side routing after hydration
3. Excellent SEO - Static generation with dynamic metadata
4. Developer experience - Hot reloading, TypeScript support, and more

Code Examples

Here's a quick example of a React component:

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: "primary" | "secondary";
}
 
export function Button({ children, onClick, variant = "primary" }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      className={`px-4 py-2 rounded-md ${
        variant === "primary"
          ? "bg-blue-500 text-white"
          : "bg-gray-200 text-gray-800"
      }`}
    >
      {children}
    </button>
  );
}

And here's some Python for variety:

def fibonacci(n: int) -> list[int]:
    """Generate the first n Fibonacci numbers."""
    if n <= 0:
        return []
    if n == 1:
        return [0]
 
    sequence = [0, 1]
    while len(sequence) < n:
        sequence.append(sequence[-1] + sequence[-2])
 
    return sequence
 
# Example usage
print(fibonacci(10))  # [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

What's Next?

Stay tuned for more content! I have several posts planned covering:

• Building a modern blog with Next.js and MDX
• iOS development with SwiftUI
• AI and machine learning integrations
• Developer productivity tips

Feel free to explore the blog and check out the Tags page to find content by topic.

Formatting Showcase

This section demonstrates the various formatting options available in MDX blog posts.

Text Formatting

Regular paragraph text looks like this. You can make text bold or italic or both bold and italic. You can also use strikethrough for deleted content. Inline code appears with a distinct background.

Here's another paragraph to show spacing between paragraphs. Good typography requires proper breathing room between blocks of text. This helps readability and makes the content feel less cramped.

Blockquotes

"The best way to predict the future is to invent it." — Alan Kay

Blockquotes can also span multiple paragraphs:

This is the first paragraph of a longer quote.

And this is the second paragraph. Notice how the quote mark continues on the left edge.

Lists

Unordered Lists

• First item in an unordered list
• Second item with some more text to show wrapping behavior when the line gets long enough to wrap to the next line
• Third item
  • Nested item one
  • Nested item two
    • Even deeper nesting
    • Another deep item
  • Back to second level
• Fourth item at root level

Ordered Lists

1. First step in a process
2. Second step with detailed explanation that might span multiple lines to demonstrate how numbered lists handle longer content
3. Third step
   1. Sub-step A
   2. Sub-step B
   3. Sub-step C
4. Fourth step
5. Fifth step

Task Lists

• Set up Next.js project
• Configure MDX support
• Add syntax highlighting
• Write more blog posts
• Add search functionality
• Implement comments

Mixed Lists

1. Planning Phase

   • Define requirements
   • Create wireframes
   • Review with stakeholders

2. Development Phase

   • Set up project structure
   • Implement core features
   • Write tests

3. Deployment Phase

   • Configure CI/CD
   • Deploy to staging
   • Final review and production release

Headings Hierarchy

The following demonstrates all heading levels:

Heading Level 2 (H2)

This is content under an H2 heading.

Heading Level 3 (H3)

This is content under an H3 heading.

Heading Level 4 (H4)

This is content under an H4 heading. H4s are useful for subsections within H3s.

Heading Level 5 (H5)

Content under H5 - less commonly used but available when needed.

Heading Level 6 (H6)

The smallest heading level. Rarely used but sometimes helpful for fine-grained organization.

Tables

Tables can also have alignment:

Links

Here's an inline link to the Next.js website. You can also use links with titles that show tooltips on hover.

External links: GitHub, Vercel, Tailwind CSS

Internal links: Home, Blog, Tags

Horizontal Rules

Use horizontal rules to separate major sections:

Content after the rule.

Another section after another rule.

More Code Examples

Here's a shell command:

npm install @next/mdx remark-gfm rehype-pretty-code

A JSON configuration:

{
  "name": "my-blog",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

CSS styling:

.prose {
  max-width: 65ch;
  color: var(--foreground);
}
 
.prose h2 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-weight: 700;
}

SQL query:

SELECT posts.title, posts.published_at, authors.name
FROM posts
INNER JOIN authors ON posts.author_id = authors.id
WHERE posts.draft = false
ORDER BY posts.published_at DESC
LIMIT 10;

Swift code:

struct ContentView: View {
    @State private var count = 0
 
    var body: some View {
        VStack {
            Text("Count: \(count)")
                .font(.largeTitle)
 
            Button("Increment") {
                count += 1
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

Callout Variations

Long Paragraph Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit.

Wrapping Up

That covers the main formatting options available in this blog. MDX makes it easy to combine Markdown with React components for rich, interactive content.

Thanks for reading!