This website is made by Dawson and Mason for the 2021-2022 FBLA competition.
FBLA 2022 Website Design Prompt
Create a website for a new business in your local community, region, or state. The website must include a business name, photos, and description of the entity. The website must include a minimum of four web pages, including a contact us page and embedded features. The website should feature social media and marketing material to promote the new business- Our website is made for a local chart-creation software that allows the user to design a variety of different charts using advanced technology, including AR and VR software.
- We chose to do a software based website for a number of reasons. First and foremost, a purely software-based website gives us the ability to create fully custom graphics. If we were to do a more "normal" business, we would be forced to spend time searching for stock images and other images that make a website feel plain.
- We both enjoy math and are both currently taking AP Statistics, so charts fit well with both of our interests. We wanted to create a website that would give us the opportunity to make our own icons, limit our use of stock photos, and create multiple different pricing plans. Chart creation is a relatively unique idea for a website that allows us to do all of those things.
When we signed up for the website design event at FBLA, we knew that there would be many competetitors who chose the route of Wix, Wordpress, or any similar alternatives. While we could have easily done that too, we decided to code the website from the ground up with the prioritization of our education in mind. It was super cool to learn about web development, and we learned way more than we ever would have learned using a website builder.
- Quantum chart is a svelte-based website. In the search for an ideal framework, we came across Svelte which seemed to offer nothing but benefits over other frameworks such as Next.js, Gatsby, base React, Vue, etc. Svelte is fast, clean, and powerful. This allows for our website to perform extremely well with lightning fast loading times.
- Due to our use of Svelte, it only seemed natural to use it in coordination with Sveltekit for useful features like server side rendering, flexible file routing, etc.
- For the CSS portion of our website, we decided to test out Tailwind. Tailwind made it incredibly easy to quickly set up custom classes for html elements while also helping us to remain consistent across the website. In hindsight, Tailwind was very helpful, but it does definietly make the sourcecode itself look very cluttered.
- Since we used Tailwind, we decided to also incorporate some of the stylistic choices from our TailwindUI non-exclusive license. TailwindUI was a very helpful reference, and it was nice to see examples from the creators of Tailwind.
- The website is deployed to the internet for free using Vercel. Vercel helps to develop Svelte so it worked perfectly.
Why did we choose certain elements, fonts, etc.
- For our font, we decided to use the Inter font. We chose this font not only because it is entirely open source and free, but also because it is beautful for web developmenet. The font is very sleek, consistent, and universal.
- In terms of our animations, we chose to include these to add uniqueness and engagement to our site compared to competitors. Website builders (probably) allow for animations to be built-in, but ours are customized using code so they are unlikley to be the same as other sites.
- We often use SVG waves between our element because it feels more natural as a transition and creates a more interesting transition as compared to an instant color change.
- On the home page of the site, there is a 3D panel. We chose to include this because it's unique and attracts attention while also looking pretty cool.