This is my first major project for Code Factory Acedemy. However, this will also my first attempt on building a website. We have to use Ruby on Rails in conjunction with the HTML5 and CSS3.
The reason of this website is to increase visibility of my self in a very competitive marketplace. Furthermore, this portfolio also makes sure the most current, professional, and accurate information about me is available for everyone to see.
You can view my website on www.firmanc.com. It is preferable to use google chrome for a better experience.
My main design focus for the website is to have a clean and easy to read portfolio. I want to also show my front-end expertise to make this website very interactive. Secondly, the website has to be responsive on mobile view and other devices.
My originally plan was to use Bourbon, Neat and Bitter as a framework for this project because its considered a simple, lightweight and highly used on the professional levels. However, I decided to move over to bootstrap framework because it considered to have a faster development time and one of the best responsive grids system. You can also find lots of documentations for bootstrap on online compare to other frameworks.
Here's the rundown of technologies I've used for this project:
| Name | Used For |
|---|---|
| Ruby on Rails | Web application framework for the backend |
| Twitter Bootstrap | HTML5 and CSS3 Framework for the frontend |
| Brackets | Text editor |
| Git | Software version management |
| Heroku | For deploying my website |
Ruby on Rails gems I've used for this project:
| Gems | Used For |
|---|---|
| Bootstrap Saas | insert bootstrap with Saas framework |
| Autoprefix | it automaticly add the necessary vendor prefixes used |
| Scrollspy | the only JavaScript I have used for a smooth scrolling effect |
My portfolio design is based on the templates below. Additionally, I picked few ideas from other different templates from Pinterest and other websites I like.
Below are some of the frameworks showing how I want my website to look. Some of the design elements has to change on the final built due to difficulties or not having enough time.
My first focus was to build the side navigation which I still have problems until now. The top navigation was used for my logos and language buttons.
My next processes were to make each page in one viewing height, so each page can be fit on one screen when pressing each navigation. I used this configuration on the main css file for each section:
height: 100vh;
width: 100%;The hardest part on building each page is there wasn't clear ideas on the contents that will be put on each section. By looking on a lot of examples, I decided to keep it minimal and used more images to provide the information.
I used the "grid system" from bootstrap to insert and laying out my contents. I used icons from devicon.fr and fontawesome.io to show the icons.
At the beginning the website wasn't very responsive on mobile view. To resolve this, I have to provide additional settings inside several CSS files by using the @media functions.
@media screen and (max-width: 767px) {}As I mentioned before there wasn’t a lot of time was given for this project, and here are the few features I want to implement to the website in near future:
- Navbar - navbar not working as what I wanted to be
- Javascript - implement more javascript to make it look pretty
- forms - the form not working right now
- Indonesian version - need to translate my current website to indonesian language
- more features - videos and more projects need to be implemented to the portfolio website.