Official website of the Frogdevs TCC team. Landing page in SPA (Single Page Application) format with important information, such as work done for the company Equilíbrio Natural (Natural Balance) and team members.
- 🎨 Light and dark themes
- 🌎 Internationalization
- ✨ Interactive cards
Front-end: Vite, Vue, UnoCSS, VueUse and Vue I18n
What challenges were faced and how were they overcome?
It was a big challenge to project the web design, being a process that involved a lot of creativity and inspirations, such as: Turbo and the [Steam Deck] website (https://www.steamdeck.com/). A unique identity was sought to represent the team with strong, eye-catching colors that would work well in both a light and dark theme. In addition, we sought a modern aesthetic using: Gradients, vectors and animations.
The logic for closing the modals was done manually. First we get the area and the coordinates of the modal. Then, we observe the user's click. If this click is made outside the area of the modal, it is closed.
Adding internationalization to a website is a challenge that requires dedication and attention to detail. This involves adapting the content of the website to different languages and cultures in order to serve a global audience.
What optimizations have been made in the code?
The Pnpm package manager was chosen for the project because it offers cold and hot caching. Pnpm is 3x faster and more efficient than Npm and faster than Yarn. Dealing with numerous libraries and modules was an easier and safer task with this tool.
Vite is a tool with the utility to take care of the application bundle. It provides better optimization techniques, resulting in higher application performance both in development and production form for the end user.
The site was built using the Mobile First concept. This concept refers to creating any design that prioritizes the experience on mobile devices, while making adaptations for higher resolutions. This allows the site to be completely responsive and adaptable to other screen resolutions, allowing for greater customer inclusion.
We use Netlify for the online implementation of the site
**Note: You must have the Pnpm package manager. See how to install.
Clone the project
git clone https://github.com/FrogDevs/website.gitGo to the project directory
cd websiteInstall the dependencies
``bash pnpm i
Start the server
```bash
pnpm dev
See other related projects
- Web Design and Front-end: @viniciuscosta
“You have to be burning with an idea, or a problem, or a wrong that you want to right. If you’re not passionate enough from the start, you’ll never stick it out.”
Steve Jobs