update profile resolution

dist/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Pure Javascript.">
-    <link rel="icon" type="image/x-icon" href="./src/images/javascript.webp">
+    <link rel="icon" type="image/x-icon" href="./src/images/wareng.webp">
     <script src="https://kit.fontawesome.com/6b203b1712.js" crossorigin="anonymous"></script>
     <title>Waren Gador</title>
 <script defer src="webpack.bundle.js"></script></head>

dist/src/components/Home/functions/type.js

@@ -0,0 +1,16 @@
+import Typed from "typed.js";
+
+export default function typeJS(){
+    const typed = new Typed('#type-text', {
+        strings: [`I'm a Front-End Developer`,
+                  `I'm building React projects.`, 
+                  `I'm building Typescript \nand Javascript Projects.`,
+                  `I'm a template creator of React,\n Javascript , typescript using Webpack `
+                ],
+        typeSpeed: 20,
+        backSpeed: 5,
+        smartBackspace: true,
+        loop: true,
+        contentType: 'html' 
+      });
+}

dist/src/components/Home/projects.js

@@ -0,0 +1,13 @@
+import { style_main } from "../../start";
+
+export default function Project(Proj){
+
+    Proj.innerHTML = (
+        `
+         <div class=${style_main('proj-container')}>
+            <h1>Rendered Project</h1>
+         </div>
+        `
+    )
+
+}

dist/src/components/rightbar/rightlist.js

@@ -1,3 +1,4 @@
+import { style_right } from "../../start";
 
 export default function RightbarList(RList){
 
@@ -14,9 +15,19 @@ export default function RightbarList(RList){
                 <li>
                     <p>item 3</p>
                 </li>
+                <li>
+                    <div>
+                        <div>Templates Stacks</div>
+                        <div>
+                            <a href='#0' class=${style_right('')} aria-label='standalone-react'>Standalone-React</a>
+                            <a href='#0' class=${style_right('')} aria-label='standalone-react-typescript'>Standalone-React Typescript</a>
+                            <a href='#0' class=${style_right('')} aria-label='standalone-Typescript'>Standalone-TypescriptES10</a>
+                            <a href='#0' class=${style_right('')} aria-label='standalone-Javascript'>Standalone-JavascriptES10</a>
+                        </div>
+                    </div>
+                </li>
             </ul>
         `
-
     )
 
 }

dist/src/components/sidebar/functions/donut.js

@@ -20,6 +20,6 @@ export default function DonutFunctions(){
     }
 
     animateDonutChart('donut-segment', 'donut-text', 75); 
-    animateDonutChart('donut-segment2', 'donut-text2', 60); 
+    animateDonutChart('donut-segment2', 'donut-text2', 95); 
 
 }

dist/src/pages/Home.js

@@ -1,27 +1,28 @@
+import typeJS from "../components/Home/functions/type";
 import Home_Render from "../render/Home/home.render";
 import { style_main } from "../start";
 
 export default function HomePage(Home) {
+  Home.innerHTML = `
+    <div class=${style_main('home')}>
+      <div class=${style_main('overlay')}>
+        <div class=${style_main('profile-home')}>
+          <h1>Design something Amazing with React!!</h1>
+          <div class=${style_main('type-line')}>
+            <span class=${style_main('type-code')} id="type-start">&lt;<p class=${style_main('types')}>type</p>&gt;</span>
+            <span id="type-text"></span>
+            <span class=${style_main('type-code')} id="type-end">&lt;<p class=${style_main('types')}>/type</p>&gt;</span>
+          </div>
+          <div id='Hire-me'></div>
+        </div>
+        <div id='repo'></div>
+        <div id='services'></div>
+        <div id='projects'></div>
+        <footer id='footer'></footer>
+      </div>
+    </div>
+  `;
 
-    Home.innerHTML = (
-        `
-            <div class=${style_main('home')}>
-                <div class=${style_main('overlay')}>
-                    <div class=${style_main('profile-home')}>
-                        <h1>Design something Amazing with React!!</h1>
-                        <span>&lt;type&gt;</span>
-                            DOM
-                        <span>&lt;/type&gt;</span>
-                        <div id='Hire-me'></div>
-                    </div>
-                    <div id='repo'></div>
-                    <div id='services'></div>
-                    <footer id='footer'></footer>
-                </div>
-            </div>
-        `
-    )
-
-    Home_Render();
-
-}
+  Home_Render();
+  typeJS();
+}

dist/src/render/Home/home.render.js

@@ -2,24 +2,28 @@ import FooterContent from "../../components/Footer";
 import HireMeContent from "../../components/Home/Hire-me";
 import RepoList from "../../components/Home/Repo";
 import ServiceList from "../../components/Home/Services";
+import Project from "../../components/Home/projects";
 import UniqueHash from "../../security/Hashes";
 
 export default function Home_Render(){
 
     const HireMe = document.getElementById('Hire-me'),
           Repos = document.getElementById('repo'),
           Serve = document.getElementById('services'),
+          Projects = document.getElementById('projects'),
           Footer = document.getElementById('footer');
 
     window.addEventListener('DOMContentLoaded', () => {
         HireMe.id = UniqueHash();
         Repos.id = UniqueHash();
         Serve.id = UniqueHash();
+        Projects.id = UniqueHash();
         Footer.id = UniqueHash();
     })
 
     HireMeContent(HireMe);
     RepoList(Repos);
     ServiceList(Serve);
+    Project(Projects);
     FooterContent(Footer);
 }

dist/src/sass/modules/app.module.scss

@@ -15,6 +15,18 @@
   color: white;
 }
 
+.types {
+  color: cyan
+}
+
+.type-line,.type-code {
+  display: flex;
+}
+
+.type-line {
+  width: 60%;
+}
+
 .home {
   width: 100%;
   background-image: url("../../images/background.webp");
@@ -161,3 +173,8 @@
   color: #fcfafa;
   font-size: 13px;
 }
+
+.proj-container {
+  padding-top: 20px;
+  color: #fff;
+}