shawnkristek / kendrasportfolio

A custom design by Kendra Wright for her UX/UI job search. And a quick exploration of Next.js for me.

Hi 👋. I'm Shawn Kristek, a software engineer that loves building UI with front-end frameworks, enjoys solving backend challenges, and is looking to join a team where AI is heavily used.

What I Like Working On:

• planning the project; really breaking things down into the modular pieces and step-by-steps
• diving into details and learning the "best" ways to solve problems
• wowing the stakeholders by bringing the project to life at lightning speed
• collaborating with UX/UI designers to bring awesome user interfaces to life

My Current Favorites:

• React.js
• AWS: Amplify, AppSync, DynamoDB, S3
• Expo
• Next.js
• Nativebase

💻 My Tech Stack

My daily tools:

Tech from previous projects:

Tech I've lightly used or am learning:

kendrasportfolio's Issues

fix spacing on intro page mobile

For smaller screens the spacing of elements on the Intro page needs adjusting. Increase the spacing.

Build Layout for L'Hotel Paris section

Update README.md

Update README.md to something like a portfolio or about me for Kendra.

No submenu displayed on large mobile screens

On my iPhone 12 pro max in landscape view, the desktop navbar is displayed, but the submenus never appear... no matter the action. The onetwohover button was intended to address this, but does not.

Fix security risk with target="_blank"

• add rel="noopener noreferrer" to linkedin link

Landscape/desktop navbar is covered by main content

Still seeing an issue with the top horizontal navbar being covered by other content making it impossible to utilize the submenus.

Add link to case studies

• add a link to case studies at the bottom of intro page

More vertical spacing on mobile navbar

Switch margin to top and use 15px

Build Navbar

Add top margin to footer

Mobile has no spacing between footer and other content.

switch to headless component library

having issues with custom built component limitations... best to switch to a component library that is easily styled with tailwindcss...

• Radix UI

Navbar - one-two click for main links

Currently the navbar is hover for submenu, click for page. For larger mobile screens this needs to be a one-two click process.

• one click -> display submenu
• two click -> go to page for main navbar link

Fix ghosting on social buttons

Social buttons on resume page show an outline when clicking the copy email button.

Build mobile burger menu

where are the case study prototypes

??

Case Studies Spacing

spacing on case studies page is off

hotel prototype

any idea why it's not starting on the first screen? I checked Figma and the flow starting point is in the right spot.

Larger resume images

Resume images should almost fill the screen on mobile.

mobile menu spacing

needs more vertical spacing between each menu item

Build out the components on design page

Currently Design pages only shows a collection of images. It would be a great enhancement if all of the components actually functioned as intended.

Larger avatar photo

your link

Your name is not obvious that it's a link, underline it or something so people will actually click it :) <3

Build layout for bewitched book box section

home page

text is too small now compared to the pic, and looks like it could you an increase in line height or weight to make it easier to read over the background.

add instructions on how to view all flows in each prototype

they can click anywhere on that white bar at the bottom of the prototype, maybe put a small piece of text underneath each one that says something like "click anywhere on this Figma bar to view all flows of this prototype"

also not sure I like the components being hidden, I know you did it to save loading time, but maybe after you've made some progress on LeJIT you can go back and make each UI/VIsual design it's own page so that everything can be displayed at one time

matchbox cover slide

I made a new one with the white background, this needs to be replaced

convert Intro page img to next/Image

• Intro page is currently using tags. These should be switched to nextjs tags to improve performance.

remove contact page

navbar contact button should only display the submenu, not open a new page

Add margin to main content on home page

On my iPhone 12 Pro max, the margins for the main content are too narrow.

• Add mx-10? to main content on home page.

Eliminate ghosting effect on mobile navbar

On my iPhone 12 pro max, there is an off color ghosting when clicking the sidebar navigation buttons.

• Find a way to eliminate, or change the color.

Build new container for Resume page

Resume page currently uses a Section component to contain the content. It's functional, but fails to respond to small screens leaving the content overflowing beyond the page bottom.

• build a similar container that adapts to potrait screens preventing overflow and providing a appealing margin/padding at bottom of page.

Add vertical spacing to mobile menu

• mobile navbar buttons are tightly packed... add vertical padding

Change copy icon to check mark

The copy icon shown when clicking the copy email button on the resume page is confusing. Replace it with a check mark.

Build layout for mobile email inbox section

mobile menu icon issue

hamburger is showing up on top of X

Layout on intro page shifting

Need to address the loading of the intro page.

• The main image box shows as a narrow vertical box during loading.
• The entire page shifts right drastically as the page is loading.

Remove bottom social buttons

Delete bottom social buttons on resume page.

Adjust breakpoints for Home Page

On desktop with browser width of about 1000px, the layout of the home page isn't optimial. The main navbar is displayed, but the column layout of the intro component.
Ideally this would be a smaller version of the full desktop layout.

• shrink photo
• convert to flex-row for two column layout

email submenu

change text to say "email me!" instead of copy my email

email icon on resume page

can you make the copied with checkmark icon stay longer before reverting back to the email icon?

Build navbar dropdown menus

Build Resume Page

• add social icons: linkedin, dribble
• add download button(s)
• add pdf resume

case study loading

not sure if you can do anything about this, but when you click the case studies page and it starts to load, it flashes random images from the slideshows

Remove OneTwo Buttons

Now that the breakpoints have been increased, there is no need for the oneTwo buttons on desktop. They are causing a failed click on the main page links.

• Remove the OneTwo Buttons -> Menu.Link