Degin works

harikrishnan669 · Dec 21, 2024 · 8d8c168 · 8d8c168
commit 8d8c168
Show file tree

Hide file tree

Showing 16 changed files with 441 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/MyDesignWorks.iml b/.idea/MyDesignWorks.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MY DESIGN WORKS</title>
+    <link rel="stylesheet" href="style1.css">
+    <!-- Font Awesome for Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+<header>
+    <h1>DESIGN WORKS</h1>
+    <nav>
+        <ul>
+            <li><a href="#home">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+        </ul>
+    </nav>
+</header>
+
+<main>
+    <section id="home" class="design-section">
+        <h2>MY WORKS</h2>
+        <div id="design-container"></div>
+        <button id="load-more">Load More</button>
+        <button id="load-less" style="display:none;">Load Less</button>
+    </section>
+    <section id="about">
+        <h2>About Me</h2>
+        <div class="about-me-container">
+            <div class="about-photo">
+                <!-- Replace with the actual image file path -->
+                <img src="./my images/me.jpg" alt="Harikrishnan's Photo">
+            </div>
+            <div class="about-text">
+                <p>Hello! I am Harikrishnan R, a passionate designer sharing my works during various events and i am familiar with tools like Adobe photoshop,Figma and Canva. Welcome to my world!</p>
+                <p>
+                    Connect with me on
+                    <a href="https://www.instagram.com/hari_2k4/" target="_blank" class="instagram-link">
+                        <i class="fab fa-instagram"></i>
+                    </a>
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <section id="contact">
+        <h2>Contact Me</h2>
+        <form id="contact-form">
+            <label for="name">Name:</label>
+            <input type="text" id="name" required>
+
+            <label for="email">Email:</label>
+            <input type="email" id="email" required>
+
+            <label for="message">Message:</label>
+            <textarea id="message" rows="5" required></textarea>
+
+            <button type="submit">Send</button>
+        </form>
+    </section>
+</main>
+
+<footer>
+    <p>&copy; 2024 Harikrishnan. All rights reserved.</p>
+</footer>
+
+<script src="script1.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1 @@
+console.log('Thank you for using WebStorm 💙')
diff --git a/my images/Photo from Harikrishnan R.jpg b/my images/Photo from Harikrishnan R.jpg
diff --git a/my images/arduiquiz.jpg b/my images/arduiquiz.jpg
diff --git a/my images/blog.jpg b/my images/blog.jpg
diff --git a/my images/github.jpg b/my images/github.jpg
diff --git a/my images/me.jpg b/my images/me.jpg
diff --git a/my images/photoshop.jpg b/my images/photoshop.jpg
diff --git a/my images/rab.png b/my images/rab.png
diff --git a/package.json b/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "MyDesignWorks",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "private": true
+}
diff --git a/script1.js b/script1.js
@@ -0,0 +1,108 @@
+const designPosts = [
+    {
+        title: "ARDUIQUIZ",
+        content: "Arduino exploration with their captivating ArduiQuiz via Instagram polls.",
+        image:'./my images/arduiquiz.jpg'
+    },
+    {
+        title: "WOMENS DAY",
+        content: "Women are considered the loveliest embodiment of talent in the world. They embody a magnificent fusion of qualities capable of making a profound impact.",
+        image: './my images/Photo from Harikrishnan R.jpg'
+    },
+    {
+        title: "BLOG",
+        content: " Exciting opportunity for bloggers. Let your creativity shine as you envision the possibilities, challenges, and ethical considerations of a future where robots replace humans in the workforce.",
+        image: './my images/blog.jpg'
+    },
+    {
+        title: "PHOTOSHOP",
+        content: "Tour of Design Tools🎨🖌️, starting with its debut episode focusing on Adobe Photoshop",
+        image: "./my images/photoshop.jpg"
+    },
+    {
+        title: "GITHUB",
+        content:"GitHub is an essential tool in every budding programmer’s toolkit.",
+        image:"./my images/github.jpg"
+    },
+    {
+        title: "ROBOTIC ARM BUILDING",
+        content:"Hands on workshop on Robotic Arm Bulding",
+        image:"./my images/rab.png"
+    }
+
+
+];
+
+let currentPostIndex = 0;
+const postsPerLoad = 3;
+
+
+function loadPosts() {
+    const designContainer = document.getElementById("design-container");
+    for (let i = currentPostIndex; i < currentPostIndex + postsPerLoad && i < designPosts.length; i++) {
+        const post = designPosts[i];
+        const postDiv = document.createElement("div");
+        postDiv.className = "design-post";
+
+        postDiv.innerHTML = `
+            <h3>${post.title}</h3>
+            <img src="${post.image}" alt="${post.title}" class="post-image">
+            <p class="post-content">${post.content.slice(0, 100)}...</p>
+            <button class="read-more-btn">Read More</button>
+            <p class="full-content" style="display: none;">${post.content}</p>
+            <button class="read-less-btn" style="display: none;">Read Less</button>
+        `;
+
+        designContainer.appendChild(postDiv);
+    }
+    currentPostIndex += postsPerLoad;
+
+    // Toggle button visibility
+    document.getElementById("load-more").style.display =
+        currentPostIndex < designPosts.length ? "block" : "none";
+    document.getElementById("load-less").style.display =
+        currentPostIndex > postsPerLoad ? "block" : "none";
+}
+
+
+function loadLessPosts() {
+    const designContainer = document.getElementById("design-container");
+    designContainer.innerHTML = "";
+    currentPostIndex = 0;
+    loadPosts();
+
+    // Toggle button visibility
+    document.getElementById("load-less").style.display = "none";
+}
+
+// Event listeners for buttons
+document.getElementById("load-more").addEventListener("click", loadPosts);
+document.getElementById("load-less").addEventListener("click", loadLessPosts);
+
+// Event delegation for Read More / Read Less buttons
+document.getElementById("design-container").addEventListener("click", (event) => {
+    if (event.target.classList.contains("read-more-btn")) {
+        const postContent = event.target.previousElementSibling;
+        const fullContent = event.target.nextElementSibling;
+        const readLessBtn = fullContent.nextElementSibling;
+
+        postContent.style.display = "none";
+        fullContent.style.display = "block";
+        event.target.style.display = "none";
+        readLessBtn.style.display = "inline-block";
+    }
+
+    if (event.target.classList.contains("read-less-btn")) {
+        const fullContent = event.target.previousElementSibling;
+        const postContent = fullContent.previousElementSibling;
+        const readMoreBtn = postContent.nextElementSibling;
+
+        fullContent.style.display = "none";
+        postContent.style.display = "block";
+        readMoreBtn.style.display = "inline-block";
+        event.target.style.display = "none";
+    }
+});
+
+// Load initial posts
+loadPosts();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		console.log('Thank you for using WebStorm 💙')