Team Red !Team red app logo
Basic website introducing Team Red - group of React enthusiastics. Feel free to take a look.
Team Red was created in React.js environment. As it was decided not to use any librares, whole styling were made with simple css. Logo was provided with Photoshop graphical programme. As reduced weight of memory was required, .svg format was chosen to display the image.
- React 16.13.1,
- CSS3,
- Photoshop 21.1.2
To run the Team Red (team-red-www) repository files to an empty chosen folder. Enter the folder via console (ex. 'Anaconda Prompt') by comand cd ./foldername, where foldername is the name of your new created folder and simply type npm start.
The aplication is responsive - it works well with big (>800px) or small screens (500-800px). Responsitivity issue were solved with usual 'vw', 'vh' and also css media queries.
1 viewport width (vw) is equal to 1% of the viewport’s width. The units differ from percentages because they are always relative to the viewport, whereas a percentage is relative to the element’s parent container.
Two viewport units are available within the css code:
- vw: viewport width,
- vh: viewport height.
Team Red has the fundamental component App.js rendered in index.js. In the App component is rendered Header.js, Content.js and Footer.js components. In the Header.js is rendered ToggleMenu.js and ToggleList.js component. ToggleMenu holds the state of header navigation within small devices and provides navigation bar for larger screens. ToggleList provides visualisation of the list, when the state of ToggleMenu allows. MembersList.js is maintained in Content component. Components are held in seperated folder to maintain application visuality.
-index.js
- App.js
- Header:
- ToggleMenu
- ToggleList
- Content
- MembersList
- Footer
- Header:
- styling
- update data.json with information about all contributors