Personal Portfolio Webpage Challenge

1

I have a personal website published to GitHub Pages using Git on the command line, here. I changed it a bit to try to get it to pass the tests for the challenge, but I’m having trouble getting it on CodePen exactly.

I also don’t know what URL to use to white list my Pen on my web server app (that’s the very first project I have on my portfolio site, which I made using C++ with the Boost.Beast library; it’s hosted on my own computer and I’m not always running it, so I wrote a script that tries to make a request to the app’s server and for that I had to white list my website’s URL on the server. But I don’t know what URL to use for my Pen).

But first I want to fix the problems that can be seen visually. It’s understandable why my profile image isn’t showing up, but why is the header covering up part of it? And why does the navbar on the header not have the links showing up correctly like they do on the GitHub Pages site?

Also some feedback on the GitHub Pages site would be appreciated too.

2

I got some of it fixed, but now the logo isn’t showing up on the header and on smaller screens the project and contact info items aren’t stacked. On my actual portfolio site they are.

Would it work if I just put an iframe showing the original portfolio site? Or do I need to get this to work?

3

Tried the iframe idea. Didn’t work visually either.

And all but one of the tests pass. The one that doesn’t is the one for the height of the #welcome-section being equal to the viewport on mid- and large-sized screens. I have normal and small ones down for that. What screen sizes should I use on the media query for mid- and large-sized screens on CodePen? It seems like it’s completely different on CodePen compared to how it is normally.

And I’m completely lost on how to get the logo to show up on the navbar.

Also, what URL should I use when trying to whitelist my Pen on my web app server?

I’d really like some help on this because I’m kind of stuck here.

Edit: The logo markup is like this:

<a class="logo" href="#welcome-section">
      <img
        src="https://www.osmanzakir.dynu.net/img/logo.png"
        width="50px"
        height="50px"
        alt="dragon logo"
        class="dragon-logo"
        />
      </a>

CodePen seems to have a problem with this. Trying to select the logo using the class .logo or the class .dragon-logo doesn’t work on CodePen even though it does work on my actual portfolio site. What do I do about this?

4

You don’t have to use Codepen you can submit your portfolio site hosted wherever you like (e.g. GitHub pages), as long as it stays live and has the test script on the page.

For the #welcome-section you just have to give it height: 100vh to pass the last test.

For the logo issue, please link to your Codepen.

5

Here’s the CodePen link: https://codepen.io/DragonOsman/pen/PzwdWd .

To put the test script on the page, do I just put the script for it anywhere in the page (can also be the head?)? This is for the GitHub Pages site.

Edit: I put the test script on the GitHub Pages site and saw that all tests pass.

So if I submit my GitHub Pages site with the test script on it, would it be okay to take the test script out after a while? It doesn’t seem like a good idea to leave it there (not very professional is it? Though the domain name not being a top-level one is already bad for that).

Edit2: I’m going to try and get the logo on the CodePen one to work, as well as the media queries, and submit that. I just probably can’t get the CORS request to my web server app to work on CodePen.

6

You can have multiple GitHub pages, you can also use something like Netlify which in my opinion is better than GitHub pages.

So one option would be to have one version that is for the challenge submit that you keep the test script on. Also, in the long run, it is pretty unlikely that you will keep the fCC portfolio project as your main real portfolio page. So it is OK if they do not sync up or are completely different.

As for the logo, it is just behind the header.

.dragon-logo {
  position: relative;
  z-index: 10;
}
7

Yeah, thanks, that helped.

I fixed some stuff on the CodePen version and submitted it. Of course I’ll stick with the other one as my main.