Portfolio-DSC

Website Link:

https://mywebsite0408.000webhostapp.com/

Intro Video Link:

Please watch the video to traverse the website with ease ;-)

https://drive.google.com/file/d/1T1ubZgXpZeuU-7_IUhp7fL76Nzwsvj6F/view?usp=sharing

Motivation

This is a portfolio, which is based on me, my skills , my hobbies and my contact.

Components

HTML (HTML5) =>

Have used HTML to put the content inside the website.

CSS (CSS3) =>

It is used to add a layout to certain sections of the website and beautify some elements.

Javascript =>

I have used javascript to add interactivity to the page by using it’s cool features of manipulating the DOM. It was also used to add typing effect and to implement Local Storage.

Bootstrap(Bootstrap 4.5) =>

The basic layout of the webpages were made by using bootstrap and it’s components. This is used to add responsiveness to the website on different viewports. Also different features like nav-pills, bootstrap cards, modals etc were used from Bootstrap 4.5.

PHP (PHP 7.2) =>

I have used PHP so that I can add a mailing function to the website which will send a mail to the users who will fill the form on the contact page.

Local Storage =>

I have used this tool to store user data without any involvement of the backend. The data is stored in web browser storage and then the saved data is used for displaying the modal on the success page which appears after the form has been filled and also to send mails.

CSS Animations =>

I have used this to emphasize on certain elements on my website and beautify them using different effects and animations. Implemented different types of text and image animations on different pages.

JQuery =>

I have used Jquery to call a function when all the contents of the DOM of the page have been loaded (Success page) .The function causes the popping up of modal on whenever the page is loaded.

Git and Github =>

This has been used in order for pushing and storing all the files of source code in the master branch and updating the README.md file for referrals.

000webhost =>

000webhost provides hosting services to my website as it includes a PHP mail handler that is not provided on github pages.

SALIENT FEATURES

1. Have provided icons for each of the pages in the head section in order to be displayed along with the title of that page.

2. Navigation is provided in the header as well as footer so that the user can navigate easily between the pages either backwards or forwards.

3. Video provided in order to clear any confusion while traversing the website .

4. An error page and success page provided to let the user know about their form filling that was it a success or a failure.

5. Have a responsive design at least on 3 platforms (xs, md, lg).

6. Each page has different files for javascript so that the overall loading time of each page is reduced.

7. Local storage is used instead of a backend service because of which the user’s privacy is maintained and their data is only saved in their Local web browser storage.

For viewing it -

Safari => Inspect element > Storage > Local Storage

Chrome => Inspect > Application > Storage > Local Storage

8. Tried to make it more accessible by adding contrasting color effects on pages so that the user doesn’t find it difficult to read or view.

9. Used Beautiful and neat fonts so that users will be able to read properly.

10. I have tried to make the website more viewable and attractive by only including the crux points or by using different css styling effects.

11. CSS - text and image animations are added.

12. Javascript typing effect is added on the home page.

13. PHP Mail Handler is used in order to generate mails after form filling of the contact page.

14. Icons/ Svgs from different platforms such as flaticon and font awesome have been used.

15. Embedded video links and also added images for my hobbies using nav-pills component of Bootstrap.

16. Provided social media icons bar on every page i.e. fixed on the left in the large viewport and fixed at the bottom in the smaller viewport.

17. I have tried to give the profile picture on the home page and the video on hobbies page, a 3-D look by using CSS box-shadow property and it’s translate property.

FLOW OF WEBSITE

Landing Page

It is a page designed with the aim to increase the overall beauty of the website and to attract the user at glance.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3 Animations & Tricks

PAGES LINKED WITH THIS: landing.css

RESPONSIVENESS

Home Page / About Me Section

A page containing a brief introduction about me with a profile picture.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3 Animations & Tricks

4. Javascript - Controls the typing effect on the page.

PAGES LINKED WITH THIS: home.css home.js

RESPONSIVENESS

Hobbies Section

A page to showcase my hobbies. My main hobby and side hobbies are separated properly and it also includes my images/ video while doing that hobby.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3 Animations & Tricks - To write the name of the main hobby.

PAGES LINKED WITH THIS: hobbies.css

RESPONSIVENESS

Skill Section

A page to showcase my skills, the things which I know, have learnt and how much I know them along with rating on star based systems.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3 Animations & Tricks

PAGES LINKED WITH THIS: skills.css

RESPONSIVENESS

Contact Me Section

A page that includes a contact form, for someone who wants to contact me can drop the message with details and I’ll get the mail so that I can contact that person.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3 Animations & Tricks

4. Local Storage: To take input in the form and store in the webbrowser data so that it can be used for sending mails and display confirmation modal.

5. JS- For implementing local storage and storing the values of the form.

6. PHP- Mail function in PHP is used in order to send emails from the data stored in the form.

PAGES LINKED WITH THIS: contact.css contact.js contact.php

RESPONSIVENESS

Success Page

A page that confirms the successful sending of the mail in the contact page . Also it displays confirmation details of the user of the form through modal.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3 Animations & Tricks

4. Local Storage: To extract data from local storage and display in modal.

5. JS- For implementing local storage and also for displaying modal using it’s “document loaded event.

6. JQuery- For calling the function when all the contents of the DOM of the page have been loaded. This leads to pop up of the modal.

PAGES LINKED WITH THIS: success_page.css success.js

RESPONSIVENESS:

Error Page

A page that specifies the rejection of the sending of the mail in the contact page due to internet connectivity issues or due to incomplete form filling.

TOOLS AND TECH USED:

1. Bootstrap 4

2. HTML 5

3. CSS3

PAGES LINKED WITH THIS: error_page.css

RESPONSIVENESS

LEARNINGS

Things which were learnt along the way were =>

JS typing effect

I watched 4 youtube videos to learn how many ways this effect can be created.

Bootstrap masking property

It was used on the Landing page to give a contrast to the content.

Applications of CSS position property such as relative and absolute

I read articles from stackoverflow and watched some videos to see it’s different application.

PHP Mailing Function

I have surfed many youtube videos to learn PHP mailing function and used this in contact form to send confirmation mails to the users.

SOURCES & REFERENCES

W3schools

Stackoverflow

getbootstrap.com

Css tricks