The developement portfolio of Paul Wheatcroft
The live site has been deployed to https://www.paulwheatcroft.me/
The site has been designed as a mobile first project. The site was easy to then render on a desktop due to it's simplicity. The only changes were to add a fixed background on desktop as this isn't supported on iOS, to ensure the text was contained withing a readable width.
The layout may extensive use of Boostrap. This includes a sticky header to facilitate quick access back to the top of the site.
WOW.js was used to ensure content is loaded only when needed and animate.css was used to the site animation.
| Description | Hex Colour Value |
|---|---|
| Dark Grey | #505050 |
| Off Whilte | #FCFCFC |
| Pink | #FFE2E2 |
This is a simple single page website.
The site was created initially using Figma https://www.figma.com/file/LT6uZztUxK6SxsdYbF7R7q/Paul-Wheatcroft?node-id=1%3A2
- HTML5
- CSS3
- Bootstrap 4.4.1: Bootstrap was used to assist with the framework build and responsiveness of the website
- Google Fonts: Google fonts were used to import the 'Roboto' (paragraph text) and 'Rokkitt' (headings) fonts into the style.css file which is used on all pages throughout the project
- Font Awesome: Font Awesome was used on all pages throughout the website for social media icons
- Animate.css: Animate.css was used for the site animation
- WOW.js: WOW.js was used to ensure content only loads as required
- Git: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub
- Gitpod: Gitpod was used as the development environment
- GitHub: GitHub is used to store the projects code after being pushed from Git
- Photoshop: Photoshop was used extensively to create artist images including the hero images
- Figma: Figma was used to create the wireframes during the design process
- Windows (multiple computers)
- Internet Explorer 11
- Microsoft Edge
- Chrome
- Firefox
- Opera
- macOS (MacBook Air and iMac)
- Safari
- Chrome
- Android (OPPO Reno 2, Nokia 3.2, Huawei P Smart 2019)
- Native OPPO handset browser
- Chrome browser
- iOS (iPhone 7, iPhoneX, iPhone SE)
- Safari
Fixed backgrounds to not display on iOS devices. Therefore this behaviour was removed from the mobile experience.
The project was started using the The Code Institute's Gitpod Full Template.
The template is integrated with Bootstrap which was used throught the project for the structure and layout of the website.