Welcome!

This is my first journal entry. I’m excited to share my thoughts and experiences here. This post demonstrates all the amazing markdown features available on this blog!

Headings

This is an H3

This is an H4

This is an H5

This is an H6

Text Formatting

You can make text bold, italic, or bold and italic. You can also use strikethrough text.

Here’s some inline code in a sentence.

Blockquotes

This is a blockquote. It’s great for highlighting important information or quotes from other sources.

You can have multiple paragraphs in a blockquote.

Lists

Unordered List

• First item
• Second item
• Third item
  • Nested item 1
  • Nested item 2
• Fourth item

Ordered List

1. First step
2. Second step
3. Third step
4. Fourth step

Task List

• Completed task
• Another completed task
• Incomplete task
• Another incomplete task

Links

Check out my LinkedIn or visit my website.

Code Blocks

Here’s a JavaScript example:

function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to my blog, ${name}`;
}
 
const message = greet("World");
console.log(message);

Python example with syntax highlighting:

def fibonacci(n):
    """Generate Fibonacci sequence up to n"""
    a, b = 0, 1
    result = []
    while a < n:
        result.append(a)
        a, b = b, a + b
    return result
 
# Generate first 10 Fibonacci numbers
print(fibonacci(100))

TypeScript/React component:

import React from 'react';
 
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}
 
const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => {
  return (
    <button
      onClick={onClick}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
};
 
export default Button;

CSS example:

.neo-brutalist-button {
  border: 4px solid #000;
  background: #fff;
  padding: 1rem 2rem;
  font-weight: 900;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  transition: all 0.2s;
}
 
.neo-brutalist-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 1);
}

Tables

Horizontal Rule

Here’s a horizontal rule:

Combining Everything

You can combine all these features together. For example, here’s a list with code:

1. Install the dependencies:

   npm install

2. Run the development server:

   npm run dev

3. Open your browser and visit http://localhost:3000

Pro tip: You can also use old methods modern approaches for better performance!

About This Site

This is a simple personal website where I’ll be posting:

• My thoughts and journal entries
• Updates about what I’m working on
• Technical tutorials and guides
• Answers to questions from visitors

Stay tuned for more posts!