Uma homenagem especial para a minha amada esposa neste Dia dos Namorados!
Este projeto é um app bem simples criado para celebrar o amor, apresentando um contador do tempo exato do nosso relacionamento e um carrossel de fotos com memórias especiais. É uma surpresa personalizada feita com muito carinho.
- 🎉 Tela de Boas-Vindas: Uma entrada animada com corações caindo para iniciar a experiência
- ⏰ Contador de Tempo: Exibe há quanto tempo estamos juntos, com precisão de anos, meses, dias, horas, minutos e segundos
- 📸 Carrossel de Fotos: Um álbum de memórias visuais que mostra momentos importantes do nosso relacionamento
- 💌 Mensagem Romântica: Uma mensagem pessoal dedicada à minha esposa
- 🎵 Trilha Sonora: Um player de Spotify integrado para criar a atmosfera perfeita
| Tecnologia | Descrição |
|---|---|
| React | Biblioteca JavaScript para construção da interface do usuário |
| TypeScript | Superset do JavaScript que adiciona tipagem estática |
| Motion | Biblioteca de animação para React, usada para criar transições suaves e envolventes |
| date-fns | Biblioteca de manipulação de datas, utilizada para calcular e formatar o tempo de relacionamento de forma precisa |
| Tailwind CSS | Framework CSS utilitário para estilização rápida e responsiva |
| Shadcn/ui | Componentes de UI construídos com Tailwind CSS e Radix UI, usados para o carrossel |
Para rodar este projeto no seu ambiente de desenvolvimento:
git clone [email protected]:lukeskw/sweetheart.git
cd sweetheartnpm install
# ou
yarn installnpm run dev
# ou
yarn devO aplicativo estará disponível em http://localhost:5173
sweetheart/
├── src/
│ ├── ui/
│ │ ├── button.tsx
│ │ └── carousel.tsx
│ ├── lib/
│ │ └── utils.tsx
│ ├── hooks/
│ │ └── useTimeCounter.tsx
│ ├── components/
│ │ ├── EntranceScreen.tsx
│ │ ├── TimeCounter.tsx
│ │ ├── SpotifyFrame.tsx
│ │ ├── CarouselIndicators.tsx
│ │ ├── PhotoCarousel.tsx
│ │ ├── FallingHeart.tsx
│ │ ├── HeartRain.tsx
│ │ ├── RomanticMemorial.tsx
│ │ └── RomanticMessage.tsx
│ ├── data/
│ │ └── photo.ts
│ ├── styles/
│ └── App.tsx
├── public/
├── package.json
└── README.md
Este é um projeto pessoal e íntimo, mas fique à vontade para se inspirar e criar sua própria versão para sua pessoa especial! 💕
Este projeto é de uso pessoal e foi criado com amor. ❤️
Feito com todo o meu amor pra Jaque ❣
Por Luke 💝
"O amor não é apenas olhar um para o outro, é olhar juntos na mesma direção."