Frontend Nanodegree Mobile Portfolio

Frontend Nanodegree Mobile Portfolio
Alternatives To Frontend Nanodegree Mobile Portfolio
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
18 days ago2lgpl-3.0JavaScript
The personal website/portfolio template by Hashir Shoaib. Built using React and Bootstrap.
Agency Jekyll Theme808
7 months ago30apache-2.0JavaScript
Agency Theme for Jekyll
Developer Theme602
14 days ago24JavaScript
FREE Bootstrap 5 Portfolio Theme for Developers -
Developer Portfolio532
a month ago1apache-2.0TypeScript
Software Developer Portfolio Template built with react.js and next.js bootstrap that helps you showcase your work and skills as a software developer.
a month ago13mitHTML
Personal Portfolio Website
Portio Hugo419
14 days ago15mitHTML
Portio Hugo is a simple, minimal and responsive Portfolio Hugo Theme. Portio Hugo is well organized, well-formatted, and named accordingly so it’s easy to change any and all of the design. Portio is built with Bootstrap 4. You can customize it very easily to fit your needs.
React Portfolio342
2 months ago1mitJavaScript
Simple portfolio template built with reactjs
Frontend Nanodegree Mobile Portfolio328
a year ago41JavaScript
8 months ago9mitCSS
A minimalist, responsive portfolio theme for Jekyll with Bootstrap
Stylish Portfolio Jekyll214
5 years ago3apache-2.0HTML
A Jekyll implementation of the Stylish Portfolio template by Start Bootstrap
Alternatives To Frontend Nanodegree Mobile Portfolio
Select To Compare

Alternative Project Comparisons

Website Performance Optimization portfolio project

Your challenge, if you wish to accept it (and we sure hope you will), is to optimize this online portfolio for speed! In particular, optimize the critical rendering path and make this page render as quickly as possible by applying the techniques you've picked up in the Critical Rendering Path course.

To get started, check out the repository and inspect the code.

Getting started

Part 1: Optimize PageSpeed Insights score for index.html

Some useful tips to help you get started:

  1. Check out the repository
  2. To inspect the site on your phone, you can run a local server
$> cd /path/to/your-project-folder
$> python -m SimpleHTTPServer 8080
  1. Open a browser and visit localhost:8080
  2. Download and install ngrok to the top-level of your project directory to make your local server accessible remotely.
$> cd /path/to/your-project-folder
$> ./ngrok http 8080
  1. Copy the public URL ngrok gives you and try running it through PageSpeed Insights! Optional: More on integrating ngrok, Grunt and PageSpeed.

Profile, optimize, measure... and then lather, rinse, and repeat. Good luck!

Part 2: Optimize Frames per Second in pizza.html

To optimize views/pizza.html, you will need to modify views/js/main.js until your frames per second rate is 60 fps or higher. You will find instructive comments in main.js.

You might find the FPS Counter/HUD Display useful in Chrome developer tools described here: Chrome Dev Tools tips-and-tricks.

Optimization Tips and Tricks

Customization with Bootstrap

The portfolio was built on Twitter's Bootstrap framework. All custom styles are in dist/css/portfolio.css in the portfolio repo.

Archival Note

This repository is deprecated; therefore, we are going to archive it. However, learners will be able to fork it to their personal Github account but cannot submit PRs to this repository. If you have any issues or suggestions to make, feel free to:

Popular Bootstrap Projects
Popular Portfolio Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.