Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dvizioon/landing-page-portfolio
Desafio Alura
https://github.com/dvizioon/landing-page-portfolio
apresentation landing landing-page page portfolio portfolio-website profile
Last synced: 1 day ago
JSON representation
Desafio Alura
- Host: GitHub
- URL: https://github.com/dvizioon/landing-page-portfolio
- Owner: dvizioon
- Created: 2024-06-25T04:28:05.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-25T11:12:28.000Z (7 months ago)
- Last Synced: 2024-11-18T04:45:50.484Z (2 months ago)
- Topics: apresentation, landing, landing-page, page, portfolio, portfolio-website, profile
- Language: CSS
- Homepage: https://dvizioon.github.io/Landing-Page-Portfolio/
- Size: 724 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Carta de Apresentação - Dvizioon
Projeto desenvolvido como desafio da Alura para praticar HTML, CSS, portfolio
## Conteúdo
- [vizualizar projeto em tempo real](https://dvizioon.github.io/Landing-Page-Portfolio/)
- [Funcionalidades](#funcionalidades)
- [Prototipo](#Prototipo)
- [Tecnologias Utilizadas](#tecnologias-utilizadas)
- [Estrutura do Projeto](#estrutura-do-projeto)
- [Como Executar](#como-executar)
- [Licença](#licença)
## Ir para o Projeto 🔰
[Vizualizar em Tempo Real](https://dvizioon.github.io/Landing-Page-Portfolio/)
## Funcionalidades
- **Janela do Terminal:** Simula uma janela de terminal com bordas, botões de controle (fechar, minimizar, maximizar) e um cabeçalho com título.
- **Entrada de Comando:** Permite ao usuário digitar comandos e exibe respostas simuladas.
- **Estilo Visual:** Utilização de partículas no fundo e efeitos visuais para uma experiência mais imersiva.
## Prototipo
[Vizualizar Prototipo](https://www.figma.com/design/sKfIDQtCpQBgxcKQ9aLE8z/Landing-Page---Apresentation?node-id=1-11&t=9egWD1X4uUtHzQyU-1)
## Tecnologias Utilizadas
- **HTML:** Estrutura básica da página.
- **CSS:** Estilização do layout e dos componentes.
- **JavaScript:** Interatividade e manipulação do DOM.
- **SweetAlert2:** Para alertas personalizados (opcional).
- **Particles.js:** Para criar um efeito de fundo animado.
- **Plugins.js:** tilt para Efeito do Card
>[!IMPORTANT]
>os plugins que foram desenvolvidos nesse projeto são de autoria minha.
## Plugins
```javascript
/**
* Plugin de Inclinação 3D para Elementos HTML
* Criado por Daniel Estevão Martins Mendes
*
* Este plugin adiciona um efeito de inclinação 3D responsivo
* a um elemento HTML específico quando o mouse se move sobre ele.
*
* @param {HTMLElement} element O elemento HTML alvo onde o efeito será aplicado.
* @param {number} maxRotate Máxima inclinação em graus (padrão: 50).
* @param {number} sensitivity Sensibilidade do movimento (padrão: 0.2).
*/
function addTiltEffect(element, maxRotate = 50, sensitivity = 0.2) {
element.addEventListener('mousemove', e => {
const rect = element.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const mouseX = e.clientX;
const mouseY = e.clientY;
const distanceX = mouseX - centerX;
const distanceY = mouseY - centerY;
const percentX = distanceX / (rect.width / 2);
const percentY = distanceY / (rect.height / 2);
const rotateX = -maxRotate * percentY * sensitivity;
const rotateY = maxRotate * percentX * sensitivity;
element.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
element.addEventListener('mouseleave', () => {
element.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
});
}
const cardContent = document.querySelector('.card-content');
addTiltEffect(cardContent,100);
```
esse plugin permite que um elemento da pagina seja totalmente titiltado ao ser tocado em alguma parte criando um efieto de profundidade e 3D
>[!WARNING]
>Importante resaltar que esse plugin já existe no >Jquery criei a minha propia versão. dados não estão
>tipado fortemente, se recomenda seguir a `doc` de tipos.
## Fontes ultilizadas
```css
/* latin-ext */
@font-face {
font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/kronaone/v14/jAnEgHdjHcjgfIb1ZcUyOIWg7cU.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/kronaone/v14/jAnEgHdjHcjgfIb1ZcUyNoWg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq6R8WXV0poK5.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
```
## Registrador de Comandos
```javascript
"help": {
"action": () => {
terminalOutput.innerHTML += '
Lista de comandos disponíveis:
';
terminalOutput.innerHTML += '- ';
- ${key} - ${commands[key].description} `;
Object.keys(commands).forEach(key => {
terminalOutput.innerHTML += `
});
terminalOutput.innerHTML += '
},
"description": "Mostra esta mensagem de ajuda"
},
```
>[!NOTE]
>para entrar no cmd e testa é necessario vc clicar no botão que está girando
>
## Usando o Particles
```html
particlesJS.load('particles-js', 'json/particles.json', function () {
console.log('particles.json loaded...');
});
```
>[!NOTE]
>para usar alterar a estrutura morfologia do particles `json/particles.json`
## Licença
