MatNoble Portal

Mathematics as the Core. Technology as the Extension. 以数学为原点，构建可解释的技术世界。

This is the source code for the personal portal of MatNoble, a university mathematics teacher and independent developer. It serves as an authoritative entry point for academic content, teaching philosophies, and educational tools.

✨ Features

🎨 Design & Branding

• Visual Identity: Custom Zhao Shuang String Diagram (赵爽弦图) logo, representing the geometric proof of the Pythagorean theorem.
• Color Palette: Morandi/Nordic academic palette (Clay Red, Amber, Sage Teal, Steel Blue) for a professional yet modern look.
• Typography:
  • Headings: Outfit (Geometric Sans).
  • Body: Inter (Highly readable UI font).
• Micro-interactions: "Floating" feature cards with spectral glow, breathing buttons, and smooth underline animations.

🔍 SEO & AIO (AI Optimization)

• AI-Ready: Includes llms.txt and robots.txt specifically configured to welcome AI crawlers (ChatGPT, Perplexity, etc.).
• Structured Data: Injected JSON-LD (Schema.org) for rich results and knowledge graph integration.
• Canonical URLs: Auto-generated canonical tags to prevent duplicate content issues.
• Performance: High Lighthouse scores via VitePress static generation and Cloudflare edge caching.

🛠️ Tech Stack

• Framework: VitePress (Vue 3 + Vite)
• Styling: Custom CSS variables + CSS3 Transitions
• Deployment: Cloudflare Pages
• Page Views: Cloudflare Pages Functions + D1, loaded asynchronously after content rendering
• Fonts: Google Fonts (Inter & Outfit)

🚀 Local Development

1. Install dependencies:

   npm install

2. Start development server:

   npm run docs:dev

   Access at http://localhost:5173.

3. Build for production:

   npm run docs:build

📂 Project Structure

matnoble-portal/
├── docs/
│   ├── .vitepress/
│   │   ├── config.ts       # Main configuration (SEO, Head, Nav)
│   │   └── theme/          # Custom theme customization
│   │       ├── components/ # Vue components (e.g., Logo.vue)
│   │       └── custom.css  # Global styles & variables
│   ├── public/             # Static assets (logo.svg, robots.txt, llms.txt)
│   ├── teaching/           # Academic content
│   ├── tools/              # Tools showcase
│   └── index.md            # Home page
├── docs/public/_headers    # Cloudflare Pages headers and cache rules
└── package.json

📄 Page Overview

The portal is organized into several key sections:

🏠 Core Pages

• Home (/): Introduction to MatNoble and core teaching philosophy.
• About (/about): Biography, academic background, and social links.
• FAQ (/faq): Frequently asked questions about teaching methods and tools.

📚 Teaching & Courses

• Calculus (微积分):
  • Curriculum Overview (/teaching/calculus): The "Calculus Trio" teaching system.
  • Universal Formula for Differentials (/teaching/derivative-method): A simplified framework for differentiation.
  • Core CheatSheet (/teaching/cheatsheet): Essential formulas and techniques.
• Linear Algebra (线性代数):
  • Course Content (/teaching/linear-algebra): Syllabus and key concepts.

🛠️ Educational Tools

• Memorize Assistant (/tools/memorize): A spaced-repetition tool tailored for mathematical formulas.

☁️ Deployment

This project is optimized for Cloudflare Pages.

1. Push code to GitHub.
2. Import repository in Cloudflare Pages.
3. Settings:
   • Framework Preset: VitePress
   • Build Command: npm run docs:build
   • Output Directory: docs/.vitepress/dist
4. Add custom domain (matnoble.top).

The site content is statically generated, while lightweight Pages Functions provide content negotiation and the public page-view API. The page-view counter uses a D1 binding named PAGE_VIEWS_DB; it runs within the Pages deployment and does not require a separate Worker service. Database setup and verification are documented in docs/agents/page-view-counter.md.

✉️ Contact

• Email: me@matnoble.top
• GitHub: matnoble
• Website: matnoble.top

📄 License

MIT © MatNoble