A modern, bilingual (EN/TH) creative portfolio website showcasing digital works, books, articles, and designs. Built with vanilla JavaScript, Tailwind CSS, and various animation libraries.
- Full English and Thai language support
- Easy language switching with localStorage persistence
- All content translated through i18n system
- Modern, clean design with custom color palette
- Responsive layout (mobile-first approach)
- Smooth animations using Anime.js
- Interactive particle background with p5.js
- Dark mode toggle with system persistence
- Lazy loading images for better performance
- Shopping cart with localStorage persistence
- Add/remove items with quantity management
- XSS-protected cart HTML rendering
- Cart sidebar with smooth animations
- Fully functional mobile menu
- Smooth scroll navigation
- Active link highlighting
- Accessible keyboard navigation
- XSS input sanitization
- SRI (Subresource Integrity) hashes for CDN libraries
- Comprehensive SEO meta tags (Open Graph, Twitter Cards)
- Structured data for better search engine indexing
- robots.txt and sitemap ready
- ARIA labels throughout
- Keyboard navigation support
- Focus visible states
- Reduced motion support
- Semantic HTML structure
analogportfolio/
├── index.html # Homepage
├── about.html # About page
├── works.html # Shop/works page
├── 404.html # Error page
├── main.js # Main JavaScript logic
├── styles/
│ └── main.css # Main stylesheet
├── scripts/
│ ├── i18n.js # Internationalization system
│ ├── cart.js # Shopping cart module
│ ├── utilities.js # Utility functions
│ └── modals.js # Modal system
├── resources/ # Images and assets
├── .gitignore
├── package.json
├── robots.txt
├── manifest.json
└── README.md
- Modern web browser (Chrome 90+, Firefox 88+, Safari 14+)
- Python 3 (for local server) or any static file server
- Clone the repository:
git clone https://github.com/analogte/analogportfolio.git
cd analogportfolio- Run a local server:
# Using Python 3
python3 -m http.server 8000
# Or using npm
npm run dev- Open your browser and navigate to:
http://localhost:8000
Click the EN/TH buttons in the navigation bar to switch between English and Thai.
Click the dark mode toggle button in the navigation to switch themes.
Browse works and click "Add to Cart" buttons. Cart persists across sessions.
Edit CSS custom properties in styles/main.css:
:root {
--charcoal: #1a1a1a;
--warm-white: #fafafa;
--sage: #8b9a7a;
/* ... more colors */
}Add or modify translations in scripts/i18n.js:
const translations = {
en: { /* English translations */ },
th: { /* Thai translations */ }
};- Tailwind CSS - Utility-first CSS framework
- Anime.js - JavaScript animation library
- Typed.js - Typing animation library
- Splitting.js - Text splitting for animations
- p5.js - Creative coding library
- Splide.js - Carousel/slider library
- ECharts - Data visualization library
- Keep all translations in
scripts/i18n.js - CSS goes in
styles/main.css - JavaScript modules in
scripts/directory - Images in
resources/directory
- Always use
data-i18nattributes for translatable text - Add
loading="lazy"to images - Use semantic HTML elements
- Include ARIA labels for better accessibility
- Test in both EN and TH languages
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Add more work items with full case studies
- Implement actual payment gateway integration
- Add blog section
- Create admin panel for content management
- Add image optimization script
- Implement service worker for offline support
- Add unit tests
- Create build process with bundling
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Analog Portfolio
- GitHub: @analogte
- Design inspiration from Kinfolk, Wired, and The Gentlewoman
- Thanks to all the open-source library maintainers
Note: This is a demonstration project. Replace placeholder content with your actual portfolio information before deploying to production.
For support, email your-email@example.com or open an issue in the GitHub repository.