React Portfolio
Gatsby & React & TailWind CSS



Walid Birouk's Portfolio Website
GitHub Repository: https://github.com/Walid-Birouk/portfolio
Live Site: https://walid-birouk.github.io/portfolio
Overview
This project is my personal portfolio website designed to showcase my expertise in AI and web development. The site is built using the Gatsby framework, which leverages React, and is styled with Tailwind CSS. It features a responsive design, ensuring compatibility across different devices and screen sizes.
Features
- Home Page: The landing page introduces me with a hero image, and includes navigation buttons to various sections of the site.
- About Me: This section acts as an interactive CV, detailing my educational background, skills, and experiences.
- Projects Page: This page displays cards for each project I have worked on. Each card provides a brief overview of the project and links to a detailed page with more information.
Challenges
The development of this portfolio posed several challenges, including optimizing image loading times and ensuring responsive design. I employed Gatsby's powerful image plugins to efficiently manage images and GraphQL to query data sources dynamically.
Accomplishments
- Successfully deployed the site on GitHub Pages, utilizing continuous deployment from a GitHub repository.
- Implemented a dynamic project loading system that uses markdown files for project information, making the site easy to update and maintain.
Lessons Learned
This project helped me deepen my understanding of modern web development frameworks and static site generation. It also enhanced my skills in SEO, performance optimization, and responsive design.