praveen-1995 / portfolio-html-css-project

Portfolio Project using HTML & CSS - Grid

Portfolio 🧔🏻

PROD [Live] : https://html-css-portfolio-prod.netlify.app/

Portfolio consists of a straightforward user interface where there is a

• List of pages i.e. Home by default, About, Projects, Contact.
• Home consists of the
  • Navbar which will have a Logo, links to navigate to other pages.
    • On screens <768px, the Navbar will have logo, NavButton with toggle functionality which upon the click opens and closes Sidebar.
  • Sidebar has the links to navigate to other pages, icons to the social media along with Close option.
  • Header is the hero which has the headings i.e. name, role, profile image, icons to the social media along with Hire Me on click navigates to Contact page.
    • On screens <768px, the profile image will not be shown in Header.
  • About will have an image and some information about the user along with About Me on click navigates to About page.
  • Services has been implemented in cards with some information that tell about the user's expertise with the technologies.
  • Latest Works shows some of the projects the user has worked on for different clients and on click of each project navigates to Projects page.
  • Connect will have the Address, Email, Telephone information, Video Banner playing in the background** along with Contact Me on click navigates to Contact page.
  • Skills tells an idea about the how much the user is proficient working with particular technologies.
  • Timeline shows the overall professional working experience of the user during his career.
  • Blog shows some of the articles the user blogged with each card having Read more on hover.
  • Footer has links to social media pf the user and copyright information. to the company.
• Responsive design has been implemented across all the pages using CSS Grid with columns layout.
• Icons are implemented using by Font Awesome, images from Pexels and fonts using Google Fonts.
• To run the project locally, clone the repo, and open the index.html in the browser.

Languages

HTML5, CSS3 - Grid, JavaScript

Deployment / Hosting

Netlify

---

Note: I have developed this project ~ [4] as part of HTML & CSS Tutorial and Projects Course(Flexbox&Grid) taught by John Smilga.