Giters

Seven-33 / Seven-33.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

XaviHart.github.io - v2.0

HTML5 CSS3 JavaScript TypeScript Bootstrap Angular NodeJS Docker Open Source? Yes!


Logo

Xavi Hart's Personal Portfolio

This is the source code for my Personal Portfolio.
Explore the docs »

View Demo · Report Bug · Request Feature

Contributors • Forks • Stars • Issues • Repo Size

Github Deployment Status • Docker Image Status


Table of Contents :scroll

Design :art

Fonts

Black Ops One - Text Style

Font Example Screenshot

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
Color Palette Screenshot

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
Color Palette Screenshot

Icon

This is the Favicon of me in robinsondev428.github.io

Me Icon

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 robinsondev428.github.io

Font Awesome Icon

Built With :package

How to run locally? :dart

Make sure you have Node and git installed.

node --version
git --version

  • Clone the repository :

    • With HTTPS:

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

    • With SSH:

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

  • Navigate to working Directory and main branch

cd robinsondev428.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/robinsondev428/robinsondev428.github.io:latest

  • To pull the Dockerhub Image:

    docker pull robinsondev428/robinsondev428.github.io:latest

  • To automatically pull and run the GitHub Container Registry Image:

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

  • To automatically pull and run the Dockerhub Image:

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

    Open 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.

<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

PageSpeed Insight Desktop

  • Mobile

PageSpeed Insight Mobile

Creator / Maintainer :man_technologist

👤 Robinsondev (robinsondev428)

🤝 Contributing

Contributions, Issues and Feature requests are Welcome!

Feel free to check the Issues page.

Contributors ✨

All Contributors

Thanks goes to these wonderful people (emoji key):

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

📝 License

This project is MIT licensed.
Copyright © 2021 Robinsondev. All rights reserved.

About

Languages

Language:TypeScript 50.6%Language:HTML 43.4%Language:CSS 3.0%Language:JavaScript 2.2%Language:Dockerfile 0.8%