Samuel Oliveira Portfolio Website

Live: https://sam-ciber-dev.github.io

Overview

A static portfolio website hosted on GitHub Pages, focused on cybersecurity projects, technical skills, certificates, and a contact form. Built with a modular, security-oriented architecture in Vanilla JavaScript, emphasizing accessibility, privacy, and performance. Projects are automatically synced from GitHub repositories via a daily GitHub Actions workflow.

Features

• Advanced SEO: canonical, Open Graph/Twitter tags, structured data (JSON-LD).
• robots.txt and sitemap.xml configured (includes CV and certificates).
• Internationalization (PT/EN) with persistent language toggle.
• Automated project sync from GitHub repos via Actions workflow.
• Secure contact form (Cloudflare Turnstile + Cloudflare Worker + honeypot + decoy + time-trap + content validation).
• Copy email to clipboard with notification.
• CV selection modal (PT/EN) with full accessibility and focus trapping.
• Keyboard shortcuts: Shift+S (next section), Shift+A (previous section).
• Scroll lock until the transition completes.
• Responsive layout and accessible semantics (keyboard-friendly, semantic HTML).
• Smooth fade-in animations with IntersectionObserver.

How it works

The site is fully static and client-driven, yet behaves like a small application. All logic is modularized and handled through ES modules imported in main.js. Each module has a single responsibility.

Automated project sync

Projects are automatically discovered and synced from GitHub repositories:

1. Any repo with the topic portfolio-project is picked up by the sync workflow.
2. Each project repo contains a .portfolio.json file with metadata (title, description, category, technologies, report links, all with PT/EN i18n support).
3. A GitHub Actions workflow runs daily at 06:00 UTC (or manually via workflow_dispatch).
4. The Node.js sync script fetches each repo's .portfolio.json, downloads the social preview image from assets/social-preview.png, and generates data/projects-data.json.
5. The site loads this JSON at runtime and renders project cards dynamically.

To add a new project: create a .portfolio.json in the repo root, add the portfolio-project topic, place a social preview image at assets/social-preview.png, and run the workflow.

Internationalization (i18n)

• Language toggle (PT/EN) persisted in localStorage.
• All UI text managed via i18n.js with translation keys applied through data-i18n attributes.
• Project titles, descriptions, and report links support per-language content from .portfolio.json.
• Language change re-renders all dynamic content without page reload.

Contact form

• The form uses a Cloudflare Worker as a secure backend proxy to Formspree.
• Submissions are validated client-side and protected by Cloudflare Turnstile (CAPTCHA).
• Data is sent via POST with the required fields: name, email, subject, and message.
• Successful submissions trigger inline confirmation.
• All external links and documents open in new browser tabs to ensure smooth navigation.

Anti-spam measures

To protect the form from automated spam, several layers are applied:

• Cloudflare Turnstile: visible CAPTCHA challenge integrated into the form.
• Honeypot: hidden _gotcha field must remain empty; bots filling it are discarded.
• Decoy field: a fake website input acts as a secondary trap for less sophisticated crawlers.
• Time-trap: a hidden timestamp (ts) is set on load; forms submitted in under a few seconds are flagged or ignored.
• Content validation: checks message length, link count, and suspicious patterns.
• Domain blacklist: filters disposable addresses (tempmail, mailinator, etc.).
• Browser fingerprinting and security tokens for additional verification.

These layers reduce automated spam submissions while preserving accessibility and user privacy.

Dynamic project rendering

• Projects are fetched from data/projects-data.json (generated by the sync workflow).
• Cards are rendered with accessible semantics and adaptive pagination based on viewport size.
• Placeholder cards maintain layout consistency when fewer projects are available.
• Pagination buttons include loading state and anti-abuse lock during animations.
• Project categories: offensive, defensive, reports, ai, networking, software, web, hardware.

Accessibility

• Fully keyboard-navigable.
• Accessible modal semantics.
• Focus trapping and restoration in modals.
• Reduced motion support.
• Logical heading order and descriptive labels.
• Accessible color contrast and focus outlines.

Animations

• Fade-in elements.
• Animated hero background with fallback for reduced-motion users.
• Seam fix applied between hero and about sections to prevent scroll jank.

Tech details

• Stack: HTML5, CSS3, Vanilla JavaScript. No framework or build tools.
• Icons: Font Awesome 6.4.0 (via CDN).
• Fonts: Inter, loaded from Google Fonts.
• Forms: Cloudflare Worker → Formspree (serverless email form backend), protected by Cloudflare Turnstile.
• Automation: GitHub Actions workflow + Node.js sync script for project discovery.
• Hosting: GitHub Pages, pure static deployment (.nojekyll ensures no Jekyll processing).
• Meta & SEO: canonical URL, Open Graph and Twitter tags, JSON-LD structured data, sitemap, and robots.txt for crawl control.
• Accessibility: keyboard-friendly navigation, semantic markup, proper labels and focus states.

Browser support

Designed and tested for modern evergreen browsers, following the "last-two-versions" rule:

• Chrome, Edge, Firefox, Safari, Vivaldi, and Opera GX (Chromium-based).
• iOS Safari >= 12 and latest Chrome/Firefox on Android.
• Legacy browsers like Internet Explorer are not supported, prioritizing modern standards, security, and smaller code footprint.

Performance

The site uses a lightweight, no-build architecture optimized for a fast first paint with minimal blocking resources. It preconnects to font and CDN domains (reducing handshake latency), preloads the Inter font, and loads JavaScript as a module at the end of the body (non-blocking), keeping the critical path minimal and avoiding external runtime dependencies. It follows Google Lighthouse best practices for SEO and accessibility; meta tags and structured data are validated using the Rich Results Test.

Performance improvements implemented

• Inter font preload configured
• Animations driven by IntersectionObserver (respects prefers-reduced-motion)
• Single non-blocking module script at the end of body
• Single stylesheet to keep the critical path small

Potential next steps

• Minify CSS and JavaScript for production
• Integrate linting and JSDoc documentation
• Add basic CI for validation and deployment

Project structure

• index.html - main entry point
• index.css - global styles
• js/ - JavaScript modules
  • main.js - module bootstrap and init
  • projects.js - project card rendering + adaptive pagination + button lock/loader
  • projects-data.js - fetches project data from data/projects-data.json
  • form-secure.js - secure contact form (Cloudflare Worker + Turnstile + fingerprinting)
  • i18n.js - internationalization system (PT/EN) with localStorage persistence
  • validation.js - name/email/content validation (incl. disposable domain blacklist)
  • modal.js - CV selector modal (ARIA, focus trap)
  • navigation.js - active link + scroll-based section detection
  • keyboard-nav.js - Shift+S / Shift+A shortcuts with scroll lock
  • menu.js - mobile hamburger menu toggle
  • anchors.js - smooth anchors + hero/about seam fix
  • observer.js - fade-in animations via IntersectionObserver
  • notifications.js - copy/feedback toast helpers
  • copy.js - copy-to-clipboard + clickable contact icons
  • layout.js - header height + layout utilities
  • dom-utils.js - shared DOM helpers (qs, qsa, on, trapFocus, raf)
  • data-handlers.js - event wiring for pagination + certification clicks
• data/ - generated project data
  • projects-data.json - auto-generated by GitHub Actions sync workflow
  • images/ - downloaded social preview images from project repos
• .github/ - GitHub Actions automation
  • workflows/sync-projects.yml - daily sync workflow (06:00 UTC + manual dispatch)
  • scripts/sync-projects.mjs - Node.js script for repo discovery and JSON generation
• robots.txt - indexing rules + sitemap reference
• sitemap.xml - sitemap for crawlers (includes PDFs)
• .nojekyll - ensures pure static deployment
• .gitignore - ignores artifacts/backups
• CV/ - public CV PDFs (PT and EN)
• certeficados/ - certificate PDFs
• assets/ - images and social preview

Contact

• Email: sam.oliveira.dev@gmail.com
• Compose in Gmail: Gmail
• Compose in Outlook: Outlook
• LinkedIn: linkedin.com/in/jose-samuel-oliveira
• Website: sam-ciber-dev.github.io

License

This repository is licensed under the MIT License and CC BY 4.0. See LICENSE and LICENSE-CC-BY-4.0.md for details.

Social Preview

The social preview image used for link cards:

Badges