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.alt} -

${project.title}

-

${project.description}

- -
${techUsedHTML}
-

${project.estimated_time}

- - - code - -`; - - // Append the card to the project grid - projectGrid.appendChild(projectCard); - }); -} - -// Call the function to render projects on page load -renderProjects();