diff --git a/assets/css/index.css b/assets/css/index.css
deleted file mode 100644
index 3aa0243..0000000
--- a/assets/css/index.css
+++ /dev/null
@@ -1,349 +0,0 @@
-/* Import Google Fonts */
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-
-/* General Styling for Body and HTML */
-body,
-html {
- margin: 0;
- height: 100%;
- width: 100%;
- font-family: "Roboto", sans-serif;
-}
-
-/* Background Overlay Styling */
-.background-overlay {
- position: absolute;
- inset: 0;
- z-index: -10;
- height: 100%;
- width: 100%;
- background-color: white;
- background: linear-gradient(to right, #8080800a 1px, transparent 1px),
- linear-gradient(to bottom, #8080800a 1px, transparent 1px);
- background-size: 14px 24px;
-}
-
-/* Circle Overlay Styling */
-.circle-overlay {
- position: absolute;
- left: 0;
- right: 0;
- top: 25%;
- z-index: -10;
- margin: auto;
- height: 310px;
- width: 310px;
- border-radius: 50%;
- background-color: #d9007b; /* Fuchsia Color */
- opacity: 0.1;
- filter: blur(100px);
-}
-
-/* Container Styling */
-.container {
- width: 100%;
- margin-left: auto;
- margin-right: auto;
- max-width: 1080px !important;
- padding-left: 1rem;
- padding-right: 1rem;
-}
-
-/* Content Container Styling */
-.content-container {
- position: relative;
- z-index: 1; /* Ensures content appears above the background */
- color: #333; /* Text color */
- width: 100%;
- height: 100%;
-}
-
-/* Header Section Styling */
-#header {
- padding: 1.5rem 0;
- color: #333;
-}
-
-.header {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.header .brand-name {
- font-weight: 600;
-}
-.brand-name a {
- font-size: 1.6rem; /* Adjust size as needed */
- font-weight: bold;
- text-decoration: none;
- background: linear-gradient(
- to right,
- #d9007b,
- #ff4e8c
- ); /* Gradient using #d9007b and a complementary pink */
- -webkit-background-clip: text; /* Clip background to text for Webkit browsers */
- -webkit-text-fill-color: transparent; /* Make text fill transparent for Webkit browsers */
- background-clip: text; /* Standard property for other browsers */
- text-fill-color: transparent; /* Ensure transparency works in modern browsers */
-}
-
-/* Header Navigation Styling */
-.header ul {
- display: flex;
- gap: 20px;
- list-style: none;
-}
-
-.header ul li a {
- text-decoration: none;
- color: #555;
- font-size: 1.15rem;
-}
-
-.header ul li a:hover {
- color: #d9007b;
-}
-
-.header ul li a i {
- font-size: 1.6rem;
-}
-
-.repo a.gh-btn {
- font-size: 14px !important;
- font-weight: 500 !important;
-}
-/* Hero Section Styling */
-#hero {
- width: 100%;
- height: 75%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- text-align: center;
-}
-
-/* Custom Snippet Button Styling */
-.custom-snippet {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- padding: 6px 12px;
- border-radius: 9999px;
- background-color: white;
- color: #64748b; /* Slate color */
- font-size: 12px;
- font-weight: 500;
- line-height: 1.25;
- backdrop-filter: blur(8px);
- cursor: pointer;
- transition: background-color 0.3s, color 0.3s;
- border: 1px solid #797878;
- margin-bottom: 1rem;
-}
-
-.custom-snippet:hover {
- background-color: #f1f5f9; /* Lighter shade on hover */
-}
-
-/* Read More Link Styling */
-.custom-snippet .read-more {
- display: inline-flex;
- align-items: center;
- padding-left: 8px;
- color: black;
- transition: color 0.3s;
-}
-
-.custom-snippet .read-more .arrow-icon {
- padding-left: 4px;
-}
-
-/* Hero Title and Description Styling */
-.hero h1.title {
- font-size: 3.75rem;
- line-height: 1.2;
- padding-bottom: 1rem;
- color: #111827;
- font-weight: 500;
- width: 75%;
- margin: 0 auto;
- margin-bottom: 0.75rem;
-}
-.hero h1.title span {
- color: #262f44;
-}
-
-.hero p.description {
- color: #787878;
- font-size: 1.2rem;
- width: 60%;
- margin: 0 auto;
- word-spacing: 1px;
- line-height: 1.4;
-}
-
-/* Hero Button Section Styling */
-.hero .btn-section {
- margin-top: 4rem;
- align-items: center;
- justify-content: center;
-}
-
-.hero .btn {
- border: 1px solid #cccaca;
- padding: 0.8rem 1.2rem;
- margin: 10px;
- text-decoration: none;
- border-radius: 8px;
- color: #242323;
- min-width: 100px;
-}
-
-/* GitHub Button Styling */
-.btn-section {
- display: flex;
- gap: 10;
-}
-
-/* Project Button Styling */
-.btn-section .project {
- background-color: #09090b;
- color: #e2e2e2;
-}
-
-.btn-section .project:hover {
- background-color: #1d1d22;
- /* color: #09090b; */
-}
-
-/* Project Showcase Section Styling */
-#project-showcase {
- padding: 50px 0;
- text-align: center;
- width: 100%;
-}
-
-.showcase-container {
- padding: 0 20px;
-}
-
-.showcase-title {
- font-size: 2.5em;
- margin-bottom: 10px;
- color: #333;
- font-weight: 500;
-}
-
-.showcase-description {
- font-size: 1.2em;
- color: #666;
- width: 60%;
- margin: 30px auto;
- line-height: 1.5;
-}
-
-/* Grid Layout for Project Cards */
-.project-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 20px;
- margin-top: 6rem;
-}
-
-/* Individual Project Card Styling */
-.project-card {
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- transition: transform 0.3s;
- text-align: left;
- padding-bottom: 1.6rem;
- margin-bottom: 1rem;
-}
-
-.project-card:hover {
- transform: translateY(-5px);
-}
-
-/* Project Card Thumbnail Styling */
-.project-thumbnail {
- width: 100%;
-}
-
-/* Project Title and Description Styling */
-.project-title {
- font-size: 1.3em;
- color: #333;
- font-weight: 500;
- margin: 10px 10px 10px 16px;
-}
-
-.project-description {
- font-size: 16px;
- color: #6b6b6b;
- margin: 10px 10px 16px 16px;
- line-height: 20px;
-}
-
-/* Styling for the tech used field */
-.project-tech {
- font-size: 0.75rem;
- margin: 15px;
- color: #777;
-}
-
-.project-tech span.tech-item {
- border: 1px solid #efefef;
- margin: 2px;
- padding: 2px 7px;
- font-size: 0.68rem;
- background-color: #f2f2f2; /* Fuchsia Color */
- color: #242424;
-}
-
-/* Styling for the estimated time field */
-.project-time {
- font-size: 0.9rem;
- margin: 10px 15px;
- color: #777;
-}
-
-.project-time strong {
- color: #555;
-}
-
-/* Link styling */
-.project-link {
- display: inline-block;
- margin: 10px 15px;
- font-size: 1rem;
- color: #007bff;
- text-decoration: none;
- transition: color 0.3s ease;
-}
-
-.project-link:hover {
- color: #0056b3;
-}
-
-.project-link i {
- margin-left: 5px;
-}
-
-/* Add some padding and space between the content inside each card */
-.project-card > p,
-.project-card > a {
- margin-bottom: 10px;
-}
-
-/* Footer Section Styling */
-footer {
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- padding: 3rem 0;
- color: #333; /* Text color */
- background-color: #111827;
-}
diff --git a/assets/images/100jsproject.jpg b/assets/images/100jsproject.jpg
deleted file mode 100644
index acebfbc..0000000
Binary files a/assets/images/100jsproject.jpg and /dev/null differ
diff --git a/assets/images/favicon.ico b/assets/images/favicon.ico
deleted file mode 100644
index a01f88d..0000000
Binary files a/assets/images/favicon.ico and /dev/null differ
diff --git a/assets/images/nike.avif b/assets/images/nike.avif
deleted file mode 100644
index 584d546..0000000
Binary files a/assets/images/nike.avif and /dev/null differ
diff --git a/assets/images/og-image.png b/assets/images/og-image.png
deleted file mode 100644
index d7498a4..0000000
Binary files a/assets/images/og-image.png and /dev/null differ
diff --git a/assets/images/open-ai.avif b/assets/images/open-ai.avif
deleted file mode 100644
index 0435341..0000000
Binary files a/assets/images/open-ai.avif and /dev/null differ
diff --git a/assets/images/project-images/Digital Clock.jpg b/assets/images/project-images/Digital Clock.jpg
deleted file mode 100644
index ffc9d44..0000000
Binary files a/assets/images/project-images/Digital Clock.jpg and /dev/null differ
diff --git a/assets/images/project-images/Simple Calculator.jpg b/assets/images/project-images/Simple Calculator.jpg
deleted file mode 100644
index a6f74bf..0000000
Binary files a/assets/images/project-images/Simple Calculator.jpg and /dev/null differ
diff --git a/assets/images/project-images/To-Do App.jpg b/assets/images/project-images/To-Do App.jpg
deleted file mode 100644
index 0606123..0000000
Binary files a/assets/images/project-images/To-Do App.jpg and /dev/null differ
diff --git a/assets/images/sonos.avif b/assets/images/sonos.avif
deleted file mode 100644
index e94c534..0000000
Binary files a/assets/images/sonos.avif and /dev/null differ
diff --git a/assets/images/twitter-image.jpg b/assets/images/twitter-image.jpg
deleted file mode 100644
index d8962da..0000000
Binary files a/assets/images/twitter-image.jpg and /dev/null differ
diff --git a/assets/js/demodata.js b/assets/js/demodata.js
deleted file mode 100644
index 934e7f3..0000000
--- a/assets/js/demodata.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const project = {
- index: "03",
- name: "Digital Clock",
- description: "A real-time digital clock that updates every second.",
- difficulty: "Beginner",
- techUsed: ["HTML", "CSS", "JavaScript"],
- estimatedTime: "30 minutes",
- status: "Completed",
- startDate: new Date("2023-01-14T00:00:00.000Z"),
- endDate: new Date("2023-01-14T00:00:00.000Z"),
- thumbnail:
- "https://raw.githubusercontent.com/pradipchaudhary/100-js-projects/refs/heads/project03/03-digital-clock/images/digital-clock-thumbnail.png",
- codeLink:
- "https://github.com/pradipchaudhary/100-js-projects/tree/project03/03-digital-clock",
- liveDemoLink:
- "https://pradipchaudhary.github.io/100-js-projects/digital-clock/",
- tags: ["Clock", "JavaScript", "Beginner"],
- createdAt: new Date("2023-01-14T00:00:00.000Z"),
-};
diff --git a/assets/js/index.js b/assets/js/index.js
deleted file mode 100644
index 2bf6fc3..0000000
--- a/assets/js/index.js
+++ /dev/null
@@ -1,119 +0,0 @@
-console.log("connected js");
-
-const shortDescription = () => {
- const description = document.querySelectorAll(".project-description");
- console.log(description);
-};
-
-shortDescription();
-// Project data array
-const projects = [
- {
- id: "01", // Padded id for each project
- title: "To-Do List",
- description:
- "Organize tasks with a dynamic To-Do list. Add, edit, and delete tasks with local storage support.",
- image: "./assets/images/open-ai.avif",
- liveLink: `https://github.com/pradipchaudhary/100-javascript-projects/01-todo-list`, // Dynamic live link
- codeLink: `https://github.com/pradipchaudhary/100-javascript-projects/tree/master/01-todo-list`, // Dynamic code link
- alt: "To-Do List Project Image", // Alt text for image
- tech_used: ["HTML", "CSS", "JavaScript", "Local Storage"], // Technologies used
- estimated_time: "2-3 hours", // Estimated time to complete the project
- },
- {
- id: "02",
- title: "Simple Calculator",
- description:
- "A simple calculator app built with HTML, CSS, and JavaScript to perform basic arithmetic operations.",
- image: "./assets/images/sonos.avif",
- liveLink: `https://github.com/pradipchaudhary/100-javascript-projects/02-simple-calculator`, // Dynamic live link
- codeLink: `https://github.com/pradipchaudhary/100-javascript-projects/tree/master/02-simple-calculator`, // Dynamic code link
- alt: "Simple Calculator Project Image", // Alt text for image
- tech_used: ["HTML", "CSS", "JavaScript"], // Technologies used
- estimated_time: "1-2 hours", // Estimated time to complete the project
- },
- {
- id: "03",
- title: "Digital Clock",
- description:
- "A live digital clock that updates every second. Perfect for practicing JavaScript date and time functions.",
- image: "./assets/images/nike.avif",
- liveLink: `https://github.com/pradipchaudhary/100-javascript-projects/03-digital-clock`, // Dynamic live link
- codeLink: `https://github.com/pradipchaudhary/100-javascript-projects/tree/master/03-digital-clock`, // Dynamic code link
- alt: "Digital Clock Project Image", // Alt text for image
- tech_used: ["HTML", "CSS", "JavaScript", "Date API"], // Technologies used
- estimated_time: "1-2 hours", // Estimated time to complete the project
- },
- {
- id: "04",
- title: "Tip Calculator",
- description:
- "A useful app to calculate tips based on the bill amount and selected percentage. Built with HTML, CSS, and JavaScript.",
- image: "./assets/images/nike.avif",
- liveLink: `https://github.com/pradipchaudhary/100-javascript-projects/04-tip-calculator`, // Dynamic live link
- codeLink: `https://github.com/pradipchaudhary/100-javascript-projects/tree/master/04-tip-calculator`, // Dynamic code link
- alt: "Tip Calculator Project Image", // Alt text for image
- tech_used: ["HTML", "CSS", "JavaScript"], // Technologies used
- estimated_time: "1 hour", // Estimated time to complete the project
- },
- {
- id: "05",
- title: "Temperature Converter",
- description:
- "Convert temperatures between Celsius, Fahrenheit, and Kelvin with this handy tool using JavaScript.",
- image: "./assets/images/sonos.avif",
- liveLink: `https://github.com/pradipchaudhary/100-javascript-projects/05-temperature-converter`, // Dynamic live link
- codeLink: `https://github.com/pradipchaudhary/100-javascript-projects/tree/master/05-temperature-converter`, // Dynamic code link
- alt: "Temperature Converter Project Image", // Alt text for image
- tech_used: ["HTML", "CSS", "JavaScript"], // Technologies used
- estimated_time: "1 hour", // Estimated time to complete the project
- },
- {
- id: "06",
- title: "Random Quote Generator",
- description:
- "Generates a new inspirational quote each time you click, using JavaScript and an API for quote data.",
- image: "./assets/images/open-ai.avif",
- liveLink: `https://github.com/pradipchaudhary/100-javascript-projects/06-random-quote-generator`, // Dynamic live link
- codeLink: `https://github.com/pradipchaudhary/100-javascript-projects/tree/master/06-random-quote-generator`, // Dynamic code link
- alt: "Random Quote Generator Project Image", // Alt text for image
- tech_used: ["HTML", "CSS", "JavaScript", "API"], // Technologies used
- estimated_time: "1-2 hours", // Estimated time to complete the project
- },
-];
-
-// Reference to the project grid container
-const projectGrid = document.getElementById("project-grid");
-
-// Function to generate project cards dynamically
-function renderProjects() {
- projects.forEach((project) => {
- // Create the project card element
- const projectCard = document.createElement("div");
- projectCard.classList.add("project-card");
- // Generate the tech used HTML manually
- const techUsedHTML = project.tech_used
- .map((item) => `${item}`)
- .join(" ");
-
- // Set the inner HTML for each card
- projectCard.innerHTML = `
-
-
${project.description}
- -${project.estimated_time}
- - - code - -`; - - // Append the card to the project grid - projectGrid.appendChild(projectCard); - }); -} - -// Call the function to render projects on page load -renderProjects();