use example website

content/_index.md

@@ -0,0 +1,3 @@
+---
+title: "Home"
+---

content/about.md

@@ -0,0 +1,26 @@
+---
+title: "About Me"
+description: "Digital nomad, tech enthusiast, and life explorer"
+---
+
+# About Me
+
+Hi! I'm a digital nomad and tech professional passionate about exploring the world while building amazing digital experiences.
+
+## My Journey
+
+Started my nomad journey in 2024, combining my love for technology with wanderlust. I've been exploring different cultures, working with amazing teams remotely, and documenting my experiences along the way.
+
+## What I Do
+
+- **Frontend Development**: Building modern, responsive web applications
+- **Content Creation**: Sharing insights about nomad life and tech trends
+- **Community Building**: Connecting with fellow nomads and tech enthusiasts
+
+## Current Focus
+
+Currently based in Bali, working on exciting projects while enjoying the perfect blend of work and surf lifestyle.
+
+## Let's Connect
+
+Feel free to reach out if you want to collaborate, share nomad tips, or just chat about tech and travel!

content/about/_index.md

@@ -0,0 +1,37 @@
+---
+title: "About Me"
+description: "Full-stack developer, digital nomad, and tech enthusiast"
+---
+
+# 关于我
+
+Hi, I'm **m03315** - a digital nomad, tech explorer, and life recorder.
+
+## My Journey
+
+I've been working remotely for several years, traveling the world while building technology solutions. My passion lies in exploring new technologies, sharing knowledge, and helping others embrace the digital nomad lifestyle.
+
+## What I Do
+
+- **Tech Development**: Building web applications and mobile solutions
+- **Content Creation**: Sharing insights through blogs and videos
+- **Community Building**: Connecting with fellow nomads and tech enthusiasts
+
+## My Mission
+
+To bridge the gap between technology and lifestyle, showing how digital tools can enable freedom and creativity in our modern world.
+
+## Tech Stack
+
+```bash
+$ whoami
+m03315
+
+$ cat skills.json
+{
+  "languages": ["JavaScript", "Python", "Go"],
+  "frameworks": ["React", "Hugo", "Node.js"],
+  "tools": ["Docker", "Git", "VS Code"],
+  "lifestyle": "Digital Nomad"
+}
+```

content/portfolio.md

@@ -0,0 +1,7 @@
+---
+title: "Portfolio"
+description: "Showcasing my projects and achievements"
+layout: "portfolio"
+---
+
+A collection of projects I've built during my journey as a digital nomad and tech professional.

content/portfolio/_index.md

@@ -0,0 +1,7 @@
+---
+title: "作品集"
+description: "展示我的项目和成就"
+layout: "portfolio"
+---
+
+在我作为数字游民和技术专家的旅程中构建的项目集合。

content/posts/css-grid-flexbox.md

@@ -0,0 +1,40 @@
+---
+title: "CSS Grid vs Flexbox: When to Use What"
+date: 2024-08-03
+categories: ["tech", "tutorial"]
+tags: ["css", "layout", "frontend"]
+---
+
+# CSS Grid vs Flexbox: When to Use What
+
+Understanding the differences between CSS Grid and Flexbox for modern layouts.
+
+## Use Flexbox For:
+- One-dimensional layouts (rows OR columns)
+- Component-level design
+- Centering content
+- Navigation bars
+
+## Use CSS Grid For:
+- Two-dimensional layouts (rows AND columns)
+- Page-level design
+- Complex layouts
+- Card grids
+
+```css
+/* Flexbox for navigation */
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Grid for main layout */
+.layout {
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  grid-template-rows: auto 1fr auto;
+}
+```
+
+Both are powerful tools - use them together!

content/posts/docker-development-workflow.md

@@ -0,0 +1,53 @@
+---
+title: "Docker Development Workflow for Hugo Themes"
+date: 2024-07-28
+categories: ["tech", "tutorial"]
+tags: ["docker", "hugo", "development", "workflow"]
+---
+
+# Docker Development Workflow for Hugo Themes
+
+Setting up a consistent development environment across different machines is crucial for theme development. Here's my Docker-based workflow.
+
+## The Setup
+
+```dockerfile
+FROM hugomods/hugo:exts-0.120.4
+WORKDIR /src
+COPY . /src/themes/nomad-tech/
+CMD ["hugo", "server", "--bind", "0.0.0.0", "--buildDrafts"]
+```
+
+## Docker Compose Configuration
+
+```yaml
+services:
+  hugo:
+    build: .
+    volumes:
+      - "./exampleSite:/src"
+    ports:
+      - "1313:1313"
+```
+
+## Benefits
+
+- **Consistency**: Same Hugo version everywhere
+- **Security**: Pinned, official images only
+- **Isolation**: No local Hugo installation needed
+- **Portability**: Works on any machine with Docker
+
+## Development Commands
+
+```bash
+# Start development server
+docker-compose up
+
+# Build for production
+docker-compose run hugo hugo --minify
+
+# Clean up
+docker-compose down
+```
+
+This workflow has saved me countless hours of environment setup!

content/posts/example-post.md

@@ -0,0 +1,16 @@
+---
+title: "Welcome to Nomad Tech Theme"
+date: 2024-01-01
+categories: ["Tech", "Hugo", "Themes"]
+---
+
+This is an example post to demonstrate the Nomad Tech Theme features.
+
+## Features
+
+- Modern design
+- Multilingual support
+- Portfolio integration
+- Social media links
+
+Customize this theme by editing your `hugo.toml` configuration file.

content/posts/hugo-theme-development.md

@@ -0,0 +1,49 @@
+---
+title: "Building a Hugo Theme from Scratch"
+date: 2024-08-10
+categories: ["tech", "tutorial"]
+tags: ["hugo", "web-development", "static-sites"]
+---
+
+# Building a Hugo Theme from Scratch
+
+Creating a custom Hugo theme has been an exciting journey! Here's what I learned while building the nomad-tech theme.
+
+## Key Concepts
+
+Hugo's template lookup order is crucial for theme development:
+
+```
+layouts/
+├── _default/
+│   ├── baseof.html
+│   ├── list.html
+│   └── single.html
+├── partials/
+└── section-name/
+    └── list.html
+```
+
+## Hugo Pipes for Assets
+
+Modern Hugo themes should use Hugo Pipes for asset processing:
+
+```go
+{{ $scss := resources.Get "scss/main.scss" }}
+{{ $css := $scss | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+```
+
+## Multilingual Support
+
+Hugo's i18n system makes multilingual themes straightforward:
+
+```yaml
+# i18n/en.toml
+[home]
+other = "Home"
+
+[about]
+other = "About"
+```
+
+Building themes teaches you so much about Hugo's internals!

content/posts/javascript-async-patterns.md

@@ -0,0 +1,31 @@
+---
+title: "Modern JavaScript Async Patterns"
+date: 2024-08-12
+categories: ["tech", "tutorial"]
+tags: ["javascript", "async", "promises"]
+---
+
+# Modern JavaScript Async Patterns
+
+Exploring the evolution from callbacks to async/await and beyond.
+
+## Promise Chains vs Async/Await
+
+```javascript
+// Promise chains
+fetchUser(id)
+  .then(user => fetchPosts(user.id))
+  .then(posts => renderPosts(posts))
+  .catch(handleError);
+
+// Async/await
+try {
+  const user = await fetchUser(id);
+  const posts = await fetchPosts(user.id);
+  renderPosts(posts);
+} catch (error) {
+  handleError(error);
+}
+```
+
+The async/await syntax makes asynchronous code much more readable!

content/posts/nomad-budget-breakdown.md

@@ -0,0 +1,45 @@
+---
+title: "Digital Nomad Budget Breakdown: $2000/Month"
+date: 2024-07-20
+categories: ["nomad", "lifestyle"]
+tags: ["budget", "finance", "planning"]
+---
+
+# Digital Nomad Budget Breakdown: $2000/Month
+
+How I manage to live comfortably on $2000/month as a digital nomad.
+
+## Monthly Expenses
+
+### Accommodation ($600-800)
+- Airbnb/coliving spaces
+- 1-month stays for better rates
+- Shared apartments in nomad hubs
+
+### Food ($300-400)
+- Local restaurants: $3-8/meal
+- Groceries: $100/month
+- Occasional splurges: $50
+
+### Transportation ($200-300)
+- Flights: $150/month average
+- Local transport: $50
+- Scooter rental: $100
+
+### Work Setup ($100-150)
+- Coworking spaces: $80
+- Mobile data: $20
+- Coffee shops: $50
+
+### Entertainment ($200-250)
+- Activities and tours
+- Gym memberships
+- Social events
+
+## Money-Saving Tips
+1. Cook at home 3-4 times/week
+2. Use local transport
+3. Book flights in advance
+4. Choose emerging destinations
+
+Living the nomad dream doesn't have to break the bank!

content/posts/nomad-life-bali.md

@@ -0,0 +1,31 @@
+---
+title: "Digital Nomad Life in Bali: 3 Months In"
+date: 2024-08-05
+categories: ["nomad", "lifestyle"]
+tags: ["bali", "remote-work", "coworking"]
+---
+
+# Digital Nomad Life in Bali: 3 Months In
+
+Three months into my Bali adventure, and I'm still amazed by how this island balances productivity with paradise.
+
+## The Good
+
+- **Coworking Scene**: Dojo Bali and Outpost are incredible
+- **Internet**: Surprisingly reliable 50+ Mbps in most areas
+- **Community**: Amazing nomad community, especially in Canggu
+- **Cost**: $800-1200/month for a comfortable lifestyle
+
+## The Challenges
+
+- **Rainy Season**: Coding during tropical storms is... interesting
+- **Traffic**: Scooter rides to meetings can be adventures
+- **Time Zones**: Client calls at 2 AM are rough
+
+## Productivity Tips
+
+1. **Morning Routine**: Surf at sunrise, code by 9 AM
+2. **Coworking**: Don't work from your villa all the time
+3. **Backup Internet**: Always have a mobile hotspot ready
+
+The blend of tech work and tropical living is addictive. Already planning my next destination!

content/posts/nomad-visa-guide.md

@@ -0,0 +1,26 @@
+---
+title: "Digital Nomad Visa Guide 2024"
+date: 2024-08-08
+categories: ["nomad", "lifestyle"]
+tags: ["visa", "travel", "remote-work"]
+---
+
+# Digital Nomad Visa Guide 2024
+
+Complete guide to digital nomad visas and remote work permits.
+
+## Top Nomad-Friendly Countries
+
+- **Portugal**: D7 Visa (1-2 years)
+- **Estonia**: Digital Nomad Visa (1 year)
+- **Barbados**: Welcome Stamp (1 year)
+- **Dubai**: Virtual Working Program (1 year)
+
+## Application Tips
+
+1. **Income Requirements**: Usually $2000-3500/month
+2. **Health Insurance**: Mandatory for most programs
+3. **Processing Time**: 2-8 weeks typically
+4. **Remote Work Proof**: Employment letter or business registration
+
+Planning ahead is key for a smooth nomad journey!

content/posts/react-hooks-guide.md

@@ -0,0 +1,48 @@
+---
+title: "React Hooks Complete Guide"
+date: 2024-07-25
+categories: ["tech", "tutorial"]
+tags: ["react", "hooks", "frontend"]
+---
+
+# React Hooks Complete Guide
+
+Master React Hooks with practical examples and best practices.
+
+## Essential Hooks
+
+### useState
+```jsx
+const [count, setCount] = useState(0);
+```
+
+### useEffect
+```jsx
+useEffect(() => {
+  document.title = `Count: ${count}`;
+}, [count]);
+```
+
+### useContext
+```jsx
+const theme = useContext(ThemeContext);
+```
+
+## Custom Hooks
+
+```jsx
+function useLocalStorage(key, initialValue) {
+  const [value, setValue] = useState(() => {
+    return localStorage.getItem(key) || initialValue;
+  });
+  
+  const setStoredValue = (newValue) => {
+    setValue(newValue);
+    localStorage.setItem(key, newValue);
+  };
+  
+  return [value, setStoredValue];
+}
+```
+
+Hooks make React development so much cleaner!

content/posts/remote-work-tools-2024.md

@@ -0,0 +1,51 @@
+---
+title: "Essential Remote Work Tools for Developers in 2024"
+date: 2024-07-15
+categories: ["tech", "nomad"]
+tags: ["remote-work", "tools", "productivity"]
+---
+
+# Essential Remote Work Tools for Developers in 2024
+
+After working remotely from 15+ countries, here are the tools that keep me productive anywhere.
+
+## Communication & Collaboration
+
+- **Slack/Discord**: Team communication
+- **Zoom/Meet**: Video calls with good mobile data usage
+- **Notion**: Documentation and project management
+- **Figma**: Design collaboration
+
+## Development Environment
+
+- **VS Code**: With Settings Sync enabled
+- **GitHub Codespaces**: When local setup isn't possible
+- **Docker**: Consistent environments everywhere
+- **Tailscale**: Secure access to home lab
+
+## Connectivity & Backup
+
+- **Speedtest CLI**: `speedtest-cli` for quick connection checks
+- **Multiple ISPs**: Always have 2+ internet sources
+- **VPN**: Essential for accessing geo-restricted services
+- **Power Bank**: 20,000mAh minimum for long coding sessions
+
+## Productivity Hacks
+
+```bash
+# My daily setup script
+#!/bin/bash
+speedtest-cli
+git status
+docker-compose up -d
+code .
+```
+
+## Location-Specific Tips
+
+- **Thailand**: AIS has the best coverage
+- **Indonesia**: Telkomsel for reliability
+- **Portugal**: MEO fiber is excellent
+- **Mexico**: Telmex for stable connections
+
+The key is redundancy - always have backups for your backups!

content/posts/thailand-coworking-spaces.md

@@ -0,0 +1,33 @@
+---
+title: "Best Coworking Spaces in Thailand"
+date: 2024-07-30
+categories: ["nomad", "lifestyle"]
+tags: ["thailand", "coworking", "productivity"]
+---
+
+# Best Coworking Spaces in Thailand
+
+My experience working from Thailand's top coworking spaces.
+
+## Bangkok
+- **HUBBA-TO**: Premium space in Thonglor
+- **Launchpad**: Great community, multiple locations
+- **The Hive**: Professional environment
+
+## Chiang Mai
+- **CAMP**: The nomad headquarters
+- **Punspace**: Reliable and affordable
+- **Maya Lifestyle**: Modern facilities
+
+## Phuket
+- **Andaman Coworking**: Beach vibes
+- **Outpost**: International community
+
+## What to Look For
+- Stable internet (50+ Mbps)
+- Comfortable seating
+- Meeting rooms
+- Coffee quality (important!)
+- Community events
+
+Thailand's coworking scene is world-class!

content/posts/typescript-best-practices.md

@@ -0,0 +1,54 @@
+---
+title: "TypeScript Best Practices 2024"
+date: 2024-07-18
+categories: ["tech", "tutorial"]
+tags: ["typescript", "javascript", "best-practices"]
+---
+
+# TypeScript Best Practices 2024
+
+Essential TypeScript patterns and practices for better code quality.
+
+## Type Definitions
+
+```typescript
+// Use interfaces for object shapes
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  createdAt: Date;
+}
+
+// Use type aliases for unions
+type Status = 'loading' | 'success' | 'error';
+
+// Generic constraints
+interface Repository<T extends { id: string }> {
+  findById(id: string): Promise<T>;
+  save(entity: T): Promise<T>;
+}
+```
+
+## Utility Types
+
+```typescript
+// Partial for updates
+function updateUser(id: string, updates: Partial<User>) {
+  // Implementation
+}
+
+// Pick for specific fields
+type UserSummary = Pick<User, 'id' | 'name'>;
+
+// Omit for exclusions
+type CreateUser = Omit<User, 'id' | 'createdAt'>;
+```
+
+## Best Practices
+1. Enable strict mode
+2. Use unknown instead of any
+3. Prefer type assertions over type casting
+4. Use const assertions for immutable data
+
+TypeScript makes JavaScript development so much safer!

content/social.md

@@ -0,0 +1,12 @@
+---
+title: "Social Media"
+description: "Connect with me across different platforms"
+---
+
+# Follow My Journey
+
+Stay updated with my latest adventures, tech insights, and nomad life experiences across different social media platforms.
+
+## Where to Find Me
+
+Connect with me on various platforms where I share different aspects of my journey - from tech tutorials to travel vlogs and daily life updates.

content/social/_index.md

@@ -0,0 +1,8 @@
+---
+title: "社交媒体"
+description: "在不同平台上与我联系"
+---
+
+# 关注我的旅程
+
+通过不同的社交媒体平台了解我的最新冒险、技术见解和数字游民生活体验。

content/travel.md

@@ -0,0 +1,7 @@
+---
+title: "Travel Timeline"
+description: "My digital nomad journey around the world"
+layout: "travel"
+---
+
+Follow my adventures as a digital nomad, exploring different cities and cultures while building amazing projects.

content/travel/_index.md

@@ -0,0 +1,7 @@
+---
+title: "旅行时间线"
+description: "我的数字游民环球之旅"
+layout: "travel"
+---
+
+跟随我作为数字游民的冒险，在构建令人惊叹的项目的同时探索不同的城市和文化。

hugo.toml

@@ -1,12 +1,107 @@
-baseURL = 'https://caio.wakamatsu.cc'
-languageCode = 'en-us'
-title = "Caio's Corner"
+baseURL = "https://m03315.github.io/nomad-tech/"
+defaultContentLanguage = "zh"
 theme = "nomad-tech"
 
-defaultContentLanguage = "en"
+[pagination]
+  pagerSize = 6
+
+[taxonomies]
+  category = "categories"
+  tag = "tags"
 
 [languages]
-  [languages.en]
+  [languages.zh]
+    languageCode = "zh-CN"
+    title = "Your Name - Digital Nomad | Tech | Life"
     weight = 1
-    languageName = "English"
-    contentDir = "content/en"
+  [languages.en]
+    languageCode = "en-US"
+    title = "Your Name - Digital Nomad | Tech Insights | Life Stories"
+    weight = 2
+  [languages.fr]
+    languageCode = "fr-FR"
+    title = "Your Name - Nomade Numérique | Tech | Vie"
+    weight = 3
+
+[params]
+  author = "m03315"
+  logo = "NOMAD-TECH"
+  subtitle = "Digital Nomad • Tech Explorer • Life Recorder"
+  description = "Sharing tech insights, recording nomad life, providing practical guides"
+
+  # Analytics (optional)
+  googleAnalytics = "G-2310RJEC91"
+
+  # Social Media Links
+  [[params.social]]
+    name = "YouTube"
+    class = "youtube"
+    icon = "📺"
+    description = "Tech reviews and nomad vlogs"
+    url = "https://www.youtube.com/@GP_ARC"
+    button_text = "Visit Channel"
+
+  [[params.social]]
+    name = "Twitter"
+    class = "wechat"
+    icon = "🐦"
+    description = "Tech thoughts and daily updates"
+    url = "https://x.com/m03315_"
+    button_text = "Follow Me"
+
+  # Portfolio Items
+  [[params.portfolio]]
+    title = "Digital Nomad Community App"
+    type = "Mobile Application"
+    icon = "📱"
+    description = "A comprehensive platform for nomads to connect and collaborate"
+    tags = ["React Native", "Node.js", "MongoDB"]
+    project_url = "/projects/nomad-app/"
+
+  [[params.portfolio]]
+    title = "Another Project"
+    type = "Web Application"
+    icon = "🌐"
+    description = "Web application description"
+    tags = ["React", "Vue.js"]
+
+  # Travel Timeline
+  [[params.travels]]
+    city = "Bangkok"
+    country = "Thailand"
+    flag = "🇹🇭"
+    period = "2024.01 - 2024.03"
+    description = "Started my nomad journey in the vibrant capital of Thailand"
+    highlights = ["Co-working spaces", "Street food", "Tech meetups"]
+
+  [[params.travels]]
+    city = "Chiang Mai"
+    country = "Thailand"
+    flag = "🇹🇭"
+    period = "2024.04 - 2024.06"
+    description = "Digital nomad hub with amazing community and low cost of living"
+    highlights = ["Nomad Summit", "Temples", "Mountain views"]
+
+  [[params.travels]]
+    city = "Bali"
+    country = "Indonesia"
+    flag = "🇮🇩"
+    period = "2024.07 - Present"
+    description = "Current base with perfect blend of work and surf lifestyle"
+    highlights = ["Surfing", "Rice terraces", "Startup scene"]
+
+  # Contact Information
+  [[params.contact]]
+    icon = "📧"
+    name = "email"
+    value = "me@m03315.top"
+  
+  [[params.contact]]
+    icon = "💬"
+    name = "wechat"
+    value = "m03315_"
+  
+  [[params.contact]]
+    icon = "🐦"
+    name = "twitter"
+    value = "@m03315_"