Git Product home page Git Product logo

kelsafy-portfolio-website's Introduction

Kelsafy

It is portfolio website based on angularjs + bootstrap + php/mysql.

This website is originally made for fun to practice AngularJS But it turned out to be cool, having my portfolio online, and any one can fork the project from github, replace your info and contacts in 2-3 small files, create mysql database, fill your experience/projects/skills/links between them, put the database connection in the file and you will have full website with your info/experience/skills and sample projects with screenshots!

What is cool here:

So you may be wondering, I have a linkedin profile why I do this?

The answer would be:

  • You will have a website for your portfolio organized in a cool way, which is appreciated in your resume.
  • The really cool thing here is the links between your skills and your projects where people/recruiters can view how many projects you did with a certain skill/programming language.
  • It will just cost you couple of hours to have your website ready.

Website Pages:

  • First page which have a picture for you and short words about you.
  • Experience page with your education info and places you worked/works for with link to list projects for each company.
  • Projects page which list your projects with count and link to the skills/languages used in this project.
  • Skills page which list your skills whith the percent of how much you are good at it, count and link to the projects did with this skill.
  • Contact Me page which have a form that any one can send you an email.
  • Reviews page which have screenshots for the reviews by the clients or co-workers.
  • About Website page that have a description for every thing.

What's next?

  • Blog!
  • admin console to manage(add/update/delete) your data instead of doing this from the database.
  • may be turning this to website where people can register and go to their admin console and have their website as subdomain like mark.kelsafy.com without worrying about deploying/manage your website.

Credits

HOW TO USE

  1. Fork/clone the project.
  2. Edit the Json files under assets/data with your info/contacts.
  3. Now the time for the database run the sql file "kelsafy_db.sql" under assets/mysql to create the tables.
  4. Now put the database connection in "config.php" under backend/config.
<?php
$dbhost='localhost';
$dbusername='yourusername';
$dbuserpass='yourpassword';
$dbname = 'yourdatabasename';
?>
  1. fill your skills table with 3 params: name-image name(and put your image under "assets/img/skills") and the percentage (number from 0 to 100 indicating how good are you in this skill).

  2. fill your experience table from old to newest with params: company name - company image(also put it under "assets/img/experience") - title - location - details - start and end date.

  3. fill your projects table with params: name - image (put the image under "assets/img/projects" - short description - functionality and your role - start and end data - also the company id that points to the company that you did this project at, then get the id of the project and do the next two steps 8,9 with it.

  4. for each project id: if you have screenshots for the project put them under "assets/img/projects/{projectId}".

  5. for each project id: fill the table projects_skills that have the links between this project and skills that have 2 params: the project id and the skill id, one record for each skill.

  6. put screenshots for your reviews under "assets/img/reviews".

  7. Now deploy the project if you are asking for free web hosting websites contact me.

kelsafy-portfolio-website's People

Contributors

elsafy avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.