Nowadays it is very important that you have a portfolio that shows who you are in more details. But when we look at portfolios of academic professors we usually find plain text that is not attractive. So that inspired us that we must make a good looking portfolio that attracts whoever views it to know more about you and your achievements.

What it does

This portfolio will allow recruiters to have an overview about who you are. Whoever views your portfolio will have a solid description of your projects and their Github repo( and a link to a deployed version if it exists) , moreover , your full history of education will be shown as well as your work experiances. The portfolio will also allow visitors to contact you through your social media accounts. You may also share your resume online. The portfolio also has a dark mode if you are a dark mode fan and hate bright screens. lastly it works fine on mobile phones so that should not be a problem. Everyhthing is shown on cards that are engaging in a very unique way with their 3D on hover animation.

How we built it

We used HTML, SCSS and javascript to build this portfolio. Our Pod (3.1.4)selected issues and solved them by creating PRs and merging them to the main repo then we customized the website so that it looks good and attractive with some CSS animations. We( team 1 ) worked on 2 issues firstly creating a NavBar with anchor tags and a return to top button , secondly we worked on adding a link to the resume in the profile section. For the customization part we used vanilla js to make the cards interactive by looking like as if they are 3D.

Challenges we ran into

  • Some merge conflics were complex.
  • different time zones made it hard to work together for 6 hours. we only got 3 hours common time.

Accomplishments that we're proud of

  • the 3d animation did not work in the first try but finally we managed to make it work.
  • merging to the main repo.

What we learned

well for me ( mark ) I am not experienced in creating web applications , I am more into data science and machine learning.But during this short hackathon I got out of my comfort zone and learnt new things. and I am actually very satisfied with the final product. and surly this is not the end because we can improve the portfolio after the hackathon with greater ideas.

  • scss animations.
  • improved my skills in css flexbox and grid.
  • Github best practices .

What's next for Personal Portfolio

  • Make it fully responsive for different sizes of screens.
  • add a contact section where viewers can directly send emails.
Share this project: