Project II IM 115 Web Development I Eduardo Reis Subject Personal Interest Web Site - 20% Outcomes In this project, each student is required to demonstrate to the best extent of his/her skills, their expertise using HTML, CSS and Javascript. Background With the popularization of the internet, service providers are expected to have their own web site in order to promote their business, better serve their customers and reach out to potential customers. All sort of service providers, from big companies to the small business right next corner have now the need to find good freelances that will help them to put their web site portal on the internet. As a web developer, you are as well expected to have a very professional portfolio to present the quality of your work in order to attract more customers. Expectations The idea is to make, from scratch, a personal website, like a portfolio. This assignment is done in groups of three. The students can share their code only inside the group, but each student is responsible for the development of their own section on the website. Home Page (index.html) Pretend the team owns a spin off company under Confederation College. Create a website containing the home page (index.html) for this company. Come up with a logo company’s vision company’s provided services You are free to them layout however you want, it is your company. Make sure you have a very professional and clean home page for your company. Members (members.html) Have a section to list the developers in your company. Make sure, for each member, you add: - Photo - First Name, Last Name - Hometown - Current City - Email, Skype, Git - Biography Member’s Portfolio ([last_name]/portfolio.html) When clicking on a member, a portfolio for that member will be opened. All the members portfolio should have exactly the same look. On each portfolio, you must provide the following sections CV/Resume This section should contain your professional experience, accomplishments etc It’s up to you weather to do it in a CV or Resume style, there are several pages explaining the difference between them. Whatever you do, also put a button for downloading a PDF version of your CV | Resume. Projects Include all your projects from our course, excluding the first two labs. Make sure to have a paragraph explaining these projects were developed during our course, as one of its requirements. So that people don’t think that was a product prototype or something similar. You may want to add other courses projects on this section. If you do so, don’t mix them together with ours. Organize them into subcategories. Organization is key, remember this website will be your face on the Internet. Each project must include a thumbnail (screenshots), the code uploaded to github or bitbucket and properly linked. Each of these external project must have their own repository, do not mix code from that with our website code. Present these projects as you were selling them. Add value to it by adding a description with highlights you consider to be the most valuable. Image Gallery ([last_name]/hobbies.html) Each member will pick their favorite hobby (can be more than one) and create a dedicated webpage for it. It is your hobby, you decide how to present it, and what to present about it. Pretend you are providing a service on that hobby too. The content on this page is entirely up to the group member. However, a image gallery about the hobby is required. The entire team will be responsible for the image gallery, its underlying mechanism will be shared across the members, however each member should have their own set of images, and hobby page. Create a image gallery to display around 30 images about your hobby. Each image should be interactive in the following way. When you hover the mouse over the image, four icons should appear in one of its corner. Change Size: One of them will have the functionality of making the image bigger on the screen. By default all images have the same size, small. medium if clicked once large if clicked twice wide if clicked three times They must alternate, by the number of clicks, if it is on wide and another click is given, i will return to small It’s up to the team to decide what each of these sizes mean, but wide should take the whole width of the screen. Top: Send the image to the top of the gallery, the first position Before: the image to be one position ahead, the previous position After: the image to be one position back, the next position Bottom: Send the image to the bottom of the gallery, the last position You must pick the icons to be used with each functionality. Specifications Company Home Page (index.html) Logo Vision Services Members (link) Member’s Page (members.html) For each member Photo First Name, Last Name Hometown Current City Email, Skype, Git Biography Each member’s portfolio ([last_name]/portfolio.html) CV/Resume Education Experience Other sessions such as Volunteer Extracurricular Skills … Projects Product Projects You’ve done (if any) Project I … Web Development I Lab 3 Lab 4 Assignment 1 Other courses Project I … My Hobby/hobbies ([last_name]/hobbies.html) Deliverables Pages index.html members.html [last_name1]/portfolio.html [last_name1]/gallery.html [last_name2]/portfolio.html [last_name2]/gallery.html [last_name3]/portfolio.html [last_name4]/gallery.html Feel free to have more pages, if you think is needed for organization or layout reasons. Make sure to have fluid navigation among the pages Somehow, the user should be able to navigate from one page to another by clicking around. Be very organized with your files, stylesheet, js scripts, images, etc.