Release: v1.2.1

Author: Zemerik

README.md

@@ -12,7 +12,7 @@ zemerik.github.io - [Website](https://zemerik.is-a.dev)
 
 <div align = "center">
 
-![Tools](https://skillicons.dev/icons?i=html,css,javascript,scss,vscode,github&perline=25)
+![Tools](https://skillicons.dev/icons?i=html,css,javascript,typescript,scss,vscode,github&perline=25)
 
 </div>
 

assets/projects/netflix.png

@@ -37,7 +37,8 @@
             <a href="#home" class="active">Home</a>
             <a href="#about">About</a>
             <a href="#services">Skills</a>
-            <a href="#projects">Projects</a>
+            <a href="#projects">Exciting Projects</a>
+            <a href="#newprojects">Upcoming Projects</a>
         </nav>
 
         <div class="bx bx-moon" id="darkMode-icon"></div>
@@ -194,6 +195,35 @@ <h4>ZemDocs</h4>
         </div>
     </section>
 
+    <section class="portfolio" id="newprojects">
+        <h2 class="heading">Upcoming <span>Projects</span></h2>
+
+        <div class="portfolio-container">
+            <div class="portfolio-box">
+                <img src="assets/projects/netflix.png" alt="">
+
+                <div class="portfolio-layer">
+                    <h4>Netflix Clone</h4>
+                    <p>A Neat Netflix Clone</p>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="assets/projects/spotify.png" alt="">
+                <div class="portfolio-layer">
+                    <h4>Spotify Clone</h4>
+                    <p>A Sleek Spotify Clone</p>
+                </div>
+            </div>
+            <div class="portfolio-box">
+                <img src="assets/projects/youtube.png" alt="">
+                <div class="portfolio-layer">
+                    <h4>Youtube Clone</h4>
+                    <p>A Yielding Youtube Clone</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- footer design -->
     <footer class="footer">
         <div class="footer-text">
@@ -215,6 +245,8 @@ <h4>ZemDocs</h4>
 
     <!-- custom js -->
     <script src="scripts/script.js"></script>
+    <script src = "scripts/data.ts"></script>
+    <script src = "scripts/script.ts"></script>
 </body>
 
 </html>

assets/projects/spotify.png

@@ -0,0 +1,109 @@
+type User = {
+    name: string;
+    age: number;
+    skills: string[];
+  };
+  
+  class UserProfile {
+    private user: User;
+  
+    constructor(user: User) {
+      this.user = user;
+    }
+  
+    getUserInfo(): string {
+      return `${this.user.name}, Age: ${this.user.age}`;
+    }
+  
+    addSkill(skill: string): void {
+      this.user.skills.push(skill);
+    }
+  
+    displaySkills(): void {
+      this.user.skills.forEach((skill) => {
+        console.log(`Skill: ${skill}`);
+      });
+    }
+  }
+  
+  class Theme {
+    backgroundColor: string;
+    textColor: string;
+  
+    constructor(bg: string, text: string) {
+      this.backgroundColor = bg;
+      this.textColor = text;
+    }
+  
+    applyTheme(): void {
+      console.log(`Theme applied: Background - ${this.backgroundColor}, Text - ${this.textColor}`);
+    }
+  }
+  
+  class Project {
+    title: string;
+    description: string;
+  
+    constructor(title: string, description: string) {
+      this.title = title;
+      this.description = description;
+    }
+  
+    displayProject(): void {
+      console.log(`Project: ${this.title} - ${this.description}`);
+    }
+  }
+  
+  class WebPage {
+    private profile: UserProfile;
+    private theme: Theme;
+    private projects: Project[] = [];
+  
+    constructor(profile: UserProfile, theme: Theme) {
+      this.profile = profile;
+      this.theme = theme;
+    }
+  
+    renderProfile(): void {
+      console.log(this.profile.getUserInfo());
+      this.profile.displaySkills();
+    }
+  
+    addProject(project: Project): void {
+      this.projects.push(project);
+    }
+  
+    loadProjects(): void {
+      this.projects.forEach((project) => {
+        project.displayProject();
+      });
+    }
+  
+    applyTheme(): void {
+      this.theme.applyTheme();
+    }
+  }
+  
+  const user: User = {
+    name: "Hemang Yadav",
+    age: 15,
+    skills: ["HTML", "JavaScript", "Python"],
+  };
+  
+  const userProfile = new UserProfile(user);
+  const darkTheme = new Theme("#121212", "#FFFFFF");
+  
+  const project1 = new Project("ZemPosts", "Post & Connect with Developers");
+  const project2 = new Project("ZemShowcase", "Showcase & Connect with Developers");
+  
+  const myWebPage = new WebPage(userProfile, darkTheme);
+  
+  myWebPage.renderProfile();
+  myWebPage.addProject(project1);
+  myWebPage.addProject(project2);
+  myWebPage.loadProjects();
+  myWebPage.applyTheme();
+  
+  userProfile.addSkill("Vue.js");
+  userProfile.displaySkills();
+  

assets/projects/youtube.png

@@ -0,0 +1,40 @@
+/*=============== SHOW MENU ===============*/
+const navMenu = document.getElementById('nav-menu'),
+      navToggle = document.getElementById('nav-toggle'),
+      navClose = document.getElementById('nav-close')
+
+/*===== MENU SHOW =====*/
+/* Validate if constant exists */
+if(navToggle){
+    navToggle.addEventListener('click', () =>{
+        navMenu.classList.add('show-menu')
+    })
+}
+
+/*===== MENU HIDDEN =====*/
+/* Validate if constant exists */
+if(navClose){
+    navClose.addEventListener('click', () =>{
+        navMenu.classList.remove('show-menu')
+    })
+}
+
+/*=============== REMOVE MENU MOBILE ===============*/
+const navLink = document.querySelectorAll('.nav__link')
+
+function linkAction(){
+    const navMenu = document.getElementById('nav-menu')
+    // When we click on each nav__link, we remove the show-menu class
+    navMenu.classList.remove('show-menu')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
+const sr = ScrollReveal({
+    distance: '90px',
+    duration: 3000,
+})
+
+sr.reveal(`.home__data`, {origin: 'top', delay: 400})
+sr.reveal(`.home__img`, {origin: 'bottom', delay: 600})
+sr.reveal(`.home__footer`, {origin: 'bottom', delay: 800})