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.

© 2024 - Walid Birouk All rights reserved.