gabsavard.com Redesign

This is the code for my personal website. I am using this opportunity to continue learning the Astrojs framework as well as the React and Tailwind. My goal is to not only design and build a complete website containing a projects, a blog and a contact form. I will take inspiration from my other Astrojs project for some of my components. Eventually, this website will be deployed through Netlify.

Table of Contents

• Features
• Project Structure
• License

Features

I know websites usually don't have a feature part, especially when they use frameworks like Astro that are more about being static. But I am using this section more as a checklist for what I want to do with my website:

• Home Page
  • Replace the hero image
  • Salutation module
  • Resume
  • Landing
  • Latest posts
  • RSS Button
• Projects
  • Projects index page
    • Automatically updates with new projects
  • Project Page Layout
• Blog
  • Blog index page
    • Filter the blog articles by tags
    • Automatically updates with new articles
  • Blog article Layout
• Contact Page
  • Email form
  • Socials list
• About Page
• RSS Setup
• Make website responsive
  • Home page
  • Contact page
  • Projects page
    • project layouts
  • Blog Page
    • Blog article layouts
  • About

Project Structure

Here's an overview of the project structure:

Astro-website/
├── astro.config.mjs
├── LICENSE
├── node_modules/
│   └── (Too many modules to list here)
├── package.json
├── package-lock.json
├── public/
│   ├── computer.svg
│   ├── downloads/
│   │     ├── mysql-survival-guide.md
│   │     └── mysql-survival-guide.pdf
│   ├── gab_savard_resume.pdf
│   ├── hero.png
│   ├── music/
│   │     └── demo_ep/
│   │         ├── Ballade.wav
│   │         ├── 'Far West.wav'
│   │         ├── 'F E E L I N G S.mp3'
│   │         └── Running.wav
│   ├── pictures/
│   │     ├── posts/
│   │     │   └── folders of images for each article
│   │     └── projects/
│   │         └── folders of images for each project
│   └── rss/
│       └── pretty-feed-v3.xsl
├── README.md
├── src/
│   ├── components/
│   │   ├── Alert.jsx
│   │   ├── AudioPlayer.jsx
│   │   ├── BlogCard.jsx
│   │   ├── BlogList.jsx
│   │   ├── ContactForm.jsx
│   │   ├── Gallery.jsx
│   │   ├── HeroImage.jsx
│   │   ├── LanguageList.jsx
│   │   ├── LatestPost.jsx
│   │   ├── MobileGallery.jsx
│   │   ├── MobilePicture.jsx
│   │   ├── Navigation.jsx
│   │   ├── Pagination.jsx
│   │   ├── Picture.jsx
│   │   ├── ProjectCard.jsx
│   │   ├── Salutations.jsx
│   │   ├── ScrollView.jsx
│   │   ├── SideBar.jsx
│   │   ├── SkillsTable.jsx
│   │   ├── SocialButton.astro
│   │   └── TagButton.jsx
│   ├── content/
│   │   ├── config.ts
│   │   ├── posts/
│   │   │   └── (All blog posts)
│   │   └── projects/
│   │       └── (All projects posts)
│   ├── layouts/
│   │   └── BaseLayout.astro
│   ├── pages/
│   │   ├── about.astro
│   │   ├── blog.astro
│   │   ├── contact.astro
│   │   ├── index.astro
│   │   ├── posts/
│   │   │   └── '[...slug].astro'
│   │   ├── projects/
│   │   │   └── '[...slug].astro'
│   │   ├── projects.astro
│   │   └── rss.xml.js
│   ├── styles/
│   │   └── global.css
│   └── env.d.ts
├── tailwind.config.mjs
└── tsconfig.json

• public/: Static assets like images and icons.
• src/components/: Reusable components used throughout the site.
• src/layouts/: Layout components to structure different pages.
• src/pages/: Page components for different routes.
• src/styles/: Global style used when tailwind cannot be used.
• src/contents/: The collections of content stored on the website.

License

This project is licensed under the MIT License. See the LICENSE file for more details.