Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JayantGoel001/JayantGoel001.github.io
JayantGoel001's Personal Portfolio with 61 stars ⭐ and 19 forks 🎉.
https://github.com/JayantGoel001/JayantGoel001.github.io
angular css docker font-awesome html javascript jayantgoel jayantgoel001 live2dwidget-js portfolio portfolio-website pwa quotable seo svgbackgrounds typescript vanilla-tilt-js web-develop webp wow-js
Last synced: 6 days ago
JSON representation
JayantGoel001's Personal Portfolio with 61 stars ⭐ and 19 forks 🎉.
- Host: GitHub
- URL: https://github.com/JayantGoel001/JayantGoel001.github.io
- Owner: JayantGoel001
- License: mit
- Created: 2021-01-10T00:32:16.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-29T20:00:42.000Z (3 months ago)
- Last Synced: 2024-05-18T22:03:35.503Z (about 1 month ago)
- Topics: angular, css, docker, font-awesome, html, javascript, jayantgoel, jayantgoel001, live2dwidget-js, portfolio, portfolio-website, pwa, quotable, seo, svgbackgrounds, typescript, vanilla-tilt-js, web-develop, webp, wow-js
- Language: TypeScript
- Homepage: https://JayantGoel001.github.io
- Size: 238 MB
- Stars: 61
- Watchers: 2
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-github-pages-portfolios - Jayant Goel
README
JayantGoel001.github.io - v2.0
Jayant Goel (JayantGoel001)'s Personal Portfolio
This is the source code for my Personal Portfolio.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
•
•
•
•
•
## Table of Contents :scroll:
- [Design](#design-art)
- [Fonts](#fonts)
- [Color Scheme](#color-scheme)
- [Icon](#icon)
- [Built With](#built-with-package)
- [How to Run Locally?](#how-to-run-locally-dart)
- [Sections](#sections-bookmark)
- [Folder Structure](#folder-structure-open_file_folder)
- [Search engine optimization(SEO)](#search-engine-optimizationseo-spider)
- [PageSpeed Insights](#pagespeed-insights)
- [Creator / Maintainer](#creator--maintainer-man_technologist)
- [Contributing](#-contributing)
- [Contributors](#contributors-)
- [License](#-license)
## Design :art:
### Fonts
[Black Ops One](https://fonts.google.com/specimen/Black+Ops+One) - Text Style
### Color Scheme
#### Main Screen
- **Gunmetal** - Primary theme color
- **Yellow Orange Color Wheel** - Secondary theme color
- **Eerie Black** - Dark Text Color
- **Sonic Silver** - Muted Text Color
- **White** - Text Color
- **Cultured** - Light Text Color & Light Background Color
- **Dutch White** - Waifu Tips Background Color
#### Splash Screen & 404 Page
- **Rich Black FOGRA 39** - Background Color of Splash Screen
- **Smoky Black** - Path of Splash Circle of Splash Screen
- **Yellow** - Outer Splash Circle color
- **Blue Jeans** - Inner Splash Circle color
- **Dark Jungle Green** - 404 Text Color
### Icon
This is the Favicon of me in [JayantGoel001.github.io](https://JayantGoel001.github.io)
Insert the following code in the `` section of your pages to support favicons on all browsers and platforms.
```html
```
Results :- [100%](https://realfavicongenerator.net/favicon_checker?protocol=https&site=jayantgoel001.github.io)
These are the Font Awesome Icons used in [JayantGoel001.github.io](https://JayantGoel001.github.io)
## Built With :package:
- 💙 [HTML5](https://www.w3schools.com/html/)
- 💜 [CSS3](https://www.w3schools.com/css/)
- 💙 [JavaScript](https://www.w3schools.com/js/DEFAULT.asp)
- 💜 [TypeScript](https://www.typescriptlang.org/)
- 💙 [Angular](https://angular.io/)
- 💜 [NodeJS](https://nodejs.org/)
- 💙 [Bootstrap](https://getbootstrap.com/)
- 💜 [Google Font](https://fonts.google.com/) for the fonts
- 💙 [FontAwesome](https://fontawesome.com/) for the icons
- 💜 [GitHub Pages](https://pages.github.com/) for hosting
- 💙 [Apify](https://apify.com/) for generating screenshot of website
- 💜 [SmartMockups](https://smartmockups.com/) for adding mockups/desktop background to screenshot
## How to run locally? :dart:
Make sure you have [Node](https://nodejs.org/en/) and [git](https://git-scm.com/) installed.
```bash
node --version
git --version
```
- Clone the repository :
- With HTTPS:
```bash
git clone https://github.com/JayantGoel001/JayantGoel001.github.io.git
```
- With SSH:
```bash
[email protected]:JayantGoel001/JayantGoel001.github.io.git
```
- Navigate to working Directory and **main** branch
```bash
cd JayantGoel001.github.io
git switch main
```
- Install the dependencies:
```bash
npm install -f
```
- Installs all the dependencies required by the project.
- Fire up a development server:
```bash
ng serve
```
- Runs the app in the `development` mode.
- Open [http://localhost:4200/](http://localhost:4200/) to view it in the Default Browser.
- The page will reload if you make edits.
- You will also see any lint errors in the console.
- Deploy code to GitHub Pages (gh-pages):
```bash
ng deploy --base-href="/"
```
- Builds the application for production to the `build` folder & deploys application on `GitHub Pages`.
- It correctly bundles Angular in production mode and optimizes the build for the best performance.
- The build is minified and the filenames include the hashes.
- Create a new branch:
```bash
git checkout -b ""
```
- Add, Commit & Push the local changes to remote repository:
```bash
git add .
git commit -m ""
git push origin
```
**For Docker Users**
Make sure you have [Docker](https://www.docker.com/products/docker-desktop/) installed.
```bash
docker --version
```
- To pull the [GitHub Container Registry](https://github.com/JayantGoel001/JayantGoel001.github.io/pkgs/container/jayantgoel001.github.io) Image:
```bash
docker pull ghcr.io/jayantgoel001/jayantgoel001.github.io:latest
```
- To pull the [Dockerhub](https://hub.docker.com/r/jayantgoel001/jayantgoel001.github.io) Image:
```bash
docker pull jayantgoel001/jayantgoel001.github.io:latest
```
- To automatically pull and run the [GitHub Container Registry](https://github.com/JayantGoel001/JayantGoel001.github.io/pkgs/container/jayantgoel001.github.io) Image:
```bash
docker run -d -p 4200:80 ghcr.io/jayantgoel001/jayantgoel001.github.io:latest
```
- To automatically pull and run the [Dockerhub](https://hub.docker.com/r/jayantgoel001/jayantgoel001.github.io) Image:
```bash
docker run -d -p 4200:80 jayantgoel001/jayantgoel001.github.io:latest
```
Open [http://localhost:4200/](http://localhost:4200/) to view it in the Default Browser.
## Sections :bookmark:
- Home
- About
- About
- Skill
- Education
- Portfolio
- Training
- Achievement
- Contact
## Folder Structure :open_file_folder:
| .all-contributorsrc
| .browserslistrc
| .dockerignore
| .editorconfig
| .gitignore
| angular.json
| Dockerfile
| karma.conf.js
| ngsw-config.json
| package-lock.json
| package.json
| README.md
| tsconfig.app.json
| tsconfig.json
| tsconfig.spec.json
|
+---.github
| +---lighthouse
| | budget.json
| | lighthouserc.json
| |
| \---workflows
| publish-docker.yml
| pull-request-deploy-and-audit.yml
| fork_star.yml
|
\---src
| apple-touch-icon.png
| browserconfig.xml
| favicon-16x16.png
| favicon-32x32.png
| favicon.ico
| index.html
| LICENSE
| main.ts
| manifest.webmanifest
| polyfills.ts
| README.md
| robots.txt
| sitemap_index.xml
| styles.min.css
|
+---app
| | app-routing.module.ts
| | app.component.css
| | app.component.html
| | app.component.ts
| | app.module.ts
| | loadExternalResource.ts
| |
| +---about
| | about.component.css
| | about.component.html
| | about.component.ts
| |
| +---achievement
| | achievement.component.css
| | achievement.component.html
| | achievement.component.ts
| |
| +---application
| | application.component.css
| | application.component.html
| | application.component.ts
| | application.module.ts
| |
| +---contact
| | contact.component.css
| | contact.component.html
| | contact.component.ts
| |
| +---footer
| | footer.component.css
| | footer.component.html
| | footer.component.ts
| |
| +---home
| | home.component.css
| | home.component.html
| | home.component.ts
| |
| +---navbar
| | navbar.component.css
| | navbar.component.html
| | navbar.component.ts
| |
| +---page-not-found
| | page-not-found.component.css
| | page-not-found.component.html
| | page-not-found.component.ts
| | page-not-found.module.ts
| |
| +---portfolio
| | portfolio.component.css
| | portfolio.component.html
| | portfolio.component.ts
| |
| +---quote
| | quote.component.css
| | quote.component.html
| | quote.component.ts
| |
| +---social
| | social.component.css
| | social.component.html
| | social.component.ts
| |
| +---training
| | training.component.css
| | training.component.html
| | training.component.ts
| |
| \---waifu
| Model.ts
| waifu.component.css
| waifu.component.html
| waifu.component.ts
|
+---assets
| | data.min.js
| |
| +---css
| | animate.min.css
| | font-awesome.min.css
| |
| +---fonts
| | BlackOpsOne.eot
| | BlackOpsOne.svg
| | BlackOpsOne.ttf
| | BlackOpsOne.woff
| | BlackOpsOne.woff2
| | fa-brands-400.eot
| | fa-brands-400.svg
| | fa-brands-400.ttf
| | fa-brands-400.woff
| | fa-brands-400.woff2
| | fa-regular-400.eot
| | fa-regular-400.svg
| | fa-regular-400.ttf
| | fa-regular-400.woff
| | fa-regular-400.woff2
| | fa-solid-900.eot
| | fa-solid-900.svg
| | fa-solid-900.ttf
| | fa-solid-900.woff
| | fa-solid-900.woff2
| |
| +---images
| | | 404.webp
| | | about-bg.svg
| | | background-image.jpg
| | | bgimg.webp
| | | footer-cloud.svg
| | | frame-desktop.webp
| | | frame-mobile.webp
| | | monkey.webp
| | | moon-dark.svg
| | | moon.svg
| | | mstile-144x144.png
| | | mstile-150x150.png
| | | mstile-310x150.png
| | | mstile-310x310.png
| | | mstile-70x70.png
| | | Profile-pic-144x144.png
| | | Profile-pic-192x192.png
| | | Profile-pic-384x384.png
| | | Profile-pic-512x512.png
| | | Profile-pic.webp
| | | quote-img.webp
| | | safari-pinned-tab.svg
| | |
| | +---achievement
| | | DataScience.webp
| | | HackerRank.webp
| | | Hacktoberfest.webp
| | |
| | \---portfolio
| | A-Social-Media.webp
| | AI-Image-Caption-Bot.webp
| | AI-Music-Generation.webp
| | E-Commerce-Site.webp
| | School-Donation-Analysis.webp
| | URL-Shortner.webp
| |
| +---js
| | live2d.min.js
| | particles.min.js
| | vanilla-tilt.min.js
| | wow.min.js
| |
| \---model
| | README.md
| |
| \---model
|
+---environments
| environment.prod.ts
| environment.ts
|
\---screenshots
color-loader-404.png
color-main.png
font-awesome-icon.png
font.png
icon.png
PageSpeedInsight Desktop.png
PageSpeedInsight Mobile.png
screenshot.gif
## Search engine optimization(SEO) :spider:
Search engine optimization (SEO) is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.
Add the below code snippet to `src/index.html` with your site info. This step is not mandatory.
```html
{
"@type": "Person",
"@context": "https://schema.org",
"url": "--- YOUR SITE URL ---",
"description": "--- SITE DESCRIPTION ---",
"name": "--- YOUR NAME ---",
"image": "--- YOUR IMAGE ---",
"email":"--- YOUR EMAIL ---",
"address": "--- YOUR LOCATION ---",
"sameAs":[
"https://github.com/--- YOUR USERNAME ---/",
"https://www.linkedin.com/in/--- YOUR USERNAME ---/",
"https://gist.github.com/--- YOUR USERNAME ---/",
"https://www.hackerrank.com/--- YOUR USERNAME ---",
"https://www.instagram.com/--- YOUR USERNAME ---/",
"https://www.facebook.com/--- YOUR USERNAME ---/",
"https://twitter.com/--- YOUR USERNAME ---/",
"https://dev.to/--- YOUR USERNAME ---",
"https://wa.me/--- YOUR MOBILE NUMBER ---"
]
}
```
## PageSpeed Insights
PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.
- **Desktop**
[](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fjayantgoel001.github.io%2F&strategy=desktop&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa)
- **Mobile**
[](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fjayantgoel001.github.io%2F&strategy=mobile&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa)
## Creator / Maintainer :man_technologist:
👤 Jayant Goel ([JayantGoel001](https://github.com/JayantGoel001))
If you have any questions, comments, or concerns, feel free to contact me below.
This project was created for educational purposes and for personal use. Feel free to take inspiration.
If you like my content or find this code useful, give it a ⭐.
## 🤝 Contributing
Contributions, Issues and Feature requests are Welcome!
Feel free to check the [Issues page](https://github.com/JayantGoel001/JayantGoel001.github.io/issues/).
## Contributors ✨
[](#contributors-)
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Jayant Goel
💻 🤔 ⚠️ 🚧 📖 🎨 👀 🖋 ️️️️♿️
Anchal Pandey
🐛
Emma Dawson
🐛 🤔 ️️️️♿️
Narpat Aanjana
🐛
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## 📝 License
This project is [MIT](https://opensource.org/licenses/MIT) licensed.
Copyright © 2021 Jayant Goel. All rights reserved.