A cutting-edge portfolio showcasing AI development, creative design, and digital innovation
Welcome to my digital portfolio - a modern, responsive showcase of my work in AI development, creative design, voice acting, and digital innovation. Built with cutting-edge web technologies and featuring a modular architecture for seamless maintenance and scalability.
- Name: Thanattsitt Santisamranwilai
- Role: AI Creative Designer & Digital Innovator
- Specialties: Machine Learning, Creative Design, Voice Acting, Web Development
- Domain: pegearts.com
- Responsive Design - Optimized for all devices and screen sizes
- Dark/Light Theme - Seamless theme switching with system preference detection
- Glass Morphism UI - Modern aesthetic with backdrop filters and depth
- Smooth Animations - CSS and JavaScript powered transitions
- SEO Optimized - Meta tags, structured data, and performance optimization
- Accessibility First - WCAG compliant with keyboard navigation and screen reader support
- Dynamic FAQ System - Searchable, filterable, and categorized questions
- Portfolio Gallery - Interactive project showcase with filtering
- Contact Forms - Integrated contact and consultation booking
- Typewriter Effect - Animated role descriptions
- Scroll Animations - Elements animate into view on scroll
- Performance Optimized - Lazy loading, image optimization, and caching
- Modular Architecture - Component-based JavaScript and CSS structure
- Modern ES6+ - Clean, maintainable JavaScript modules
- CSS Custom Properties - Dynamic theming and consistent design system
- Progressive Enhancement - Works without JavaScript, enhanced with it
- Cross-Browser Support - Tested across all major browsers
thanattsitt-portfolio/
├── 📁 assets/
│ ├── 📁 css/
│ │ ├── 📄 main.css # Core styles & variables
│ │ ├── 📄 components.css # Reusable UI components
│ │ ├── 📄 animations.css # Animation definitions
│ │ ├── 📄 themes.css # Theme variants
│ │ ├── 📄 responsive.css # Media queries
│ │ └── 📁 pages/
│ │ ├── 📄 home.css # Homepage styles
│ │ ├── 📄 faq.css # FAQ page styles
│ │ ├── 📄 about.css # About page styles
│ │ └── 📄 contact.css # Contact page styles
│ │
│ ├── 📁 js/
│ │ ├── 📁 core/
│ │ │ ├── 📄 app.js # Main application controller
│ │ │ ├── 📄 config.js # Configuration constants
│ │ │ └── 📄 utils.js # Utility functions
│ │ │
│ │ ├── 📁 components/
│ │ │ ├── 📄 theme-controller.js # Theme switching
│ │ │ ├── 📄 navbar-controller.js # Navigation logic
│ │ │ ├── 📄 scroll-animations.js # Scroll effects
│ │ │ ├── 📄 form-controller.js # Form handling
│ │ │ ├── 📄 typewriter.js # Typewriter effect
│ │ │ └── 📄 performance.js # Performance optimization
│ │ │
│ │ └── 📁 pages/
│ │ ├── 📄 home.js # Homepage functionality
│ │ ├── 📄 faq.js # FAQ page controller
│ │ ├── 📄 about.js # About page logic
│ │ └── 📄 contact.js # Contact page handling
│ │
│ ├── 📁 images/ # Image assets
│ ├── 📁 fonts/ # Custom fonts
│ └── 📁 data/
│ ├── 📄 portfolio.json # Portfolio projects data
│ ├── 📄 faq.json # FAQ content
│ └── 📄 testimonials.json # Client testimonials
│
├── 📁 includes/
│ ├── 📄 header.html # Common head elements
│ ├── 📄 navbar.html # Navigation component
│ ├── 📄 footer.html # Footer component
│ └── 📄 theme-toggle.html # Theme toggle button
│
├── 📁 pages/
│ ├── 📄 about.html # About page
│ ├── 📄 faq.html # FAQ page
│ ├── 📄 contact.html # Contact page
│ ├── 📄 portfolio.html # Portfolio gallery
│ └── 📄 services.html # Services page
│
├── 📄 index.html # Homepage
├── 📄 sitemap.xml # SEO sitemap
├── 📄 robots.txt # Search engine rules
└── 📄 manifest.json # PWA manifest
- HTML5 - Semantic markup with accessibility features
- CSS3 - Modern features including Grid, Flexbox, Custom Properties
- JavaScript ES6+ - Modern syntax with modules and async/await
- Bootstrap 5 - Responsive grid system and components
- Font Awesome - Icon library
- Google Fonts - Typography (Inter, JetBrains Mono)
- Intersection Observer API - Scroll animations
- Local Storage API - Theme persistence
- Fetch API - Data loading
- CSS Custom Properties - Dynamic theming
- Lazy Loading - Images and components
- Code Splitting - Dynamic imports for page-specific code
- Minification - Optimized assets
- Caching Strategies - Browser and CDN caching
- Modern web browser
- Local web server (for development)
- Git (for cloning)
# Clone the repository
git clone https://github.com/Pigletpeakkung/MThepegearts.git
# Navigate to project directory
cd MThepegearts
# Start development server (choose one)
# Python 3
python -m http.server 8000
# Python 2
python -m SimpleHTTPServer 8000
# Node.js
npx live-server --port=3000
# PHP
php -S localhost:8000# Open in browser
http://localhost:8000
# For live reload during development
npx live-server --port=3000 --open=/index.html- Hero section with animated typewriter effect
- Services overview with interactive cards
- Featured portfolio showcase
- Client testimonials carousel
- Call-to-action sections
- Searchable and filterable FAQ system
- Categorized questions (AI, Design, Voice, Services, Technical)
- Accordion-style answers with smooth animations
- Direct linking to specific questions
- Contact CTA for additional questions
- Personal story and background
- Skills and expertise showcase
- Experience timeline
- Education and certifications
- Personal interests and values
- Detailed service offerings
- AI Development & Machine Learning
- Creative Design & Branding
- Voice Acting & Audio Production
- Technical Consulting & Strategy
- Pricing information and packages
- Process workflow explanations
- Multi-channel contact options
- Interactive contact form with validation
- Social media integration
- Business hours and response times
- Location and availability information
- Direct booking for consultations
- Interactive project gallery
- Category filtering (AI, Design, Voice, Web)
- Project case studies with details
- Technology stack for each project
- Live demos and GitHub links
- Client testimonials per project
/* Primary Colors */
--primary-light: #6366f1; /* Indigo */
--primary-dark: #4f46e5; /* Deep Indigo */
--secondary-light: #06b6d4; /* Cyan */
--accent-light: #f59e0b; /* Amber */
/* Semantic Colors */
--success: #10b981; /* Emerald */
--warning: #f59e0b; /* Amber */
--error: #ef4444; /* Red */
/* Neutral Colors */
--text-dark: #1e293b; /* Slate 800 */
--text-medium: #64748b; /* Slate 500 */
--text-light: #94a3b8; /* Slate 400 */- Primary Font: Inter (Modern, readable sans-serif)
- Secondary Font: JetBrains Mono (Code and technical content)
- Font Sizes: Fluid typography with clamp() functions
- Line Heights: Optimized for readability (1.6 base)
/* Consistent spacing scale */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 3rem; /* 48px */- Glass Cards - Frosted glass effect with backdrop filters
- Gradient Buttons - Interactive buttons with hover effects
- Form Controls - Consistent input styling across all forms
- Navigation - Sticky navigation with scroll effects
- Loading States - Skeleton screens and spinners
export const CONFIG = {
// Application settings
app: {
name: 'Thanattsitt Portfolio',
domain: 'pegearts.com',
email: 'Thanattsitt.info@yahoo.co.uk'
},
// Social media links
social: {
linkedin: 'https://www.linkedin.com/in/thanattsitt-s',
github: 'https://github.com/Pigletpeakkung',
threads: 'https://www.threads.net/@thanattsitt.s',
linktree: 'https://linktr.ee/ThanttEzekiel',
paypal: 'https://paypal.me/@thanattsittS',
buymeacoffee: 'https://buymeacoffee.com/thanattsitts'
},
// Feature toggles
features: {
darkMode: true,
animations: true,
analytics: true
}
};- Categories: AI, Design, Voice, Services, Technical
- Search: Real-time search with highlighting
- Persistence: URL parameters for direct linking
- Accessibility: Full keyboard navigation support
- System Preference Detection - Automatically detects user's preferred color scheme
- Manual Toggle - Users can override system preference
- Smooth Transitions - 300ms transitions between themes
- Persistence - Theme choice saved in localStorage
- CSS Custom Properties - Dynamic color switching
- Real-time Search - Instant results as you type
- Category Filtering - Filter by expertise area
- Keyword Highlighting - Search terms highlighted in results
- URL Integration - Shareable links to specific FAQs
- Keyboard Navigation - Full accessibility support
- Mobile-First Approach - Designed for mobile, enhanced for desktop
- Flexible Grid System - CSS Grid and Flexbox layouts
- Touch-Friendly - Optimized touch targets and gestures
- Performance Optimized - Fast loading on mobile networks
- Lazy Loading - Images and components loaded on demand
- Code Splitting - JavaScript modules loaded per page
- Asset Optimization - Compressed images and minified code
- Caching Strategy - Aggressive caching for static assets
- Core Web Vitals - Optimized for Google's performance metrics
- Lighthouse Scores: 95+ across all categories
- Core Web Vitals: All metrics in green
- Page Speed: Sub-2 second load times
- Accessibility: WCAG 2.1 AA compliant
- Interaction Analytics - Track user engagement
- Error Monitoring - Automatic error reporting
- Performance Monitoring - Real-time performance metrics
- A/B Testing - Component and layout optimization
# Build optimized version
npm run build
# Deploy to hosting provider
# (Instructions vary by provider)
# Update DNS records for pegearts.com
# Configure SSL certificate
# Set up CDN if needed# Production
NODE_ENV=production
API_URL=https://api.pegearts.com
ANALYTICS_ID=your-analytics-id
# Development
NODE_ENV=development
API_URL=http://localhost:3001
ANALYTICS_ID=While this is a personal portfolio, I welcome suggestions and improvements!
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- JavaScript: ES6+ with consistent formatting
- CSS: BEM methodology for class naming
- HTML: Semantic markup with accessibility attributes
- Comments: Clear documentation for complex logic
- ✅ Responsive portfolio showcase
- ✅ Dark/light theme system
- ✅ FAQ system with search
- ✅ Contact form integration
- ✅ SEO optimization
- Blog system integration
- Advanced portfolio filtering
- Client testimonials carousel
- Performance dashboard
- Multi-language support
- Progressive Web App (PWA)
- Offline functionality
- Advanced animations
- AI chatbot integration
- Real-time collaboration tools
- Safari iOS: Backdrop-filter may not work on older versions
- Internet Explorer: Not supported (modern browsers only)
- Print Styles: Currently optimized for screen viewing
This project is licensed under the MIT License - see the LICENSE file for details.
Thanattsitt Santisamranwilai
AI Creative Designer & Digital Innovator
- 🌍 Website: pegearts.com
- 💼 LinkedIn: thanattsitt-s
- 🐙 GitHub: Pigletpeakkung
- 📧 Email: Thanattsitt.info@yahoo.co.uk
- 🔗 Linktree: ThanttEzekiel
- 🧵 Threads: @thanattsitt.s
- 💳 PayPal: paypal.me/@thanattsittS
- ☕ Buy Me Coffee: buymeacoffee.com/thanattsitts
- Bootstrap Team - For the excellent CSS framework
- Font Awesome - For the comprehensive icon library
- Google Fonts - For beautiful typography
- MDN Web Docs - For excellent web development documentation
- CSS-Tricks - For innovative CSS techniques and tutorials
- The Open Source Community - For inspiration and best practices
- ✨ Complete redesign with modular architecture
- ✨ Advanced FAQ system with search and filtering
- ✨ Dark/light theme system
- ✨ Performance optimizations
- ✨ Accessibility improvements
- 🐛 Fixed mobile navigation issues
- 🐛 Resolved theme persistence bugs
- 🚀 Initial portfolio launch
- 📱 Responsive design implementation
- 🎨 Basic styling and animations
- 📧 Contact form integration
Built with ❤️ by Thanattsitt Santisamranwilai
Crafting digital experiences through AI, design, and innovation
⭐ Star this repository if you found it helpful! ⭐