The resume is designed to showcase my technology capability and experience through a professional web design built upon HTML, CSS and JavaScript. The web design is important to demonstrate my serious committment to a career change from a Business Operations Management Consultant to a Full Stack Developer.
- An all inclusive resume design reminds the user of past, present and future information technology committments
- Navigation is simple with a quality finishing touch
- Photo image of the developer is clear and professional
- Understand the background to the developer through setting out their credentials
- Work history disclosure helps create a fuller picture of the developers overall capability
- Prospective clients can quickly access information upon capability, skills and achievements
- Web based design makes the resume easily portable
- Content rich design saves prospective clients from repeated or unnecesary calls and emails
My wireframe mock-up designs have been created in Balsamiq to showcase the 'Resume' website responsivenesson mobile, tablet and desktop devices.
• Resume
- To create a 'one stop shop' for all information to showcase a developers profile
- Personal information and a summary of the developers background to appear on the homepage
- Ease of navigation required to enable the user to move around within the resume wthout getting lost in detail
- Developers image to be personal & professional and to be on show in all important pages of the resume
- A dedicated resume page that includes a work history, skills reference and a summary project portfolio
- Contact with the developer to intorduce new project ideas
- To understand any conferences / meets ups attended and groups / professional societies the developer belongs too
- Access to the developers GitHub Repository to understand projects worked on with demonstrable evidence of languages used
- User to download the developers latest cv in pdf format
- Dark mode capability will help power saving and user accessibiity
Bootstrap was the chosen framework for styling my project. I used the Bootstrap grid extensively to support responsiveness on mobile, tablet and desktop devices.
Colours used in this project were sourced from MyColor Space. Essentially, the colours are seeking to capture a combination of fresh and earthy tones to support the key attrbutes of the developer. Energy, intelligence, innovation and secure.
| Colour | Hex Code |
|---|---|
| Charcoal Grey | #676767 |
| Medium Grey | #878F99 |
| Gun Metal Grey | #525252 |
| Dark Cloud Grey | #555555 |
| Steel Grey | #8F8F8F |
| Pale Grey | #F4F4F4 |
| White | #FFFFFF |
| Off White | #FAFAFA |
| Dark Green | #205E6B |
| Teal | #2794A9 |
| Purple | #765EC2 |
| Dark Purple | #50394C |
| Cappucino Brown | #A96E5B |
- Dark Mode
| Colour | Hex Code |
|---|---|
| Black 20% Hue | #333333 |
| Black 30% Hue | #4D4D4D |
| Black 40% Hue | #666666 |
| Black 50% Hue | #808080 |
| Black 60% Hue | #999999 |
| Black 70% Hue | #B3B3B3 |
| Light Grey | #878F99 |
| Light Purple | #525252 |
Roboto & Exo fonts were used throughout this project.
Font Awesome 5 icon graphics were used in conjunction with Bootstrap 4, primarily to support information section headers
| Page | Function | Font |
|---|---|---|
| All pages | Home menu item | fa fa-home |
| All pages | Resume menu item | fa fa-graduation |
| All pages | Contact menu item | far fa-comment |
| All pages | Interests menu item | fa fa-cog |
| All pages | Github menu item | fab fa-github |
| All pages | Download CV menu item | fa fa-download |
| All pages | Footer - Download my CV | fa fa-download |
| All pages | Footer - MySocial - LinkedIn | fab fa-linkedin |
| All pages | Footer - MySocial - GitHub | fab fa-github |
| index.html | 'About Me' - What do i do? | fa fa-question |
| index.html | 'About Me' - How do i do it? | fa fa-thumbs-up |
| index.html | 'About Me' - Why hire me? | fas fa-eye |
| resume.html | Front End Skills | fa fa-tv |
| resume.html | Back End Skills | fas fa-cogs |
| resume.html | Databases | fas-fa-database |
| interests.html | My Groups & Societies | fa fa-users |
For tablet and desktop views, the navbar offers 6 functions on a horizontal view. For mobile devices, all the same options collapse into a responsive design.
- Developer Brand Image
- Home
- Resume
- Contact
- Interests
- GitHub
- Download CV
• HTML used as the markup language
• CSS3 used to style the HTML
• JavaScript used mostly for DOM manipulation. cdnjs.cloudflare.com used to animate .hover function on navigation menu elements
• Font Awesome to provide the icon set for Re-Boot website
• Google Fonts provided the fonts Mukta & sans-serif used throughout the project
• jQuery is used to manipulate the DOM, for example buttons, and showing / hiding elements
• Bootstrap to enable ease of website responsiveness and simplify coding structure
• AWS Cloud9 a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser.
• Balsamiq is a small graphical tool to sketch out user interfaces, for websites and web / desktop / mobile applications and used to visualise my project through mock-up design.
• Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
• GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.
• Jigsaw - CSS validation this validator checks the markup validity of CSS style sheet and ensure coding convention is upheld
• JS Hint a tool that helps to detect errors and potential problems in the javascript code
• W3C - HTML validation this validator checks the markup validity of HTML web documents
Home (index.html)
- Add profile image, split header on 1/3 - 2/3 ratio
- Logo picture added with anchor to take user to home page
- Include resume owner name and title
- Dark mode button, when clicked will take user to dark mode function
- Add menu > Home, Resume, Contact and DownloadCV options with page links
- Add .hover effect to navigation menu items
- Add to display copyright data and social media links
- Fill the with information on resume owner
- Create a
class thats positioned in middle of page setting out 3 reasons to hire -
class follows a 1/3 - 2/3 ratio design - Left side (1/3) = Personal information i.e. Name, address, etc
- Right side (2/3) - Summary narrative to support 3 reasons to hire
- Footer provides a summary narrative on developer capability, link to download CV and social media links
Resume (resume.html)
- Copy and from the index.html page
- Dark mode button, when clicked will take user to dark mode function
- Create a work history timeline and a skill set summary
- Create a
class thats positioned in middle of page setting out 3 tier architecture that forms backbone of developers skillset -
class follows a 1/3 - 2/3 ratio design - Left side (1/3) = work history timeline i.e. Dates, Employer name & role title
- Right side (2/3) - Skiils Set Summary narrative to cover both Front End, Back End and Databases capability
- Add resume skills (Refer below)
| Product | Class |
|---|---|
| HTML5 | Front End |
| Bootstrap 4 | Front End |
| CSS3 | Front End |
| SASS | Front End |
| Materialize | Front End |
| Javascript | Front & Back End |
| jQuery | Front End |
| D3.js | Front End |
| DC.js | Front End |
| Python 3 | Back End |
| Django | Back End |
| Flask | Back End |
| MySQL | Database (Relational) |
| MongoDB | Database (NoSQL) |
| postgreSQL | Database (Relational) |
| Heroku | Plaform as a Service (PaaS) & Hosting |
| Git | Version Control |
| GitHub | Hosting |
| AWS (IDE, IAM & S3) | Cloud based products |
| Balsamiq | Wireframe & Mock up's |
| Jasmine | Testing Javascript |
| TravisCI | Testing Software |
| Stripe | Payments Software |
| Slack | Collaboration Software |
- 'SR only' span class to be used to help visually impaired users
- My Portfolio includes all projects completed to date. The flip side of each card design allows the user to access both live project and repo code held in GitHub
- Soft skills summary on leadership, team work, problem solving, critical thinking, creativity and time management captured with respective proficiency ratings
- Footer provides a summary narrative on developer capability, link to download CV and social media links
Contact (contact.html)
- Copy and from the index.html page
- Dark mode button, when clicked will take user to dark mode function
- Create a
class thats positioned in middle of page - Add a class with preset snippet to include following:
- User name / Email / Project Description
- Add button to allow user to send project request, fire off to server & return information
- Footer provides a summary narrative on developer capability, link to download CV and social media links
Interests (interests.html)
- (1/3 page) Google Maps API used to support dropping pins in locations where the developer has attended conferences and meet up's
- (2/3 page) Container for 'My Groups & Societies' that includes 4 notable items of interest to the developer
- Dark mode button, when clicked will take user to dark mode function
- Footer provides a summary narrative on developer capability, link to download CV and social media links
GitHub (github.html)
- Dark mode button, when clicked will take user to dark mode function
- Link to GitHub created to allow user to view on Repo data or use an input box to search for other developer repo'social
- A list of repo's will apeear for the user to view and clickto select
- Footer provides a summary narrative on developer capability, link to download CV and social media links
Download CV
- Provide a cv in PDF format
- Links to cv appear in footer that is prewsnt on all html pages
- Add target="_blank" to ensure the cv opens up in a different browsers
User acceptance testing control document created in MS Excel. Key tests created to ensure the software performs consistently on different browser platforms. Any deviation from the intended design will be captured in the test matrix.
The following browsers were used in testing the resume application. Internet Explorer was out of scope for testing due to obsolete capability
| platform | version |
|---|---|
| Chrome | 80.0.3987.87 |
| Edge | 44.18362.449.0 |
| Firefox | 74.0.2 |
| Safari | 12.4.5 |
| Opera | 66.0.3515.72 |
The following media queries were added to improve the project responsiveness on all tested devices.
| Media Query | Device | Class | Comments |
|---|---|---|---|
| min-width 375px & landscape | Mobile | .skills |
padding-left: 1.35rem |
| min-width 375px & landscape | Mobile | .fa-bolt |
font-size: 1.1rem, padding-left: 2px |
| min-width 375px & landscape | Mobile | .fa-github |
font-size: 1.1rem, padding-left: 2px |
| min-width 375px & landscape | Mobile | .project-text |
font-size: 1rem, display: flex, align-items: center, justify-content: center |
| min-width 375px & landscape | Mobile | .text |
align-items: center, padding-left: 0 |
| min-width 768px | Tablet | .skills |
padding-left: 1.7rem |
| min-width 768px & portrait | Tablet | .skills |
padding-left: 4rem |
| min-width 768px & portrait | Tablet | .projects |
font-size: 1rem |
| min-width 768px & portrait | Tablet | .fa-bolt |
font-size: 1rem |
| min-width 768px & portrait | Tablet | .fa-github |
font-size: 1rem |
| min-width 768px & portrait | Tablet | .project-text |
font-size: 1rem |
| min-width 992px | Tablet | .center-form |
padding-top: 1.875rem, min-height: 15rem, margin: 0 auto, max-width: 50% |
| min-width 1024px | Tablet | .fa-bolt |
font-size: 2rem, margin-left: 0.5rem |
| min-width 1024px | Tablet | .fa-github |
font-size: 2rem, margin-left: 0.5rem |
| min-width 1024px | Tablet | .project-text |
font-size: 2rem |
| min-width 1200px | Desktop | .skills |
padding-left: 1.25rem |
| min-width 700px & portrait | Desktop | .skills |
padding-left: 1.75rem |
| min-width 700px & portrait | Desktop | .fa-bolt |
font-size: 0.95rem |
| min-width 700px & portrait | Desktop | .fa-github |
font-size: 0.95rem |
| min-width 700px & portrait | Desktop | .project-text |
font-size: 0.95rem |
This project was developed using the AWS Cloud9 IDE, committed to git and pushed to GitHub using the built in function within cloud9.
To deploy resume to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select Spagettileg / resume
- From the menu items near the top of the page, select Settings
- Scroll down to the GitHub Pages section
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, resume is now deployed
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website
To clone this project from GitHub:
- Follow this link to the resume GitHub repository
- Under the repository name, click Clone or download
- In the Clone with HTTPs section, copy the clone URL for the repository
- In your local IDE open a new terminal in Ubuntu Bash
- Change the current working directory to the location where you want the cloned directory to be made
- Type
git cloneplus paste the URL you copied in Step 3
git clone https://github.com/USERNAME/REPOSITORY
7. Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here.
Card Flip sourced from W3Schools.com to help showcase my skills on resume.html Image Hover Overlay} sourced from W3Schools.com to create a fade transition to reverse of image card in my portfolio, resume.html
- Software logo's appearing in resume.html page sourced from Google images
- My Portfolio images appearing in resume.html sourced from developers GitHub Repo
- Map appearing in interests.html sourced from Google Maps Platform
Thanks to Matt Rudge, Timmy O'Mahony & Brian O'Grady (all Code Institute) for their time, suggestions, and constructive feedback!
Big thanks to my mentor Theo Despoudis on ongoing technical guidance.