Skip to content

jexica-dev/36days_2022

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 

Repository files navigation

36daysoftype

#36daysoftype is a portfolio website designed for a collection of letters created for the online challenge: #36daysoftype 2022.

Deployed


MVP

#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.


Goals

  • 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.

Libraries and Dependencies

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.

Client (Front End)

Wireframes

Desktop

Desktop View

Component Tree

Component Tree Sample

Component Architecture


│   ├── 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
 

Time Estimates

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


Post-MVP

  • Adding more movement and playful interactive functionality to the letter buttons.

Code Showcase




CODE SNIPPET


Code Issues & Resolutions


About

36daysoftype

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published