Personal Portfolio page. Feedback welcome!

Code Feedback
1

Hello Campers,

Been tweaking this for weeks. Finally mustered the courage to post it in the forum for others to view:

Constructive criticism and/or feedback/suggestions are encouraged. I’d really like to add some sort of scrolling transition when you click on “About”, “Portfolio”, etc., but still figuring out how to do that.

Thanks!

  • Matt
1 Like
2

The colors and design look good and personal.
If you want to add smoothscrolling to you page, you can either use a plugin or look for how to write the javascript. I didn’t understand the JS for it, so I just used the plugin in my portfolio.

In my opinion, your form would be better with more width though…it feels cramped with too much height…try give it more width to even out the height, and then compare both.

Secondly, with only your tribute page there, it looks a bit bare. you can add another thumbnail picture that says “coming soon” to add contents.

That’s my feedback.
Regards and happy coding

3

Thanks! I appreciate it.

4

I really like how clean and simple it is. Solid font choices, a background image thrown in, and you are the first thing we see on the page.

Some things I would add - like @OnomeSotu said, placeholders for future projects that widen the page a bit is a good idea. As your page gets longer, you might want to have your menu fixed to the top of the page, or a button on the bottom of the page that will scroll back up to the top.

Finally, the textarea’s width isn’t on par with the other text input elements, it’s just slightly off.
(Also HI!, I’m based in Philadelphia too! :slight_smile: )

2 Likes
5

Hi
This code go to : Pen Settings -> Stuff fo “head”

title>Matt Battle</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">

For jquery and Bootstrap (codepen):

This code is not correct (JS tab):

src='https://code.jquery.com/jquery-2.2.4.min.js'

 src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'
       
<script>
function scrollToAbout() {
    $('html, body').animate({
        scrollTop: $("#abt").offset().top
    }, 1000);
}
function scrollToPort() {
$('html, body').animate({
        scrollTop: $("#port").offset().top
    }, 1000);
}
function scrollToCont() {
    $('html, body').animate({
        scrollTop: $("#cont").offset().top
    }, 1000);
}

HTML TAB:

This code, is better to use an external script:

<ul>
    <li class="link"><a href="#abt" onclick="scrollToAbout()">About</a></li>
    
    <li class="link"><a href="#port" oneclick="scrollToPort()">Portfolio</a></li>  
    
    <li class="link"><a href="#cont" onclick="scrollToCont()">Contact</a></li>
</header>

Cheers and happy coding :slight_smile:

6

Awesome, thanks, erretres! I’ll give it a shot.

1 Like
7

Hey, drregg6!

Nice to know another camper is nearby. Not from here originally, but have been in Philly for work for nearly three years now.

Yeah, the textarea’s width is a bit off. I’ve been eyeballing it, but I know that’s bush-league of me. I’ll have to tinker with it still.

I’ll definitely add a placeholder cell to widen the page in the Portfolio section, like you and Oneme suggested.

Thanks for the feedback!

8

Nice portfolio, I like the sense of humor heh.

Suggestions

  • Allow “article” to span 100% width on mobile screens.

  • Perhaps reformat the look of the contact form. You could increase the overall width of the container, have name+email side by side, and decrease the height of the message box.

  • Add some information on where you are located and why you’re learning web dev.

Overall, great job man!:smile_cat:

1 Like
9

Thanks, jinrawx! I’ll add to the “About” section and apply your other suggestions.

1 Like