gbowne1 / gbowne1site_react Goto Github PK

This page needs a MUI toggle button in the navbar for light / dark mode.

An acceptable alternative would be something that detects the users device theme state.

There are several issues with the blue top nav bar.

• Too high, should be 60px-80px high on desktop.
• Navigation and its link buttons are now invisible
• Search bar also the wrong size

Other minor issues.

Here is my favorite inspiration for a photo gallery.

https://codesandbox.io/s/github/vashnavichauhan1825/pic-gallery/tree/main/

tabs and links should be aligned to the left. there must be space between them

The gallery css needs some work.

First of all, the header and footer across the entire app is too tall on Desktop. Consider that my CSS viewport size is 1884x905.

The background between the header and footer, I am not happy with the color.

I typically like blue and gray colorization and black text, keeping in mind. If any texture is used, I like a brushed metallic finish background that is not too light and not too dark.

Most if not all of the components of the App have used class based components.

change them to use ES7+ or ES2016+ and functional components.

There should be a cookie accept card displaying when the app loads, at the bottom of the viewport.

Its semi-transparent black. With a yellow button.

Its not displaying.

My desktop device is 1920x1080 but the CSS viewport is 1884px x 905px.

I always expect my topbar/topnav on desktop to be 1884x60 when inspecting it in console.

I expect CSS breakpointsin any media queries to be:

1920x1080 (Desktops)
1366x768 (Laptops)
375x667 (Some mobile and tablet)
360x640 (Other mobile and tablet)

I expect the footer to be no more than 500px high, but my footer only needs to contain my social icons and copyright and quick contact links so can be very short in height.

This should be its own component and use dark transparent background. (Ignore the light gray upper half of this)

X close it and it puts away.

The footer has a number of issues..

The app backround is too light to tell any significant issue. The footer background is white, but has gray bars across the icons and the copyright section.

The social media icons somehow lost their colorization #35 and I would like to use the icons' official colorization, and the Instagram icon should use the same colorization it uses on their site/app.

I also feel like the footer especially is way too tall, and the icons do not have good separation, especially if someone looked at it on a mobile device and tried fat fingering it with big fingers. Clicking on Desktop view would be fine but, on mobile would be not that good.

Separate and a minor issue is that there is ~5-10px of margin/padding on the left side of the view all the way down.. that also affects the footer.

Add media queries for breakpoints for viewports like mine which is 1884x904 in a 1920x1024 desktop view

My phone is 360x572 vertically and 692x288 horizontally (Android Samsung)

Clicking on the blog button in the nav, if you can hover find it with the hand on the nav bar.

The page as it exists doesn t display.

I just added a new Blog.jsx to the App as a baseline to start with.

I need a paginated Blog container with a comment container. so people can page through my different posts with breadcrumbs or tabs.

I want to be able to include a picture with my blog post.

I also created a boilerplate Editor.jsx too that can be included. Will push this up tonight.

Issues are contrast, keyboard and text labeling and are hitting these issues:

• Clickable elements must be focusable and should have interactive semantics
• Content with images must be labeled
• Focusable element may be missing focus styling.
• Does not meet WCAG standards for accessible text
• Interactive elements must be labeled.

My desktop device is 1920x1080 but the CSS viewport is 1884px x 905px.

I always expect my topbar/topnav on desktop to be 1884x60 when inspecting it in console.

I expect CSS breakpoints in any media queries to be:

1920x1080 (Desktops)
1366x768 (Laptops)
375x667 (Some mobile and tablet)
360x640 (Other mobile and tablet)

I expect the footer to be no more than 500px high, but my footer only needs to contain my social icons and copyright and quick contact links so can be very short in height.

My two choices for color in navbar are black or blue.

@k-deepak04

1. Navigated to /about or having clicked on About in the navigation:

   Error in parsing value for ‘transform’. Declaration dropped.

2. Navigated to /# or clicking on my name in the nav
   sometimes this file does not GET /static/media/gkb_50x50.54e7204fcc05cc527cff.png but trying to a browser refresh might.

3. Navigated to /gallery or clicking on Gallery:

   Unknown pseudo-class or pseudo-element ‘-ms-input-placeholder’. Ruleset ignored due to bad selector. appears 3 times.

I intend to change a large portion of my GitHub profile README.MD by moving most of the text in my Readme Profile on GitHub to the About Me section of my page then just link to my page in my readme and provide a short readme instead so that my GitHub profile is complete but not TL:DR. People can go to my site if they want to know more about me.

I added a CookieBar component.

I was unable to get the component to render.

It's a semi-transparent bar with a yellowish button in a small strip at the bottom of the view.

There is a message that quickly pops up when you try and run npm start in the root of the project..

It needs to be fixed. Haven't found very good information on how to fix this. Here's the message...

$ npm start

> [email protected] start
> react-scripts start

(node:22828) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:22828) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

In desktop view, with the viewport set to 1884px by 905px, and navigated to /contact or click on Contact button in nav. (set your browsers responsive settings to 1884 x 905 and look at the view.. (to replicate my view).

Scrolled up on the page there is a lot of white space in between the navbar and the card in the center of the view. which seems to be causing some issues. When scrolled up on the page, The bottom of the card extends into the the top few px of height in the footer.

There should not be any scrolling on this page.

Scrolling down on the page makes the view look normal.

The fields in this view also do not look great.

@gbowne1 i'm adding this issue and creating a new pr for this.

The blog editor doesn't display. The blog editor in and BlogEditor.jsx

There are no routes to this page either, and no good navigation to this either.

The blog editor should only be displayed only when I'm logged into the app.

The app probably needs a login so I can login and create blogs using the editor.

The footer social icons no longer have their styling and colorization.

The links appear to be fine and working.

The contact page needs fixing, the contact extends through the bottom of the footer

The content is huge making it scroll and its not visible in its entirety and as you can see from the pic it actually goes through the bottom of the footer.

Even though my device is 1920x1080, my viewport is 1884px x 905px so use your browsers responsive test and set it to that viewport and see how it looks and behaves at that resolution. in my viewport (and most others except mobile/phone) it should be completely visible in one view without having to scroll.

I think I got all of the pages in the route correctly however,

It seems to render a stack of 1884x60 components.. starting with 'html' then 'body' then 'div.#root then 'div.App'.

It appears that the navbar renders mid page. It should be static at the top of the view.

This project uses a pile of dependencies.. including react-bootstrap.

I originally intended this project to use MUI not Bootstrap.

I should've mentioned this earlier.. but I guess that was missed in my specifications.

MUI is already installed.

Design the about me as per the Screenshots mentioned in the Discussion tabs.

Design the Contact me as per the Screenshots mentioned in the Discussion tabs.

To run the server,

use json-server --watch db.json --port 8000

This will be used till I get the MySQL, MariaDB, MongoDB, PostgreSQL database set up.

To see the blog, click on the Blog button in the navbar, or go to /blog/.

You won't be able to see the blog render unless json-server is running.

Aside: There's no blog editor either. I made an issue for that.

The Blog.jsx and the accompanying Blog.css is garbage. I want users/followers/viewers to be able to see and comment on each post, as well as heart/like, thumbsup, thumbsdown, flag, etc. (typical blog things)..

The blog should have title, subtitle, date/timestamp and typical blog metadata displayed with each. Also ability to post photos with the blog post.

I would like to display my Paypal, Ko-fi and Buymeacoffee links on the main page of my bio site.

The about page isn't laid out the way I would really like it and it does not have near enough information about me.

I would like to propose a new layout for the About page

Something like:

At least in my case, in Firefox 119-121.. and this is pretty much the same when looking at the console in every route/page.

So, the issue here is:

in the * {...} font family, margin and padding have a strikethrough in in the inspector

This might also because these also exist in NotFound.css's * {...}

It's also calling for some of these from bootstrap.css and _reboot.css from react-bootstrap. In a separate issue I just created, bootstrap will be getting removed.

So, this might make the browser confused about some things having the same CSS rules, so it strikethroughs the rule in the console

Also if you look,

The npm scripts in the "scripts" section of package.json aren't working very well and need some fixing, some are needlessly duplcated.

I have the prettier and eslint plugins installed.

The correct favicon.ico is not loading even in a build.

I removed the default one by CRA and made sure its in the public folder but its not loading.

The correct file is 16x16 and shows the GKB logo.