What?

A portfolio website!

Showcase your projects and skills.

Goal

• Make a small site showcasing your skills and work using Drupal 8

• Use content types in a sensible way to create structure

• Use simple and advanced modules such as pathauto & webform

• Use some advanced techniques such as webforms & contextual views

Content types

• Pages [page]
  • Home (Or own content-type)
  • About Me
  • Contact
• Blog articles [article]
• Portfolio items [portfolio_item]
• ?

Taxonomies

• Skills [skill]*
• Tools [tool]*
• ?

*Add an icon to display these.

General parts

General

Header

• Simple logo

  • Use what you have,

  • don’t spend 20 hours making your own

  • KISS)

• Navigation    

General

Footer

• Small simple footer

  • © Notice

• Social icons

• Basic contact information

Page descriptions

Home

• Create an enticing home page. For example:

  • Add small section with CTA-button to About-me page

  • Show a few Blog post teasers and add a CTA-button to the Blog page

  • Show some portfolio items and add a CTA-button to the Portfolio page

  • Add small section with CTA-button to Contact page

About me

• Page about yourself and your skills

• Add some visuals and logos to reference skills & known tools (taxonomies)

Blog

• Filterable view of blog posts

  • Categories

  • Tags

  • Skills

  • Tools

  • Date

• Each Blog post links to a detail page

Blog post

• Detail page for each item

• Shows post text with visuals

• Show breadcrumbs

Portfolio

• Filterable view of portfolio items

  • Skills

  • Tools

  • ?

• Each Portfolio Item links to a detail page

Portfolio items

• Detail page for each item

• Show some text describing the item

• Add some visuals

• Show breadcrumbs

• Bonus: Add a system to create unique layouts for each item

Taxonomy pages

• Reference skills & tools to blog/portfolio-item

  • ​/skill

  • ​/tools

• Skills & tools should be clickable to show a view of Portfolio-items/Blog-posts that have this reference

  • ​/skills/design

  • /tools/photoshop

Contact

• Show contact information 

  • email, twitter, linkedin, etc

• Add a contact form

  • Use webforms

    • ​It should automatically send an email to

      • ​Site owner

      • Person who submitted request

Req. Features

Req. Features

• We won't bother writing a theme

• Use one of these:
  • ​Zymphonies - base
  • Zymphonies - sales
  • Zymphonies - industrial
  • Zymphonies - news
  • Zymphonies - restaurant

Req. Features

• Webmaster role

  • Add a webmaster role that can only

    • add/update new/existing content

    • change menus

    • set aliasses/meta-tags

    • ?

  • This user should not be able to change modules settings or make structural changes to the configuration.

• Metatags

  • Add basic meta tags to your pages

Req. Features

• Each page must have an automatic URL alias

• Add Social icons

  • Use AddThis or ShareThis or ...

  • Share buttons to share site content

  • Like my page buttons

    1. (Can point to thomas-more page)

  • ​Both types (Share & Like buttons) are required!

• Contact form made with webforms

  • This form should send an email to the site owner and to the submitter of the form.

1. Each student must make & submit his own website

   1. Collaboration is encouraged, but no direct copying!

2. Site must be hosted when deadline passes

3. Create an admin user for teacher

   1. Send notification mail to pieter.mathys@thomasmore.be

   2. VERY IMPORTANT: If i can’t login to your site then I can’t grade your work.

4. Make sure there is enough (demo) content to get a good view of the site

   1. 20+ blog post, 20+ portfolio items

   2. Create a few curated posts/items that showcase your features/styling

   3. Use devel_generate to add the rest

Bonus points

Not required extras

Bonus points

• Tune Interface for usability

  1. Add description/helper text

  2. Add custom text-editors for special text input:

     • like if you want to make a field for embed codes, create a profile to disable WYSIWYG/Tag stripping/etc and limit the field to that profile (allowed_formats)

  3. Other: there are many ways to improve the UI. Do some research, add something cool and let me know during the oral exam.

Bonus points

• Add some modules that improve the QOL when working on the site

• Add some cool JS/CSS(/sass?)

• Own theme?

• Surprise me

Example Mockups

Mockups

These are examples. The site needs not be created exactly as these mockups show. Use some creativity and make these pages your own.

Balsamic Mockups .bmpr file

https://drive.google.com/open?id=0B6acZAtKWgSwcHMtUFNCMGFZeEk

PDF Export

https://drive.google.com/open?id=0B6acZAtKWgSwTG5yN2JyY3d3NDA

Deadline

& Turn in

Deadline

=

TBA

~ 8/01

Location

=

Toledo

What?

=

Upload a ZIP file containing the following:

• Full Drupal site code backup (entire site)

• Database backup file

• Text file with link to live-site: livesite-url.txt

Important!

1. Site needs to be hosted

2. Teacher must have unique login with admin rights

3. All code & database must be submitted by upload