Add demo

Author: nasdan

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Production deploy
+
+on:
+  repository_dispatch:
+    types:
+      - deploy-production
+
+env:
+  CONTENT_ISLAND_SECRET_TOKEN: ${{ secrets.CONTENT_ISLAND_SECRET_TOKEN }}
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: Production
+      url: https://gentle-forest-01f461703.3.azurestaticapps.net
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build
+        run: |
+          npm ci
+          npm run build
+
+      - name: Deploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_FOREST_01F461703 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          action: 'upload'
+          app_location: 'dist'
+          output_location: 'dist'
+          skip_app_build: true
+          skip_api_build: true
+        env:
+          NODE_VERSION: 22.21.0

.gitignore

@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

.prettierrc

@@ -0,0 +1,20 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,117 @@
+# John's Web Dev Blog
+
+A modern blog website built with Astro, TypeScript, and Tailwind CSS, featuring responsive design and custom typography scaling.
+
+## 🚀 Project Structure
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   ├── Header.astro
+│   │   └── Footer.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   ├── pages/
+│   │   ├── index.astro (Home page)
+│   │   ├── about.astro (About page)
+│   │   └── post.astro (Single post page)
+│   └── styles/
+│       └── global.css
+├── astro.config.mjs
+├── postcss.config.js
+├── package.json
+└── tsconfig.json
+```
+
+## 🛠️ Tech Stack
+
+- **Astro** - Static site generator
+- **TypeScript** - Type safety
+- **Tailwind CSS** - Utility-first CSS framework
+- **PostCSS** - CSS processing
+- **Vite** - Build tool
+
+## 🎨 Design Features
+
+### Typography Scale
+
+The project uses a responsive typography scale generated with Utopia:
+
+- Scales from 360px to 1440px viewport
+- Base sizes: 17px to 19px
+- Scale ratios: 1.125 to 1.2
+- Custom CSS variables for all text sizes
+
+### Design System
+
+- **Colors**: Custom green palette (#EAF4F0, #318C66, #236348)
+- **Fonts**: Instrument Sans (headings) and Geist (body text)
+- **Components**: Header, Footer, Article cards, Sidebar widgets
+- **Layouts**: Responsive grid with sidebar
+
+### Pages
+
+1. **Home** - Blog listing with hero section, article grid, and sidebar
+2. **About** - Personal profile with experience and skills sections
+3. **Post** - Single article layout with content and sidebar
+
+## 🚀 Getting Started
+
+1. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+2. Start the development server:
+
+   ```bash
+   npm run dev
+   ```
+
+3. Open [http://localhost:4321](http://localhost:4321) in your browser
+
+## 📦 Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run astro` - Run Astro CLI commands
+
+## 🎯 Design Reference
+
+This project was built based on Figma designs:
+
+- **Home page**: Blog listing with article cards and sidebar
+- **Post page**: Single article layout with hero image
+- **About page**: Personal profile with experience timeline
+
+## 📱 Responsive Design
+
+The website is fully responsive and adapts to different screen sizes:
+
+- Mobile-first approach
+- Flexible grid layouts
+- Scalable typography
+- Touch-friendly interactions
+
+## 🔧 Configuration
+
+### Tailwind CSS
+
+Configured with custom colors and typography. See `astro.config.mjs` for Vite plugin setup.
+
+### PostCSS
+
+Basic configuration with Tailwind CSS and Autoprefixer. See `postcss.config.js`.
+
+### Typography
+
+Custom CSS variables defined in `src/styles/global.css` for fluid typography scaling.
+
+## 📄 License
+
+This project is for educational and demonstration purposes.

astro.config.mjs

@@ -0,0 +1,19 @@
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig, envField } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  env: {
+    schema: {
+      CONTENT_ISLAND_SECRET_TOKEN: envField.string({
+        context: 'server',
+        access: 'secret',
+        optional: false,
+        default: 'INFORM_VALID_TOKEN',
+      }),
+    },
+  },
+});