charles0830.github.io - v2.0

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/charles0830/charles0830.github.io.git

With SSH:

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

Navigate to working Directory and main branch
```
cd charles0830.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/charles0830/charles0830.github.io:latest

To pull the Dockerhub Image:

docker pull charles0830/charles0830.github.io:latest

To automatically pull and run the GitHub Container Registry Image:

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

To automatically pull and run the Dockerhub Image:
```
docker run -d -p 4200:80 charles0830/charles0830.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 📂

|   372.XXXXXXXXXXXXXXXX.js
|   3rdpartylicenses.txt
|   404.XXXXXXXXXXXXXXXX.webp
|   404.html
|   478.XXXXXXXXXXXXXXXX.js
|   about-bg.XXXXXXXXXXXXXXXX.svg
|   apple-touch-icon.png
|   bgimg.XXXXXXXXXXXXXXXX.webp
|   browserconfig.xml
|   fa-brands-400.XXXXXXXXXXXXXXXX.woff2
|   fa-brands-400.XXXXXXXXXXXXXXXX.woff
|   fa-brands-400.XXXXXXXXXXXXXXXX.eot
|   fa-brands-400.XXXXXXXXXXXXXXXX.svg
|   fa-brands-400.XXXXXXXXXXXXXXXX.ttf
|   fa-regular-400.XXXXXXXXXXXXXXXX.ttf
|   fa-regular-400.XXXXXXXXXXXXXXXX.woff2
|   fa-regular-400.XXXXXXXXXXXXXXXX.eot
|   fa-regular-400.XXXXXXXXXXXXXXXX.woff
|   fa-regular-400.XXXXXXXXXXXXXXXX.svg
|   fa-solid-900.XXXXXXXXXXXXXXXX.woff2
|   fa-solid-900.XXXXXXXXXXXXXXXX.woff
|   fa-solid-900.XXXXXXXXXXXXXXXX.ttf
|   fa-solid-900.XXXXXXXXXXXXXXXX.svg
|   fa-solid-900.XXXXXXXXXXXXXXXX.eot
|   favicon-16x16.png
|   favicon-32x32.png
|   favicon.ico
|   index.html
|   LICENSE
|   main.XXXXXXXXXXXXXXXX.js
|   manifest.webmanifest
|   ngsw-worker.js
|   ngsw.json
|   polyfills.XXXXXXXXXXXXXXXX.js
|   quote-img.XXXXXXXXXXXXXXXX.webp
|   README.md
|   robots.txt
|   runtime.XXXXXXXXXXXXXXXX.js
|   safety-worker.js
|   scripts.XXXXXXXXXXXXXXXX.js
|   sitemap_index.xml
|   styles.XXXXXXXXXXXXXXXX.css
|   worker-basic.min.js
|   
+---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
|   |   |   bgimg.webp
|   |   |   footer-cloud.svg
|   |   |   monkey.webp
|   |   |   moon-dark.svg
|   |   |   moon.svg
|   |   |   mstile-144x144.png
|   |   |   mstile-150x150.png
|   |   |   mstile-310x150.png
|   |   |   mstile-310x310.png
|   |   |   mstile-70x70.png
|   |   |   og-image.jpg
|   |   |   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
|   
\---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 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.