View live site here

A resume website for myself, Kiran Satyarthy. I am an Engineer and currently pursuing a Full-Stack development diploma from Code Institute. This is a single-page website with a 3-page length. This website is made for Recruiters and Employers. This website features my Personal Information, Profile Picture, Projects done with Code Institute until now, A blog about me, CV PDF in the resume section, and Contact details.

1. Recruiters want to easily navigate through the site
2. Recruiters want to see the past work experience of the client and what is He/She doing in present.
3. Recruiters want to see the educational qualification of the client. They want to be sure if the applicant is capable of the job.
4. Recruiters want to know what the employee thinks about herself/himself and how does He/She look.
5. Recruiters want to get a pdf of cv if they like the profile.
6. As a recruiter, If I want to contact the applicant, how many ways are there to contact her/him. For example, can I make a telephone call or Can I send an email immediately or can I send a message on any social network sites, such as Linkedin or Twitter.
7. Recruiters want to know how eagerly applicants want this job and how He/She is upscaling themselves to get this.
8. If recruiters like the profile, Is there any way to tell the applicant about the project for which they are considering that profile.

I wanted a simple website for Recruiters and Employers. Which should be easy to navigate and get information.

I wanted to add my past work experiences and present ongoing course details on the site. I wanted to add my contact details and some personal information also.

I wanted a Navbar that has my brand image and menu links which can be used to go to the project section, about section, and contact section. I wanted the visitor of the site to easily navigate through the site, get my Personal information, get to see my Educational background and Work experience in a simple format. If they want they can easily connect to my GitHub and LinkedIn. and download the pdf version of my CV also. When someone visits the site the first thing they see should be personal information so that they connect with the applicant, then educational qualification should come, followed by contact details and form.

Wireframe, which was made in the initial stage of product development is a little different from the final product. During the development, I thought that it would be wise to add one profile image on the home page. So that everybody will know who they are talking about. I thought of adding code institute past project links and live URLs also. So that the recruiters can get a clear picture of my skill. My first wireframe was missing the tablet size device view. So, I made one more wireframe and added here. Which can be seen as final wireframe.

The initial wireframe can be seen here wireframe

The final wireframe can be seen here final wireframe

The background color is kept Beige to give a calm and smooth feeling. The font used was "Raleway" imported from google fonts. The font color was decided to keep black for the entire page and dark orange for the headings. The project is a single-page site with 3-page length. It was decided to keep it this way for easy navigation for mobile viewers. The links were provided to get a better idea about the projects, Github repositories and Linkedin profile.

The background color of the website is kept beige and the font color is dark orange for headings and black for the rest of the texts. The font family is "Raleway" throughout the page.

This website features a Responsive navigation bar on the top of the page with a logo on the left and menu links on the right. The logo is linked to the home page of the site. Menu links are linked to the Project section, About section, Resume section, and Contact section.

The home page is having a big heading with my name on top and some description beneath that. It has a Personal Information section, which is having details about Full Name, Address, Telephone number, Email link, link to GitHub, and link to the LinkedIn site. It has one large Profile picture to get a better idea about me.

The Project section is having details and descriptions of 3 projects done with the Code Institute until now. Those are Rosie resume project, Whiskey drop site, and Love running site. The image of the project is linked to the live URL of the project and the heading is connected to GitHub.io or Repl.it repositories.

The about section is a blog about me, which tells about the educational background, my immigration from India, and some family background details. It also has mentioned my current engagement with Code Institute, where I am pursuing a Diploma right now. An inspirational quote is also added in the end.

The resume section is a link to the pdf of my CV. It opens the cv on a different page and that pdf can be downloaded.

The contact section has my Email address in bold, which opens the default email client to send a direct email from the webpage. It also has one form for the client where they can submit their project description if they like my resume.

The footer section has a link to download the cv on its left side, by clicking on the font awesome icon of download. That icon changes its color to dark orange when it hovers over. On the right side, It has 3 links to social networks Github, Linkedin, and Twitter. Which are represented by their Font Awesome icons. It changes its color to dark orange when hovered over and links to respective opens on a different page.

• Header Logo- It always exists on top of the page.
• Header Navigation Bar- Navigation Bar is fixed and can be seen always on top.
• Github Link- A Github link is provided on the Home page as well as in Footer.
• Linkedin Link- A direct link to my Linkedin is provided.
• Contact Form- A contact form is given for easy contact.
• Footer- The Footer is situated at the bottom of the page. Which has social network links and one link to download pdf of Cv.
• CV PDF- Pdf of Cv can be downloaded through the resume button in the menubar and also from font awesome link in the footer.

• A progress bar of skills may be added in the future, for a better idea about me.
• After finishing the Code Institute course, updated CV and Linkedin links will be added to the project.

• HTML

  HTML is the main language used to write codes for this project.

• CSS

  CSS is used to write code for designing and beautifying the site.

• BootstrapCDN

  Bootstrap is used to make the site more responsive and to make the navbar collapse in the mobile view. All the sections and Footer is made using Bootstrap container, to give them a definite size.

• Github

  Github is used to make repositories and for Version Control.

• Gitpod

  Gitpod is the main cloud-based editor used for this project. Workspaces are made using the green Gitpod button in Github.

• Font Awesome

  Font Awesome is used to import download, Linkedin, Github, and Twitter font awesome icons to beautify the site.

• Google Fonts

  Google Fonts is used to import fonts for this project. The main font for this project is "Raleway".

• Balsamiq

  Balsamiq is used to make wireframes for the project in the skeleton stage.

• AutoPrefixer

  Autoprefixer is used after testing the compatibility of the site for all browsers. After finding some fault in that, autoprefixer is used to fix it.

• W3C Validator

  W3C Validator is used for testing HTML and CSS for the site.

• Am I Responsive

  Am I Responsive site is used to take a mockup screenshot of the project, Which is attached at the beginning of this document.

The detailed testing report can be found here Testing

This project is developed using the Github repository. Coding is done in the workspace provided by Gitpod.

Steps were taken to deploy the project

1. Log into Github.
2. Select Kiran6248/MS1-KiranResume.
3. Go to settings on the top right and scroll down to Github Pages.
4. Under source link dropdown change the none to master branch.
5. The page will be refreshed automatically and we will have a link to the live URL.

To run locally, You can clone this repository directly in the editor of your choice by

git clone and adding the URL of the site.

git clone http://github.com/Kiran6248/MS1-KiranResume

and the local clone will be created.

All the content in the personal info section and About section is written by me.

• The profile Photo used for the site is my photo.
• The Screenshots of all the live URL of the project were taken by Snipping Tool.
• All the images used in the site were minimized by http://tinypng.com.

• The CDN links for Bootstarp, Font Awesome, Hover, and jQuery were copied from http://cdnjs.com/
• Code used in making Navbar is copied from Bootstarp Navbar
• Code used in making Contact form and Footer are referred from Rosie-Resume Mini project of Code Institute.

My mentor Adegbenga Adeye for guiding me in every step and giving me great ideas to implement in my site.

Code Institute slack community for giving feedback for the betterment of the site.