https://github.com/MartinWebDev95/BasicDept

Frontend Practice challenge where i have recreated the BASIC/DEPT website using Astro and React.
https://github.com/MartinWebDev95/BasicDept

astro css-modules frontend frontend-practice javascript reactjs vercel-deployment

Last synced: 7 months ago
JSON representation

Frontend Practice challenge where i have recreated the BASIC/DEPT website using Astro and React.

• Host: GitHub
• URL: https://github.com/MartinWebDev95/BasicDept
• Owner: MartinWebDev95
• Created: 2025-05-19T09:18:15.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2025-06-02T12:08:38.000Z (8 months ago)
• Last Synced: 2025-06-02T23:52:45.729Z (8 months ago)
• Topics: astro, css-modules, frontend, frontend-practice, javascript, reactjs, vercel-deployment
• Language: Astro
• Homepage: https://basicdept-gamma.vercel.app
• Size: 35.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.en.md

Awesome Lists containing this project

README

          
[Button Language]: https://img.shields.io/badge/Read%20In%20English-000000?style=for-the-badge

[![Button Language]](https://github.com/MartinWebDev95/BasicDept/blob/master/README.en.md)

# BASIC/DEPT©                              

---

[Basic Dept]: https://img.shields.io/badge/BASIC%20DEPT©-000000?style=for-the-badge

[Challenge]: https://img.shields.io/badge/Frontend%20Practice%20Challenge-000000?style=for-the-badge

Frontend Practice challenge where i have recreated the BASIC/DEPT© website using Astro and React.

[![Basic Dept]](https://basicdept-gamma.vercel.app/)

[![Challenge]](https://www.frontendpractice.com/projects/basic)

## 👨🏽‍💻 What technologies have I used?

---

[Button Vercel]: https://img.shields.io/badge/Deploy%20on%20Vercel-000000?style=for-the-badge&logo=vercel

[Button Astro]: https://img.shields.io/badge/Astro-000000?style=for-the-badge&logoColor=ffff&logo=astro

[Button React]: https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react

[Button CSS]: https://img.shields.io/badge/CSS%20Modules-000000?style=for-the-badge&logo=css

[Button Javascript]: https://img.shields.io/badge/Javascript-000000?style=for-the-badge&logo=javascript

[Button Highcharts]: https://img.shields.io/badge/Highcharts-000000?style=for-the-badge

[![Button Astro]](https://astro.build/)

[![Button React]](https://react.dev/)

[![Button CSS]]()

[![Button Javascript]](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/What_is_JavaScript)

[![Button Vercel]](https://vercel.com/)

- **Astro:** I have used Astro as the framework for developing the website, as it allows reducing JavaScript overhead in the browser and improves website performance, in addition to having good SEO.

- **React:** I have used React for components that require user interaction.

- **CSS Modules:** I have used CSS Modules for styling React components, which allows me to have modular styles and avoid naming conflicts.

- **Javascript:** I have used JavaScript to create scripts such as changing the website theme when scrolling to a specific section and hiding/showing the header on scroll.

## 📸 Some Screenshots!

---

![Hero Section Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/heroSection.png)

![Header Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/header.png)

![Featured Engagement Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/featuredEngagements.png)

![Brands Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/brands.png)

![Featured News Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/featuredNews.png)

![Footer Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/footer.png)

![Menu Mobile Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/menuMobile.png)

![Horizontal Menu Screenshot](https://github.com/MartinWebDev95/BasicDept/blob/master/public/screenshots/horizontalMenu.png)

## 🗃️ Project Structure

---

This is the structure that i have used in this project:

```

/

├── public/

│   └── assets/          

│       └── image.jpg

│

├── src/

│   ├── components/

│   │    ├── Component/

│   │    │        └── index.jsx

│   │    │        └── Component.module.css  

│   │    └── Component.astro

│   ├── utils/

│   │   └── util.js

│   ├── layout/

│   │   └── Layout.astro

│   ├── pages/

│   │   └── index.astro

│   ├── hooks/

│   │   └── useHook.js

│   └── scripts/

│       └── script.js 

└── package.json

```

## 👀 Where you can find me?

---

[Button Portfolio]: https://img.shields.io/badge/Visit%20my%20Portfolio-000000?style=for-the-badge

[Button LinkedIn]: https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge

[![Button Portfolio]](https://portfolio-martinwebdev95.vercel.app/en)

[![Button LinkedIn]](https://www.linkedin.com/in/jamartindev/)