feature: New Readme
This commit is contained in:
83
README.md
83
README.md
@@ -1,7 +1,82 @@
|
||||
# Vue 3 + Vite
|
||||
<a name="readme-top"></a>
|
||||
<br />
|
||||
<div align="center">
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
[![LinkedIn][linkedin-logo]][linkedin-url]
|
||||
|
||||
## Recommended IDE Setup
|
||||
<a href="https://github.com/xyvs/pokedex">
|
||||
<img src="images/logo.png" alt="Logo" width="80" height="80">
|
||||
</a>
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
<h3 align="center">pokedexyvs</h3>
|
||||
|
||||
[![Vue][vue-logo]][vue-url]
|
||||
[![Tailwind][tailwind-logo]][tailwind-url]
|
||||
[![Vercel][vercel-logo]][vercel-url]
|
||||
|
||||
|
||||
<p align="center">
|
||||
And very stylish pokedex web app made with Vue.js and TailwindCSS.
|
||||
<br />
|
||||
<a href="https://pokedex.xyvs.io"><strong>View Demo »</strong></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT THE PROJECT -->
|
||||
## About The Project
|
||||
|
||||
[![pokedexyvs][product-screenshot]](https://example.com)
|
||||
|
||||
This a pokedex web app made with Vue.js, it's using the [PokeApi](https://pokeapi.co/) to get the data, it's inspired this design on [Dribbble](https://dribbble.com/shots/2859891--025-Pikachu) and it's also deployed on [Vercel](https://vercel.com/).
|
||||
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||||
|
||||
<!-- GETTING STARTED -->
|
||||
## Getting Started
|
||||
|
||||
This is an example of how you may give instructions on setting up your project locally.
|
||||
To get a local copy up and running follow these simple example steps.
|
||||
|
||||
|
||||
### Installation
|
||||
|
||||
|
||||
1. Clone the repo
|
||||
```sh
|
||||
git clone https://github.com/xyvs/pokedex
|
||||
```
|
||||
2. Install NPM packages
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
4. Run the dev enviroment
|
||||
```js
|
||||
npm run dev
|
||||
```
|
||||
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||||
|
||||
<!-- LICENSE -->
|
||||
## License
|
||||
|
||||
Distributed under the MIT License.
|
||||
|
||||
<p align="right">(<a href="#readme-top">back to top</a>)</p>
|
||||
|
||||
|
||||
<!-- MARKDOWN LINKS & IMAGES -->
|
||||
<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
|
||||
|
||||
[product-screenshot]: images/screenshot.png
|
||||
|
||||
[linkedin-logo]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin
|
||||
[linkedin-url]: https://www.linkedin.com/in/jofranmtz/
|
||||
|
||||
[vue-logo]: https://img.shields.io/badge/Vue-black?style=for-the-badge&logo=vuedotjs&logoColor=fff
|
||||
[vue-url]: https://vuejs.org
|
||||
|
||||
[tailwind-logo]: https://img.shields.io/badge/Tailwind-black?style=for-the-badge&logo=tailwindcss&logoColor=fff
|
||||
[tailwind-url]: https://tailwindcss.com
|
||||
|
||||
[vercel-logo]: https://img.shields.io/badge/Vercel-black?style=for-the-badge&logo=vercel&logoColor=fff
|
||||
[vercel-url]: https://vercel.com
|
||||
|
||||
@@ -3,15 +3,45 @@ import Footer from './Footer.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-screen h-screen bg-neutral-950 text-neutral-50 flex flex-col items-center justify-between p-4 lg:p-12">
|
||||
<div class="w-screen h-screen bg-zinc-900 text-slate-100 flex flex-col items-center justify-between p-4 lg:p-12">
|
||||
<div></div>
|
||||
<div class="space-y-8 text-center lg:w-[50rem]">
|
||||
<div class="text-center lg:w-[50rem] flex flex-col gap-8 items-center">
|
||||
|
||||
<div class="text-5xl font-semibold">
|
||||
About
|
||||
pokedex
|
||||
</div>
|
||||
<div class="text-lg">
|
||||
Sit quis aut ipsum minima pariatur Totam laboriosam totam qui modi a Aliquam tenetur impedit quisquam nemo
|
||||
assumenda repudiandae sed Eligendi facere rem sequi voluptas vel? Fugit laudantium vero officia.
|
||||
<div class="text-lg space-y-4 text-center">
|
||||
A pokedex web app build with Vue 3 and TailwindCSS and using the <a href="https://pokeapi.co/" target="_blank" class="text-primary-500 hover:underline">PokeAPI</a>.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<p>Here are a couple of popular pokemons:</p>
|
||||
|
||||
<ul class="flex items-center gap-2 text-sm">
|
||||
|
||||
<li class="bg-teal-800 hover:bg-teal-700 text-teal-100 rounded px-2 py-1">
|
||||
<a href="/pokemon/1">Bulbasaur</a>
|
||||
</li>
|
||||
|
||||
<li class="bg-amber-700 hover:bg-amber-600 text-amber-100 rounded px-2 py-1">
|
||||
<a href="/pokemon/4">Charmander</a>
|
||||
</li>
|
||||
|
||||
<li class="bg-cyan-700 hover:bg-cyan-600 text-cyan-100 rounded px-2 py-1">
|
||||
<a href="/pokemon/7">Squirtle</a>
|
||||
</li>
|
||||
|
||||
<li class="bg-yellow-600 hover:bg-yellow-500 text-yellow-100 rounded px-2 py-1">
|
||||
<a href="/pokemon/25">Pikachu</a>
|
||||
</li>
|
||||
|
||||
<li class="bg-yellow-800 hover:bg-yellow-700 text-yellow-100 rounded px-2 py-1">
|
||||
<a href="/pokemon/133">Eevee</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
Reference in New Issue
Block a user