Cybersecurity Portfolio Website

A professional cybersecurity portfolio website showcasing DevSecOps expertise, security operations experience, and GitHub Actions automation. This portfolio is built as a static site using pure HTML, CSS, and JavaScript—perfect for deployment on GitHub Pages.

Live Demo: View Portfolio

---

🎯 Purpose

This portfolio demonstrates:

• Professional Experience: Cyber Security Operations Engineer at Yamaha Motor Corporation
• Technical Skills: AWS, GitHub Actions, SIEM, EDR, DLP, Cloud Security, DevSecOps
• Security Automation: CI/CD pipelines with embedded security checks
• DevSecOps Practices: Secret scanning, code formatting, automated testing

---

⚠️ IMPORTANT: Intentional Vulnerabilities for Educational Purposes

This portfolio contains deliberate security vulnerabilities to demonstrate security scanning tools and DevSecOps practices. DO NOT use this code in production without addressing these issues.

Intentional Vulnerabilities Included:

1. 📦 Outdated Dependency (Dependabot Demo)

   • Vulnerability: jQuery 3.4.1 with known CVEs
   • Location: All HTML pages (<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>)
   • Purpose: Demonstrates GitHub Dependabot automated vulnerability detection
   • Detection: GitHub will create automated PRs to update the dependency

2. 🔓 Reflected Cross-Site Scripting (XSS)

   • Vulnerability: Contact form reflects unsanitized user input
   • Location: js/contact.js - uses innerHTML without sanitization
   • CWE: CWE-79 (Improper Neutralization of Input During Web Page Generation)
   • Purpose: Demonstrates web vulnerability scanning and code analysis
   • Exploit Example: Submit <img src=x onerror=alert('XSS')> in the contact form
   • Fix: Use textContent instead of innerHTML, or sanitize with DOMPurify

3. 🔑 Hardcoded Secrets (TruffleHog Demo)

   • Vulnerability: Fake AWS credentials and API keys in JavaScript comments
   • Location: js/main.js (lines 10-20, commented out)
   • Format: Realistic AWS key patterns (AKIA...), GitHub tokens (ghp_...)
   • Purpose: Demonstrates secret scanning with TruffleHog
   • Note: These are FAKE credentials for demonstration only

Why Include These Vulnerabilities?

These intentional flaws serve as:

• Educational demonstrations of common security issues
• Test cases for security scanning tools (Dependabot, TruffleHog, CodeQL)
• Portfolio evidence of understanding security vulnerabilities and remediation
• Conversation starters in job interviews about security practices

---

🚀 Features

Website Features

• ✅ Responsive Design: Mobile, tablet, and desktop optimized
• ✅ Cybersecurity Theme: Dark mode with matrix green accents
• ✅ Professional Content: Detailed experience, projects, and skills
• ✅ Accessibility: Semantic HTML, ARIA labels, keyboard navigation
• ✅ Performance: Optimized CSS, lazy loading, minimal JavaScript
• ✅ SEO Friendly: Meta tags, semantic structure, clean URLs

DevSecOps Demonstrations

• 🔐 Secret Scanning: Automated detection with TruffleHog
• ✨ Code Formatting: Prettier checks on pull requests
• 🔗 Link Checking: Automated broken link detection and reporting
• 📊 GitHub Actions: Three production-ready CI/CD workflows
• 🛡️ Security Integration: GitHub Advanced Security features

---

📁 Project Structure

csulb-portfolio/
├── index.html              # Homepage with hero section and featured projects
├── about.html              # Professional experience and skills
├── projects.html           # Detailed project showcase
├── contact.html            # Contact form (with intentional XSS)
├── devsecops.html         # DevSecOps demonstrations and workflows
├── 404.html               # Custom error page
├── css/
│   └── styles.css         # Main stylesheet with cybersecurity theme
├── js/
│   ├── main.js            # Core functionality (with hardcoded secrets)
│   ├── contact.js         # Contact form handler (with XSS vulnerability)
│   └── projects.js        # Projects filtering logic
├── .github/
│   └── workflows/
│       ├── secret-scanning.yml      # TruffleHog secret detection
│       ├── code-formatting.yml      # Prettier formatting checks
│       └── link-checker.yml         # Broken link scanning
├── .prettierrc            # Prettier configuration
├── .prettierignore        # Prettier ignore patterns
├── .gitignore            # Git ignore patterns
└── README.md             # This file

---

🛠️ Setup Instructions

Prerequisites

• Git installed on your system
• GitHub account
• (Optional) Node.js 20+ for local development

Local Development

1. Clone the Repository

   git clone https://github.com/yourusername/csulb-portfolio.git
   cd csulb-portfolio

2. Open in Browser

   • Simply open index.html in your web browser
   • Or use a local server:

     # Using Python
     python -m http.server 8080
     
     # Using Node.js http-server
     npx http-server . -p 8080
     
     # Using VS Code Live Server extension
     # Right-click index.html → Open with Live Server

3. View the Site

   • Navigate to http://localhost:8080
   • All pages should work with navigation

Customize Content

Update the following files with your information:

1. Personal Information:

   • Edit all HTML files to replace placeholder content
   • Update social media links in footers
   • Customize contact information

2. Projects:

   • Modify projects.html with your actual projects
   • Add GitHub repository links
   • Include screenshots or demos

3. Styling (Optional):

   • Adjust colors in css/styles.css (:root CSS variables)
   • Modify fonts and spacing as needed

---

🌐 Deployment to GitHub Pages

Step 1: Create GitHub Repository

1. Go to GitHub and sign in
2. Click "New Repository"
3. Name it: csulb-portfolio (or your preferred name)
4. DO NOT initialize with README (we already have one)
5. Click "Create repository"

Step 2: Push Code to GitHub

# Initialize git (if not already done)
git init

# Add all files
git add .

# Commit
git commit -m "Initial commit: Cybersecurity portfolio site"

# Add remote (replace with your GitHub username)
git remote add origin https://github.com/yourusername/csulb-portfolio.git

# Push to GitHub
git branch -M main
git push -u origin main

Step 3: Enable GitHub Pages

1. Go to your repository on GitHub
2. Click Settings (top right)
3. Scroll to Pages section (left sidebar)
4. Under Source, select:
   • Branch: main
   • Folder: / (root)
5. Click Save
6. Wait 2-3 minutes for deployment
7. Your site will be live at: https://yourusername.github.io/csulb-portfolio/

Step 4: Enable GitHub Actions Workflows

The three security workflows will automatically activate once code is pushed:

1. Secret Scanning - Runs on every push and PR
2. Code Formatting - Runs on pull requests
3. Link Checker - Runs weekly on Mondays

No additional setup required! The workflows are already configured.

---

🔒 GitHub Advanced Security Setup

To fully utilize the security demonstrations:

Enable GitHub Advanced Security (Private Repos)

1. Go to Settings → Code security and analysis
2. Enable:
   • ✅ Dependency graph
   • ✅ Dependabot alerts
   • ✅ Dependabot security updates
   • ✅ Code scanning (CodeQL)
   • ✅ Secret scanning

View Security Findings

• Dependabot Alerts: Security tab → Dependabot

  • Will flag jQuery 3.4.1 vulnerability
  • Automatically creates PRs to update

• Code Scanning: Security tab → Code scanning

  • Will detect the XSS vulnerability in contact form
  • Shows security issues in code

• Secret Scanning: Security tab → Secret scanning

  • Will detect hardcoded secrets in js/main.js
  • Alerts on exposed credentials

GitHub Actions Results

• Actions Tab: View workflow runs
  • Secret scanning results
  • Code formatting reports
  • Link checker reports

---

📋 Configuration Files

.prettierrc

Create this file in the root directory for code formatting:

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css"
}

.prettierignore

node_modules
dist
build
coverage
.git
*.min.js
*.min.css
package-lock.json

.gitignore

# Dependencies
node_modules/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# IDE
.vscode/
.idea/
*.swp
*.swo
*~

# OS
.DS_Store
Thumbs.db

# Build
dist/
build/

# Logs
logs/
*.log

# Environment
.env
.env.local

---

🧪 Testing the Vulnerabilities

Test XSS Vulnerability

1. Navigate to the Contact page
2. Fill out the form with this in the "Name" field:

   <img src=x onerror=alert('XSS')>

3. Submit the form
4. Expected: Alert popup appears (demonstrates XSS)
5. In Production: This should be sanitized!

Test Secret Scanning

1. Make a commit that adds a new fake secret:

   const API_KEY = "AKIAIOSFODNN7EXAMPLE123";

2. Push to GitHub
3. Check Actions tab → Secret Scanning workflow
4. Expected: TruffleHog detects the secret and fails the workflow

Test Dependabot

1. Wait for Dependabot to scan dependencies (automatic)
2. Check Security tab → Dependabot alerts
3. Expected: Alert for jQuery 3.4.1 vulnerability
4. Dependabot will create PR to update jQuery

---

🔧 Development Workflow

Making Changes

1. Create a Branch

   git checkout -b feature/update-projects

2. Make Changes

   • Edit files
   • Test locally

3. Commit Changes

   git add .
   git commit -m "feat: add new project to portfolio"

4. Push and Create PR

   git push origin feature/update-projects

   • Go to GitHub and create Pull Request
   • Workflows will run automatically
   • Review security findings

5. Merge to Main

   • Once approved, merge PR
   • GitHub Pages will auto-deploy

Local Testing Commands

# Format code with Prettier
npx prettier --write "**/*.{html,css,js}"

# Check formatting
npx prettier --check "**/*.{html,css,js}"

# Scan for secrets locally
trufflehog filesystem .

# Check links locally
npx linkinator http://localhost:8080 --recurse

---

📚 Technologies Used

Frontend

• HTML5 - Semantic markup
• CSS3 - Custom properties, Grid, Flexbox
• JavaScript (ES6+) - Vanilla JS, no frameworks
• jQuery 3.4.1 - Intentionally outdated for demo

DevSecOps Tools

• TruffleHog - Secret scanning
• Prettier - Code formatting
• Linkinator - Link checking
• GitHub Actions - CI/CD automation
• GitHub Advanced Security - Vulnerability scanning

Deployment

• GitHub Pages - Static site hosting
• Git - Version control

---

🤝 Contributing

This is a personal portfolio, but suggestions are welcome!

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Note: Security workflows will run on your PR.

---

📄 License

This project is licensed under the MIT License - see below:

MIT License

Copyright (c) 2025 [Your Name]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

⚠️ Security Disclaimer

This portfolio contains intentional security vulnerabilities for educational and demonstration purposes only.

The vulnerabilities included (outdated jQuery, XSS, hardcoded secrets) are designed to:

• Demonstrate knowledge of common security issues
• Showcase security scanning tools in action
• Provide talking points for job interviews
• Illustrate DevSecOps practices

DO NOT:

• Use this code in production environments
• Deploy without fixing the vulnerabilities
• Submit real credentials or sensitive data through the contact form
• Use these patterns in real applications

TO FIX FOR PRODUCTION:

1. Update jQuery to latest version (3.7.1+)
2. Sanitize all user input in contact form (use DOMPurify)
3. Remove all hardcoded credentials
4. Implement proper secrets management
5. Add Content Security Policy headers
6. Use environment variables for API keys

---

📞 Contact

Email: [Your Email]
LinkedIn: [Your LinkedIn]
GitHub: [Your GitHub]
Portfolio: [Live Site URL]

---

🌟 Acknowledgments

• GitHub Actions Community - For excellent workflow examples
• TruffleHog by Truffle Security - Secret scanning tool
• Prettier - Code formatter
• Font Awesome - Icons (if used)
• GitHub Pages - Free hosting for static sites

---

📈 Project Stats

• Pages: 5 (Home, About, Projects, DevSecOps, Contact)
• Lines of Code: ~3,500
• CSS Variables: 15+ for consistent theming
• GitHub Actions Workflows: 3
• Security Demonstrations: 3 intentional vulnerabilities
• Responsive Breakpoints: 3 (mobile, tablet, desktop)

---

Built with 💻 and 🔒 security in mind (and intentional vulnerabilities for demonstration)