Initial commit

posts/animation-techniques.md

@@ -0,0 +1,103 @@
+---
+title: "Modern Animation Techniques for Web"
+date: "2023-08-20"
+excerpt: "Explore the latest animation techniques to create engaging web experiences"
+---
+
+# Modern Animation Techniques for Web
+
+Animation can significantly enhance user experience when used appropriately. This post explores modern animation techniques for web development.
+
+## CSS Animations
+
+CSS animations are powerful and performant:
+
+\`\`\`css
+.fade-in {
+  animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+\`\`\`
+
+## Scroll-Triggered Animations
+
+Animations that trigger as users scroll down the page create engaging experiences:
+
+\`\`\`javascript
+const observer = new IntersectionObserver(entries => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.classList.add('animate');
+    }
+  });
+});
+
+document.querySelectorAll('.animate-on-scroll').forEach(element => {
+  observer.observe(element);
+});
+\`\`\`
+
+## GSAP (GreenSock Animation Platform)
+
+GSAP is a professional-grade animation library:
+
+\`\`\`javascript
+// Simple animation
+gsap.to(".box", {
+  duration: 1,
+  x: 100,
+  y: 100,
+  rotation: 360,
+  ease: "elastic"
+});
+
+// Timeline for sequence
+const tl = gsap.timeline();
+tl.to(".box1", { duration: 0.5, x: 100 })
+  .to(".box2", { duration: 0.5, y: 50 })
+  .to(".box3", { duration: 0.5, rotation: 45 });
+\`\`\`
+
+## Framer Motion
+
+Framer Motion is a React animation library that makes it easy to create complex animations:
+
+\`\`\`jsx
+<motion.div
+  initial={{ opacity: 0 }}
+  animate={{ opacity: 1 }}
+  exit={{ opacity: 0 }}
+  transition={{ duration: 0.5 }}
+>
+  Content that animates in and out
+</motion.div>
+\`\`\`
+
+## Lottie Animations
+
+Lottie allows you to use After Effects animations on the web:
+
+\`\`\`jsx
+import Lottie from 'lottie-react';
+import animationData from './animation.json';
+
+function Animation() {
+  return <Lottie animationData={animationData} />;
+}
+\`\`\`
+
+## Best Practices
+
+1. **Performance**: Always consider performance impact
+2. **Purpose**: Use animations with purpose, not just for decoration
+3. **Timing**: Keep animations short (200-500ms) for UI elements
+4. **Accessibility**: Respect user preferences with `prefers-reduced-motion`
+5. **Progressive Enhancement**: Ensure content is accessible without animations
+
+## Conclusion
+
+Modern web animations can create delightful user experiences when implemented thoughtfully. By using the right techniques and following best practices, you can create engaging animations that enhance rather than detract from your website.

posts/hello-world.md

@@ -0,0 +1,33 @@
+---
+title: "Hello World"
+date: "2023-08-05"
+excerpt: "Welcome to my minimalist blog built with Next.js and Markdown"
+---
+
+# Hello World!
+
+Welcome to my minimalist blog built with Next.js and Markdown. This is a sample post to demonstrate how the blog works.
+
+## Features
+
+- **Markdown Support**: Write your posts in Markdown format
+- **Automatic Sorting**: Newest posts appear at the top
+- **Responsive Design**: Looks great on all devices
+- **GitHub Dark Theme**: A sleek, modern look
+- **Subtle Animations**: Enhances the user experience
+
+## Code Example
+
+\`\`\`javascript
+function greeting() {
+  console.log("Hello, world!");
+}
+
+greeting();
+\`\`\`
+
+## Next Steps
+
+Feel free to add more posts by creating new `.md` files in the `posts` directory. The blog will automatically update to include your new content.
+
+Enjoy your new blog!

posts/responsive-design.md

@@ -0,0 +1,91 @@
+---
+title: "Creating Responsive Designs"
+date: "2023-08-15"
+excerpt: "Tips and tricks for making your website look great on all devices"
+---
+
+# Creating Responsive Designs
+
+Responsive web design ensures that your website looks and functions well on a variety of devices and screen sizes. Here are some tips to help you create responsive designs.
+
+## Use Flexible Grids
+
+Design your layout using relative units like percentages instead of fixed units like pixels:
+
+\`\`\`css
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.column {
+  width: 33.33%;
+  float: left;
+}
+\`\`\`
+
+## Media Queries
+
+Use media queries to apply different styles based on the device characteristics:
+
+\`\`\`css
+/* Base styles for all devices */
+.column {
+  width: 100%;
+}
+
+/* Styles for tablets and larger */
+@media (min-width: 768px) {
+  .column {
+    width: 50%;
+  }
+}
+
+/* Styles for desktops and larger */
+@media (min-width: 1024px) {
+  .column {
+    width: 33.33%;
+  }
+}
+\`\`\`
+
+## Flexible Images
+
+Make your images responsive by setting a maximum width:
+
+\`\`\`css
+img {
+  max-width: 100%;
+  height: auto;
+}
+\`\`\`
+
+## Mobile-First Approach
+
+Start by designing for mobile devices and then progressively enhance the design for larger screens:
+
+1. Design the mobile version first
+2. Add complexity as the screen size increases
+3. Use media queries with `min-width` rather than `max-width`
+
+## Testing
+
+Always test your responsive design on actual devices or using browser developer tools:
+
+- Chrome DevTools Device Mode
+- Firefox Responsive Design Mode
+- Browser extensions like Responsive Viewer
+- Real devices when possible
+
+## Frameworks
+
+Consider using CSS frameworks that have responsive features built-in:
+
+- Tailwind CSS
+- Bootstrap
+- Foundation
+
+## Conclusion
+
+Responsive design is essential for providing a good user experience across all devices. By following these principles, you can ensure your website looks great whether viewed on a phone, tablet, or desktop computer.

posts/using-markdown.md

@@ -0,0 +1,84 @@
+---
+title: "Using Markdown in Your Blog"
+date: "2023-08-10"
+excerpt: "Learn how to format your blog posts using Markdown syntax"
+---
+
+# Using Markdown in Your Blog
+
+Markdown is a lightweight markup language that allows you to write using an easy-to-read, easy-to-write plain text format, which then converts to valid HTML for viewing on your blog.
+
+## Basic Formatting
+
+### Headers
+
+You can create headers using the `#` symbol:
+
+\`\`\`
+# Header 1
+## Header 2
+### Header 3
+\`\`\`
+
+### Emphasis
+
+For emphasis, you can use:
+
+- *Italics* with `*asterisks*` or `_underscores_`
+- **Bold** with `**double asterisks**` or `__double underscores__`
+- ~~Strikethrough~~ with `~~tildes~~`
+
+### Lists
+
+Unordered lists use asterisks, pluses, or hyphens:
+
+\`\`\`
+- Item 1
+- Item 2
+  - Subitem 2.1
+  - Subitem 2.2
+\`\`\`
+
+Ordered lists use numbers:
+
+\`\`\`
+1. First item
+2. Second item
+3. Third item
+\`\`\`
+
+## Advanced Formatting
+
+### Links
+
+Create links with `[link text](URL)`:
+
+[Visit GitHub](https://github.com)
+
+### Images
+
+Add images with `![alt text](image URL)`:
+
+![Next.js Logo](https://nextjs.org/static/images/nextjs-logo.png)
+
+### Code
+
+Inline code uses backticks: `const greeting = "Hello";`
+
+Code blocks use triple backticks with an optional language identifier:
+
+\`\`\`javascript
+function calculateSum(a, b) {
+  return a + b;
+}
+\`\`\`
+
+### Blockquotes
+
+> Blockquotes use the > character at the start of a line.
+> 
+> They can span multiple paragraphs if you include a > on blank lines between them.
+
+## Conclusion
+
+Markdown makes it easy to format your blog posts without having to write HTML. It's simple to learn and provides all the formatting options you need for most blog posts.