Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicolasgabriiel/fylo-page
Fylo, uma empresa que oferece armazenamento seguro para todos os seus arquivos em um só lugar. Acesse seus arquivos onde precisar, compartilhe e colabore com amigos, família e colegas.
https://github.com/nicolasgabriiel/fylo-page
typescript vue
Last synced: about 2 months ago
JSON representation
Fylo, uma empresa que oferece armazenamento seguro para todos os seus arquivos em um só lugar. Acesse seus arquivos onde precisar, compartilhe e colabore com amigos, família e colegas.
- Host: GitHub
- URL: https://github.com/nicolasgabriiel/fylo-page
- Owner: nicolasgabriiel
- Created: 2023-01-09T11:40:21.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-15T21:04:35.000Z (about 2 years ago)
- Last Synced: 2024-06-17T19:10:33.783Z (7 months ago)
- Topics: typescript, vue
- Language: Vue
- Homepage: https://landing-page-vue-two.vercel.app
- Size: 6.62 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Projeto Landing Page
Esta é uma solução para o desafio [Fylo Landing Page](https://www.frontendmentor.io/challenges/fylo-dark-theme-landing-page-5ca5f2d21e82137ec91a50fd) do site [Front End Mentor](https://www.frontendmentor.io/challenges), onde você escontra diversos desafios que vão te ajudar a melhorar na área do Front-End.
## Sumário
- [Resumo](#Resumo)
- [Desafio](#Desafio)
- [Screenshot](#screenshot)
- [Link](#link)
- [Processo](#Processo)
- [Construido com](#construido-com)
- [O que eu aprendi](#o-que-eu-aprendi)
- [Autor](#autor)
## Resumo
O desafio é construir a Landing Page Fylo e deixá-la o mais próximo possível do design oferecido. Podendo usar qualquer ferramenta para ajudar a concluir o desafio. O objetivo é desenvolver essa Landing Page em Vue.JS que é o framework em que eu estou me aprofundando no momento.
### Desafio
Como era a minha primeira vez desenvolvendo um projeto próprio em Vue.Js, foi uma experiência pra lá de desafiadora. Meu objetivo era entender mais sobre os componentes, como funcionavam os scopos do css, e entender como todo aquele código VUE seria reproduzido na minha tela. Me dediquei a tornar o projeto o mais fiel possível ao design que recebi e acredito que obti um ótimo resultado.
### Screenshots
Landing Page
------
### Link: https://landing-page-561dounau-nicolasgabriiel.vercel.app
## Processo
### Construido com
-Vue.JS
-TypeScript
-HTML5
-CSS3
-JavaScript
### Principais coisas que aprendi
Usando CSS com escopo de componente
```js
```
Importando a Função de definir um componente (Função própria do VUE)
```js
import { defineComponent } from 'vue';
```
definindo nomes de componente através do defineComponent
```js
export default defineComponent({
name: 'App',
});
```
Importando Componentes
```js
import LandingPage from './components/Landing-Page.vue'
```
Tornando componentes utilizaveis dentro de outro componente
```js
export default defineComponent({
name: 'App',
components: {
LandingPage
}
});
```
Utilizando componentes dentro de outro componente
```js
```
## Autor
- Site pessoal - [Nicolas Gabriel](https://www.linkedin.com/in/nicolasgabriiel/)
### Planejamento de Projeto
- [X] Planejar Projeto
- [X] Organizar os Arquivos iniciais
- [X] Montar Background da Main
- [X] Montar o Componente Cabeçalho
- [X] Estilizar o Componente Cabeçalho
- [X] Criar o Componente Chamada
- [x] Montar o Componente Chamada
- [x] Estilizar o Componente Chamada
- [x] Criar o Componente Blocos
- [x] Criar Background image no fundo
- [X] Montar o componente blocos
- [x] Estilizar o componente blocos
- [x] Adicionar Fonte
- [X] Criar componente Segunda Chamada
- [x] Montar componente Segunda Chamada
- [x] Estilizar componente Segunda Chamada
- [x] Criar o componente comentarios
- [x] Montar o componente comentarios
- [x] Estilizar o componente comentarios
- [x] Criar componente acesso
- [x] Montar o componente Acesso
- [x] Estilizar o componente Acesso
- [x] Criar Validação docomponente Acesso
- [x] Criar o Footer
- [x] Montar o Footer
- [x] Estilizar o Footer
- [x] Construir Readme