Colin Malcolm's Portfolio
Overview
This application is a virtual representation of my work and personality combining my projects, contact information, resume, and skill set in to a react app using TailwindCSS.
Deployed Site:
http://iamcolinmalcolm.surge.sh/
MVP
- Create a react application that allows the user to see a detailed single page representation of my work and personality.
- Create a form that will allow the user to contact me.
- Responsive design to fit on both desktop and mobile.
Libraries and Dependencies
Tailwind - tailwind is AirBnB's CSS styling tool.
React - allows us to build Frontend.
React Router - used for Routes.
Wireframes
Mobile:
Desktop:
Tablet:
Component Hierarchy
src
|__ Components/
|__ About.jsx
|__ Contact
|__ Footer
|__ Header
|__ Projects
|__ Resume
|__ Title
|__ index.css
|__ index.html
|__ tailwind.css
|__ tailwind.output.css
Component Breakdown
| Component | Type | State | Props | Description |
|---|---|---|---|---|
| Header | functional | n | n | The header will contain the navigation and logo. |
| Footer | functional | y | n | This holds the links to social |
| App | functional | y | y | Holds the base of the code including routes |
| About | functional | n | n | About component. |
| Projects | functional | n | n | My Projects. |
| Title | functional | n | n | A title in my projects section. |
| About | functional | n | n | form to reach me. |
Time Estimates
| Task | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Add header compoent | M | 3 hrs | 2 hrs | hrs |
| Render images | H | 1 hrs | 1 hrs | hrs |
| Create Links | H | 1 hrs | 1 hrs | hrs |
| CSS | M | 5 hrs | 3 hrs | hr |
| Debugging | H | 3 hrs | 1 hrs | hrs |
| Deploy | H | 1 hrs | 1 hrs | hrs |
| Add Footer | M | 1 hrs | 1 hrs | hrs |
| Add Projects | M | 3 hrs | 2 hrs | hrs |
| Add About | M | 1 hrs | 1 hrs | hrs |
| TOTAL | 19 hrs | 13 hrs | hrs |
Post-MVP
Add more personal details to my about me including where I live, hobbies, career background