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

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:

[email protected]:JayantGoel001/JayantGoel001.github.io.git

Navigate to working Directory and main branch

 cd JayantGoel001.github.io
 git switch main

Install the dependencies:
```
npm install
```
- 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
|           
\---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.