#36daysoftype is a portfolio website designed for a collection of letters created for the online challenge: #36daysoftype 2022.
#36daysoftype MVP will include an playful homepage filled the colorful buttons for each letter. Each button takes you to see the video of the letter created in Touchdesigner audio-reactive visuals.
- Creating a website that allows users to see online project: #36daysoftype.
- Implementing a container that changes video, based on which button clicked.
- The website will have a light and dark mode.
| Library | Description |
|---|---|
| React | A free and open-source front-end JavaScript library for building user interfaces or UI components, maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. |
| React Router + Dom | React Router is a collection of navigational components that compose declaratively with your application and enables you to implement dynamic routing in a web app |
| Tailwind CSS | A utility-first CSS framework for rapidly building custom user interfaces. |
Desktop View
│ ├── App.css
│ ├── App.js
│ ├── components
│ │ ├── ButtonJexica
│ │ │ └── ButtonJexica.jsx
│ │ ├── ButtonMain
│ │ │ └── ButtonMain.jsx
│ │ ├── HomeButton
│ │ │ └── HomeButton.jsx
│ │ ├── Layout
│ │ │ └── Layout.jsx
│ │ ├── LetterContainer
│ │ │ └── LetterContainer.jsx
│ │ └── SideNav
│ │ └── SideNav.jsx
│ ├── index.css
│ ├── index.js
│ ├── screens
│ │ ├── About
│ │ │ └── About.jsx
│ │ ├── Letter
│ │ │ ├── Letter.css
│ │ │ └── Letter.jsx
│ │ └── Main
│ │ ├── Main.css
│ │ └── Main.jsx
│ └── utils
│ └── colorClasses.js
| Task | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Wireframe + Diagrams | M | 3 hrs | 5 hrs | X hrs |
| Create Components | H | 3 hrs | 3 hrs | X hrs |
| Create Screens | H | 3 hrs | 3 hrs | X hrs |
| Style+ Functionality | H | 6 hrs | 3 hrs | X hrs |
| TOTAL | 12 hrs | 14 hrs | XX hrs |
- Adding more movement and playful interactive functionality to the letter buttons.
CODE SNIPPET