🚀 Stephulz Portfolio

Portfolio built with Angular 22, TypeScript 6, SCSS, and Jest. Designed with performance, accessibility, security, and maintainability in mind, and deployed on Vercel.

---

📚 Table of Contents

• ✨ Features
• 🛠️ Tech Stack
• ⚡ Development Commands
• 📁 Project Structure
• 🔄 CI Pipeline
• 📜 Development Standards
• 📄 License

---

✨ Features

• 🌙 Light & Dark themes
• 🌍 Internationalization (English & Portuguese)
• ⚡ Server-Side Rendering (SSR)
• 📱 Responsive design
• 🧪 100% unit test coverage
• 🔒 Automated security scanning
• 🚀 Continuous deployment with Vercel
• 🎨 Modern UI with smooth theme transitions

---

🛠️ Tech Stack

Category	Technology
🎨 Frontend	Angular 22 (Standalone + SSR)
💻 Language	TypeScript 6 (Strict Mode)
🎭 Styling	SCSS + CSS Custom Properties
🧪 Testing	Jest + jsdom
🔍 Linting	Angular ESLint
🔒 Security	Semgrep (SAST), Trivy (Dependency Scanning), Gitleaks (Secrets)
🔄 CI/CD	GitHub Actions
🌐 Hosting	Vercel
🎛️ Feature Flags	ConfigCat

---

⚡ Development Commands

# Install dependencies
npm install

# Start development server
npm start

# Run tests
npm test

# Run tests in CI mode
npm run test:ci

# Run tests with coverage
npm run test:coverage

# Lint the project
npm run lint

# Create production build
npm run build

---

📁 Project Structure

src/
├── app/
│   ├── core/
│   │   ├── models/           # Data interfaces & constants (Experience, Project)
│   │   └── services/         # ThemeService, TranslationService, ConfigCatService
│   ├── mock/
│   │   └── env.mock.ts       # Jest mock for auto-generated env.ts
│   └── shared/
│       ├── components/       # Header, Footer, Timeline, Projects, Toggles, Spinner
│       └── i18n/             # English & Portuguese translations
├── index.html                # Entry point (pre-bootstrap skeleton)
├── styles.scss               # Global styles & theme variables
├── main.ts                   # Client bootstrap
├── main.server.ts            # SSR bootstrap
└── server.ts                 # Express server

public/
└── favicon.ico

coverage/             # Generated coverage reports (gitignored)

🔄 CI Pipeline

Every push and pull request targeting main executes the following workflow:

Stage	Description
✅ Lint	Angular ESLint
🧪 Test	Jest with 100% coverage enforcement
🔒 SAST	Semgrep security analysis
🕵️ Secret Scan	Gitleaks secrets detection
🛡️ Dependency Scan	Trivy vulnerability scan
🏗️ Build	Production Angular build

---

📜 Development Standards

This project follows a formal development constitution centered around the following principles:

• 💪 Strict TypeScript
• 🧩 Standalone Angular Components
• 🎨 SCSS-first styling
• 🔴🟢 Test-Driven Development (TDD)
• 🧪 100% Test Coverage
• 🔒 Gitleaks required to commit — the pre-commit hook refuses to commit without it. Install locally with scoop install gitleaks (Windows) or brew install gitleaks (macOS), or grab a binary from the gitleaks releases; CI enforces the same scan on every push/PR.

---

📄 License

This project is licensed under the MIT License.