nadiaidris/portfolio2020

Nadia Idris portfolio 2020-present

portfolio2020's Issues

Planner app page - 3d

• About project (component 1: title and bulleted list)

• About Planner app (component 2: title and paragraph)

• Features (component 1: title and bulleted list)

• Technologies (component 1: title and bulleted list)

• App (component 5: title, paragraph and image/gif)

• More coding projects (component 10: Title, rectangle images, horizontal scroll)

Nav bar disappears when dropdown open and scrolling

Cross browser compatibility issues (Firefox and Safari)

Safari and Firefox:

Repro steps

1. Open firefox
2. Load http://maretidris.com
3. Click on a TruckX
4. Scroll down to the bottom of the page and click on Design Projects -> Abbey Road Studios
5. Notice that it navigates to the correct destination page, however, the scroll to top event never fires.

Safari:

• When navigating to a destination page (after the site has loaded), the nav bar does not appear.
• When scroll down at least 64 px and then up again, then nav bar appears.

On a lightbox module, remove the ability to click on anywhere to close a module.

Home page design projects section with vertical scroll - 3d

Fix the title issue when landing on the portfolio first time

UAMP page - 4d

• About project (component 1: title and bulleted list)

• About TruckX (component 2: title and paragraph)

• User stories (component 2: title and paragraph)

• Requirements (component 2: title and paragraph)

• Wireframes (component 5: title, paragraph and image/gif)

• Interaction design (component 5: title, paragraph and image)

• Low fidelity prototype (component 6: Two columns. First column: title, paragraph. Second column: image/gif)

• Typography & colour theme (component 6: Two columns. First column: title, paragraph. Second column: image/gif)

• High fidelity mockups (component 7: title, paragraph and mobile image horizontal gallery)

• High fidelity prototype (component 6: Two columns. First column: title, paragraph. Second column: image/gif)

• More design projects (component 9: Title, rectangle images, horizontal scroll)

Whole World Band page - 4d

• About project (component 1: title and bulleted list)

• About WWB (component 2: title and paragraph)

• WWB customers (component 2: title and paragraph)

• Features list (component 1: title and bulleted list)

• High fidelity mockups (component 8: title, paragraph and web image horizontal gallery)

• More design projects (component 9: Title, rectangle images, horizontal scroll)

Make the navbar auto show/hide only when viewport is smaller than 600px and blur the larger viewport navbar

• Also change the navbar background to blurry when viewport is larger than 600px.

Home page recommendations section - 1d

About page - 3d

• Banner image with download resume button (component 11: Page title, button)
• Design cards (component 12: design cards)
• Things I do (component 13: Vertical title, bulleted list)
• Articles I wrote (component 13: Vertical title, bulleted list)

Use react router

We tried many different approaches that doesn't work.

1. Using setState() to update the page destination

And we settled on using a href and a query string target, but that causes a page reload.

My portfolio app page - 3d

• About project (component 1: title and bulleted list)

• About My portfolio app (component 2: title and paragraph)

• Features (component 1: title and bulleted list)

• Technologies (component 1: title and bulleted list)

• App (component 5: title, paragraph and image/gif)

• More coding projects (component 10: Title, rectangle images, horizontal scroll)

Abbey Road Studios page - 4d

• About project (component 1: title and bulleted list)

• About ABRS (component 2: title and paragraph)

• Personas (component 2: title and paragraph)

• Requirements (component 3: title and two column bulleted list)

• Old site (component 5: title, paragraph and image/gif)

• Sitemap (component 5: title, paragraph and image/gif)

• Typography & color theme (component 5: title, paragraph and image/gif)

• Interaction design (component 5: title, paragraph and image/gif)

• High fidelity mockups (component 8: title, paragraph and web image gallery)

• High fidelity prototype (component 5: title, paragraph and image/gif)

• More design projects component

Abbey Road Studios Image carousel doesn't hide the next button at the end

• Module open: It also shows empty page when I am the the end of the image carousel.
• Most likely has something to do with having 2 image carousels on the same page. This only happens on ABRS page.

Make responsive design work for 320px viewport

Fix back button handling for first page in history stack

Repro steps:

1. Open tab
2. Visit maretidris.com (this is Home)
3. Click on TruckX
4. Click on About

Expected behaviour:
Hold down back button. You should see Home, but it's missing.

Footer - 0.5 d

New email address for the resume: [email protected]

Weather app page - 4d

• About project (component 1: title and bulleted list)

• About Weather app (component 2: title and paragraph)

• Features (component 1: title and bulleted list)

• Technologies (component 1: title and bulleted list)

• App (component 5: title, paragraph and image/gif)

• More coding projects (component 10: Title, rectangle images, horizontal scroll)

Get nadiaIdris.com ready for Github pages

Home page code projects section with vertical scroll - 3d

Make the navbar auto show/hide only when viewport is smaller than 600px

Links to "design projects" and "coding projects" do not work (on homepage)

Repro steps

1. Load http://maretidris.com
2. Click on any of the "Design projects" and they give a 404 error
3. Same 404 error w/ the "Coding projects"

Strange thing is that when you use the menu to select a design or coding project, it works just fine!

Inmusik page - 4d

• About project (component 1: title and bulleted list)

• About Inmusik (component 2: title and paragraph)

• Multiple product launches (component 2: title and paragraph)

• Inmusik users (component 2: title and paragraph)

• Features list (component 2: title and paragraph)

• High level user flow (component 4: title and image)

• High fidelity mockups for web (component 8: title, paragraph and web image horizontal gallery)

• High fidelity mockups for iOS (component 7: title, paragraph and mobile image horizontal gallery)

• Articles about Inmusik/Emeraz (component 1: title and bulleted list)

• More design projects (component 9: Title, rectangle images, horizontal scroll)

Optimize image loading

FB recruiter saw problems on his machine (unknown internet connection speed) loading large images on the UAMP page.

1. Figure out ways to preload the images
2. Provide thumbnails / high res image bundles

Create a floating table of contents component on long pages

The idea is to have a floating table of contents that allows users to easily navigate to various parts of a page quickly. This persistent component would always be visible even as the user scrolls up and down the page, or selects an item from the TOC to go to.

Make dark theme for portfolio & give user ability to choose

1. https://css-tricks.com/updating-a-css-variable-with-javascript/
2. https://derekkedziora.com/blog/dark-mode-revisited

Banner section with type.js animation - 2d

Use SVG animation for logo and placeholder-loading images

On the home page, display a short video of each app when hovering

TruckX page - 4d

Components to build:

• About project (component 1: title and bulleted list)

• About TruckX (component 2: title and paragraph)

• User stories (component 2: title and paragraph)

• Requirements (component 3: title and two column bulleted list)

• Truck driver paper logbook sheet (component 4: title and image)

• Information architecture (component 5: title, paragraph and image)

• Wireframes (component 5: title, paragraph and image)

• Interaction design (component 5: title, paragraph and image)

• Low fidelity prototype (component 6: Two columns. First column: title, paragraph. Second column: image/gif)

• High fidelity mockups (component 7: title, paragraph and mobile image gallery)

• High fidelity prototype (component 6: Two columns. First column: title, paragraph. Second column: image/gif)

• More design projects (component 9: Title, rectangle images, vertical scroll)

Navigation bar with auto hide/show animation - 3d