Basic Portfolio Page. Your thoughts?

Hello everyone!
Just have finished my initial portfolio project. Didn’t want to make it very “professional” since I have almost nothing to show off yet (even a good photo of mine lol), so I took a bit leisure approach while making it. But at least I’ve added some basic scripts and made sure that it looks nice on phones. ^^
What do you guys think? Here’s link: https://olucky.github.io/ Feedback is very appreciated!
Code, if you wish to check: https://github.com/OLucky/olucky.github.io

2 Likes

Simple, quite nice. :slight_smile:

Thank you. ^^

I’ll definitely add some fancy stuff here and there to make it more appealing and interesting in the future.

No, more content doesn’t mean it will be better. Personally, I love simple things, sites. I can quickly read what do you do, what I can expect from you and I don’t have to read a lot of boring stuff. :slight_smile:

Looks really good. I like the shade(s) of blue and minimalist design.

However, maybe you can change the color of the text on hover to white/light blue or a shade of gray? It’ll look less jarring than a bright yellow, which doesn’t appear elsewhere on your site’s color pallet. Also, the background of the nav buttons and the color of button text is the same when a button is active. So it’s black on black and I can’t read the text. You could do something like

.navbutton:hover{
  background: black;
  color: white;
}

Or change the color of the background of button when it’s active to something other than black.

Also, an easy way to add small but nice animations is using the transition property. It controls the speed of change of an attribute of a certain element. So for your buttons you could have something like:

.navbutton{
   transition: all 0.25s ease;
} 

Great work, nonetheless, keep it up :smile:

Thank you for feedback and tips. Especially for transitions, it looks really nice.:yum:
I’d also like to change button text color, but have some problems here. That’s how my CSS for navbar buttons’ collor looks like at the moment (not on current online version):

.btn-color:link {
		color: black !important;
}

.btn-color:visited {
	background-color: #606c88 !important; 	
}

.btn-color:hover {
  color: white !important; 
}

/*Doesn't work!*/
.btn-color:active {
	color:white !important;
}

That color in “active” doesn’t work at all and, while background changes color on scroll or click, text returns to black. It also doesn’t work when I put it in “visited” subclass. Also I have to add “!important” to every rule to overcome navbar classes.
That’s how HTML code looks:

<nav id="navka" class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <li class="col-xs-4"><a href="#about" class="btn-color"><h4 class="text-center">About</h4></a></li>
      <li class="col-xs-4"><a href="#projects" class="btn-color"><h4 class="text-center">Projects</h4></a></li>
      <li class="col-xs-4"><a href="#contacts" class="btn-color"><h4 class="text-center">Contacts</h4></a></li>
    </ul>
  </div>
</nav>

if you or anyone else could help me I’d be very grateful. :relaxed:

It could be due to you being not specific enough. I wrote an answer in this thread: How can I know in what order my css stylesheets are called in codepen?

Don’t read my first, admittedly bad, answer. Look at the one after that and @akshaynaik404 's reply as well. In short, try something like this:

.navbar > ul.nav > li > a.btn-color:link {
   color: #somecolor
}

Change the pseudo selector as you wish.
This way you won’t need to override with !important unnecessarily, which is generally bad practice. Hope it works, but I’ll try helping if it doesn’t. Good luck.

Thank you for helping me :slight_smile:
So, as you said, I’ve tried to be more specific and changed code to this:

.navbar ul.nav li a.btn-color:link {
		color: black;
}

.navbar ul.nav li a.btn-color:visited {
	background-color: #606c88;
    color: white;	/*Doesn't work*/
}

.navbar ul.nav li a.btn-color:hover {
  color: white; 
}

.navbar ul.nav li a.btn-color:active {
	color: white; /*Doesn't work*/
}

Thanks to it I’ve managed to get rid of “!importants”. This trick will surely help me in the future. But changing text colors still doesn’t properly work as it changes only on hover. I think I use correct subclasses and attributes but something is still wrong and I don’t see what.
By the way, I updated code on GitHub if you wish to see whole picture.

Try this on your CSS

.navbar-default .navbar-nav > li > a:hover {
background-color: #3333ff;
}

Background color’s change works as intended in my code, but my main problem is that text color doesn’t change to white on visited or active, only on hover.
Still thank you for contribution, color that you’ve suggested looks nice.