https://github.com/pktcodes/portfolio-html-css-project
Portfolio Project using HTML & CSS - Grid
https://github.com/pktcodes/portfolio-html-css-project
css-grid css3 font-awesome git google-fonts html5 javascript pexels
Last synced: about 2 months ago
JSON representation
Portfolio Project using HTML & CSS - Grid
- Host: GitHub
- URL: https://github.com/pktcodes/portfolio-html-css-project
- Owner: pktcodes
- Created: 2023-01-08T05:51:22.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-31T23:30:04.000Z (over 3 years ago)
- Last Synced: 2025-02-22T01:41:38.601Z (over 1 year ago)
- Topics: css-grid, css3, font-awesome, git, google-fonts, html5, javascript, pexels
- Language: SCSS
- Homepage: https://html-css-portfolio-prod.netlify.app/
- Size: 22 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.*