Marco Tofani - Portfolio Website

A modern, responsive portfolio website showcasing automation tools and full-stack development projects created for Prime Video workflows.

🌐 Live Site: https://marcotof.github.io/

Features

• Responsive Design: Fully optimized for desktop, tablet, and mobile devices with hamburger menu
• Apple-style Dark Mode Toggle: Professional iOS-inspired toggle switch with smooth animations and persistent preference
• Multi-language Support: English, Italian, and Spanish with automatic browser language detection
  • Desktop: Language codes (EN, IT, ES)
  • Mobile: Flag + language name (🇺🇸 English (US), 🇮🇹 Italiano (Italia), 🇪🇸 Español (España))
• Browser Language Auto-detection: Automatically displays portfolio in user's browser language on first visit
• Interactive Project Showcase: Detailed project modals with features, technologies, and impact metrics
• Professional Timeline: Career journey with upcoming position reveal feature (FeverUp role unlocks Jan 12, 2026)
• Contact Form Modal: Localized contact form integrated with Formspree for direct email submissions, with comprehensive client-side validation (email format, character requirements) and localized error messages in all supported languages
• Downloadable Resume: Direct download link for Marco Tofani's resume
• Modern UI/UX: Clean design with smooth animations and transitions
• Professional Presentation: Optimized for recruiters and technical managers
• SEO Optimization: Open Graph meta tags for social media sharing, Schema.json structured data for search engines, sitemap.xml, and robots.txt for improved discoverability

Featured Demos

Three production automation tools with live video demonstrations:

🎬 Video Demonstrations

• Redelivery Hub: Comprehensive automation platform (90% reduction in manual work)
• LQA Tool Extension: Chrome extension for workflow enhancement (40% QA efficiency improvement)
• Redelivery Agent: Web-based Excel processing tool (eliminates manual data entry errors)

All demo videos are embedded in the "Demos" section of the portfolio with full responsive support.

Projects Highlighted

🏆 Redelivery Hub (Featured)

Comprehensive automation platform for Prime Video redelivery workflows with:

• Multi-tool automation platform
• Selenium WebDriver automation
• Real-time status tracking
• File processing and validation

🔧 LQA Tool Extension

Chrome extension enhancing LQA Tool workflow efficiency

📊 Redelivery Agent

Web-based Excel file processing tool with modular architecture

🛠️ FileMaster & TimeStamps Converter

Python utilities for file management and timestamp processing

📋 Proxy Generation Tools

Documentation and templates for partner support workflows

Technologies Used

• Frontend: HTML5, CSS3, JavaScript (Vanilla)
• Styling: CSS Variables for theming, Modern CSS Grid/Flexbox, Custom animations
• Dark Mode: CSS variables with localStorage persistence
• Internationalization: Embedded JSON translations in JavaScript
• Icons: Font Awesome 6
• Fonts: Inter (Google Fonts)
• Responsive: Mobile-first design with hamburger navigation

File Structure

portfolio-website/
├── index.html                       # Main HTML structure
├── styles.css                       # CSS styling with dark mode variables
├── script.js                        # JavaScript functionality (dark mode, mobile menu, i18n)
├── locales.js                       # Embedded translations (en, it, es)
├── Marco Tofani_Resume.pdf          # Downloadable resume
├── profile-picture.jpg              # Profile image
├── dragons-dogma-2.jpg              # VIP project image
├── super-mario-party-jamboree.jpg   # VIP project image
├── poster-redelivery-hub.png        # Poster image for Redelivery Hub demo
├── poster-lqa-extension.png         # Poster image for LQA Tool Extension demo
├── poster-redelivery-agent.png      # Poster image for Redelivery Agent demo
├── demo-redelivery-hub.mp4          # Redelivery Hub video demo
├── demo-lqa-extension.mp4           # LQA Tool Extension video demo
├── demo-redelivery-agent.mp4        # Redelivery Agent video demo
├── sitemap.xml                      # XML sitemap for search engine crawling
├── robots.txt                       # Search engine crawler instructions
└── README.md                        # This file

Setup Instructions

1. Local Development:

   • Open index.html in any modern web browser
   • No build process required - pure HTML/CSS/JS

2. Deployment Options:

   • GitHub Pages: Push to GitHub and enable Pages
   • Netlify: Drag and drop the folder to Netlify
   • Personal Domain: Upload files to web hosting service

SEO & Discoverability

This portfolio includes comprehensive SEO optimizations to improve visibility in recruiter searches and social media sharing:

Open Graph Meta Tags

• Professional previews when shared on LinkedIn, Twitter, and other social platforms
• Displays your name, description, and profile picture thumbnail
• Enhances click-through rates from social sharing

Schema.json Structured Data

• Machine-readable profile information using Schema.org Person schema
• Tells search engines and recruiter automation systems:
  • Your name, email, job title, and location
  • Languages you know (Italian, English, Spanish)
  • Core skills and expertise areas
  • LinkedIn and GitHub profiles

Sitemap.xml

• Helps search engines discover and index all portfolio sections
• Lists priority levels for different pages (homepage highest priority)
• Enables efficient crawling of your entire site

Robots.txt

• Guides search engine crawlers on what to index
• Links search engines to your sitemap
• Allows all bots to crawl your portfolio

Impact on Discovery

These optimizations improve:

• Search Visibility: Rank higher for searches like "localization automation developer", "game localization specialist", "polyglot developer"
• Social Credibility: Professional appearance when shared on LinkedIn and Twitter
• Recruiter Automation: Better matching in automated recruiter systems and ATS platforms
• Search Engine Indexing: Faster and more complete indexing of your portfolio

Customization

Adding New Projects

1. Add project card HTML in the projects-grid section
2. Add project details to the projectDetails object in script.js
3. Update skills section if new technologies are used

Updating Contact Information

• Modify the contact links in the contact section
• Update email and profile URLs as needed

Styling Changes

• Colors: Update CSS custom properties in styles.css
• Fonts: Change Google Fonts import and font-family declarations
• Layout: Modify grid and flexbox properties

Performance Features

• Optimized Loading: Minimal external dependencies
• Smooth Animations: CSS transitions and JavaScript scroll effects
• Mobile Responsive: Optimized for all device sizes
• Fast Loading: Lightweight codebase with efficient CSS

Browser Support

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support
• Mobile browsers: Responsive design optimized

Deployment

GitHub Pages (Recommended)

1. Create new repository: your-username.github.io
2. Upload all files to the repository
3. Enable GitHub Pages in repository settings
4. Access at: https://your-username.github.io

Netlify

1. Visit netlify.com
2. Drag and drop the portfolio-website folder
3. Get instant deployment with custom domain options

Custom Domain

1. Purchase domain from registrar
2. Upload files to web hosting service
3. Configure DNS settings

Recent Updates

v1.1 - Enhanced UX & Auto-detection (December 27, 2025)

🎨 UI Improvements

• Apple-style Dark Mode Toggle: Replaced icon button with professional iOS-inspired toggle switch
  • Smooth animations with sliding thumb and rotating icons (moon ↔ sun)
  • Enhanced hover states and visual feedback
• Smart Language Selector: Adaptive display based on screen size
  • Desktop: Clean language codes (EN, IT, ES)
  • Mobile: Flag emojis + full language names for clarity
  • Increased selector width to prevent flag truncation
• Spanish Navbar Optimization: Changed "Acerca de mí" to "Acerca" to prevent text overlap

🌍 Localization Enhancements

• Browser Language Auto-detection: Portfolio automatically displays in user's browser language on first visit
  • Supports English, Italian, and Spanish
  • Falls back to English for unsupported languages
  • User selection persists via localStorage

🗓️ Timeline Features

• Future Role Reveal System: Added upcoming FeverUp position (Jan 12, 2026)
  • Position and company blurred with lock icon (🔒) until reveal date
  • Automatic reveal on January 12, 2026 with celebration animation (🎉)
  • Dynamic "current role" status transfer from Prime Video to FeverUp
  • Fully localized in all three languages

🧹 Code Quality

• Removed unused contactInfo object from locales.js
• Optimized CSS selectors for better performance
• Enhanced blur effects with proper specificity

---

v1.2 - SEO & Discoverability (January 5, 2026)

🔍 SEO Enhancements

• Open Graph Meta Tags: Social media sharing now displays professional previews with thumbnail and description
• Schema.json Structured Data: Added machine-readable profile information for search engines and recruiter automation systems
  • Person schema with job title, languages, skills, and social profiles
  • Improves visibility in recruiter searches and ATS matching
• Sitemap.xml: XML sitemap for improved search engine crawling and indexing
• Robots.txt: Added robots.txt file to guide search engine behavior and link to sitemap
• Enhanced Meta Tags: Added description, keywords, and author meta tags for better search results

📈 Discoverability Impact

• Improved ranking for recruiter searches: "localization automation developer", "game localization specialist", "polyglot developer"
• Professional LinkedIn/Twitter sharing with thumbnails
• Better matching in automated recruiter systems
• Faster indexing by Google and other search engines

---

v1.1 - Enhanced UX & Auto-detection (December 27, 2025)

• ✅ Navbar Language Selector: Flag-only selector moved into the navbar (🇺🇸/🇮🇹/🇪🇸) with spacing fixes for long labels
• ✅ Enhanced Form Validation: Real-time validation with field-level error messages (name min 3 chars, valid email format, message min 10 chars)
• ✅ Localized Validation Messages: All error messages translated to English, Italian, and Spanish
• ✅ Form UX Improvements: Live feedback on blur and typing, error highlighting with smooth animations
• ✅ Dark Mode Toggle: Persistent theme switching with CSS variables
• ✅ Mobile Optimization: Hamburger menu and responsive layouts with fixed timeline
• ✅ Downloadable Resume: Direct PDF download functionality
• ✅ Embedded Translations: Migrated from JSON files to JavaScript for CORS-free deployment (organized with clear section comments)
• ✅ Complete Localization: All sections fully translated (English, Italian, Spanish)
• ✅ Project Modal Translations: Features, technologies, and impact metrics translated
• ✅ Technical Skills Translation: Category headers and language proficiencies localized
• ✅ Contact Form Modal: Interactive contact form with Formspree integration for email submissions
• ✅ Featured Demos Section: Video demonstrations for 3 production automation tools (Redelivery Hub, LQA Tool Extension, Redelivery Agent)
• ✅ Demos Navigation: Added "Demos" to main navigation menu for easy access across all languages
• ✅ Dual-Theme UI Polish: Emerald/charcoal accent tokens applied across cards, modals, timelines, tags, and contact buttons with consistent hover/focus states in light/dark modes

Contact Form

Features

• Modal Dialog: Non-intrusive contact form that opens in a modal when clicking the email button
• Formspree Integration: Direct email delivery to tofanimarco16@gmail.com using Formspree
• Full Localization: Form labels, placeholders, and feedback messages in English, Italian, and Spanish
• Client-side Validation: Required field validation before submission
• User Feedback: Loading states, success/error messages all localized
• Responsive Design: Works seamlessly on all devices

Validation Rules

• Name: Minimum 3 characters required
• Email: Must be a valid email format (user@domain.com)
• Message: Minimum 10 characters required

How to Use

1. Click the email button in the contact section
2. Fill in your name, email, and message
3. Real-time validation provides immediate feedback as you type
4. Error messages appear below fields for invalid inputs
5. Click "Send Message" to submit (only enabled when all fields are valid)
6. Receive localized validation feedback and confirmation message in the selected language

Customization

To use a different Formspree endpoint:

1. Create a new form at formspree.io
2. Update the endpoint URL in script.js (line with fetch('https://formspree.io/f/...'))

Future Enhancements

• Include project screenshots/demos
• Add blog section for technical articles
• Add project filtering by technology
• Additional language support
• Form submission notifications/confirmations

Contact

For questions about this portfolio or collaboration opportunities:

• Email: tofanimarco16@gmail.com
• LinkedIn: linkedin.com/in/marco-tofani

---

Built with ❤️ for showcasing automation engineering excellence at Prime Video

Localization (i18n)

This site includes a client-side localization system with translations embedded directly in JavaScript. Current languages: English (en), Italian (it), and Spanish (es).

How it works:

• All translations are embedded in locales.js to avoid CORS issues on GitHub Pages
• locales.js is organized with clear section comments for each language (English, Italian, Spanish)
• Elements to translate are marked with data-i18n="key" attributes in index.html
• Browser Language Auto-detection: On first visit, portfolio automatically displays in user's browser language
  • Supported: English, Italian, Spanish
  • Unsupported languages default to English
• The language selector adapts to screen size:
  • Desktop: Language codes (EN, IT, ES)
  • Mobile: Flag + language name (🇺🇸 English (US), 🇮🇹 Italiano (Italia), 🇪🇸 Español (España))
• Current language is saved to localStorage for persistence across visits

Adding/updating translations:

1. Open locales.js to see the locales object structure
2. Add or update keys in all three language objects (en, it, es)
3. For new translatable elements in index.html, add a data-i18n attribute (e.g., data-i18n="section.newKey")
4. Add the corresponding key-value pairs to all language objects in locales.js

Contact Form Translation Keys:

• contact.formTitle - Form heading
• contact.formSubtitle - Form description
• contact.name - Name field label
• contact.emailField - Email field label
• contact.message - Message field label
• contact.send - Submit button text
• contact.sending - Loading state text
• contact.successMessage - Success notification
• contact.errorMessage - Submission error message
• contact.generalError - General error message

Form Validation Translation Keys:

• contact.validation.name - Name field error (min 3 characters)
• contact.validation.email - Email format validation error
• contact.validation.emailRequired - Email required error
• contact.validation.message - Message field error (min 10 characters)

Testing:

• Simply open index.html in any browser - no server required!
• Use the language selector in the contact section to test translations
• Check browser console for any missing translation keys

Notes:

• Embedded approach eliminates CORS issues with GitHub Pages
• For complex pluralization or interpolation, consider libraries like i18next
• For SEO optimization, consider pre-rendering separate language pages with hreflang tags