Git Product home page Git Product logo

Paul Wheatcroft

The developement portfolio of Paul Wheatcroft

The live site has been deployed to https://www.paulwheatcroft.me/

Design Choices

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

Structure

This is a simple single page website.

Wireframing

The site was created initially using Figma https://www.figma.com/file/LT6uZztUxK6SxsdYbF7R7q/Paul-Wheatcroft?node-id=1%3A2

Technologies

Languages Used

  • HTML5
  • CSS3

Frameworks, Libraries & Programs Used

  • 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

Testing

  • 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

Bugs and issues

Fixed backgrounds to not display on iOS devices. Therefore this behaviour was removed from the mobile experience.

Acknowledgements

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.

Paul Wheatcroft's Projects

Paul Wheatcroft doesnโ€™t have any public repositories yet.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.