A modern, responsive portfolio website showcasing full-stack development projects and professional experience. Built with a focus on performance, accessibility, and maintainability.
FROM THE FOLLOWING TEMPLATE : https://github.com/dafalagi/dafalagi.github.io
- Responsive Design: Optimized for all devices (desktop, tablet, mobile)
- Dark/Light Theme: Seamless theme switching with system preference detection
- Dynamic Project Display: JSON-driven project cards with automatic generation
- Interactive Modals: Detailed project information with tech stack badges
- Smooth Animations: Scroll-triggered animations and smooth transitions
- SEO Optimized: Proper meta tags, semantic HTML, and performance optimization
- Sticky Navigation: Always accessible navigation with active section highlighting
- Mobile-First: Progressive enhancement from mobile to desktop
- Fast Loading: Optimized assets and minimal dependencies
- Accessibility: ARIA labels, keyboard navigation, and screen reader support
- HTML5: Semantic markup with accessibility features
- CSS3: Modern styling with custom properties and animations
- JavaScript (ES6+): Vanilla JS for optimal performance
- Tailwind CSS: Utility-first CSS framework for rapid development
- Font Awesome: Icon library for consistent iconography
- Devicon: Technology icons for tech stack visualization
- Google Fonts: Inter font family for modern typography
- Modular JavaScript: Separated concerns with dedicated modules
- JSON Data Management: Centralized project data for easy maintenance
- CSS Custom Properties: Theme system supporting multiple color schemes
- Component-Based Styling: Reusable CSS classes and utilities
AntoineBert.github.io/
├── index.html # Main portfolio page
├── assets/
│ ├── css/
│ │ └── styles.css # Custom styles and theme variables
│ ├── js/
│ │ ├── scripts.js # Core functionality (navigation, theme, animations)
│ │ ├── modal.js # Project modal management
│ │ ├── projects.js # Dynamic project card generation
│ │ └── tailwind-config.js # Tailwind CSS configuration
│ ├── json/
│ │ └── project-data.json # Project information database
│ ├── img/ # Profile images and icons
| ├── pdf/ # Project pdfs
│ └── banner/ # Project banner images
├── LICENSE
└── README.md
/* Light Theme */
--primary-white: #ffffff
--secondary-gray: #f8f9fa
--text-dark: #212529
--accent-blue: #007bff
/* Dark Theme */
--primary-black: #0d1117
--secondary-black: #161b22
--text-light: #f0f6fc
--accent-gray: #8b949e- Font Family: Inter (400, 600, 700)
- Hierarchy: Clear type scale from body text to headings
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Local web server (optional, but recommended for development)
-
Clone the repository
git clone https://github.com/AntoineBert/AntoineBert.github.io.git cd AntoineBert.github.io -
Serve locally (optional)
# Using Python 3 python -m http.server 8000 # Using Node.js (if you have http-server installed) npx http-server # Or simply open index.html in your browser
-
Access the portfolio
- Local:
http://localhost:5500 - Live:
https://antoinebert.github.io
- Local:
The portfolio uses a JSON-driven approach for project management:
Edit assets/json/project-data.json:
{
"projectX": {
"title": "Project Name",
"excerpt": "Brief project description",
"image": "assets/banner/project-image.webp",
"buttonColor": "green", // or "blue"
"description": "Detailed project description",
"image": "Image project",
"contributions": ["Contribution 1", "Contribution 2"],
"techStack": ["Technology1", "Technology2"],
"liveLink": "link to the pdf", // or null
"repoLink": "https://project-url.com", // or null,
"presLink": "link to the ppsx" // or null
}
}Supported technologies with authentic brand colors:
- Languages: Python, JavaScript, PHP, HTML, CSS
- Frameworks: Laravel, Django, Bootstrap, Tailwind CSS
- Databases: MySQL, PostgreSQL, Redis
- Tools: Google Cloud, Livewire
- Automatic Generation: Projects are generated from JSON data
- Responsive Cards: Grid layout adapts to content and screen size
- Color Coding: Alternating button colors for visual variety
- Modal Integration: Seamless transition to detailed project view
- System Preference Detection: Automatically detects user's preferred theme
- Manual Toggle: Easy switching between light and dark modes
- Persistent Storage: Remembers user's theme preference
- Smooth Transitions: Animated theme changes
- Lazy Loading: Images load as needed to improve initial page load
- Resource Hints: Preconnect and DNS prefetch for faster external resource loading
- Deferred Loading: Non-critical CSS and JS loaded asynchronously
- Critical CSS: Inlined above-the-fold styles for faster rendering
- Image Optimization: WebP format with explicit width/height to prevent layout shift
- Minimal Dependencies: Only essential external resources
- Efficient Animations: CSS transforms and GPU acceleration
- Clean JavaScript: Vanilla JS without heavy frameworks
- Chrome: 90+
- Firefox: 88+
- Safari: 14+
- Edge: 90+
To get accurate performance metrics for your portfolio, you can:
- Run Google Lighthouse on your live site
- Use browser DevTools Performance tab
- Test with GTmetrix or WebPageTest
The portfolio is built with performance best practices in mind, including WebP images and minimal external dependencies.
Contributions are welcome! Please feel free to submit a Pull Request. For major changes:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
AntoineBert - GitHub Profile
Project Link: https://github.com/AntoineBert/AntoineBert.github.io
Live Demo: https://AntoineBert.github.io
⭐ If this project helped you, please give it a star! ⭐ "# AntoineBert.github.io"