mrflippermen/mrflippermen.github.io

# FLIPPERMEN — 网络作战作品集 进攻性安全作品集，记录了红队行动、Active Directory 漏洞利用、CTF 活动、认证和技术研究。采用深色终端美学，支持双语 (ES/EN)，并作为静态站点部署。 ## 技术栈 - **框架：** [Astro 4](https://astro.build) — 静态站点生成 - **样式：** SCSS + 集中式设计 token (`_tokens.scss`) - **内容：** Markdown 集合，包含通过 Zod 验证的 frontmatter - **图标：** Font Awesome 6 (CDN) + 自定义内联 SVG 组件 - **部署：** 通过 GitHub Actions 部署至 GitHub Pages ## 快速开始 ### 前置条件 - Node.js 20.19.6 (参见 `.nvmrc`) - npm ### 命令 ``` npm install # Install dependencies npm run dev # Dev server → http://localhost:4321 npm run build # Static build to /dist npm run preview # Preview production build locally ``` ## 项目结构 ``` mrflippermen.github.io/ ├── src/ │ ├── components/ # Astro components │ │ ├── about/ # About page sections │ │ ├── CommandHeader.astro │ │ ├── Icon.astro # Inline SVG icons │ │ ├── SEOHead.astro │ │ └── TimelineItem.astro │ ├── layouts/ │ │ └── BaseLayout.astro # Global shell, CSP, fonts, FA CDN │ ├── pages/ │ │ ├── index.astro # Landing / redirect │ │ └── [lang]/ # i18n routes (es/, en/) │ │ ├── index.astro │ │ ├── about.astro │ │ ├── cyberflipper.astro │ │ ├── contact.astro │ │ ├── writeups/ # CTF log index + detail │ │ ├── certs/ # Certifications index + detail │ │ └── wiki/ # Technical wiki index + detail │ ├── content/ # Markdown collections │ │ ├── writeups/ # CTF and HTB machine writeups │ │ ├── certs/ # Certifications and Pro Labs │ │ ├── guides/ # Technical guides │ │ ├── wiki/ # AD, forensics, exploitation wiki │ │ └── config.ts # Zod schemas for all collections │ ├── i18n/ │ │ └── utils.ts # Translations and locale routing │ └── styles/ │ ├── _tokens.scss # Design tokens — single source of truth │ └── global.scss # Base styles, animations, layout ├── public/ │ ├── images/ # Static images │ ├── favicon.svg │ ├── robots.txt │ └── .nojekyll # Required for GitHub Pages ├── .github/workflows/ │ └── deploy.yml # CI/CD to GitHub Pages └── astro.config.mjs ``` ## 关键设计决策 - **设计 token** — 所有颜色、间距和排版均在 `_tokens.scss` 中统一定义。组件中不存在任何硬编码的值。 - **双语** — 默认西班牙语，英语作为回退选项。通过 Astro 的内置路由实现基于路径前缀的 i18n。 - **内容集合** — 使用 Zod schema 为 writeup、认证、指南和 wiki 条目提供类型安全的 frontmatter。 - **深色终端美学** — 电路网格背景、扫描线叠加层、等宽显示字体，以及基于角色的配色方案（红/蓝/紫队）。 - **性能** — 内联 SVG 图标、预加载的 Google Fonts、通过 `public/` 提供的静态资源。 ## 内容管理 ### Writeup ``` --- title: "Machine Name - HTB" date: 2024-01-15 excerpt: "Brief description" tags: ["Web", "PrivEsc", "Linux"] difficulty: "Medium" # Easy | Medium | Hard | Insane platform: "HTB" # HTB | VulnHub | TryHackMe | CTF | Fluid | CWL | Custom image: "/images/blog/file.png" --- ``` ### 认证 ``` --- title: "Certification Name" date: 2024-01-15 level: "Advanced" platform: "Hack The Box" image: "/images/about/file.png" category: "Red Team" tags: ["AD", "Exploitation"] --- ``` ### Wiki 条目 ``` --- title: "Attack Technique" description: "Brief overview" category: "AD" # AD | Web | Forensics | Exploitation | Other date: 2024-01-15 image: "/images/wiki/1.png" --- ``` ## 样式 建议： - 使用 `_tokens.scss` 中的 CSS 自定义属性 — `var(--red-team)`、`var(--text-muted)` 等。 - 在语义上使用阵营颜色 — 红色代表进攻，蓝色代表防御，紫色代表混合。 禁止： - 在组件样式中硬编码原始颜色值。 - 使用内联样式。 ## 部署 推送至 `main` → GitHub Actions 将构建并部署至： ``` https://mrflippermen.github.io/ ``` 默认西班牙语：`/es/` — 英语：`/en/` — 根路径重定向至 `/es/`。 MIT © 2026 mrflippermen

标签：Astro, MITM代理, 个人作品集, 博客系统, 国际化, 防御加固, 静态网站