faderud / faderud.github.io Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 1.0 34.04 MB

Fade Rudnitsky's personal website

HTML 39.92% CSS 43.68% JavaScript 16.41%

faderud.github.io's People

Contributors

Watchers

Forkers

ranbena

faderud.github.io's Issues

Scroll indicator animation

Added a "hover" animation to the scroll indicator.

Animation spec:

From top (-2px) to bottom (+2px).
1s duration
Ease- in +out

Additional feature:

After scroll animation stops.

3/3 Add tablet portrait layout

Adding a portrait tablet layout completes the set of resolutions and screen I'd like to support at this stage.

Mock:
"768" on Zeplin

Layout Logic
This layout is almost identical to the Mobile Landscape layout, with the following exceptions:

It uses text styles from the 1024px version
The "scroll to begin" does show
Unlike in the mobile version, the "visit" button in Neura Dev section as well as "Project Shut Down in 2015" button in EvMe section do appear.
All web screenshots take the full width within the margins.
"Make it Happen" button in the "Let's Have Lunch" section has regular width.

Mobile menu

Animates down on scroll up + reverse.

https://app.zeplin.io/project/5ca2ffb09972713e00419380/screen/5ca5ae5d561e75a1fdea0bfe

Fix Methodology title

I'm trying to create the quickest MVP of a new methodology section. Desired result: points 1,2m and 3 should appear below the title, right above points 4,5, and 6.

On mobile, it seems to render as desired.
The temp HTML for this is: https://faderud.com/experiences/index-test.html

Thanks in advance!

Update main image on faderud.com homepage

So... we're updating the main image on faderud.com homepage.
Unlike the current one, the new one is used as a background image, requiring some CSS changes to position it well on all resolutions as well as some color tweaks for the content itself.

💎 Updated Sketch file, containing all changes is here

Changes required:

Update the actual image and its positions through resolutions
Update text colors
Update button colors (normal, hover and pressed states)

Thank you, kind sir 🙏🏼

1/3: Add 1024px-width resolution support

Adding support for 1024px-wide screens will optimize the website for smaller laptops, as well as for tablets in landscape mode

Mock:
"1024" on Zeplin

Layout Logic
This layout is based on the regular website, with the following changes:

.h1 CSS style - created .h1-1024 in Sketch in Zeplin with the following changes:
- Text size changed from 100px to 80px
- Line spacing changed from 86 to 68 (if you didn't configure it initially, maybe leaving it as it is will work too, try before changing)
.h2 CSS style - created .h2-1024 in Sketch in Zeplin with the following changes:
- Text size changed from 70px to 56px
.h4 CSS style - created .h4-1024 in Sketch in Zeplin with the following changes:
- Text size changed from 36px to 29px
The main visual element (headshot and the green background) scaled down to 80% of its original size
EvMe items rearranged differently
Screen margins changed

h3+h4 style adjustments

"Skillset built...", "Shoot me an Email", "Social, Maybe?" and "Let's Have Lunch" texts should be assigned to a new style ('.h4') with style duplicated from current 'h3'.

Rest of the titles assigned to '.h3' should stay as they are, and the style itself should change to:

font-family: Effra-Medium;
font-size: 46px;
color: #494949;
letter-spacing: 0;
line-height: 45px;

All per original design.

Remove underline from buttons

When hovering on buttons, no underline should appear.

Optimize images

With a tool like https://tinypng.com

Sticky text sections on the left

When scrolling, the texts of the design showcases shouldn't scroll with the page but rather fade in/out when the scroll reaches certain points.

The only exception is the EvMe showcase, where logo and business cards' texts should join the main text instead of replacing it.

Irrelevant for mobile
Not in MVP.

Horizontal scroll in Safari

Since some content elements protrude the 1200px width restriction there's naturally a horizontal scroll present.

Fixed by applying overflow-x: hidden to the <html> tag but that doesn't seem to work in Safari.

Safari does react correctly to applying it on the <body> tag but then Safari messes up the sticky header 🤦‍♂️

Change bg to solid #EDEDEC, replacing the gradient

Search engine content

Site description

Something like:

<meta name="description" content="Fade Rudnitsky's website. I Create Human Experiences.">

Search keywords

Something like:

<meta name="keywords" content="Product Design, Web Design, Capiens">

Complete project content

Evme and web content.

Update footer mailto buttons

I put placeholders for subject and body.

Add 2-3 more breakpoints to prevent too small of an image (see screenshot)

Lazy load image under the fold

The website loads a lot of heavy image which hinder the initial loading experience (I always see @faderud's head disembodied till everything loads...)

Guess wat?!

A new capability is about to be published in Chrome (majority of humanity usage) which does exactly that! Doesn't need any code change. It's probably just gonna be enabled by default 😁

Nav buttons don't stay selected

Currently, after clicking a button and focusing away it looses it's "selected" style.

Browsers only support a few hypertext state hooks in css (hover, clicked, visited, not) but no selected state.

Can be solved with JS.

Animate center word in the header

Basic animation definition to start with and finalize later:

Word 1 stays for 4 seconds
Word 1 fades out to alpha 0 with ease in+out and moves 20px to the right. Animation length: ~200ms
At the ~100ms mark of the above animation, Word 2 fades in from alpha 0 to 100, ease in+out, starting with x-20px of its final position. Animation length: ~300ms
Repeat

Words array: Human, Authentic, Trustworthy, Sensitive
Please make it easy for me to add/remove words without messing up the animation.

I'm marking it MVP not only because I'm a greedy pig, but also because it's important for me to emphasize these values.

Layout is messed up on tablet landscape

There's a layout issue that seems to happen when looking at the website on a landscape of a tablet (iPad, in my case). I can't seem to reproduce it when using Safari on the Mac with the exact same window size.

Any ideas?

Update copyright text style

@ranbena I updated the copyright text style. Please create a separate CSS style for it (it's being used exclusively by this component):

font-family: Effra-Regular;
font-size: 14px;
color: #9B9B9B;
letter-spacing: 0;

Fix scroll appearing on iPad when tabs are present

In Safari on the iPad, when more than one tab is present (and therefore the tab bar is open), the scroll appears again, since the footer gets cut off.

Mobile version

Needs implementing.

Add favicon and webclip + change page title

@ranbena please add favicon.png and webclip.png to the code, both are in the assets folder on Dropbox.

In addition, please change the page title to "Fade Rudnitsky - I Create Human Experiences."

Thanks

List items should have the same text style as paragraph text

List items <li> should have the same text style as paragraph text.
Currently, the text in the skillset section is significantly smaller than the paragraph text.

2/3 Add landscape layout for mobile

Adding support for landscape orientation on mobile devices will do exactly that, plus will lay the grounds for the tablet portrait mode

Mock:
"Mobile Landscape" on Zeplin

Layout Logic
This layout is based on the portrait mobile version, with the following changes:

Main section alignment is more similar to the desktop version (aligned side by side instead of one under another
Skillset bullets are divided into two columns
All titles where the company name used to appear after a line break are now merged into the same line
All web screenshot enlarged to fit within the new margins (might want to use the higher-res assets from the desktop version)
EvMe assets' alignment changed. Again.
Social section moved to be on the right of "shoot me an email" section instead of lay beneath it
"Make it Happen" button in the "Let's Have Lunch" section now gets to full available width within the margins.