Trying to duplicate author site nav and scroll

The website I linked is not mine but it is built on Squarespace, and it's what I am trying to duplicate. After several hours of trying things out, I can't figure out how he did it nor can I find any tutorials specific to this interface. 

Sample website

The elements I want to duplicate include:

- Right Hamburger nav on the desktop homepage with a slide in menu from the right. 

- His full size left facing headshot image is flush with no space on desktop. At first I thought it was a background image but when you go to mobile, his image populates up top then the site (see attached image). I have no clue how he did this. 

- Is his site essentially a blog where all the links are posts, or is it a folder with pages in the folder? 

I would be stupendously grateful if anyone could help me sort this out. Your time is greatly appreciated. 

First, the example site is Squarespace 7.0 version. If you use 7.1, will need to more adjust to achieve similar effect.

Also, I guess they used Developer Mode to edit template.

- Right Hamburger nav on the desktop homepage with a slide in menu from the right. 

It is default behavior of template, no code required.

If you need to replace it to your site, please share your site url first

- His full size left facing headshot image is flush with no space on desktop. At first I thought it was a background image but when you go to mobile, his image populates up top then the site (see attached image). I have no clue how he did this. 

If you use 7.1, you can use Fluid Engine (new editor) to achieve this easier. With FE, you can edit mobile layout.

https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine

- Is his site essentially a blog where all the links are posts, or is it a folder with pages in the folder? 

Which element are you referring to?

Hey @tuanphan

Thanks for the reply and for your time. I'm on 7.1. I could not find a template that has the hamburger as a default (desktop). This is my site: https://bobbyford.io/

I cannot get full bleed like the sample site (the guys headshot). And I cannot get the scroll only on the right side without losing the left headshot image. Here is a markup

Also, I found some of the other hamburger posts and the hamburger code always populates on the upper left versus upper right despite the fact the menu populating on the right with no clear way to click out. It doesn't look good or clean. So multiple issues just on that element alone. 

To get burger show on desktop, you can add this to Design > Custom CSS

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
 .header-display-desktop {
    flex-direction: row-reverse;
}
}

If you need more tweak with burger, you can send, we can check easier

You want to do this for homepage or which page?

Hey @tuanphan

Yes, homepage. 

Here is a link to that person's website: https://www.johngreenbooks.com/

I very much appreciate the help, Tuan.