Overview
Describes a personal portfolio website with multi-language support, project filtering, and a typewriter animation contact form.
What this file does
Describes a personal portfolio website with multi-language support, project filtering, and a typewriter animation contact form.
When to use it
- Building a personal portfolio site for a developer or consultant
- Adding client-side internationalization with JSON locale files
- Implementing a typewriter animation in a contact form
- Creating a static site with progressive enhancement and Vue.js for specific features
Assumes this stack
Overview
This is a personal portfolio website for Daley Mottley, an AI Consultant and Full-Stack Web Developer based in Barbados. The site showcases professional skills, projects, and services with a focus on AI solutions and web development. The portfolio includes internationalization support for multiple languages and features an interactive typewriter animation in the contact form.
User Preferences
Preferred communication style: Simple, everyday language.
Recent Changes
- December 1, 2025: Fixed newline handling in the typewriter animation. The
adjustPlaceholderText()function now converts literal\nstrings from JSON translation files into actual newline characters before processing.
System Architecture
Frontend Architecture
Static Site with Progressive Enhancement
- Built as a static HTML/CSS/JavaScript application with no build process required
- Uses vanilla JavaScript with Vue.js 3 (ESM browser version) for the questionnaire feature only
- Progressive enhancement allows core content to be accessible even without JavaScript
Multi-Language Support (i18n)
- Client-side internationalization using JSON locale files (en, es, fr, de, zh, ja, pt, fa)
- Language detection from URL parameters (
?lang=es) and localStorage persistence - Dynamic content replacement using
data-i18nattributes - Supports 8 languages including right-to-left languages (Persian/Farsi)
UI Framework Stack
- Bootstrap 3.3.5 for responsive grid and components
- Custom CSS with utility classes for additional styling
- Animate.css for entrance animations
- FlexSlider for carousels/sliders
- Owl Carousel for advanced carousel needs
- Font choices: Quicksand (body), Playfair Display (headings)
Project Filtering System
- Custom JavaScript-based filtering for portfolio projects
- Load-more pagination functionality
- Category-based filtering with active state management
Key Files
index.html- Main portfolio pagejs/custom.js- Project filtering, contact form handling, typewriter animationjs/i18n.js- Internationalization logiclocales/*.json- Translation files for 8 languagescss/style.css- Main stylescss/custom.css- Custom overrides
External Dependencies
Frontend Libraries
- jQuery 2.1.4 - DOM manipulation and AJAX
- Bootstrap 3.3.5 - Responsive framework
- Vue.js 3 (ESM) - For questionnaire component
- Animate.css - CSS animation library
- FlexSlider 2.6.0 - Image/content slider
- Owl Carousel - Advanced carousel functionality
External Assets
- Cloudinary - Image hosting (res.cloudinary.com/dzpafdvkm)
- Google Fonts - Quicksand and Playfair Display
- Flag CDN (flagcdn.com) - Country flags for language switcher
Development
The site runs on Python's built-in HTTP server:
python3 -m http.server 5000 --bind 0.0.0.0
Access the site at the Replit preview URL or localhost:5000.
What's inside
Architecture overview, 8 language locales, 6 frontend libraries, 4 key files, and development server command.
Change this for your project
- Replace
res.cloudinary.com/dzpafdvkmwith your own Cloudinary URL - Replace
daley-mottley/portfoliowith your own repository name - Replace locale files in
locales/*.jsonwith your own translations - Replace
QuicksandandPlayfair Displaywith your chosen fonts
Where it goes
Keep it in your repository where the agent or team that needs it will read it.
Worth borrowing
- Using
data-i18nattributes for client-side translation without a framework - Progressive enhancement: core content accessible without JavaScript
- Language detection via URL parameter and localStorage persistence
Related Documents
GOOBY - Closing Store Marketplace
Defines a full-stack marketplace app for discovering closing retail stores in NY/NJ/CT/PA, with automated closure scanning and admin review.
Lua Code Obfuscator/Deobfuscator
Provides a full-stack web app for obfuscating and deobfuscating Roblox Lua scripts with a Monaco editor and PostgreSQL storage.
GREEN NODE - Project Overview
Describes a full-stack recycling platform with three runtime modes, provider architecture, and development scripts for Cochabamba, Bolivia.
ADN Systems DMR Peer Server
Documents a forked FreeDMR server for amateur radio DMR voice/data routing with bridges, proxies, scheduled voice announcements, and centralized security.