Boss Girl Suite 101

The 101 space for boss girls, productivity, aesthetics and everything in between.

Comment

Inspiration

The inspiration for this website is the thought that technology should empower how we feel and not just what we do. Usual productivity tools are monotonous, sharp and unfeeling. The Boss Girl Suite changes that. It combines aesthetics, mood and energy with productivity to create a feeling driven all in one tool.

What it does

To put it simply, it does everything a diva wants. Helps a girl keep in touch with her feelings through the journal and heart chart features, allows a hustler to let go of all the stress holding them back from success through the one-of-a-kind Float feature, lets every inner princess shine with the inbuilt photobooth, helps the academia romantic stay on track with the Hustle feature, and obviously helps the boss girls unwind with chill beats. Now, I know all the girls out there have different aesthetics so of course I had to let them customize their home pages ;)

How I built it

I first started by designing detailed mockups on Figma and Canva, focusing on visuals that aligns with the suite’s emotional empowerment purpose. Once I was happy with the designs, I translated the layout into HTML and styled it with CSS to preserve the aesthetic vision as best as I could. I then worked on the interactive and functional elements using JavaScript , with help from GitHub Copilot to streamline certain logic implementations and fine-tune responsive behaviors. Finally I refined the UI and UX details, ensuring the app was both cohesive, both visually and functionally.

Challenges we ran into

Since this is my first hackathon I ran into some challenges early on. I had trouble with the photobooth functionality, accessing the camera and downloading the photo strip. I also had some trouble with the layouts initially, as elements were overlapping and icons were not uniform. I had to learn how to animate gradients as well for this project.

Accomplishments that we're proud of

I'm definitely proud of the photobooth feature with respect to learning something new and implementing it in this project. I'm also proud of the float and heart chart features in terms of creativity, and I love the fact that the homepage is a little customizable, with the nicknames and gradients. I think it adds a cute, personal touch :)

What we learned

I definitely learned a lot of new things, I feel like I learned new features in both html and css that would up my front end design game a lot. Moving gradients, layouts, text appearances, etc. I also used new features like timers, accessing the camera and making text fade eventually that made this project fun.

What's next for Boss Girl Suite 101

I'm thinking of some new features to add :)) A timer/stopwatch feature (for sure), and a Pinterest style inspo-board, are some of the recent ideas.

Built With

Share this project:

Updates