Giter VIP home page Giter VIP logo

my-personal-portfolio's Introduction

My-Personal-Portfolio

Bhargavi

FullStack Web developer

Hello and welcome to My Personal Portfolio

About Me

  • I'm a Full stack Web developer, I'm a Web Designer. Experienced with all stages of the development cycle for dynamic web projects.

UX

User story

  • Users will know the details about my work, education and experiences and contatct deatils.
  • As a owner I can populate all my details for personal portfolio which can be accessed by the recruiters.
  • User will know complete details about me and will help in hiring me.
  • As a new visitor of the website, I want to easily navigate on the page.
  • As an interested client, I want to have a contact form easy to fill out.
  • As a potential client, I want to get to know Bhargavi's background and personality to see if I want to hire her
  • As a recruiter, I would like to get an insight into Bhargavi's work and I also want to have a printable resumé what I can present to my superior.
  • As an employer, I visit this page to see a showcase of a potential employee's work.

1. Strategy.

  • Provide a platform where the user can look into my experience for hiring me or any user can use the website for inspirational purpose.
  • Provide a platform where user can look into my project work list and share it with other users if they want.

2. Scope

  • Fits in with my current skill-set of HTML, CSS.
  • Easy way to log in into into the website with hire me button for recruiters.
  • Allow the user to look into Home page, aboutme Download cv, projects and contact page.

3. Structure

  • As the website has two main ideas, Hiring and Project works I kept the website as simple as possible and easy to use. Instead of creating a lot of functionality.

  • A part of the home page, every page has the same structure to keep consistency and to make the navigation easy to assimilate.

4. Skeleton

Wireframes

  • When I started working on this project, I had a picture of the site in my head. This picture has changed a lot in the last few weeks.
  • I have used Balsamiq for designing the wireframes.

Below are the images "My personal portfolio" website would really look almost same.

wireframe wireframe wireframe

5. Surface

The overall UX is clean and similar in all pages to keep consistency.

  • Most part of the website is in Sans sarif font and footer is in Dancing script font.
  • I have used Google Fonts to import the fonts for the website.
  • Most of the images and background image are from Google images (not copyrighted)
  • I have used fontawesome to source all the icons through out the website.

Features

Existing Features

1. Navigation Menu /Home page.

2. About me.

3. Projects.

4. Contact.

Description of navigation.

  • In Home page Picture and few text.
  • In About me few lines about Bhargavi.
  • Projects says few Web designing done by Bhargavi.
  • Work history says Bhargavi's experience of works in which she has done all these years.
  • Contact page give the contact info about Bhargavi.

Features Left to Implement.

  • In the future I plan to add further projects, work experience to make My portfolio and About me pages better.
  • I would really want to implement my skills in Responsive designing / mobile first designing.
  • I will learn to use of background images effectively and responsively.
  • I will implement the animations skills in the website.
  • Implementation of colours would be better.

Technologies used

  • HTML
  • CSS
  • BOOTSTRAP
  • HTML formatter
  • CSS formatter
  • HTML validator
  • CSS validator
  • Google fonts
  • Font Awesome
  • Google Search engine
  • Markdown Language
  • CSS Autoprefixer

Testing

User Stories

  • As a user, I want to easily understand the main purpose of the site and learn more about the portfolio.
  • TEST: After the users load the page the first thing sees on the home page is a brief explanation Bhargavi's portfolio with footer with all social links which Bhargavi follows.
  • As a user, I want to easily to get to the Home Page.
  • TEST: Also in the home, there are two buttons one will redirect to the Bhargavi's CV in a new page and another one is Hire Me(dummy).
  • As a user, I want to easily click on About Me page.
  • TEST: With one click the users can easily get into About Me PAGE.
  • As a user, I want to look into the more about Bhargavi's work experience in a different feature widgets.
  • TEST: After the user get into the page they will look about me and work history of Bhargavi.
  • As a user, I want to look into Projects done by Bhargavi.
  • TEST: After the user get into the page they will look my projects of Bhargavi.
  • As a user, I want to contact Bhargavi for hiring her or for any information needed.
  • As a user, I want to easily find a way to contact Bhargavi.
  • TEST: When the user clicks on contact page they can find many options to contact Bhargavi like email, phone, contact form and address. When you try to click send message without filling required feilds "Please fill out this field" will be poped up.
  • All links were tested in Replit, gitpod,github pages, mobile,tablet and laptop screens.

Navigation links redirect to the desired pages.

  • Checked if all links in the navigation bar and check if they redirect to the desired pages.
  • Checked if the social links on the footer redirect to the desired page.
  • Home Page:
  • Checked if download CV is redirected to new file called Bhargavi CV:
  • About Me Page:
  • Checked if the page is redirected to the about me page.
  • Projects Page:
  • Checked if the page is redirected to project page.
  • Checked if the images are loading and for Hover effects.
  • Contact page:
  • Checked if the contact page is redirected to contact page.
  • Checked if the contact form is working without the blank.
  • Checked if the send message button is working.
  • Checked if the social links in all the footer in all the pages is redirected to new pages respectively.

Deployment

  • This is my first website and written in GitPod, and it's hosted using Github, deployed from the master branch (via Settings). I've saved after every important change starting with git status, git add ., git commit -m"message" and in the end pushing (git push)it to the Github repository. After every commit, when you refresh the repository, you can see the changes. The main (landing) page of the website is named assets in which I have index.html, aboutme.html, projects.html, contact.html, css,style.css, cv,readme-img,README.md and images.

How to deploy

Github Repository

This project was stored on Github using the following steps.

  • I created an account on GitHub My account

https://github.com/Bhargavi84/My-Personal-Portfolio

  • I created a public repository for my 1st Milestone project

Github Pages

This project was deployed to GitHub Pages using the following steps.

  • I logged in to Github and located the Github Repository

  • At the top of the Repository (not top of page), I clicked the "Settings" Button on the menu.

  • I Scrolled down the Settings page until you locate the "GitHub Pages" Section.

  • Under "Source", I clicked the dropdown called "None" and select "Master Branch".

  • I scrolled back down through the page to locate the now published site link in the "GitHub Pages" section.

  • Cloning the Github Repository The Github repository was cloned and stored locally on my machine using the following steps.

  • *I cloned my Github Repository using HTTPS, under "Clone with HTTPS", and copied the link.

  • I opened Gitbash, I pasted the HTTPS link and added a local directory in my machine.

  • I opened IntelliJ IDEA community edition, clicked on File/Open File and navigated to the local directory I had cloned my Github repository.

Credits

  • Most of the contents written by me.
  • Inspiration from Code Institute Rosie resume project.
  • Zoyothemes webiste design themes.
  • Inspiration for ReadMe file is Krisztina Szabó and Henrique Peroni Website.
  • My mentor excellence_mentor llesamni for guidance.
  • Tutor Support Code Institute.
  • Slack Community.

Media

  • The picture in the page is random professional working women from google
  • The projects picture is the random picture from Google free images
  • I learned a lot from browsing the templates on W3Schools
  • Slack Community was the greatest help me problem solving

Disclaimer

  • The words and sentences, Pictures and attachments used in this project is imaginary and educational purposes only.

Acknowledgement

There is always a scope for Improvement.

This site is Project Assesment Purpose only.

Bhargavi

Code Institute

2021

my-personal-portfolio's People

Contributors

bhargavi84 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.