In any profession you will need to display your skill set. If you have a website, I present you with a colorful and simple way to display your skills to your visitors that will not only stand out among a crowd but is very easy to implement. I found a few promising designs, but unfortunately I could not find a good tutorial that would show me how to create a design that would do what I wanted it to without having to update it often....so I designed one that suited my needs and i decided to let other people use it on their site.
Our design implements CSS and PHP to create a colorful, turn key solution for your needs. You can use our design and modify it to meet your skill set. You only need to change the skill and what year you started learning the skill and the PHP and CSS code will do the rest. I designed this to display on our contact page but you can use it for pretty much any job that you offer. Even if your skills are not related to website design a skill set is still applicable.
In this article we show you exactly what you need to do to get this skill set module to display properly on your site without very many modifications while it remains XHTML compliant.
See it in action
PHP Function
This is the function you call that does all of the work for you. It is very simple and basically subtracts the year you learned the skill from the current year to display how many years you have in experience with the skill and will give you a percentage based on the first calculation. This calculation will be used in the CSS background.
<?php function skillLevel($year) { //display how many years you have known this skill echo date("Y") - $year + 1; } function percentage($year) { //of background showing based on the year you learned this skill echo 100 * (date("Y") - $year + 1) / 9 //it is 9 in this example since I started 9 years ago } ?>CSS
This code displays the images needed for to show the progress bar and correctly and also formats the text displayed below the progress bar.
<style type="text/css"> .progress-bar { background: url("images/percentage-bg.png") no-repeat scroll left center transparent; height: 39px; width: 316px; } .progress-level { background: url("images/progress.png") no-repeat scroll left center transparent; height: 39px; } .progress-bar .small{ color:#666666; display:block; font-size:10px; font-weight:normal; margin-left: 10px; margin-top: -10px; } </style>HTML
This is the HTML that you will have to place between the BODY tags on your page. You can create as many skills as you want by copying and pasting the code below. You only need to change the year in the PHP function to whatever year you learned the skill.
<div class="progress-bar"> <div class="progress-level" style="width: <?php precentage(2003) ?>%;"></div> <div class="small">CSS (<?php echo skillLevel(2003) years experience)</div> </div>You can use the following images in your design or create your own to your specs. Just right click on the images and select save as.
Conclusion
I hope you enjoyed our how-to and I hope that it is as simple for you as it was for me. It is an easy to implement, useful way to display your skill set to your potential clients or visitors. I have also attached the zip version of the entire project. You can download the entire project using the link below:
Entire Skill Set Project
