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 📜

Design
- Fonts
- Color Scheme
- Icon
Built With
How to Run Locally?
Sections
Folder Structure
Search engine optimization(SEO)
PageSpeed Insights
Creator / Maintainer
Contributing
Contributors
License

Design 🎨

Fonts

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

Insert the following code in the <head> section of your pages to support favicons on all browsers and platforms.

<meta name="theme-color" content="#242a35">
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="assets/images/safari-pinned-tab.svg" color="#242a35">
<meta name="msapplication-TileColor" content="#242a35">
<meta name="msapplication-TileImage" content="assets/images/mstile-70x70.png">
<meta name="msapplication-TileImage" content="assets/images/mstile-144x144.png">
<meta name="msapplication-TileImage" content="assets/images/mstile-150x150.png">
<meta name="msapplication-TileImage" content="assets/images/mstile-310x150.png">
<meta name="msapplication-TileImage" content="assets/images/mstile-310x310.png">

Results :- 100%

These are the Font Awesome Icons used in JayantGoel001.github.io

Built With 📦

💙 HTML5
💜 CSS3
💙 JavaScript
💜 TypeScript
💙 Angular
💜 NodeJS
💙 Bootstrap
💜 Google Font for the fonts
💙 FontAwesome for the icons
💜 GitHub Pages for hosting
💙 Apify for generating screenshot of website
💜 SmartMockups for adding mockups/desktop background to screenshot

How to run locally? 🎯

Make sure you have Node and git installed.

node --version
git --version

Clone the repository :

With HTTPS:

git clone https://github.com/JayantGoel001/JayantGoel001.github.io.git

With SSH:

git@github.com:JayantGoel001/JayantGoel001.github.io.git

Navigate to working Directory and main branch

 cd JayantGoel001.github.io
 git switch main

Install the dependencies:
```
npm install -f
```
- Installs all the dependencies required by the project.
Fire up a development server:
```
ng serve
```
- Runs the app in the development mode.
- Open 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):
```
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:
```
git checkout -b "<NAME-OF-THE-BRANCH>"
```

Add, Commit & Push the local changes to remote repository:

git add .
git commit -m "<COMMIT-MESSAGE>"
git push origin <NAME-OF-THE-BRANCH>

For Docker Users

Make sure you have Docker installed.

docker --version

To pull the GitHub Container Registry Image:

docker pull ghcr.io/jayantgoel001/jayantgoel001.github.io:latest

To pull the Dockerhub Image:

docker pull jayantgoel001/jayantgoel001.github.io:latest

To automatically pull and run the GitHub Container Registry Image:

docker run -d -p 4200:80 ghcr.io/jayantgoel001/jayantgoel001.github.io:latest

To automatically pull and run the Dockerhub Image:
```
docker run -d -p 4200:80 jayantgoel001/jayantgoel001.github.io:latest
```
Open http://localhost:4200/ to view it in the Default Browser.

Sections 🔖

Home
About
- About
- Skill
- Education
Portfolio
Training
Achievement
Contact

Folder Structure 📂

|   .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) 🕷️

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.

<meta itemprop="name" content="--- YOUR TITLE ---">
<meta itemprop="description" content="--- SITE DESCRIPTION ---">
<meta itemprop="url" content="--- YOUR SITE URL ---"/>
<meta itemprop="image" content="--- YOUR IMAGE ---">
<link rel="image_src" href="--- YOUR IMAGE ---">

<meta name="author" content="--- YOUR NAME ---">
<meta name="description" content="--- SITE DESCRIPTION ---">
<meta name="keywords" content="--- SITE KEYWORDS ---">

<meta property="og:image" content="--- YOUR IMAGE ---">
<meta property="og:image:width" content="--- YOUR IMAGE WIDTH ---">
<meta property="og:image:height" content="--- YOUR IMAGE HEIGHT ---">
<meta property="og:image:alt" content="--- YOUR TITLE ---">
<meta property="og:title" content="--- YOUR TITLE ---">
<meta property="og:description" content="--- SITE DESCRIPTION ---">
<meta property="og:url" content="--- YOUR SITE URL ---">
<meta property="og:type" content="website">

<meta name="twitter:title" content="--- YOUR TITLE ---">
<meta name="twitter:description" content="--- SITE DESCRIPTION ---">
<meta name="twitter:site" content="@--- YOUR USERNAME ---">
<meta name="twitter:creator" content="@--- YOUR USERNAME ---">
<meta name="twitter:image:src" content="--- YOUR IMAGE ---">
<meta name="twitter:image" content="--- YOUR IMAGE ---">
<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">
    {
        "@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 ---"
        ]
    }
</script>

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
Mobile

Creator / Maintainer 👨‍💻

👤 Jayant Goel (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.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Jayant Goel}
💻 🤔

⚠️

🚧 📖 🎨 👀 🖋 ️️️️♿️

_{Anchal Pandey}
🐛

_{Emma Dawson}
🐛 🤔 ️️️️♿️

_{Narpat Aanjana}
🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

JayantGoel001.github.io - v2.0

Jayant Goel (JayantGoel001)'s Personal Portfolio

Table of Contents 📜

Design 🎨

Fonts

Color Scheme

Main Screen

Splash Screen & 404 Page

Icon

Built With 📦

How to run locally? 🎯

Sections 🔖

Folder Structure 📂

Search engine optimization(SEO) 🕷️

PageSpeed Insights

Creator / Maintainer 👨‍💻

🤝 Contributing

Contributors ✨

📝 License

Files

README.md

Latest commit

History

README.md

File metadata and controls

JayantGoel001.github.io - v2.0

Jayant Goel (JayantGoel001)'s Personal Portfolio

Table of Contents 📜

Design 🎨

Fonts

Color Scheme

Main Screen

Splash Screen & 404 Page

Icon

Built With 📦

How to run locally? 🎯

Sections 🔖

Folder Structure 📂

Search engine optimization(SEO) 🕷️

PageSpeed Insights

Creator / Maintainer 👨‍💻

🤝 Contributing

Contributors ✨

📝 License