Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/martinwebdev95/starkwebclone

Frontend Practice challenge that consists of creating a clone of the Stark website
https://github.com/martinwebdev95/starkwebclone

astro cssmodules frontend frontendpractice javascript reactjs vercel-deployment

Last synced: 26 days ago
JSON representation

Frontend Practice challenge that consists of creating a clone of the Stark website

Awesome Lists containing this project

README

        

[Button Language]: https://img.shields.io/badge/Leer%20En%20EspaΓ±ol-000000?style=for-the-badge

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

# Stark Web Clone
---
[Button Stark Web]: https://img.shields.io/badge/Original%20Stark%20Web-3A1FD3?style=for-the-badge
[Button Stark Web Clone]: https://img.shields.io/badge/Stark%20Web%20Clone-3A1FD3?style=for-the-badge

This is a [Frontend Practice web challenge](https://www.frontendpractice.com/projects/stark) that consists of creating a clone of the Stark website.

[![Button Stark Web Clone]](https://stark-web-clone.vercel.app/)
[![Button Stark Web]](https://www.getstark.co/)

## πŸ‘¨πŸ½β€πŸ’» 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=BC52EE&logo=astro
[Button React]: https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react
[Button Modules]:https://img.shields.io/badge/CSS%20Modules-000000?style=for-the-badge&logo=css-modules

[![Button Astro]](https://astro.build/)
[![Button React]](https://react.dev/)
[![Button Modules]](https://github.com/css-modules/css-modules?tab=readme-ov-file)
[![Button Vercel]](https://vercel.com/)

- **Astro:** I have used Astro as the main framework of the project, creating the vast majority of components. Astro is a framework that does not load JavaScript by default on the client, it's SSR (Server Side Rendering), and that causes the loading of the website to be practically instantaneous.

- **React:** I have used React for all components that are interactive with the user, that is, all those components that trigger an event.

- **CSS Modules:** I have used CSS Modules to style React components.

## πŸ“Έ Some Screenshots!
---

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

![Video Section Screenshot](https://github.com/MartinWebDev95/StarkWebClone/blob/master/public/assets/screenshots/videoSection.png)

![Features Section Screenshot](https://github.com/MartinWebDev95/StarkWebClone/blob/master/public/assets/screenshots/featuresSection.png)

![Footer Section Screenshot](https://github.com/MartinWebDev95/StarkWebClone/blob/master/public/assets/screenshots/footerSection.png)

## πŸ—ƒοΈ Project Structure
---

This is the structure that I have used in this project

```text
/
β”œβ”€β”€ public/
β”‚ β”œβ”€β”€ assets/
β”‚ β”‚ └── image.png
β”‚ └── fonts/
β”‚ └── font.otf
β”‚
β”œβ”€β”€ src/
β”‚ β”œβ”€β”€ components/
β”‚ β”‚ └── Component.astro
β”‚ β”‚ └── Component/
β”‚ β”‚ └── index.jsx
β”‚ β”‚ └── Component.module.css
β”‚ β”œβ”€β”€ hooks/
β”‚ β”‚ └── useHook.js
β”‚ β”œβ”€β”€ layouts/
β”‚ β”‚ └── Layout.astro
β”‚ β”œβ”€β”€ lib/
β”‚ β”‚ └── getData.js
β”‚ └── pages/
β”‚ └── index.astro
└── package.json
```
## πŸ‘€ Where you can find me?
---

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

[![Button Portfolio]](https://my-portolio-martinwebdev95.vercel.app/)