Share 
## https://sploitus.com/exploit?id=7FA3C548-4EA2-5F1F-8490-ED70798EDD8A
# The Exploit Report β€” Portfolio (React)

A single-page React site featuring a security newsletter and technical writeups (TryHackMe/CTF style). Built with Vite + Tailwind, markdown-based content, and client-side routing.

## Quick start

```bash
npm install
npm run start
```

- Dev server: http://localhost:5173
- Build: `npm run build`
- Test: `npm test`

## Folder structure

```
/my-portfolio
β”œβ”€ public/
β”‚  └─ index.html
β”œβ”€ src/
β”‚  β”œβ”€ assets/
β”‚  β”œβ”€ components/
β”‚  β”‚  β”œβ”€ Layout/
β”‚  β”‚  β”‚  └─ Header.jsx
β”‚  β”‚  β”‚  └─ Footer.jsx
β”‚  β”‚  β”œβ”€ Newsletter/
β”‚  β”‚  β”‚  └─ NewsletterHero.jsx
β”‚  β”‚  β”‚  └─ SubscribeForm.jsx
β”‚  β”‚  β”‚  └─ IssueCard.jsx
β”‚  β”‚  β”œβ”€ Writeups/
β”‚  β”‚  β”‚  └─ WriteupList.jsx
β”‚  β”‚  β”‚  └─ WriteupCard.jsx
β”‚  β”‚  β”‚  └─ WriteupViewer.jsx
β”‚  β”‚  └─ UI/
β”‚  β”œβ”€ pages/
β”‚  β”‚  └─ Home.jsx
β”‚  β”‚  └─ Newsletter.jsx
β”‚  β”‚  └─ Writeups.jsx
β”‚  β”‚  └─ WriteupPage.jsx
β”‚  β”œβ”€ data/
β”‚  β”‚  └─ writeups/
β”‚  β”‚  └─ newsletter/
β”‚  β”œβ”€ hooks/
β”‚  β”œβ”€ utils/
β”‚  β”œβ”€ App.jsx
β”‚  β”œβ”€ index.js
β”‚  └─ routes.js
β”œβ”€ .github/workflows/ci.yml
β”œβ”€ package.json
└─ README.md
```

## Content model

- Writeups live in `src/data/writeups/*.md`, with frontmatter (see `src/data/README.md`).
- Newsletter issues live in `src/data/newsletter/*.(json|md)`.
- Content is loaded at runtime using Vite `import.meta.glob`, parsed and sanitized on the client.

## Newsletter subscription

- The subscribe form posts to a mock endpoint. Replace with your provider:
  - Mailchimp: Use their Marketing API or HTML form action URL.
  - Buttondown: POST to `https://api.buttondown.email/v1/subscribers` with API key.
  - ConvertKit: POST to form endpoint with `email` field.

In `src/components/Newsletter/SubscribeForm.jsx`, replace the `fetch('/api/mock-subscribe', ...)` call with your provider. Add any headers and secrets using environment variables. Avoid exposing secrets on the clientβ€”use a serverless function or backend for production.

Local fallback stores emails in `localStorage` under `newsletterSubs`.

## Accessibility

- Semantic landmarks: `header`, `main`, `footer`.
- Skip link provided in `public/index.html`.
- Focus outlines are enabled; Tailwind focus utilities used.
- Color choices meet contrast via Tailwind defaults. Adjust in `tailwind.config.cjs` if needed.

## Performance

- React.lazy and Suspense for route-based code splitting.
- Markdown and images load on demand.
- Build uses Vite for fast static output.

## Deploy

- Any static host works (Netlify, Vercel, GitHub Pages). Build with `npm run build` and deploy `dist/`.
- Vercel: add a project, import repo, set framework to Vite.
- Netlify: drag-and-drop `dist/` or connect repo; build command `npm run build`, publish directory `dist`.

## Add content

- New writeup scaffold:

```bash
npm run new:writeup "My Target writeup"
```

- Add newsletter issue: create `src/data/newsletter/issue-003.md` or `.json`.

## Tests and CI

- Tests: Jest + React Testing Library.
- CI: GitHub Actions runs install, tests, and build.

## Tailwind setup

- Tailwind with PostCSS is preconfigured. Utilities and typography plugin are enabled.

## Admin-ish sample content

- Three sample writeups and two newsletter issues included. Replace or add more.