Skip to content

Latest commit

 

History

History
116 lines (84 loc) · 5.13 KB

README.md

File metadata and controls

116 lines (84 loc) · 5.13 KB
Raw

Showcase

Showcase is a web portfolio making competition for students at AIT. The main aim of this competition is to help you stand out from other candidates in a company’s selection process by helping you build your website featuring yourself also known as a web portfolio.Not everyone has their own portfolio.

It provides tangible proof of your skills and abilities and demonstrates to the employer that you are qualified for that specific job.

Here we are making a template to follow along with us and get the design inspiration.🎃

The table of content of this template are 📚 -:

🖍 Home section(Basic Introduction)

  • Educational information
  • Hobbies

♥ Skills section

  • Technical Skills
  • Soft Skills

📝 Projects (with Github/hosted Links)

📈 Represent your DSA/CP skills

📮 Contact section

  • Social media links (Github, LinkedIn, FB etc)
  • Downloadable resume (pdf recommend)
Resources Link
Slack Channel https://bit.ly/3eg6t5A
Add Showcase as Collaborator https://youtu.be/p49LRx3hYI8

NAVBAR & LANDING SECTION

Landing page is the first impression of your portfolio. It's meant to be simple but the at the same time be attractive & elegant. Following things will help you in achieving your best landing page:

👉 Navigation Bar :

  • Keep this simple with 3-4 buttons only. (About, Projects, Skills, Contact)
  • Add burger menu for small screen sizes with help of Bootstrap.
  • Small things like height of navbar matter a lot for design. So keep in mind to do it correct.
  • For more features, try to make it stick at the top and add interactive buttons (See scrollspy in bootstrap)

👉 Homepage:

  • Keep homepage simple with just your name, photo & introduction.
  • Add at most 3 buttons for resume download, contact section and skill/projects.
  • Buttons must lie under your basic description/intro to make the most impact.
  • For photo you can use your own face or some may prefer using a gif/png that suits your personality.
  • for more features you can add background effects, such as particles, shapes or icons according to your tech stack.

👉 Sources:

SKILL & ACHIEVEMENT SECTION

👉 Skill Section :

  • When it comes to learning quality matters more than quantity, so keep top three skill in a highlighted way.
  • The skill section should be aligned with your achievement section(relevant skills)
  • Keep things to the point and not cluttered.
  • For more features, try to make it animated with graphs and charts.

👉 Achievement Section :

  • Again, like skill section, highlight your top three, but at the same time mention your worthy achievement
  • Make font and numbers bigger and bold when it comes to facts, figures and important details
  • Keep things to the point and not cluttered.
  • For more features, try to make it like a timeline or gamified UI/UX.

For some design idea, You can also refer to these example portfolios 😃 -

  1. https://colorlib.com/preview/#myphotography
  2. https://colorlib.com/preview/#personalportfolio
  3. https://codepen.io/yagoestevez/full/oapQEJ

PROJECTS SECTION

Projects page is very important as it is the only viable representation of your capabilities. Project page should be simple with just the right amount of information. Following things will help you in achieving your best Projects page:

👉 Projects Card :

  • Make your project card image as engaging as possible by using relevant GIFs or videos.
  • Try to include Github link of your project if possible.
  • Including tech stack used in form of badges is good idea as it gives more information about your skillset.
  • For more advanced features, you can try animating your cards more and displaying information in creative ways.

👉 Sources: Some examples of great project card design as listed below, try exploring them as much as possible!

Contact Section

In the contact section you can do two things:

👉 First, you can create a contact form and after clicking on the submit button you will receive a mail.

👉 Second, you can simply add your social-media icons and other details.

For making a contact form you can take some inputs like Name, Email/Phone and the message. For the same you can take reference from:

And second thing which you can do is to add your social media icons in your contact section like: