MY

About me

I am a willing and highly academic student who is seeking an IT apprenticeship with a prospective view of securing employment

within this industry.

I have previous experience in the retail sector and have been ac-claimed for my reliability and trustworthiness; I am known to

have very good customer service skills.

My strengths are, I am able to work both alone, as part of a team and I can remain calm in pressured situations. I have also been

known for my excellent customer service skills.

I enjoy playing various sports such as cricket and football; I was the captain for Bedfordshire County Cricket and played for a

number of years. Here I showed my skills as a leader and worked to play as a team.

Welcome to my Portfolio!

The website which I have created demonstrates the different media techniques I have used:

Videos

Google maps Sound clips

Different methods of photo gallery images Links which will take you to different locations

There is also a brief section showing screenshots of me using

codecademy. This course allowed me to expand my knowledge of the following:

HTML CSS PHP

Also in my portfolio, I have demonstrated my picture editing techniques on Serif draw plus. I used many different editing tools

to end up with my final image.

I created my website to demonstrate my different skills which I can use,, on Serif Web plus using the starter package.

Navigation bar

First of all I created navigation bar on the master page of the website, this is because what-ever you put on the master page goes to all of the pages which you have created. So it saves you from creating the same thing for all of the pages, for example my navigation bar. There were many different types of navigation bars, which were vertical and horizontal. Also many different colours. Below are the steps to making a navigation bar, as you can see you have to choose your par-ticular design then you can adjust the appearance and the names of the links. The black navi-gation bar is the one I chose and created.

Video Clip Then I moved onto the video clip, I didn't put this on the master page, because I did not want this on all of my pages. I only waned this on my home page. I created this by looking for a suitable clip. I created the video clip by saving the video link to a convenient place.

To the left shows the process I went through to make the video clip. Then I had to browse to find my link which I had saved and insert it. After this you can choose which kind of picture you want as a video clip, or I could have picked my own picture. The video clip I created is below.

Photo gallery The photo gallery had many different options to choose from, for example you could change the appearance of the images, speed, whether the user wants to click to view the next image or leave it as an automatic image. As I had more than one image on most of my pages I de-cided to leave the images as automatic without causing the user any fuss.

Above is the process I went through to create my photo gallery. The files which you add are the files which you want in your photo gallery to ap-pear on the website.

Below are all of the different appearances which I could have used for my pictures.

Once I selected the appearance of the pictures, I could then decide whether I want to leave the pictures running automatically, and whether or not I should leave the con-trol bar visible and lastly the duration of the pictures.

Sound clip Creating the sound clip was very similar to creating the video clip. This is because the process was identical. Again I had to save the sound clip, and look for it to insert to the file. After this was done, I could choose the appearance of the clip.

To the left is my sound clip

Google maps

To my website I added a map of where the location of the football stadium is. This was cre-ated on a separate page. I made this because if a user was looking at my website and they wanted to look at the map, or even if they wanted to see a street view of the stadium.

After I clicked on the Google map but-ton, this took me to the next step where I entered the location of the stadium. I zoomed in to the location so it makes it easier for the user. Then I added a marker, I did this because I wanted to make the viewer aware of where the stadium is. Also the user can use the street view option which gives them a much better perspective of the stadium.

Below is my finished map

Old Trafford marker

Button

I created buttons for my website to again make life easier for the user. For example I created a button on one of the pages which directs the user to the official Man Utd page. Also I cre-ated a button on one of the pages which directs the user back to the home page.

To view my website which I created to demonstrate all of these skills, please copy the link be-low!

C:\Users\Callan\Documents\Callan website\index.html

I had to click on the link which will allow me to create my button, then I had to choose the design of the button. After this I had to edit the hyperlink because I had to make sure that the pages where I wanted the button to redirect to were correct. For example for the Man Utd page I had to copy the Man Utd internet address into the site page link so when the user clicks on the button it will take them to that page. Once the URL address was entered the process of making the button was complete.

Created button

Coding

I have basic knowledge of coding from school, however I am taking a course currently called Code Academy. Here I am learning more about HTML, CSS and PHP.

Below are some screenshots of using Codecademy:

HTML I enjoyed HTML and CSS course the most, such as using the head and body tags which involved starting paragraphs and headings which was <p> </p> to start a paragraph and <h> </h> to start a heading. To add more headings all I had to do was add a number next to the ’H’ for example <h1> </h1>. I also enjoyed making lists, adding images e.g <img src then paste the image link then close it with />. Also I enjoyed the challenge of changing the font which ranged from changing the font family, size and colour. From the CSS course I learnt how to change colour of the text .

PHP The course which took me a little bit longer to get used to was the PHP course. I enjoyed learning about echo which allows you to output one or more string. , strings are a word or a phrase, also variables can store a string or a number which is sensitive e.g. $myname=“Callan”. I also enjoyed learning about arrays which are a little bit like a shopping list which allows you to store more than one variable as a list.

Font size

Font colour

Font family

CSS

Before

After

Serif Draw plus editing images

I have had experience using Photoshop, Gimp, Photo plus and Page plus, but my knowledge of the programme is basic, this is why I de-cided to use Serif Draw Plus for editing and creating images.

First of all I decided on what theme to use to edit the images. As you can see the image of Old Trafford is the one I copied and pasted into the programme. After this I wanted to edit the picture slightly, I did this by using a square frame tool and choose a colour from the colour wheel, this then covered the whole image. After that I used the transparency tool to start to edit the image. As you can see from the screenshots there were many different transparency ef-fects I could have used. I used the diagonal transparency tool so the colour of the background can be seen at the top of the image.

To the right are the different effects I could have chosen, when I was using the transparency tool.

Old Trafford Colour wheel Square frame Transparency tool

Firstly I picked certain images to match the theme, below are some of the images I have edited to suit the whole creation of the picture put together.

Below is the first picture I used, as you can see the picture has been flipped. The reason I have done this is because I wanted it to match the picture I wanted to put next to it.

BEFORE

AFTER

Below again, are two images which I merged together to make them blend. I used the radial transparency tool to make the image fade a little. I did this because these images had a background to them, by fading the image it will blend in with the whole pictures background. Below are some before and after pictures of the edited images:

Transparency effects

I used cut-out studio which is a very good tool to use when cutting out bits which you do not want to see in the background. One of the pictures below I used cut out studio on as I didn't want to see the background on the image as this picture was the main picture of the whole image. Once I finished using cut out studio. I went straight to the opacity tool which again allowed me to fade the image even more so I can see the background image just behind the image which I had just edited.

Original Edited

Finished

To the right is my finished picture which I created, as you can see there are a lot more football players on the actual images which I have edited, but I wanted to show how I edited some of the pictures in the portfolio.

As you can see I have cut out the black background behind the man.

TITLE PAGE + RESUME + WORK

= THE END.

Thank you for taking the time to review my portfolio!

CALLAN SINGH GILL