Inspiration

We were inspired to make this website mainly in order to showcase our achievements - we had just started using React, and there wasn't any better way to do it than to create a pod portfolio site which sets the framework for all the other exciting things which we are going to be creating! Thank you so much for reviewing.

What it does

It basically shows all of our pod members as well as our projects on a nicely formatted page with some really interesting special effects!

How we built it

Our foundation was on create-react-app which we used to modify our prototype (which was initially built using HTML and CSS only) and then serve it up using the React view. That's what we did initially, then we started using react-bootstrap and then integrated it with node-sass, react-snowflakes, and react-typewriter in order to create all the special features which you see. Our project relies heavily on the foundation of componentization, which simply means modularization where everything is integrated but easily navigable, and images are converted first into usable HTML components before importing those components into more actionable, components further up the hierarchy of React.

Challenges we ran into

We just didn't talk to each other enough! Everyone was so quiet and at the end I was thrilled, we all thought our project was amazing.

Accomplishments that we're proud of

We're proud of being able to create a website from scratch, we're proud of being able to use flexboxes to create adaptability for different screen sizes, and most of all we appreciate all the help which we've gotten in terms of git workflow questions.

What we learned

We learned so much, specifically about how to integrate a href links into our contact form, creating webpages using the react-bootstrap library which allows us to center everything in a responsive container very neatly, and automatically classify things as toggle buttons, rows, columns, etc. It was amazing.

What's next for Open-Sourced Olaf's House - Pod Website

We're just going to keep updating it with every project, stay tuned! Actually, since everything is integrated with flexbox we can just keep updating our JSON files and maybe add some more fun special effects. Maybe make it more than just one long page and instead change it into different sections of the same, single-page website!

Built With

  • create-react-app
  • node-sass
  • react-bootstrap
  • react-scripts
  • react-snowflakes
  • react-typewriter
  • sass
  • scss
Share this project:

Updates