HI Brad !

I folowed your tutorial to create my own portfolio but I don't want to publish my portfolio on github pages. I'd prefer to have it as a real website on https server.

Do you know how to manage that ? I know how to publish a website that uses PHP but not scss or sass.

Thanks for all the good stuff you share !

The hamburger icon which when clicked is suppose to transform into the close button is not working. There are no errors in console and the scss is compiling into main.css without any problems. I re-run npm run sass and refreshed many times but without any luck. Please help solve my problem.

I did exactly like the video, but the menu button doesn't show

On the home page, social media icons specially twitter is not at all visible. Will need to change the box color of icons.

I had made some modifications to index.html after it has been uploaded and working nice but while upload the modified index.html and run the website nothing changed and first version still same!?

Any idea as I used drag the file and save changes and I can find it on Github but on my Githubpages link not?

You have:

@mixin mediaMd {
  @media screen and (max-width: 768px) {

Which creates a branching overlap (a 500px width device reports as Sm and Md)

Did you want:

@mixin mediaMd {
  @media screen and (min-width: 501px) and (max-width: 768px) {

?

IIUC this would also entail changing:

Hi Brad,

If you open the contact me page (https://bradtraversy.github.io/modern_portfolio/contact.html) on a mobile device it has vertical scroll bars and something is also wrong with the header and boxes with contact information.

In the second video @ 8:24 where Brad is adding css to the main.scss, my index.html isn't updating the formatting changes. I've closed VS code and issued the run npm sass statement multiple times already, along with stopping and starting Live server, all to no avail. Any suggestions on what I can do?

When I view my contact page on my Iphone X, it isnt responsive and is cut off, but is fine when my turn my phone to landscape.

`PS C:\modern_portfolio> npm run deploy

[email protected] deploy C:\modern_portfolio
gh-pages -d dist

error: cannot spawn sh: No such file or directory
fatal: unable to fork

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] deploy: gh-pages -d dist
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\willi\AppData\Roaming\npm-cache_logs\2018-12-07T01_08_54_886Z-debug.log
PS C:\modern_portfolio>`

I followed the video responsive Portfolio Website [4] - Menu Overlay & Responsiveness
exactly.
But my portrait overlay is not working.
Here is my _menu.scss code
&-branding,
&-nav {
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
float: left;
width: 50%;
height: 100vh;
overflow: hidden;
}

&-nav {
margin: 0;
padding: 0;
background: rgba(darken($primary-color, 5), 0.9);
list-style: none;
transform: translate3d(0, -100%, 0);
@include easeOut;

&.show {
  //slide in from top
  transform: translate3d(0, 0, 0);
}

}

//Branding
&-branding {
background: rgba($primary-color, 0.9);
transform: translate3d(0, 100%, 0);
@include easeOut;

&.show {
  //slide in from bottom
  transform: translate3d(0, 0, 0);
}

.portrait {
  width: 250px;
  height: 250px;
  background: url("../img/portrait.jpg");
  border-radius: 50%;
  border: solid 3px $secondary-color;
}

}

Hi Brad,

The Project is Awesome, but it doesn't work on IE, may be due to ClassList or AddEventListener issue.

Thanks!!

I did exactly like the video, but the menu button doesn't show

I get errors when trying to save
"status": 1,
"file": "C:/users/yo/desktop/code/modern_portfolio/sccs/_menu.scss",
"line": 8,
"column": 12,
"message": "no mixin named easeOut",
"formatted": "Error: no mixin named easeOut\n on line 8 of sccs/_menu.scss\n from line 2 of sccs/main.scss\n>> @include easeOut;\r\n -----------^\n"

I have checked the code vs yours on github 100 times..

does now show sample web page link

Nvm my bad fucked up so hard

The nav items working fine but when it comes to the code doesn't work! Even I copy-pasted your code but it won't.

`

// Branding Side
&-branding {
background: $primary-color;
transform: translate3d(0, 100%, 0);
@include easeOut;

&.show {
  // Slide in from bottom
  transform: translate3d(0, 0, 0);
}

}

`