nmoore-stem / lab_pages

Website Remix 2020 - update on an older website using older technologies

Greetings,
My name is Nick Moore and I am embarking on a monumental career change...

I am a Full Stack Designer who is coming from a Science, Technology, Engineering, and Math (STEM) background.

Currently, I operate my own consultancy which provides scientific guidance and assistance to analytical labs across the US. My contributions to my clientele range from training staff, calibrating analytical equipment, work-flow logistics, writing ISO17025-compliant SOPs, and coding/creating/automating results reporting.

Although I have taken much enjoyment and learned many things from my career, I am looking for new opportunities which align more with my inherent skills and pre-dispositons. Web development absolutely fits the bill.

I have always had an artistic inclination and feel at home delving into large, complex projects involving many small parts. As an analytical chemist, I was able to leverage some of my strengths towards my career, but there were still aspects of myself that were not being engaged through my work.

With web development, I am able to utilize more of my strengths (namely artistic and analytical) to work together in creating a final product.

What I use to create:

                       

What I am familiar with or plan to use more in future projects:

             

In Closing...

My pursuit for experience and gainful employment into web development has been an exciting journey. I am truly looking forward to joining a team and expanding my repertoire, and in turn, also expanding the capabilities of the company I find employment with.

I encourage you to look through my repositories and visit my portfolio webpage to see how I work.
Please contact me if I sound like someone you would like to have on your team.

lab_pages's Issues

Scroll margins need to be resolved

Scroll-bar margins are off now that the gap between the header was resolved- should be a simple correction in CSS

Revert all CSS changes made today (7/18) to master file

something went awry... check pull-request in css_updates branch for details.

Font size/ scaling in former graduate students drop down

Change font size to avoid scaling with vh - either set an em or vw value.

Revise/ Improve - <article> formatting in welcome section

font for headlines seems too small and scales too small with vw.
make more accessible by increasing font size, but allowing containing divs to resize fluidly w design

MOBILE site - replace px for some elements with vw

As window is resized larger than default galaxy S9 (>360px), many or all elements shift out of position and break design. These elements have all been placed using absolute px values. These might be able to be replaced with vw values in some instances in order to preserve design. For elements that cannot be fixed with vw values, consider using the value of "calc()" in CSS to aid in intended layout.

Publications section style update

Change whitesmoke BG and black text color to black BG and white text color for all links.

Visual grouping to Our Team section - add design element

Add a design element that aids in visual grouping of all information in this section. This could be done with 2px thick solid borders leading out from under the heading and group picture, going alongside the section content, then underlining the final parts. Need to refine heading in this section too. Current design is very in-congruent with overall design...

fix margin gap between scroll body and header (~1px or so)

There is a dimensional/ resizing property set to "vh" that needs to be changed. Resizing height of browser window is what creates this gap in formatting.

MOBILE publication tiles - links not working on all

The first publication tile in MOBILE view is working, but the others do not seem to have functionality. This could be either a width/height issue or a z-index issue.

Repo READ ME File

Make sure to add more detailed information concerning the:

• Purpose
• Planning
• Process

Add any further relevant information such as something new learned or any milestones or triumphs

Header links not working

Links not working when on the full publications list page. Should be an easy fix.

Lab Page - Misuse of HTML `<address>` element in footers

The HTML elements labeled as <address> within the footer of main lab page as well as the full publications page are being misused.
<address> is the containing element for individual lines of the contact information, but should be the parent container.
For phone number and email address, anchor elements should be the children of one containing <address> element for each item under contact info section in footer. Can also use div or span within address elements.

Lab Page - Address Image Performance Issues

All images need to be reassessed for all lab pages.
Actions to take:

• Resize all images appropriately: Take largest width or height that is displayed in final styles and resize source image to these dimensions.
• Consider re-compressing (from resized originals) all images into webp format

Because these images are not optimized, it is causing many overflow issues on elements that should not be overflowing.
One example is the placeholder image used in the Alumni section drop-down for past graduates that do not have a portrait image on file.

MOBILE menu - optimize style

When mobile menu is closed, it is just hidden from view. Steps must be taken to ensure that this hidden element will not interfere with interactivity of other elements. First approach will be to use z-index to ensure that while the menu is not open, it will not block/overlay interactivity of other elements.

scroll bar margins are off...

... placing the bottom portion of the scroll off-screen. modify CSS to fix issue

<p> font-size is not consistent in main sections

Welcome and research sections need to be the same size font for body content. Easy fix, when I have the time...

Alumni Heading in HTML

Inline style needs to be removed from main h2 in alumni section as it has negatively impacted the FULL resolution page.

Footer Hover Style Fix

Footer (#right) with external links needs revision on hover style. Height for ::before needs to be removed, bottom needs to be at around 4px, and parent containers (anchor) needs to have position:relative added. This will resolve the issue of hover style crossing through the anchor link text.

Refresh -> reset scroll location?

While navigating this website, using the back button (after clicking a few in-page anchor links) and refreshing the page keeps last # position. Should this behavior be modified, or left as is? More research needs to be done before making a decision on this issue.

Add click effect to carousel nav buttons

Add blck/gray ~2px outline shrinking into center of button from outside edge and fading away on click to give further visual cue to interactivity - confirm click effect.

Carousel button position needs to be fixed

After updating header stylings, the carousel buttons have moved out of place. Will need to modify placement to keep design symmetrical.

Interactivity UI visual cue on alumni accordians

might want to add animated transition (translate and box-shadow) on hover to give another visual cue besides the pointer mouse icon.

Massive functionality and appearance break on all pages

Things to do to resolve this issue:
-remove return to top on page refresh JS code
-change header back to sticky instead of fixed
(noticed two vertical scrollbars on main page)

Gotta find the issue and resolve ASAP

Width of drop-down menus in the Alumni section

Drop-down width is smaller than the width of the button.
Both widths should be the same.

Lab Page - Completely revise full publications page

Completely revise the "Full Publications" page for mobile resolution.
Many elements have a broken design and could use some more whitespace between text/content.
As this was an early project of mine, there are many misuses and unused declarations in style sheet.
These need to be refined.
Focus on elminating position:relative and position:absolute from element rules.

Revise HTML...

...to have welcome section follow the formatting of the research section (bg image inside section div)

XBrowser: Chromium/Brave writing-mode:sideways lr Publications page

CSS for date range on side of listing of publications had broken style as the unique declaration that works in FF does not work in chromium. Tried using -webkit prefix to fix, but did not work. Will have to return to later and fix.

Our Partners section heading is off - needs better styling

when browser is resized, the heading for this section is misaligned and cuts into the space reserved for logos. Probably has something to do with position:absolute...

Research Interests section needs CSS work

The height of elements within the research section respond to vh - this either need to be set as a static value or vw. The vh makes text flow out of the section when the height is reduced on browser window.

Restructuring Our Team section

Considering moving news and updates section above former students section.
For former students, it would be better to group them all together in an "Alumni" section which would receive its own anchor link (maybe drop down on the our team button in header). Alumni section should also be delineated by some design element whether it be a thin stroke border or a slight color difference grouping that section together.

Grouping heading tag elements (h1, h2, etc) to be consistent with markup/DOM

Would look better and be easier to modify later if all top headings inside "section" tag elements were the same heading tag. Also, make sure the smaller headings used for student/ people names are not used for the section headings so that modifying one will not affect the other.

Full publications HTML

Either links need to be added to HTML for full publications page listings, or links to PDF removed.
Might keep active links on recent publications and a handful past that and call it good.

Publication links need to have some stylings consolidated

classes such as research2-21 should be grouped in a listing for any similar stylings so as to reduce the file size.

carousel nav button hover properties (visual cue for interactivity)

Add a hover style for nav buttons that move carousel items. Inactive will be more see-through than when hovered over. Might add a slight scale increase for hover too. Will not include if there is obvious pixelation of svg arrows or circle outline.

Publications section needs link to list format of papers (separate html file)

Place a link in the upper right corner of the publications section. This will link to another html file/ page that is a very simple list of all publications that follows current format. There will be links available for each publication on this page.

Might add design element that spans between the heading and the link similar to a border or line (2-4px med gray color, solid).

Make drop-down menu for MOBILE site

Make drop-down accordian menu with website links in header. Animation might include shifting/ growing left from button, then down from click. Might also have text/links expand with scale as the drop-down grows (or reveal as it grows downwards). Should use addClass or toggleClass in JS for this event. Might include logo for NMSU Bio dept at bottom of menu, but not essential. Bio logo/link should be removed from the header, regardless.

Still need to create svg for the menu icon. Will be easy to accomplish this inline HTML, but can also make in AI if needed. All of this will need to be added to HTML, but needs to be hidden in FULL screen resolution. Could be reused in tablet if header is animated to a shorter height as user scrolls down.

Add visual cue to links in footer under additional resources section

Add an underline on hover of additional resources link in footer.

Could also animate a growing underline from left to right on hover to go the extra mile.

Header Nav button hover animation needs work

Although I am pleased with the general design, the animation (especially at higher resolutions browser window size) needs to be smoother. This might have to do with the fact that a cubic bezier path is used for the animation - might want to switch to "ease-out"

Filler image used in the Alumni section too large

Filler image has sizing issues - appears much larger than intended and breaks both design and functionality.