Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/araguaci/ayrtonsenna-inmemoriam
30 anos da passagem de Aryon Senna que inspirou muitos e continua inspirando gerações, está no coração de todos nós.
https://github.com/araguaci/ayrtonsenna-inmemoriam
astro
Last synced: 9 days ago
JSON representation
30 anos da passagem de Aryon Senna que inspirou muitos e continua inspirando gerações, está no coração de todos nós.
- Host: GitHub
- URL: https://github.com/araguaci/ayrtonsenna-inmemoriam
- Owner: araguaci
- License: mit
- Created: 2024-04-13T18:16:44.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-02T23:39:52.000Z (6 months ago)
- Last Synced: 2024-05-21T07:58:50.065Z (6 months ago)
- Topics: astro
- Language: Astro
- Homepage: https://ayrtonsenna-inmemoriam.netlify.app
- Size: 3.58 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 30 anos da passagem de Aryon Senna
Uma pequena homenagem, pois foi um piloto que me fez entender a paixão que você tem que ter pelas coisas que você ama, que apesar das rivalidades que possam existir entre os pilotos, nunca deve tomá-los como obstáculos, que você deve amar seu país, sentir orgulho de sua nacionalidade, amar seu trabalho, que a vida é curta para ter inimigos, que se você tem um objetivo, vá em frente, haverá pessoas que nos querem prejudicar, mas você deve se levantar e continuar lutando. E como ele diz "Com seu poder mental, sua determinação, seu instinto e a experiência também, você pode voar muito alto". Ele inspirou muitos e continua inspirando gerações, está no coração de todos nós.
- [In Memoriam Ayrton Senna](https://ayrtonsenna-inmemoriam.netlify.app)
## Timeline Ayrton Senna 🏎️
> **Senna é realmente o melhor piloto do mundo, não só o mais rápido.**
>
> ~~ Jackie Stewart, 1991
> **O melhor piloto em Grandes Prémios, o melhor piloto do mundo de longe.**
>
> ~~ James Hunt, 1993
> **Sem dúvida o melhor piloto em Grandes Prémios da atualidade.**
>
> ~~ Alan Jones, 1993
> **Ele é o maior piloto de Grande Prêmio do momento.**
>
> ~~ John Watson, 1993
> **Provavelmente o maior piloto de corrida de todos os tempos.**
>
> ~~ James Hunt, Grande Prêmio do Canadá de 1993
> **Ayrton Senna é um gênio. Defino gênio como o lado certo do desequilíbrio. Ele é altamente desenvolvido a ponto de estar quase no limite. Foi por um triz.**
>
> ~~ Martin Brundle, 1993
> **Tentei encontrar pontos fracos no Senna, mas não consegui. Ele está 100% em tudo. Aprendi muito com ele, então para mim foram três anos bons. E ainda gosto do Senna. A gente se divertiu muito, uma boa relação.**
>
> ~~ Gerhard Berger, 1993
> Ele foi o melhor piloto que já viveu.
>
> ~~ Niki Lauda, 1994
> **Ele pode ter sido o maior piloto de todos os tempos. Ayrton Senna não tinha fraqueza.**
>
> ~~ Michael Andretti, 1994
> **O Ayrton foi a pessoa mais incompreendida por aí porque ele recebeu um rap tão ruim na mídia. Posso garantir que ele era uma boa pessoa. Ele me apoiou muito no ano passado.**
>
> ~~ Michael Andretti, 1994
> **Sua perda é impossível de quantificar. Todo mundo que já o conheceu em qualquer capacidade sente que perdeu alguém muito especial.**
>
> ~~ Frank Williams, 1994
> **Ele foi provavelmente o campeão mais rápido que já vi. Ele estava sempre esticando o elástico. Meu Deus foi rápido.**
>
> ~~ Jackie Stewart, 2004
### Resources
- [The Ultimate Emoji Guide](https://emojiguide.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [The web framework Astro](https://astro.build/)
- [https://flowbite.com/ ](https://flowbite.com/docs/typography/blockquote/)
- [https://astro-embed.netlify.app/](https://astro-embed.netlify.app/)
### Theme
```
#0BAC5E, #246249, #FDDE2E, #FACD34, #2A3179, #1C2C54
/* Coolors Exported Palette - https://coolors.co/0bac5e-246249-fdde2e-facd34-2a3179-1c2c54 */
/* CSS HEX */
--pigment-green: #0BAC5Eff;
--castleton-green: #246249ff;
--school-bus-yellow: #FDDE2Eff;
--sunglow: #FACD34ff;
--delft-blue: #2A3179ff;
--space-cadet: #1C2C54ff;
/* CSS HSL */
--pigment-green: hsla(151, 88%, 36%, 1);
--castleton-green: hsla(156, 46%, 26%, 1);
--school-bus-yellow: hsla(51, 98%, 59%, 1);
--sunglow: hsla(46, 95%, 59%, 1);
--delft-blue: hsla(235, 48%, 32%, 1);
--space-cadet: hsla(223, 50%, 22%, 1);
/* SCSS HEX */
$pigment-green: #0BAC5Eff;
$castleton-green: #246249ff;
$school-bus-yellow: #FDDE2Eff;
$sunglow: #FACD34ff;
$delft-blue: #2A3179ff;
$space-cadet: #1C2C54ff;
/* SCSS HSL */
$pigment-green: hsla(151, 88%, 36%, 1);
$castleton-green: hsla(156, 46%, 26%, 1);
$school-bus-yellow: hsla(51, 98%, 59%, 1);
$sunglow: hsla(46, 95%, 59%, 1);
$delft-blue: hsla(235, 48%, 32%, 1);
$space-cadet: hsla(223, 50%, 22%, 1);
/* SCSS RGB */
$pigment-green: rgba(11, 172, 94, 1);
$castleton-green: rgba(36, 98, 73, 1);
$school-bus-yellow: rgba(253, 222, 46, 1);
$sunglow: rgba(250, 205, 52, 1);
$delft-blue: rgba(42, 49, 121, 1);
$space-cadet: rgba(28, 44, 84, 1);
/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-right: linear-gradient(90deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-bottom: linear-gradient(180deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-left: linear-gradient(270deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-top-right: linear-gradient(45deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-bottom-right: linear-gradient(135deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-top-left: linear-gradient(225deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-bottom-left: linear-gradient(315deg, #0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
$gradient-radial: radial-gradient(#0BAC5Eff, #246249ff, #FDDE2Eff, #FACD34ff, #2A3179ff, #1C2C54ff);
```
---
## By: Astrofy | Personal Portfolio Website Template
Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCSS. Create in minutes a website with a Blog, CV, Project Section, Store, and RSS Feed.
## Demo
View a live demo of [Astrofy](https://astrofy-template.netlify.app/)
## Installation
Run the following command in your terminal
```
nvm use 18.20.0
```
```bash
pnpm install
```
Once the packages are installed you are ready to run astro. Astro comes with a built-in development server that has everything you need for project development. The astro dev command will start the local development server so that you can see your new website in action for the very first time.
```bash
pnpm run dev
```
## Tech Stack
- [Astro](https://astro.build)
- [tailwindcss](https://tailwindcss.com/)
- [DaisyUI](https://daisyui.com/)
## Project Structure
```php
├── src/
│ ├── components/
│ │ ├── cv/
│ │ │ ├── TimeLine
│ │ ├── BaseHead.astro
│ │ ├── Card.astro
│ │ ├── Footer.astro
│ │ ├── Header.astro
│ │ └── HorizontalCard.astro
│ │ └── SideBar.astro
│ │ └── SideBarMenu.astro
│ │ └── SideBarFooter.astro
│ ├── content/
│ │ ├── blog/
│ │ │ ├── post1.md
│ │ │ ├── post2.md
│ │ │ └── post3.md
│ │ ├── store/
│ │ │ ├── item1.md
│ │ │ ├── item2.md
│ ├── layouts/
│ │ └── BaseLayout.astro
│ │ └── PostLayout.astro
│ └── pages/
│ │ ├── blog/
│ │ │ ├── [...page].astro
│ │ │ ├── [slug].astro
│ │ └── cv.astro
│ │ └── index.astro
│ │ └── projects.astro
│ │ └── rss.xml.js
│ ├── styles/
│ │ └── global.css
│ └── config.ts
├── public/
│ ├── favicon.svg
│ └── profile.webp
│ └── social_img.webp
├── astro.config.mjs
├── tailwind.config.cjs
├── package.json
└── tsconfig.json
```
### Site config
You can change global site configuration on '/src/config.ts' file:
- **SITE_TITLE**: Default pages title.
- **SITE_DESCRIPTION**: Default pages title.
- **GENERATE_SLUG_FROM_TITLE**: By default Astrofy will generate the blog slug pages base on the article name. Set this var to false if you want to use the Astro file base (Compatible with Astrofy older versions).
- **TRANSITION_API**: Enable and disable transition API
### Components usage
#### Layout Components
The `BaseHead`, `Footer`, `Header`, and `SideBar` components are already included in the layout system. To change the website content you can edit the content of these components.
##### SideBar
In the Sidebar you can change your profilePicture, links to all your website pages, and your social icons.
You can change your avatar shape using [mask classes](https://daisyui.com/components/mask/).
The used social-icons are SVG form [BoxIcons](https://boxicons.com/) pack. You can replace the icons in the `SideBarFooter` component
To add a new page in the sidebar go to the `SideBarMenu` component.
```
```
**Note**: In order to change the sidebar menu's active item, you need to setup the prop `sideBarActiveItemID` in the `BaseLayout` component of your new page and add that id to the link in the `SideBarMenu`
#### TimeLine
The timeline components are used to confirm the CV.
```html
Content that can contain
and anything else you want.
...
```
#### Card & HorizontalCard
The cards are primarly used for the Project and the Blog components. They include a picture, a title, and a description.
```html
```
#### HorizontalCard Shop Item
This component is already included in the Store layout of the template. In case you want to use it in another place these are the props.
```html
```
#### Adding a Custom Component
To add a custom component, you can create a .astro file in the components folder under the source folder.
Components must follow this template. The ```---``` represents the code fence and uses Javascript and can be used for imports.
The HTML component is the actual style of your new component.
```html
---
// Component Script (JavaScript)
---
```
For more details, see the [astro components](https://docs.astro.build/en/core-concepts/astro-components/) documentation here.
### Layouts
Include `BaseLayout` in each page you add and `PostLayout` to your post pages.
The BaseLayout defines a general template for each new webpage you want to add. It imports constants SITE_TITLE and SITE_DESCRIPTION which can be modified in the ```../config``` folder. Data placed there can be imported anywhere using import.
### Content
You can add a [content collection](https://docs.astro.build/en/guides/content-collections/) in `/content/' folder, you will need add it at config.ts.
#### config.ts
Where you need to define your content collections, we define our content schemas too.
#### Blog
Add your `md` blog post in the `/content/blog/` folder.
##### Post format
Add code with this format in the top of each post file.
```
---
title: "Post Title"
description: "Description"
pubDate: "Post date format(Sep 10 2022)"
heroImage: "Post Hero Image URL"
---
```
### Pages
#### Blog
Blog uses Astro's content collection to query post's `md`.
##### [page].astro
The `[page].astro` is the route to work with the paginated post list. You can change there the number of items listed for each page and the pagination button labels.
##### [slug].astro
The `[slug].astro` is the base route for every blog post, you can customize the page layout or behaviour, by default uses `content/blog` for content collection and `PostLayout` as layout.
#### Shop
Add your `md` item in the `/pages/shop/` folder.
##### [page].astro
The `[page].astro` is the route to work with the paginated item list. You can change there the number of items listed for each page and the pagination button labels. The shop will render all `.md` files you include inside this folder.
##### Item format
Add code with this format at the top of each item file.
```js
---
title: "Demo Item 1"
description: "Item description"
heroImage: "Item img url"
details: true // show or hide details btn
custom_link_label: "Custom btn link label"
custom_link: "Custom btn link"
pubDate: "Sep 15 2022"
pricing: "$15"
oldPricing: "$25.5"
badge: "Featured"
checkoutUrl: "https://checkouturl.com/"
---
```
#### Static pages
The other pages included in the template are static pages. The `index` page belongs to the root page. You can add your pages directly in the `/pages` folder and then add a link to those pages in the `sidebar` component.
Feel free to modify the content included in the pages that the template contains or add the ones you need.
### Theming
To change the template theme change the `data-theme` attribute of the `` tag in `BaseLayout.astro` file.
You can choose among 30 themes available or create your custom theme. See themes available [here](https://daisyui.com/docs/themes/).
## Sitemap
The Sitemap is generated automatically when you build your website in the root of the domain. Please update the `robots.txt` file in the public folder with your site name URL for the Sitemap.
## Deploy
You can deploy your site on your favourite static hosting service such as Vercel, Netlify, GitHub Pages, etc.
The configuration for the deployment varies depending on the platform where you are going to do it. See the [official Astro information](https://docs.astro.build/en/guides/deploy/) to deploy your website.
> **⚠️ CAUTION**
> The Blog pagination of this template is implemented using dynamic route parameters in its filename and for now this format is incompatible with SSR deploy configs, so please use the default static deploy options for your deployments.
## Contributing
Suggestions and pull requests are welcomed! Feel free to open a discussion or an issue for a new feature request or bug.
One of the best ways to contribute is to grab a [bug report or feature suggestion](https://github.com/manuelernestog/astrofy/issues) that has been marked `accepted` and dig in.
Please be wary of working on issues _not_ marked as `accepted`. Just because someone has created an issue doesn't mean we'll accept a pull request for it.
## License
Astrofy is licensed under the MIT license — see the [LICENSE](https://github.com/manuelernestog/astrofy/blob/main/LICENSE) file for details.
## Contributors
Made with [contrib.rocks](https://contrib.rocks).