Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Evomatic authored Jun 17, 2024
1 parent abe8f94 commit 27fa9b6
Showing 1 changed file with 23 additions and 41 deletions.
64 changes: 23 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,54 +1,36 @@
# Astro Starter Kit: Basics
# Frontend Mentor - Designo agency website solution

```sh
npm create astro@latest -- --template basics
```
![1](./screenshots/Screenshot-Designo_Home.png)
![2](./screenshots/Screenshot-Designo_Locations.png)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
## Developed with

> πŸ§‘β€πŸš€ **Seasoned astronaut?** Delete this file. Have fun!
- Built with:
- [Astro]([https://reactjs.org/](https://astro.build/)) - Web framework
- [Styled Components](https://styled-components.com/) - For improved HTML
- [Resend](https://resend.com/) - for sending email

![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
## The challenge

## πŸš€ Project Structure
Users should be able to:

Inside of your Astro project, you'll see the following folders and files:
- Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
- Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty should show "This field is required"
- The Email Address is not formatted correctly should show "Please use a valid email address"
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page

```text
/
β”œβ”€β”€ public/
β”‚ └── favicon.svg
β”œβ”€β”€ src/
β”‚ β”œβ”€β”€ components/
β”‚ β”‚ └── Card.astro
β”‚ β”œβ”€β”€ layouts/
β”‚ β”‚ └── Layout.astro
β”‚ └── pages/
β”‚ └── index.astro
└── package.json
```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
## Implementation
The application uses standard html and css along with astro islands to enchance development of the ui. HTMX helped to reduce
the amount of JavaScript that would had to be used otherwise for some transitions and http requests, such as the contact form.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory.
## Future Development

## 🧞 Commands
Potential future developments for the application include:

All commands are run from the root of the project, from a terminal:
- Possibly added pages for various content
- More interactivity on pages such as the project page

| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |

## πŸ‘€ Want to learn more?

Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

0 comments on commit 27fa9b6

Please sign in to comment.