Please note: To open any links in this document in a new browser tab, please press CTRL + Click.
Sean Mc is a portfolio site built using React.
Project overview
UX
Technologies Used
Deployment
Credits
Deployment
Credits
Sean Mc is a portfolio site built to demonstrate the skills that I have attained as a developer and digital designer.
| As a/an... | I want the ability to... |
|---|---|
| --- | --- |
| Casual User | easily navigate the site to find what I am looking for quickly |
| Casual User | view the site on all screen sizes |
| Casual User | view contact information such as social media links |
| Casual User | contact the author using a form |
| Opportunities | Importance | Viability / Feasibility |
|---|---|---|
| Simple Clean UI | 5 | 5 |
| Clearly indicate purpose | 5 | 5 |
-
Business Goals: Provide a platform to demonstrate capability to produce high quality front end web development projects.
-
Audience: The audience are anyone with an interest in web development and digital design, specifically those seeking to hire developers.
- The site is fully responsive and intuitive with prompts to explore projects and contact the author.
- The site uses a simple structure, a navbar is at the top of the page which allow a user to navigate the site. As there are only three links a burger menu has not been utilized.
- The work section uses sliders to showcase indivual projects/collaborative projects and other aspects of digital design.
- A footer at the bottom provides links to social media pages and a form to enable the user to contact the author.
- The site is kept as simple as possible using links to navigate to different sections on a single page.
- Buttons/modals/links are consistant in design.
The jumping off point for the site is a project on the React course offered by Dev Ed.
I used Figma to create some of the elements such as the logo design.
The site was originall a multi page design but to provide a cleaner sleeker design a single page format was utilized using sliders to demonstrate a large amount of work.
- The number is fonts is kept at a minimum as well as using a limited and consistant color scheme.
A standard layout is fully responsive on mobile devices and larger screens.
Colors are kept to a minimum and inspired by neon street signs. Color scheme can be found on my Coolors profile
2 Google Fonts were used across the site:
- Comfortaa : Logo & Headings, used for it's rounded relaxed style.
- Inter : Body, used for it's excellent readability.
All images are the authors own. Logo, hero image and favicon are also produced by the author using Affinity Design. Image above photo produced using Affinity Photo.
back to top
-
The navigation an animated logo in the top left corner linked to the top of the page. Navigation links are in the top right. On loading the homepage the logo will animate, weaving itself to completion while flickering until the end of the animation.
-
On small devices the logo is displayed above the links.
- List item links are available.
- Work
- About
- Contact
When a link is hovered over it will turn to yellow and and a drop shadow will emerge.
- Three sliders showcase individual, collaborative and miscellaneus designs.
- The sliders are created using SwiperJS, the navigation elements are customised using CSS.
- Each project in the first two sliders features an image illustrating responsiveness, some text desciption, links to the project and repo and a line under the heading, all animated using Framer Motion.
- The third slider features images with a button link inside a circular div.
- Toggles are used to expand and contract various answers to FAQ's. The various elements are animated using useState and Framer Motion.
The footer features:
- form for users to submit queries using EmailJS.
- social links.
Above the footer is an SVG which when hovered over changes colours and illuminates the image from which it was created. The base image was created using Affinity Photo and the SVG was created using Affinity Designer.
- In the future I would like to allow users to select a color theme preference.
back to top
-
HTML - HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages.
-
CSS (Cascading Style Sheets) - CSS describes how HTML elements are to be displayed on screen.
-
React - Used throughout the site
-
JavaScript - Used for various animations and functions.
-
Google Fonts - Google Fonts is a library of free licensed font families.
-
Github Pages - Used to host the site.
-
Gitpod - Code Editor used to create the site.
-
GitHub - Used to host repos for the site.
-
EmailJS is used to allow users to email the author.
-
Screen Recorder - Used to make GIFs for README.
-
Chrome/Firefox/Bing DevTools - Regularly used to test the site (Primarily Chrome).
-
W3C Markup Validation Service - Used to test code for errors.
-
Affinity Designer - Illustration software used to create logos and icons.
-
Figma - Collaborative interface design tool used for creating wireframes as well logos and SVGs.
-
Tinypng - Used to compress images.
-
Croppola - Used to crop images.
-
Convertio is used to convert images to webp format.
- React Bootstrap - Used to aid responsive design and for componants such as sliders and carousels.
-
Git - used for version control
-
Branches were used to experiment with the single page layout.
Add URL to package.json:
'homepage': 'https://[USERNAME].github.io/[PROJECTNAME],
Install github pages npm package via CLI:
npm install gh-pages --save-dev
Add sripts to package.json under 'scripts':
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
In the CLI run:
npm run deploy
-
Google Fonts for font styles; https://fonts.google.com/
-
Youtube; Code to provide functionality to from PedroTech
-
Various icons sourced from Devicon
-
Various aspects modified from portfolio project by DevEd