diff --git a/Projects/graph visuliser2/README.md b/Projects/graph visuliser2/README.md new file mode 100644 index 000000000..0538214c4 --- /dev/null +++ b/Projects/graph visuliser2/README.md @@ -0,0 +1,29 @@ +# Graph visualiser + +## Description + +This is a simple graph visualiser. It can be used to visualise graphs in a simple way. It is written in javascript + +## Features + +1. You can select type of graph you want to visualise. You can choose between directed and undirected graph +2. You can add number of vertices you want to have in your graph using Add Node button dynamically. +3. You can add edges between vertices using the adjency matrix displayed. + - The matrix is editable. You can change the value of the matrix by clicking on the cell and entering the value. + - The matrix is symmetrical in undirected graph. If you change the value of the cell in row 1 and column 2, the value of the cell in row 2 and column 1 will also change. + - for the directed graph, the matrix is not symmetrical. If you change the value of the cell in row 1 and column 2, the value of the cell in row 2 and column 1 will not change. and is of form + + + +
IndexName of the to node
Name of the from nodeweight of the edge
+4. Graph nodes span randomly inside the canvas. You can move them around using mouse by draging them. the edges will follow the nodes. + +5. You can also apply Dijkstra's algorithm to find shortest path between two nodes. To do that you need to select two nodes and then click Dijkstra button. The shortest path will be displayed in red color. Apart from them you can also apply BFS and DFS algorithms to find all nodes that are reachable from the selected node. To do that you need to select one node and then click BFS or DFS button.( all the algorithms are applied on node 1). +6. You can also change the node label by changing the value in the text box in the leftmost column of the table. + +## How to use + +1. First you need to select type of graph you want to visualise. You can choose between directed and undirected graph +2. Then you can add number of vertices you want to have in your graph using Add Node button +3. Then you can add edges between vertices using the adjency matrix displayed. +4. Graph nodes span randomly inside the canvas. You can move them around using mouse by draging them. the edges will follow the nodes. \ No newline at end of file diff --git a/Projects/graph visuliser2/index.html b/Projects/graph visuliser2/index.html new file mode 100644 index 000000000..52fae3158 --- /dev/null +++ b/Projects/graph visuliser2/index.html @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + +

Graph Visualiser

+
+

Select Graph Type

+ +
+ + +
+ + +
+ +
+ + + + + + + + + + +
+ index +
+ +
+
+
+ +
+ + + +
+ + + + + + + + Your browser does not support the HTML5 canvas tag. + + + Your browser does not support the HTML5 canvas tag. + + + + + + \ No newline at end of file diff --git a/Projects/graph visuliser2/script.js b/Projects/graph visuliser2/script.js new file mode 100644 index 000000000..81c7f3be2 --- /dev/null +++ b/Projects/graph visuliser2/script.js @@ -0,0 +1,527 @@ +console.log("hellow world"); + +var nodeCount = 0; + +var matrix = document.getElementById("matrix-body"); +var header = document.getElementById("matrix-header"); +var input_canvas = document.getElementById("canvas"); +var res_canvas = document.getElementById("res-canvas"); + +var directed = document.getElementById("graphType").value == "directed"; + +// list with set of 20 colors +var colors = [ + "#FF0000", + "#00FF00", + "#0000FF", + "#FFFF00", + "#00FFFF", + "#FF00FF", + "#800000", + "#008000", + "#000080", + "#808000", + "#008080", + "#800080", + "#808080", + "#C0C0C0", + "#FF0000", + "#00FF00", + "#0000FF", + "#FFFF00", + "#00FFFF", + "#FF00FF", + ]; + + +var nodeInfo = []; +var adjMatrix = []; + +var selectedNode = null; + +document.getElementById("addBtn").addEventListener("click", addNode); +document.getElementById("bfsBtn").addEventListener("click", bfs); +document.getElementById("dfsBtn").addEventListener("click", dfs); +document.getElementById("dijkstraBtn").addEventListener("click", dijkstra); +input_canvas.addEventListener("mousedown", selectNode); + +document.getElementById("graphType").addEventListener("change", function () { + var type = document.getElementById("graphType").value; + if (type == "undirected") { + directed = false; + } else { + directed = true; + } + //reset everything + nodeCount = 0; + matrix.innerHTML = ""; + header.innerHTML = 'index'; + nodeInfo = []; + adjMatrix = []; + var ctx = input_canvas.getContext("2d"); + ctx.clearRect(0, 0, input_canvas.width, input_canvas.height); + ctx.beginPath(); + ctx.closePath(); + ctx.stroke(); +}); + +// array of 8 colors + +function addNode() { + //assing random color to node + nodeCount++; + var color = colors[nodeCount % 20]; + nodeInfo.push({ + color: color, + label: "Node " + nodeCount, + x: Math.random() * 950 + 50, + y: Math.random() * 450 + 50, + }); + + var node = document.createElement("th"); + node.setAttribute("id", "node" + nodeCount); + node.setAttribute("class", "header-element vfix"); + node.innerHTML = "Node " + nodeCount; + header.appendChild(node); + var node1 = document.createElement("input"); + node1.setAttribute("type", "text"); + node1.setAttribute("id", "node" + nodeCount + "-row-label"); + node1.setAttribute("class", "node-label"); + node1.setAttribute("value", "Node " + nodeCount); + node1.setAttribute("style", "background-color:" + color + ";") + node1.setAttribute("onchange", "changeNodeLabel(event)"); + var node2 = document.createElement("th"); + node2.setAttribute("id", "node-label" + nodeCount); + node2.setAttribute("class", "header-element fix"); + node2.appendChild(node1); + node2.setAttribute("style", "background-color:" + color + ";") + + var row = document.createElement("tr"); + row.setAttribute("id", "row-" + nodeCount); + row.setAttribute("class", "row-element"); + row.appendChild(node2); + matrix.appendChild(row); + adjMatrix.push(new Array(nodeCount).fill([0, 0])); + for (i = 0; i < nodeCount; i++) { + var cell = document.createElement("td"); + cell.setAttribute("id", "cell-" + nodeCount + "-" + (i + 1)); + cell.setAttribute("class", "cell-element"); + var input = document.createElement("input"); + + input.setAttribute("type", "number"); + input.setAttribute("id", "input-" + nodeCount + "-" + (i + 1)); + input.setAttribute("class", "input-element"); + input.setAttribute("onchange", "changeValue(event)"); + input.setAttribute("style","background-color:transparent;") + cell.setAttribute("style", "background-color:" + ((nodeCount+i)%2?"#fff":"#f2f2f2") + ";") + input.setAttribute("value", "0"); + if (i == nodeCount - 1) { + input.setAttribute("disabled", "true"); + } + cell.appendChild(input); + row.appendChild(cell); + } + + for (i = 0; i < nodeCount - 1; i++) { + var cell = document.createElement("td"); + cell.setAttribute("id", "cell-" + (i + 1) + "-" + nodeCount); + cell.setAttribute("class", "cell-element"); + var input = document.createElement("input"); + input.setAttribute("type", "number"); + input.setAttribute("id", "input-" + (i + 1) + "-" + nodeCount); + input.setAttribute("class", "input-element"); + input.setAttribute("value", "0"); + input.setAttribute("onchange", "changeValue(event)"); + input.setAttribute("style","background-color:transparent;") + cell.setAttribute("style", "background-color:" + ((nodeCount+i)%2?"#fff":"#f2f2f2") + ";") + cell.appendChild(input); + document.getElementById("row-" + (i + 1)).appendChild(cell); + adjMatrix[i].push([0, 0]); + } + + console.table(nodeInfo); + + drawEdges(); +} + +function drawEdges(canvas=input_canvas,val = true) { + console.log(val) + var ctx = canvas.getContext("2d"); + ctx.clearRect(0, 0, canvas.width, canvas.height); + for (i = 0; i < nodeCount; i++) { + for (j = 0; j < nodeCount; j++) { + if (adjMatrix[i][j][0] != 0) { + var x1 = nodeInfo[i].x; + var y1 = nodeInfo[i].y; + var x2 = nodeInfo[j].x; + var y2 = nodeInfo[j].y; + var theta = Math.atan((y2 - y1) / (x2 - x1)); + + console.log(theta) + + var off = 10 * adjMatrix[i][j][1]; + + var offX = parseInt(off * Math.sin(theta)) + var offY = parseInt(off * Math.cos(theta)) + console.log("offset",offX, offY) + console.log(x1 + offX, y1 - offY); + console.log(x2 + offX, y2 - offY) + console.log("drawing edge between " + i + " and " + j); + x1 = x1 + offX; + x2 = x2 + offX + y1 = y1 - offY + y2 = y2 - offY + ctx.fillStyle = "rgba(255,255,255)"; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); + ctx.closePath(); + //draw arrow head if directed at edge of circle of radius r + if (directed) { + var r = 20; + + theta = theta + if (x2 < x1) { + theta += Math.PI; + } + var x = x2 - r * Math.cos(theta); + var y = y2 - r * Math.sin(theta); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo( + x - 10 * Math.cos(theta + Math.PI / 6), + y - 10 * Math.sin(theta + Math.PI / 6) + ); + ctx.lineTo( + x - 10 * Math.cos(theta - Math.PI / 6), + y - 10 * Math.sin(theta - Math.PI / 6) + ); + ctx.lineTo(x, y); + ctx.fillStyle = "#000000"; + ctx.fill(); + ctx.closePath(); + } + + //draw weight + ctx.fillStyle = "#000000"; + ctx.font = "20px Arial"; + ctx.fillText( + adjMatrix[i][j][0], + (nodeInfo[i].x + nodeInfo[j].x) / 2 + offX, + (nodeInfo[i].y + nodeInfo[j].y) / 2 - (adjMatrix[i][j][1]==-1?4*offY:2*offY) + ); + } + } + } + if (val) { + drawNodes(); + } +} + + +function changeValue(event) { + var id = event.target.id; + var value = parseInt(document.getElementById(id).value); + console.log(directed); + var row = id.split("-")[1]; + var col = id.split("-")[2]; + + if (directed == false) { + adjMatrix[col - 1][row - 1] = [value, 0]; + document.getElementById("input-" + col + "-" + row).value = value; + adjMatrix[row - 1][col - 1] = [value, 0]; + } else { + if (value == 0) { + adjMatrix[row - 1][col - 1] = [0, 0]; + } else { + if (adjMatrix[col - 1][row - 1][0] === 0) { + adjMatrix[row - 1][col - 1] = [value, 0]; + } else if (adjMatrix[col - 1][row - 1][0] === value) { + adjMatrix[row - 1][col - 1] = [value, 0]; + adjMatrix[col - 1][row - 1] = [value, 0]; + } else { + if (adjMatrix[col - 1][row - 1][1] === 0) { + adjMatrix[col - 1][row - 1][1] = 1; + } + adjMatrix[row - 1][col - 1] = [value, -adjMatrix[col - 1][row - 1][1]]; + } + } + } + + console.table(adjMatrix); + drawEdges(); +} + +function changeNodeLabel(event) { + var id = event.target.id; + var node = id.split("-")[0]; + var label = document.getElementById(id).value; + document.getElementById(node).innerHTML = label; + nodeInfo[node.split("node")[1] - 1].label = label; + console.log(node); + drawEdges(); +} + +function drawNodes(canvas=input_canvas) { + var ctx = canvas.getContext("2d"); + + for (i = 0; i < nodeCount; i++) { + ctx.beginPath(); + ctx.arc(nodeInfo[i].x, nodeInfo[i].y, 20, 0, 2 * Math.PI); + ctx.fillStyle = nodeInfo[i].color; + ctx.fill(); + ctx.closePath(); + ctx.fillStyle = "#000000"; + ctx.font = "10px Arial"; + ctx.fillText(nodeInfo[i].label, nodeInfo[i].x - 12, nodeInfo[i].y + 2.5); + } +} + +function selectNode(event) { + const rect = event.target.getBoundingClientRect(); + + var mouseX = event.clientX - rect.left; + var mouseY = event.clientY - rect.top; + + console.log(mouseX, mouseY); + + for (i = 0; i < nodeCount; i++) { + if ( + mouseX > nodeInfo[i].x - 20 && + mouseX < nodeInfo[i].x + 20 && + mouseY > nodeInfo[i].y - 20 && + mouseY < nodeInfo[i].y + 20 + ) { + selectedNode = i; + + break; + } + } + + if (selectedNode != null) { + document.getElementById("node" + (selectedNode + 1)).style.backgroundColor = + "#00FF00"; + + input_canvas.addEventListener("mousemove", dragNode); + input_canvas.addEventListener("mouseup", function () { + input_canvas.removeEventListener("mousemove", dragNode); + console.log("mouseup"); + document.getElementById( + "node" + (selectedNode + 1) + ).style.backgroundColor = "#FFFFFF"; + selectedNode = null; + }); + } else { + input_canvas.removeEventListener("mousemove", dragNode); + } + + console.log(selectedNode); +} + +function dragNode(event) { + const rect = event.target.getBoundingClientRect(); + + var mouseX = event.clientX - rect.left; + var mouseY = event.clientY - rect.top; + + nodeInfo[selectedNode].x = mouseX; + nodeInfo[selectedNode].y = mouseY; + drawEdges(); +} + +function bfs() { + var queue = []; + var visited = []; + var path = []; + var parent = []; + + for (i = 0; i < nodeCount; i++) { + visited.push(false); + parent.push(-1); + } + + queue.push(0); + visited[0] = true; + + while (queue.length != 0) { + var curr = queue.shift(); + path.push(curr); + for (i = 0; i < nodeCount; i++) { + if (adjMatrix[curr][i] != 0 && visited[i] == false) { + queue.push(i); + visited[i] = true; + parent[i] = curr; + } + } + } + + console.log(path); + console.log(parent); + + var ctx = res_canvas.getContext("2d"); + ctx.clearRect(0, 0, res_canvas.width, res_canvas.height); + + for (i = 0; i < path.length - 1; i++) { + ctx.beginPath(); + ctx.moveTo(nodeInfo[path[i]].x, nodeInfo[path[i]].y); + ctx.lineTo(nodeInfo[path[i + 1]].x, nodeInfo[path[i + 1]].y); + ctx.strokeStyle = "#000000"; + ctx.stroke(); + ctx.closePath(); + } + drawNodes(); +} + +function dfs() { + var stack = []; + var visited = []; + var path = []; + var parent = []; + + for (i = 0; i < nodeCount; i++) { + visited.push(false); + parent.push(-1); + } + + stack.push(0); + visited[0] = true; + + while (stack.length != 0) { + var curr = stack.pop(); + path.push(curr); + for (i = 0; i < nodeCount; i++) { + if (adjMatrix[curr][i] != 0 && visited[i] == false) { + stack.push(i); + visited[i] = true; + parent[i] = curr; + } + } + } + + console.log(path); + console.log(parent); + + var ctx = res_canvas.getContext("2d"); + ctx.clearRect(0, 0, res_canvas.width, res_canvas.height); + drawEdges(res_canvas,false); + for (i = 0; i < path.length - 1; i++) { + ctx.beginPath(); + ctx.moveTo(nodeInfo[path[i]].x, nodeInfo[path[i]].y); + ctx.lineTo(nodeInfo[path[i + 1]].x, nodeInfo[path[i + 1]].y); + ctx.strokeStyle = "#000000"; + ctx.stroke(); + ctx.closePath(); + } + drawNodes(res_canvas); +} + +function dijkstra() { + var dist = []; + var visited = []; + var path = []; + var parent = []; + + for (i = 0; i < nodeCount; i++) { + dist.push(Number.MAX_VALUE); + visited.push(false); + parent.push(-1); + } + + dist[0] = 0; + console.log(adjMatrix,dist,visited) + for (i = 0; i < nodeCount - 1; i++) { + var min = Number.MAX_VALUE; + var minIndex = -1; + for (j = 0; j < nodeCount; j++) { + if (visited[j] == false && dist[j] < min) { + min = dist[j]; + minIndex = j; + } + } + visited[minIndex] = true; + for (j = 0; j < nodeCount; j++) { + console.log(visited[j],adjMatrix[minIndex][j][0],dist[minIndex],dist[j]) + if ( + visited[j] == false && + adjMatrix[minIndex][j][0] != 0 && + dist[minIndex] + adjMatrix[minIndex][j][0] < dist[j] + ) { + dist[j] = dist[minIndex] + adjMatrix[minIndex][j][0]; + parent[j] = minIndex; + } + } + } + + console.log(dist); + console.log(parent); + + var ctx = res_canvas.getContext("2d"); + ctx.clearRect(0, 0, res_canvas.width, res_canvas.height); + for (i = 0; i < nodeCount; i++) { + if (parent[i] != -1) { + var x1 = nodeInfo[i].x; + var y1 = nodeInfo[i].y; + var x2 = nodeInfo[parent[i]].x; + var y2 = nodeInfo[parent[i]].y; + var theta = Math.atan((y2 - y1) / (x2 - x1)); + + console.log(theta) + + var off = 10 * adjMatrix[i][parent[i]][1]; + + var offX = parseInt(off * Math.sin(theta)) + var offY = parseInt(off * Math.cos(theta)) + console.log("offset",offX, offY) + console.log(x1 + offX, y1 - offY); + console.log(x2 + offX, y2 - offY) + console.log("drawing edge between " + i + " and " + parent[i]); + x1 = x1 + offX; + x2 = x2 + offX + y1 = y1 - offY + y2 = y2 - offY + ctx.fillStyle = "rgba(255,255,255)"; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); + ctx.closePath(); + //draw arrow head if directed at edge of circle of radius r + if (directed) { + var r = 20; + + theta = theta + if (x2 > x1) { + theta += Math.PI; + } + var x = x1 - r * Math.cos(theta); + var y = y1 - r * Math.sin(theta); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo( + x - 10 * Math.cos(theta + Math.PI / 6), + y - 10 * Math.sin(theta + Math.PI / 6) + ); + ctx.lineTo( + x - 10 * Math.cos(theta - Math.PI / 6), + y - 10 * Math.sin(theta - Math.PI / 6) + ); + ctx.lineTo(x, y); + ctx.fillStyle = "#000000"; + ctx.fill(); + ctx.closePath(); + } + + //draw weight + ctx.fillStyle = "#000000"; + ctx.font = "20px Arial"; + ctx.fillText( + adjMatrix[parent[i]][i][0], + (nodeInfo[i].x + nodeInfo[parent[i]].x) / 2 + offX, + (nodeInfo[i].y + nodeInfo[parent[i]].y) / 2 - (adjMatrix[i][parent[i]][1]==-1?4*offY:2*offY) + ); + } + } + + drawNodes(res_canvas); +} diff --git a/Projects/graph visuliser2/style.css b/Projects/graph visuliser2/style.css new file mode 100644 index 000000000..2e95bb7ad --- /dev/null +++ b/Projects/graph visuliser2/style.css @@ -0,0 +1,139 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 14px; + background-color: #fff; + color: #000; + margin: 0; + padding: 50px; + display: flex; + flex-direction: column; + align-items: center; +} + +.info-holder { + display: flex; + flex-direction: column; + align-items: center; + margin: 20px 0px; +} + +tr#matrix-header { + background-color: #f2f2f2; + font-weight: bold; + font-size: 15px; +} + +.header-element, +th { + font-size: 15px; + transition: 0.3s; + padding: 10px 30px; +} + +input.node-label { + width: 100%; + height: 100%; + border: none; + outline: none; + padding: 2px; + box-sizing: border-box; +} + +tbody#matrix-body { + background-color: #fff; +} + +thead{ + position: sticky; + top:0; + z-index: 1000; +} + +tr { + display: table; +} + +table { + table-layout: fixed; + width: 100%; + *margin-left: -100px; /*ie7*/ +} + +td, +th { + vertical-align: top; + padding: 10px; + min-width: 100px; + max-width: 100px; + border-radius: 4px; + padding: 10px 30px; +} + +.index{ + background-color: #f2f2f2; + +} + +.fix { + position: sticky; + max-width: 150px; + left:0; + margin-left: -220px; + } + .outer { + position: relative; + + } + .inner { + overflow-x: scroll; + max-width: 800px; + margin-left: 100px; + overflow-y: auto; + max-height: 500px; + } + +.btn { + background-color: #4caf50; + border: none; + color: white; + padding: 5px 10px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 15px; + width: 300px; + margin: 20px 2px; + cursor: pointer; + border-radius: 5px; + transition: 0.3s; +} + +.btn:hover { + background-color: #3e8e41; +} + +.table-holder { + +} + +input.input-element { + width: 100%; + height: 100%; + border: none; + outline: none; + padding: 2px; + box-sizing: border-box; + transition: 0.3s; + padding: 5px; + font-size: 14px; + border-radius: 5px; +} + +input.input-element:focus { + border: 1px solid #4caf50; +} + +#canvas, +#res-canvas { + border: 1px solid #000; +} diff --git a/img/projects/graphVisualizer.png b/img/projects/graphVisualizer.png new file mode 100644 index 000000000..0bfa5d3ea Binary files /dev/null and b/img/projects/graphVisualizer.png differ diff --git a/projects.js b/projects.js index f2928959c..f6c37e050 100644 --- a/projects.js +++ b/projects.js @@ -1,1105 +1,1115 @@ const projects = [ { - "title":"3D Login Page", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/3D form.png", - "description":"This is a 3D SignUp or SignIn page made using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/3D Login Page", - "project-link":"Projects/3D Login Page/index.html" + "title": "3D Login Page", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/3D form.png", + "description": "This is a 3D SignUp or SignIn page made using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/3D Login Page", + "project-link": "Projects/3D Login Page/index.html" }, - { - "title":"3D Maze", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/3D Maze.png", - "description":"This is a 3D maze made using HTML, CSS and JavaScript.It navigates through the maze using the arrow keys on the keyboard. Once the maze is completed, there would be a secret key.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/3D Maze", - "project-link":"Projects/3D Maze/index.html" + { + "title": "3D Maze", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/3D Maze.png", + "description": "This is a 3D maze made using HTML, CSS and JavaScript.It navigates through the maze using the arrow keys on the keyboard. Once the maze is completed, there would be a secret key.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/3D Maze", + "project-link": "Projects/3D Maze/index.html" }, - { - "title":"Air Quality", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Air_Quality.png", - "description":"It is atmospheric Air Quality checker built using HTML, CSS and JavaScript. Based on Latitude and Longitude, it shows the Air Quality Index(concentration of pollutants) of that particular location.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Air-Quality", - "project-link":"Projects/Air-Quality/index.html" + { + "title": "Air Quality", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Air_Quality.png", + "description": "It is atmospheric Air Quality checker built using HTML, CSS and JavaScript. Based on Latitude and Longitude, it shows the Air Quality Index(concentration of pollutants) of that particular location.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Air-Quality", + "project-link": "Projects/Air-Quality/index.html" }, - { - "title":"Analog Clock", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Analog_Clock.png", - "description":"It is analog clock built using HTML, CSS and JavaScript. It shows the current time of the system. It is a simple analog clock with hour, minute and second hands.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Analog Clock", - "project-link":"Projects/Analog Clock/index.html" + { + "title": "Analog Clock", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Analog_Clock.png", + "description": "It is analog clock built using HTML, CSS and JavaScript. It shows the current time of the system. It is a simple analog clock with hour, minute and second hands.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Analog Clock", + "project-link": "Projects/Analog Clock/index.html" }, - { - "title":"Logistic-Company", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/logiC.png", - "description":"It is a Logistic Company landing Page with essential features for a logistic company", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Logistic Company", - "project-link":"Projects/Logistic Company/index.html" + { + "title": "Logistic-Company", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/logiC.png", + "description": "It is a Logistic Company landing Page with essential features for a logistic company", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Logistic Company", + "project-link": "Projects/Logistic Company/index.html" }, - { - "title":"Animated Card", - "tags":["HTML","CSS"], - "img":"img/projects/Animated_Card.png", - "description":"It is animated card built using HTML,CSS.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Animated Card", - "project-link":"Projects/Animated Card/animated_card.html" + { + "title": "Animated Card", + "tags": ["HTML", "CSS"], + "img": "img/projects/Animated_Card.png", + "description": "It is animated card built using HTML,CSS.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Animated Card", + "project-link": "Projects/Animated Card/animated_card.html" }, - { - "title":"Armstrong Number Checker", - "tags":["HTML","CSS, JavaScript"], - "img":"img/projects/Armstrong_checker.png", - "description":"It is a simple Armstrong Number Checker built using HTML, CSS and JavaScript. It checks whether the given number is an Armstrong Number or not.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/ArmstrongChecker", - "project-link":"Projects/ArmstrongChecker/armstrong.html" + { + "title": "Armstrong Number Checker", + "tags": ["HTML", "CSS, JavaScript"], + "img": "img/projects/Armstrong_checker.png", + "description": "It is a simple Armstrong Number Checker built using HTML, CSS and JavaScript. It checks whether the given number is an Armstrong Number or not.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/ArmstrongChecker", + "project-link": "Projects/ArmstrongChecker/armstrong.html" }, - { - "title":"Audio-Text Converter", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Text_to_Speech.png", - "description":"It is basic audio to text convertor that uses Voice Recognition.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Audio-Text-Convertor", - "project-link":"Projects/Audio-Text-Convertor/index.html" + { + "title": "Audio-Text Converter", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Text_to_Speech.png", + "description": "It is basic audio to text convertor that uses Voice Recognition.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Audio-Text-Convertor", + "project-link": "Projects/Audio-Text-Convertor/index.html" }, - { - "title":"Beauty Zone", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/BeautyZone.png", - "description":"It is a bridal makeup website built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/beautyzone", - "project-link":"Projects/beautyzone/index.html" + { + "title": "Beauty Zone", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/BeautyZone.png", + "description": "It is a bridal makeup website built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/beautyzone", + "project-link": "Projects/beautyzone/index.html" }, - { - "title":"Beyblade Card Catalog", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Beyblade_Card_Catalog.png", - "description":"Beyblade Card Catalog will showcase Beyblade cards. The project will leverage a JSON file containing data for various Beyblade cards. This data will be dynamically fetched and utilized to populate the card catalog. The frontend page will incorporate a filtering mechanism to allow users to narrow down their card search.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Beyblade-Card-Catalog", - "project-link":"Projects/Beyblade-Card-Catalog/index.html" + { + "title": "Beyblade Card Catalog", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Beyblade_Card_Catalog.png", + "description": "Beyblade Card Catalog will showcase Beyblade cards. The project will leverage a JSON file containing data for various Beyblade cards. This data will be dynamically fetched and utilized to populate the card catalog. The frontend page will incorporate a filtering mechanism to allow users to narrow down their card search.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Beyblade-Card-Catalog", + "project-link": "Projects/Beyblade-Card-Catalog/index.html" }, - { - "title":"Bill Tip Calculator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Tip_Calculator.png", - "description":"Bill Tip Calculator is used to calculate tips per person and is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/bill tip calculator", - "project-link":"Projects/bill tip calculator/index.html" + { + "title": "Bill Tip Calculator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Tip_Calculator.png", + "description": "Bill Tip Calculator is used to calculate tips per person and is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/bill tip calculator", + "project-link": "Projects/bill tip calculator/index.html" }, - { - "title":"Blog Project Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Blog_Website.png", - "description":"It is a simple blog website built using html,css and javascript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Blog Project Website", - "project-link":"Projects/Blog Project Website/index.html" + { + "title": "Blog Project Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Blog_Website.png", + "description": "It is a simple blog website built using html,css and javascript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Blog Project Website", + "project-link": "Projects/Blog Project Website/index.html" }, - { - "title":"BMICalculator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/BMI_Calculator.png", - "description":"BMI calculator is used to calculate BMI of the person based on height and weight.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/BMICalculator", - "project-link":"Projects/BMICalculator/index.html" + { + "title": "BMICalculator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/BMI_Calculator.png", + "description": "BMI calculator is used to calculate BMI of the person based on height and weight.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/BMICalculator", + "project-link": "Projects/BMICalculator/index.html" }, { - "title":"Bookcase", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/BookCase.png", - "description":"Book case is a website where one can store their all the finished and unfinished books.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Bookcase", - "project-link":"Projects/Bookcase/index.html" + "title": "Bookcase", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/BookCase.png", + "description": "Book case is a website where one can store their all the finished and unfinished books.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Bookcase", + "project-link": "Projects/Bookcase/index.html" }, { - "title":"Bookmarker_App", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/BookMarker_App.png", - "description":"BookMarker App is used to save bookmarks using name of website.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Bookmarker_App", - "project-link":"Projects/Bookmarker_App/index.html" + "title": "Bookmarker_App", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/BookMarker_App.png", + "description": "BookMarker App is used to save bookmarks using name of website.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Bookmarker_App", + "project-link": "Projects/Bookmarker_App/index.html" }, { - "title":"Breathe Meditation", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Breathe_Meditation.png", - "description":"Breathe Meditation is used to relax the mind and body. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Breathe Meditation", - "project-link":"Projects/Breathe Meditation/index.html" + "title": "Breathe Meditation", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Breathe_Meditation.png", + "description": "Breathe Meditation is used to relax the mind and body. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Breathe Meditation", + "project-link": "Projects/Breathe Meditation/index.html" }, { - "title":"Caesar Cipher", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Caesae_Cipher.png", - "description":"Caesar Cipher is the encryption tool that encrypts the text by shifting the letters by a certain number of places. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/caesar cipher", - "project-link":"Projects/caesar cipher/index.html" + "title": "Caesar Cipher", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Caesae_Cipher.png", + "description": "Caesar Cipher is the encryption tool that encrypts the text by shifting the letters by a certain number of places. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/caesar cipher", + "project-link": "Projects/caesar cipher/index.html" }, { - "title":"Calculator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Calculator.png", - "description":"Calculator is used to perform basic arithmetic operations. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Caculator", - "project-link":"Projects/Calculator/index.html" + "title": "Calculator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Calculator.png", + "description": "Calculator is used to perform basic arithmetic operations. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Caculator", + "project-link": "Projects/Calculator/index.html" }, { - "title":"Calendar", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Calendar.png", - "description":"Calendar is used to display the current date. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Calendar", - "project-link":"Projects/Calendar/index.html" + "title": "Calendar", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Calendar.png", + "description": "Calendar is used to display the current date. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Calendar", + "project-link": "Projects/Calendar/index.html" }, { - "title":"Captcha Checker", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Captcha_Checker.png", - "description":"Captcha Checker is used to check if the entered captcha is valid or not.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Captcha Checker", - "project-link":"Projects/Captcha Checker/index.html" + "title": "Captcha Checker", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Captcha_Checker.png", + "description": "Captcha Checker is used to check if the entered captcha is valid or not.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Captcha Checker", + "project-link": "Projects/Captcha Checker/index.html" }, { - "title":"Cards Component", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Card_Components.png", - "description":"Cards components is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Cards Component", - "project-link":"Projects/Cards Component/index.html" + "title": "Cards Component", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Card_Components.png", + "description": "Cards components is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Cards Component", + "project-link": "Projects/Cards Component/index.html" }, { - "title":"Chess", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Chess.png", - "description":"Chess is a two player strategy board game played on a chessboard, a checkered game board with 64 squares arranged in an 8×8 grid. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/chess", - "project-link":"Projects/chess/index.html" + "title": "Chess", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Chess.png", + "description": "Chess is a two player strategy board game played on a chessboard, a checkered game board with 64 squares arranged in an 8×8 grid. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/chess", + "project-link": "Projects/chess/index.html" }, { - "title":"Code Editor", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Code_Editor.png", - "description":"Code Editor is used to write and edit the source code of computer programs. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Code-editor", - "project-link":"Projects/Code-editor/index.html" + "title": "Code Editor", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Code_Editor.png", + "description": "Code Editor is used to write and edit the source code of computer programs. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Code-editor", + "project-link": "Projects/Code-editor/index.html" }, { - "title":"Corona Tracker", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Corona_update.png", - "description":"Corona update is used to track the number of cases, deaths and recoveries of corona virus. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Corona-Tracker", - "project-link":"Projects/Corona-Tracker/index.html" + "title": "Corona Tracker", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Corona_update.png", + "description": "Corona update is used to track the number of cases, deaths and recoveries of corona virus. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Corona-Tracker", + "project-link": "Projects/Corona-Tracker/index.html" }, { - "title":"Countify", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Countify.png", - "description":"Countify is used to count the number of words, characters in a paragraph. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/countify", - "project-link":"Projects/countify/index.html" + "title": "Countify", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Countify.png", + "description": "Countify is used to count the number of words, characters in a paragraph. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/countify", + "project-link": "Projects/countify/index.html" }, { - "title":"Crypto Dashboard", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Crypto_dashboard.png", - "description":"Crypto Dashboard is used to get get crypto related updates.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Crypto Dashboard", - "project-link":"Projects/Crypto Dashboard/index.html" + "title": "Crypto Dashboard", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Crypto_dashboard.png", + "description": "Crypto Dashboard is used to get get crypto related updates.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Crypto Dashboard", + "project-link": "Projects/Crypto Dashboard/index.html" }, { - "title":"DashBoard", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Dashboard.png", - "description":"DashBoard is used to display the status. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/dashboard", - "project-link":"Projects/dashboard/index.html" + "title": "DashBoard", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Dashboard.png", + "description": "DashBoard is used to display the status. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/dashboard", + "project-link": "Projects/dashboard/index.html" }, { - "title":"Day Planner", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Day_Planner.png", - "description":"Day Planner is used to plan the day. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Day Planner", - "project-link":"Projects/Day Planner/index.html" + "title": "Day Planner", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Day_Planner.png", + "description": "Day Planner is used to plan the day. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Day Planner", + "project-link": "Projects/Day Planner/index.html" }, { - "title":"Dictionary", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Dictionary.png", - "description":"Dictionary is used to get the meaning of the word. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/dictionary", - "project-link":"Projects/dictionary/index.html" + "title": "Dictionary", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Dictionary.png", + "description": "Dictionary is used to get the meaning of the word. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/dictionary", + "project-link": "Projects/dictionary/index.html" }, { - "title":"Dictionary WebApp", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Dictionary_WebApp.png", - "description":"It is a dictionary web app built using HTML, CSS and JavaScript. It uses the Oxford Dictionary API to fetch the meaning of the word.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Dictionary_WebApp", - "project-link":"Projects/Dictionary_WebApp/index.html" + "title": "Dictionary WebApp", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Dictionary_WebApp.png", + "description": "It is a dictionary web app built using HTML, CSS and JavaScript. It uses the Oxford Dictionary API to fetch the meaning of the word.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Dictionary_WebApp", + "project-link": "Projects/Dictionary_WebApp/index.html" }, { - "title":"Digital Clock", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Digital_Clock.png", - "description":"Digital Clock is used to display the current time. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Digital Clock", - "project-link":"Projects/Digital Clock/index.html" + "title": "Digital Clock", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Digital_Clock.png", + "description": "Digital Clock is used to display the current time. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Digital Clock", + "project-link": "Projects/Digital Clock/index.html" }, { - "title":"Drawing App", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Drawing_App.png", - "description":"Drawing App is used to draw on the screen. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/DRAWING APP", - "project-link":"Projects/DRAWING APP/landing.html" + "title": "Drawing App", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Drawing_App.png", + "description": "Drawing App is used to draw on the screen. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/DRAWING APP", + "project-link": "Projects/DRAWING APP/landing.html" }, { - "title":"Drink Water Reminder Application", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Drink_Water_Reminder.png", - "description":"Drink Water Reminder Application is used to remind the user to drink water after every fixed interval. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/DrinkWaterReminderApplication", - "project-link":"Projects/DrinkWaterReminderApplication/index.html" + "title": "Drink Water Reminder Application", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Drink_Water_Reminder.png", + "description": "Drink Water Reminder Application is used to remind the user to drink water after every fixed interval. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/DrinkWaterReminderApplication", + "project-link": "Projects/DrinkWaterReminderApplication/index.html" }, { - "title":"Dynamic JS Quiz", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Quiz.png", - "description":"It is a quiz app built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Dynamic js Quiz", - "project-link":"Projects/Dynamic js Quiz/index.html" + "title": "Dynamic JS Quiz", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Quiz.png", + "description": "It is a quiz app built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Dynamic js Quiz", + "project-link": "Projects/Dynamic js Quiz/index.html" }, { - "title":"E-commerce Landing Page", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Ecommerce.png", - "description":"E commerce Landing page is used to display the products of the company. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/E-commerce Landing Page", - "project-link":"Projects/E-commerce Landing Page/index.html" + "title": "E-commerce Landing Page", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Ecommerce.png", + "description": "E commerce Landing page is used to display the products of the company. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/E-commerce Landing Page", + "project-link": "Projects/E-commerce Landing Page/index.html" }, { - "title":"Education Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Education_Website.png", - "description":"It is an education website built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Education Website", - "project-link":"Projects/Education Website/index.html" + "title": "Education Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Education_Website.png", + "description": "It is an education website built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Education Website", + "project-link": "Projects/Education Website/index.html" }, { - "title":"Emoji Rating", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Emoji_Rating.png", - "description":"Emoji Rating is used to rate the product. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Emoji Rating", - "project-link":"Projects/Emoji Rating/index.html" + "title": "Emoji Rating", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Emoji_Rating.png", + "description": "Emoji Rating is used to rate the product. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Emoji Rating", + "project-link": "Projects/Emoji Rating/index.html" }, { - "title":"Expanding Card Design", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Expanding_Image.png", - "description":"Expanding Card Design is used to display the image in a bigger size. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Expanding Card Design", - "project-link":"Projects/Expanding Card Design/index.html" + "title": "Expanding Card Design", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Expanding_Image.png", + "description": "Expanding Card Design is used to display the image in a bigger size. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Expanding Card Design", + "project-link": "Projects/Expanding Card Design/index.html" }, { - "title":"Expense Tracker", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Expense_Tracker.png", - "description":"Expense Tracker is used to track the expenses. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Expense Tracker", - "project-link":"Projects/Expense Tracker/index.html" + "title": "Expense Tracker", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Expense_Tracker.png", + "description": "Expense Tracker is used to track the expenses. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Expense Tracker", + "project-link": "Projects/Expense Tracker/index.html" }, { - "title":"EzyMath", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Ezy_math.png", - "description":"Ezy Math is a website that helps students to learn mathematics in a fun way. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/ezymath-main", - "project-link":"Projects/ezymath-main/index.html" + "title": "EzyMath", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Ezy_math.png", + "description": "Ezy Math is a website that helps students to learn mathematics in a fun way. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/ezymath-main", + "project-link": "Projects/ezymath-main/index.html" }, { - "title":"FAQ Page", - "tags":["HTML","CSS"], - "img":"img/projects/FAQ.png", - "description":"It contains the frequently asked questions and their answers. It is built using HTML and CSS.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/FAQ Page", - "project-link":"Projects/FAQ Page/faq_page.html" + "title": "FAQ Page", + "tags": ["HTML", "CSS"], + "img": "img/projects/FAQ.png", + "description": "It contains the frequently asked questions and their answers. It is built using HTML and CSS.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/FAQ Page", + "project-link": "Projects/FAQ Page/faq_page.html" }, { - "title":"Favicon Fetcher", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Favicon_Fetcher.png", - "description":"Favicon Fetcher is used to fetch the favicon of the website. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Favicon Fetcher", - "project-link":"Projects/Favicon Fetcher/index.html" + "title": "Favicon Fetcher", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Favicon_Fetcher.png", + "description": "Favicon Fetcher is used to fetch the favicon of the website. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Favicon Fetcher", + "project-link": "Projects/Favicon Fetcher/index.html" }, { - "title":"Filters", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Filters.png", - "description":"Filters is used to filter the images based on the category. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Filters", - "project-link":"Projects/Filters/index.html" + "title": "Filters", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Filters.png", + "description": "Filters is used to filter the images based on the category. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Filters", + "project-link": "Projects/Filters/index.html" }, { - "title":"Fitness-website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/website.jpg", - "description":"The Fitness Website is alanding page , web application designed to help users learn and visualize various exercises for different muscle groups.It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Fitness-website", - "project-link":"Projects/Fitness-website/index.html" + "title": "Fitness-website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/website.jpg", + "description": "The Fitness Website is alanding page , web application designed to help users learn and visualize various exercises for different muscle groups.It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Fitness-website", + "project-link": "Projects/Fitness-website/index.html" }, { - "title":"Github Profile Wrapper", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Github_Profile_Wrapper.png", - "description":"Github Profile Wrapper is used to display the github profile of the user. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Github Profile Wrapper", - "project-link":"Projects/Github Profile Wrapper/index.html" + "title": "Github Profile Wrapper", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Github_Profile_Wrapper.png", + "description": "Github Profile Wrapper is used to display the github profile of the user. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Github Profile Wrapper", + "project-link": "Projects/Github Profile Wrapper/index.html" }, { - "title":"Gooey Cursor", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Goeey_Cursor.png", - "description":"Gooey Cursor is used to display the cursor in a different way. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Gooey Cursor", - "project-link":"Projects/Gooey Cursor/index.html" + "title": "Gooey Cursor", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Goeey_Cursor.png", + "description": "Gooey Cursor is used to display the cursor in a different way. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Gooey Cursor", + "project-link": "Projects/Gooey Cursor/index.html" }, { - "title":"Google Clone", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Google_Clone.png", - "description":"Google Clone is a clone of the google search engine. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Google Clone", - "project-link":"Projects/Google Clone/index.html" + "title": "Google Clone", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Google_Clone.png", + "description": "Google Clone is a clone of the google search engine. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Google Clone", + "project-link": "Projects/Google Clone/index.html" }, { - "title":"Google Drive Clone", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Google_drive.png", - "description":"Google Drive Clone is a clone of the google drive. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Google Drive Clone", - "project-link":"Projects/Google Drive Clone/index.html" + "title": "Google Drive Clone", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Google_drive.png", + "description": "Google Drive Clone is a clone of the google drive. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Google Drive Clone", + "project-link": "Projects/Google Drive Clone/index.html" }, { - "title":"Gym-Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Gym_Website.png", - "description":"Gym Website is a website that displays the information about the gym. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Gym-Website", - "project-link":"Projects/Gym-Website/index.html" + "title": "Gym-Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Gym_Website.png", + "description": "Gym Website is a website that displays the information about the gym. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Gym-Website", + "project-link": "Projects/Gym-Website/index.html" }, { - "title":"Hex Code Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Hexacode.png", - "description":"Hex Code Generator is used to generate the hex code of the color. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Hex Code Generator", - "project-link":"Projects/Hex Code Generator/index.html" + "title": "Hex Code Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Hexacode.png", + "description": "Hex Code Generator is used to generate the hex code of the color. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Hex Code Generator", + "project-link": "Projects/Hex Code Generator/index.html" }, { - "title":"Hidden Search", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Hidden_Search_Bar.png", - "description":"Hidden Search is used to display the search bar when the user clicks on the search icon. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Hidden Search", - "project-link":"Projects/Hidden Search/hidden_search.html" + "title": "Hidden Search", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Hidden_Search_Bar.png", + "description": "Hidden Search is used to display the search bar when the user clicks on the search icon. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Hidden Search", + "project-link": "Projects/Hidden Search/hidden_search.html" }, { - "title":"Hoolix-Digital Agency Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Digital_Agency_Website.png", - "description":"Digital Agency Website is a website that displays the information about the digital agency. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/hoolix-digital agency website", - "project-link":"Projects/hoolix-digital agency website/index.html" + "title": "Hoolix-Digital Agency Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Digital_Agency_Website.png", + "description": "Digital Agency Website is a website that displays the information about the digital agency. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/hoolix-digital agency website", + "project-link": "Projects/hoolix-digital agency website/index.html" }, { - "title":"Image Editor", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Img_editor.png", - "description":"Image Editor is used to edit the image. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/image editor", - "project-link":"Projects/image editor/index.html" + "title": "Image Editor", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Img_editor.png", + "description": "Image Editor is used to edit the image. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/image editor", + "project-link": "Projects/image editor/index.html" }, { - "title":"Image Slider", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Img_Slider.png", - "description":"Image Slider is used to display the images in a slider. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/image slider", - "project-link":"Projects/image slider/index.html" + "title": "Image Slider", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Img_Slider.png", + "description": "Image Slider is used to display the images in a slider. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/image slider", + "project-link": "Projects/image slider/index.html" }, { - "title":"Jaguar Car Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Jaguar_Website.png", - "description":"It is a Jaguar Car Website built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Jaguar Car Website", - "project-link":"Projects/Jaguar Car Website/index.html" + "title": "Jaguar Car Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Jaguar_Website.png", + "description": "It is a Jaguar Car Website built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Jaguar Car Website", + "project-link": "Projects/Jaguar Car Website/index.html" }, { - "title":"Jumble Word", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Jumble_Word.png", - "description":"Jumble Word is a game in which the user has to guess the word. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/JumbleWord", - "project-link":"Projects/JumbleWord/index.html" + "title": "Jumble Word", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Jumble_Word.png", + "description": "Jumble Word is a game in which the user has to guess the word. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/JumbleWord", + "project-link": "Projects/JumbleWord/index.html" }, { - "title":"Language Translator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Language_Translator.png", - "description":"Language Translator is used to translate the text from one language to another. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Langugaetranslator", - "project-link":"Projects/Langugaetranslator/index.html" + "title": "Language Translator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Language_Translator.png", + "description": "Language Translator is used to translate the text from one language to another. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Langugaetranslator", + "project-link": "Projects/Langugaetranslator/index.html" }, { - "title":"Loan Calculator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Loan_Calculator.png", - "description":"Loan Calculator is used to calculate the loan amount, interest and monthly payment. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Loan-calculator", - "project-link":"Projects/Loan-calculator/index.html" + "title": "Loan Calculator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Loan_Calculator.png", + "description": "Loan Calculator is used to calculate the loan amount, interest and monthly payment. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Loan-calculator", + "project-link": "Projects/Loan-calculator/index.html" }, { - "title":"Lyrics Search", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Lyrics_Search.png", - "description":"Lyrics_Search is used to search the lyrics of the song. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Lyrics Search", - "project-link":"Projects/Lyrics Search/index.html" + "title": "Lyrics Search", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Lyrics_Search.png", + "description": "Lyrics_Search is used to search the lyrics of the song. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Lyrics Search", + "project-link": "Projects/Lyrics Search/index.html" }, { - "title":"Magic Balls", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Magic_Ball.png", - "description":"Magic balls is a game in which the user has to ask YES/NO question. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Magic-balls", - "project-link":"Projects/Magic-balls/index.html" + "title": "Magic Balls", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Magic_Ball.png", + "description": "Magic balls is a game in which the user has to ask YES/NO question. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Magic-balls", + "project-link": "Projects/Magic-balls/index.html" }, { - "title":"Meme Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Meme_generator.png", - "description":"Meme Generator is used to generate the memes. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Meme Generator", - "project-link":"Projects/Meme Generator/index.html" + "title": "Meme Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Meme_generator.png", + "description": "Meme Generator is used to generate the memes. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Meme Generator", + "project-link": "Projects/Meme Generator/index.html" }, { - "title":"Memory Game", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Memeory_Game.png", - "description":"Memory Game is a game in which the user has to remember the colour. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Memory Game", - "project-link":"Projects/Memory Game/index.html" + "title": "Memory Game", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Memeory_Game.png", + "description": "Memory Game is a game in which the user has to remember the colour. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Memory Game", + "project-link": "Projects/Memory Game/index.html" }, { - "title":"MixTape", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/MixTape.png", - "description":"Mix Tape is a music player built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Mixtape", - "project-link":"Projects/Mixtape/index.html" + "title": "MixTape", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/MixTape.png", + "description": "Mix Tape is a music player built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Mixtape", + "project-link": "Projects/Mixtape/index.html" }, { - "title":"Modern Credit Card Form", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Modern_credit_Card.png", - "description":"Modern Credit Card Form is used to display the credit card form. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Modern credit Card form Webpage", - "project-link":"Projects/Modern credit Card form Webpage/index.html" + "title": "Modern Credit Card Form", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Modern_credit_Card.png", + "description": "Modern Credit Card Form is used to display the credit card form. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Modern credit Card form Webpage", + "project-link": "Projects/Modern credit Card form Webpage/index.html" }, { - "title":"MovieDataBase", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Movie_Database.png", - "description":"Movie Database is used to display the information about the movies. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Movie DataBase", - "project-link":"Projects/Movie DataBase/index.html" + "title": "MovieDataBase", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Movie_Database.png", + "description": "Movie Database is used to display the information about the movies. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Movie DataBase", + "project-link": "Projects/Movie DataBase/index.html" }, { - "title":"Music Player", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Music_Player.png", - "description":"Music Player is used to play the music. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Music Player", - "project-link":"Projects/Music Player/index.html" + "title": "Music Player", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Music_Player.png", + "description": "Music Player is used to play the music. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Music Player", + "project-link": "Projects/Music Player/index.html" }, { - "title":"Music Player", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/musicPlayer.png", - "description":"Music Player is used to play the music. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/musicPlayer", - "project-link":"Projects/musicPlayer/index.html" + "title": "Music Player", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/musicPlayer.png", + "description": "Music Player is used to play the music. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/musicPlayer", + "project-link": "Projects/musicPlayer/index.html" }, { - "title":"Music Player", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Music_Player_using_JS.png", - "description":"Music Player is used to play the music. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/MusicPlayer using JavaScript", - "project-link":"Projects/MusicPlayer using JavaScript/index.html" + "title": "Music Player", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Music_Player_using_JS.png", + "description": "Music Player is used to play the music. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/MusicPlayer using JavaScript", + "project-link": "Projects/MusicPlayer using JavaScript/index.html" }, { - "title":"Myntra Clone", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Myntra.png", - "description":"Myntra Clone is a clone of the Myntra website. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/myntra-clone", - "project-link":"Projects/myntra-clone/index.html" + "title": "Myntra Clone", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Myntra.png", + "description": "Myntra Clone is a clone of the Myntra website. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/myntra-clone", + "project-link": "Projects/myntra-clone/index.html" }, { - "title":"Notes App", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Notes_App.png", - "description":"Notes App is used to take notes. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Notes App", - "project-link":"Projects/Notes App/index.html" + "title": "Notes App", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Notes_App.png", + "description": "Notes App is used to take notes. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Notes App", + "project-link": "Projects/Notes App/index.html" }, { - "title":"Number_Guessing_Game", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Number_guessing.png", - "description":"Number Guessing Game is a game in which the user has to guess the number. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/number_guessing_game", - "project-link":"Projects/number_guessing_game/index.html" + "title": "Number_Guessing_Game", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Number_guessing.png", + "description": "Number Guessing Game is a game in which the user has to guess the number. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/number_guessing_game", + "project-link": "Projects/number_guessing_game/index.html" }, { - "title":"OTP Verification", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/OTP_Verification.png", - "description":"OTP Verification is used to verify the OTP. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/OTP Verification", - "project-link":"Projects/OTP Verification/home.html" + "title": "OTP Verification", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/OTP_Verification.png", + "description": "OTP Verification is used to verify the OTP. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/OTP Verification", + "project-link": "Projects/OTP Verification/home.html" }, { - "title":"Palindrome Checker", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Palindrome_Checker.png", - "description":"Palindrome Checker is used to check whether the word is palindrome or not. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/palindrome", - "project-link":"Projects/palindrome/palindrome.html" + "title": "Palindrome Checker", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Palindrome_Checker.png", + "description": "Palindrome Checker is used to check whether the word is palindrome or not. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/palindrome", + "project-link": "Projects/palindrome/palindrome.html" }, { - "title":"Password Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Password_Generator.png", - "description":"Password Generator is used to generate the password. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Password Generator", - "project-link":"Projects/Password Generator/index.html" + "title": "Password Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Password_Generator.png", + "description": "Password Generator is used to generate the password. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Password Generator", + "project-link": "Projects/Password Generator/index.html" }, { - "title":"PDF Merger", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/PDF_merger.png", - "description":"Pdf Merger is used to merge the pdf files. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/PdfMerger", - "project-link":"Projects/PdfMerger/index.html" + "title": "PDF Merger", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/PDF_merger.png", + "description": "Pdf Merger is used to merge the pdf files. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/PdfMerger", + "project-link": "Projects/PdfMerger/index.html" }, { - "title":"PinCode Checker", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Pincode_checker.png", - "description":"PinCode Checker is used to check the pincode of the area. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Pincode checker", - "project-link":"Projects/Pincode checker/index.html" + "title": "PinCode Checker", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Pincode_checker.png", + "description": "PinCode Checker is used to check the pincode of the area. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Pincode checker", + "project-link": "Projects/Pincode checker/index.html" }, { - "title":"Ping-Pong", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Ping Pong.png", - "description":"Ping Pong is a game in which the user has to hit the ball. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Ping-Png", - "project-link":"Projects/Ping-Png/index.html" + "title": "Ping-Pong", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Ping Pong.png", + "description": "Ping Pong is a game in which the user has to hit the ball. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Ping-Png", + "project-link": "Projects/Ping-Png/index.html" }, { - "title":"Prime Number Checker", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Prime_Number.png", - "description":"It is used to check number is odd or even. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/prime checker", - "project-link":"Projects/prime checker/prime.html" + "title": "Prime Number Checker", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Prime_Number.png", + "description": "It is used to check number is odd or even. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/prime checker", + "project-link": "Projects/prime checker/prime.html" }, { - "title":"QR Code Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/QR_Code_Generator.png", - "description":"QR Code Generator is used to generate the QR Code of the text. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/QR Code Generator", - "project-link":"Projects/QR Code Generator/index.html" + "title": "QR Code Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/QR_Code_Generator.png", + "description": "QR Code Generator is used to generate the QR Code of the text. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/QR Code Generator", + "project-link": "Projects/QR Code Generator/index.html" }, { - "title":"QR Code Reader", - "tags":["HTML","CSS","JavaScript","Node Library"], - "img":"img/projects/QR Code Reader.png", - "description":"The user can upload or either scan the QR Code from their device and the application provides the link of the QR Code scanned.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/QR Code Reader", - "project-link":"Projects/QR Code Reader/index.html" + "title": "QR Code Reader", + "tags": ["HTML", "CSS", "JavaScript", "Node Library"], + "img": "img/projects/QR Code Reader.png", + "description": "The user can upload or either scan the QR Code from their device and the application provides the link of the QR Code scanned.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/QR Code Reader", + "project-link": "Projects/QR Code Reader/index.html" }, { - "title":"Reaction_App", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Reaction_Time_Test.png", - "description":"Reaction Time Test is a game in which the user has to click on the screen when the color changes. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Reaction_App", - "project-link":"Projects/Reaction_App/index.html" + "title": "Reaction_App", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Reaction_Time_Test.png", + "description": "Reaction Time Test is a game in which the user has to click on the screen when the color changes. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Reaction_App", + "project-link": "Projects/Reaction_App/index.html" }, { - "title":"Recipe Finder", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Recipe_Finder.png", - "description":"Recipe Finder is used to find the recipe of the dish. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Recipe Finder", - "project-link":"Projects/Recipe Finder/index.html" + "title": "Recipe Finder", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Recipe_Finder.png", + "description": "Recipe Finder is used to find the recipe of the dish. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Recipe Finder", + "project-link": "Projects/Recipe Finder/index.html" }, { - "title":"Save Text as File", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Save_File.png", - "description":"Save Text as File is used to save the text as file of various formats. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Save Text as File", - "project-link":"Projects/Save Text as File/index.html" + "title": "Save Text as File", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Save_File.png", + "description": "Save Text as File is used to save the text as file of various formats. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Save Text as File", + "project-link": "Projects/Save Text as File/index.html" }, { - "title":"Screen Recorder", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Screen_recorder.png", - "description":"Screen Recorder is used to record the screen. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/screen recording website", - "project-link":"Projects/screen recording website/index.html" + "title": "Screen Recorder", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Screen_recorder.png", + "description": "Screen Recorder is used to record the screen. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/screen recording website", + "project-link": "Projects/screen recording website/index.html" }, { - "title":"Shades - Business Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Shades.png", - "description":"Shades is a business website built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Shades", - "project-link":"Projects/Shades/index.html" + "title": "Shades - Business Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Shades.png", + "description": "Shades is a business website built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Shades", + "project-link": "Projects/Shades/index.html" }, { - "title":"SignIn Page", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/SignIn.png", - "description":"It is a sign in page built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/SignIn Page", - "project-link":"Projects/SignIn Page/index.html" + "title": "SignIn Page", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/SignIn.png", + "description": "It is a sign in page built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/SignIn Page", + "project-link": "Projects/SignIn Page/index.html" }, { - "title":"Sorting Visualizer", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Sorting_Visualizer.png", - "description":"Sorting Visualizer is used to visualize the sorting algorithms. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Sorting Visualizer", - "project-link":"Projects/Sorting Visualizer/index.html" + "title": "Sorting Visualizer", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Sorting_Visualizer.png", + "description": "Sorting Visualizer is used to visualize the sorting algorithms. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Sorting Visualizer", + "project-link": "Projects/Sorting Visualizer/index.html" }, { - "title":"Space Tourism Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Space_Tour.png", - "description":"Space Tourism Website is a website that displays the information about the space tourism. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Space Tourism Website", - "project-link":"Projects/Space Tourism Website/index.html" + "title": "Space Tourism Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Space_Tour.png", + "description": "Space Tourism Website is a website that displays the information about the space tourism. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Space Tourism Website", + "project-link": "Projects/Space Tourism Website/index.html" }, { - "title":"Split landing Page", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Landing_Page.png", - "description":"Split Landing Page is used to display information about more than one thing. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Split Landing Page", - "project-link":"Projects/Split Landing Page/index.html" + "title": "Split landing Page", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Landing_Page.png", + "description": "Split Landing Page is used to display information about more than one thing. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Split Landing Page", + "project-link": "Projects/Split Landing Page/index.html" }, { - "title":"Spotify Clone", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Spotify_Clone.png", - "description":"Spotify Clone is a clone of the spotify website. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Spotify Clone", - "project-link":"Projects/Spotify Clone/index.html" + "title": "Spotify Clone", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Spotify_Clone.png", + "description": "Spotify Clone is a clone of the spotify website. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Spotify Clone", + "project-link": "Projects/Spotify Clone/index.html" }, { - "title":"Step Progress Bar", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Step_Wise_Progress.png", - "description":"Step Progress Bar is used to display the progress of the steps. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/step-progress-bar", - "project-link":"Projects/step-progress-bar/index.html" + "title": "Step Progress Bar", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Step_Wise_Progress.png", + "description": "Step Progress Bar is used to display the progress of the steps. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/step-progress-bar", + "project-link": "Projects/step-progress-bar/index.html" }, { - "title":"Stone Paper Scissors", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Rock_Paper_Scissors.png", - "description":"Stone Paper Game is a game in which the user has to choose the stone, paper or scissor. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/stone paper game", - "project-link":"Projects/stone paper game/index.html" + "title": "Stone Paper Scissors", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Rock_Paper_Scissors.png", + "description": "Stone Paper Game is a game in which the user has to choose the stone, paper or scissor. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/stone paper game", + "project-link": "Projects/stone paper game/index.html" }, { - "title":"Stop Watch", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Stop_Watch.png", - "description":"Stop Watch is used to display the time. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/stopwatch", - "project-link":"Projects/stopwatch/Stopwatch.html" + "title": "Stop Watch", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Stop_Watch.png", + "description": "Stop Watch is used to display the time. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/stopwatch", + "project-link": "Projects/stopwatch/Stopwatch.html" }, { - "title":"Student Enrollment Form", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Student_Enrollment_Form.png", - "description":"Student Enrollment Form is used to enroll the student. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Student Enrollment Form", - "project-link":"Projects/Student Enrollment Form/index.html" + "title": "Student Enrollment Form", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Student_Enrollment_Form.png", + "description": "Student Enrollment Form is used to enroll the student. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Student Enrollment Form", + "project-link": "Projects/Student Enrollment Form/index.html" }, { - "title":"Student Service Portal", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Student_Service.png", - "description":"Student Service Portal is used to display the information about the services for student. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Student Service Portal", - "project-link":"Projects/Student Service Portal/index.html" + "title": "Student Service Portal", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Student_Service.png", + "description": "Student Service Portal is used to display the information about the services for student. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Student Service Portal", + "project-link": "Projects/Student Service Portal/index.html" }, { - "title":"Talking ChatBot", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Talking_ChatBot.png", - "description":"Talking ChatBot is used to chat with the bot. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Talking chatbot", - "project-link":"Projects/Talking chatbot/index.html" + "title": "Talking ChatBot", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Talking_ChatBot.png", + "description": "Talking ChatBot is used to chat with the bot. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Talking chatbot", + "project-link": "Projects/Talking chatbot/index.html" }, { - "title":"TaskList", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Day_Planner.png", - "description":"Task List is used to add the task. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/TaskList", - "project-link":"Projects/TaskList/index.html" + "title": "TaskList", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Day_Planner.png", + "description": "Task List is used to add the task. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/TaskList", + "project-link": "Projects/TaskList/index.html" }, { - "title":"Temperature Converter", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Temperature_Convertor.png", - "description":"Temperature Converter is used to convert the temperature from one unit to another. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Temperatureconvertor", - "project-link":"Projects/Temperatureconvertor/index.html" + "title": "Temperature Converter", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Temperature_Convertor.png", + "description": "Temperature Converter is used to convert the temperature from one unit to another. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Temperatureconvertor", + "project-link": "Projects/Temperatureconvertor/index.html" }, { - "title":"Text-Utils", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Text-utils.jpg", - "description":"Text Utils is used to perform various operations on the text. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Text-Utils", - "project-link":"Projects/Text-Utils/index.html" + "title": "Text-Utils", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Text-utils.jpg", + "description": "Text Utils is used to perform various operations on the text. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Text-Utils", + "project-link": "Projects/Text-Utils/index.html" }, { - "title":"The Great DrumKit", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Drumkit.png", - "description":"", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/The Great Drumkit", - "project-link":"Projects/The Great Drumkit/index.html" + "title": "The Great DrumKit", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Drumkit.png", + "description": "", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/The Great Drumkit", + "project-link": "Projects/The Great Drumkit/index.html" }, { - "title":"Snake, Water and Gun Game", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Snake_Water_Gun.png", - "description":"Snake, Water and Gun Game is a game in which the user has to choose the snake, water or gun. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/The Snake,Water and Gun Game", - "project-link":"Projects/The Snake,Water and Gun Game/index.html" + "title": "Snake, Water and Gun Game", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Snake_Water_Gun.png", + "description": "Snake, Water and Gun Game is a game in which the user has to choose the snake, water or gun. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/The Snake,Water and Gun Game", + "project-link": "Projects/The Snake,Water and Gun Game/index.html" }, { - "title":"Theme Switcher", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Switch_theme.png", - "description":"", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Theme Switcher", - "project-link":"Projects/Theme Switcher/switch_theme.html" + "title": "Theme Switcher", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Switch_theme.png", + "description": "", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Theme Switcher", + "project-link": "Projects/Theme Switcher/switch_theme.html" }, { - "title":"Tic Tac Toe Game", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Tic Tac Toe.png", - "description":"Tic Tac Toe Game is a game in which the user has to play with X's and O's. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/TIC-TAC-TOE PROJECT", - "project-link":"Projects/TIC-TAC-TOE PROJECT/index.html" + "title": "Tic Tac Toe Game", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Tic Tac Toe.png", + "description": "Tic Tac Toe Game is a game in which the user has to play with X's and O's. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/TIC-TAC-TOE PROJECT", + "project-link": "Projects/TIC-TAC-TOE PROJECT/index.html" }, { - "title":"Timer", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Stop_Watch (2).png", - "description":"It is a timer built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Timer", - "project-link":"Projects/Timer/index.html" + "title": "Timer", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Stop_Watch (2).png", + "description": "It is a timer built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Timer", + "project-link": "Projects/Timer/index.html" }, { - "title":"Tiny MCE", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Tiny_MCE.png", - "description":"TinyMCE is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/TinyMCE synonym plugin", - "project-link":"Projects/TinyMCE synonym plugin/index.html" + "title": "Tiny MCE", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Tiny_MCE.png", + "description": "TinyMCE is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/TinyMCE synonym plugin", + "project-link": "Projects/TinyMCE synonym plugin/index.html" }, { - "title":"Tourism", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Tourism_Website.png", - "description":"Tourism is a website that displays the information about the tourism. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Tourism", - "project-link":"Projects/Tourism/index.html" + "title": "Tourism", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Tourism_Website.png", + "description": "Tourism is a website that displays the information about the tourism. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Tourism", + "project-link": "Projects/Tourism/index.html" }, { - "title":"Tripocity", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Tripocity.png", - "description":"Tripocity is a website that displays the information about the tourism. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Tripocity", - "project-link":"Projects/Tripocity/index.html" + "title": "Tripocity", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Tripocity.png", + "description": "Tripocity is a website that displays the information about the tourism. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Tripocity", + "project-link": "Projects/Tripocity/index.html" }, { - "title":"Truth Table Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Truth_Table.png", - "description":"Truth Table Generator is used to generate the truth table of the given expression. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/truth table generator", - "project-link":"Projects/truth table generator/index.html" + "title": "Truth Table Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Truth_Table.png", + "description": "Truth Table Generator is used to generate the truth table of the given expression. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/truth table generator", + "project-link": "Projects/truth table generator/index.html" }, { - "title":"Typing Speed Game", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Typing_speed.png", - "description":"Typing Speed Game is a game in which the user has to type the word and some parameters would be tested. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Typing Speed Game", - "project-link":"Projects/Typing Speed Game/index.html" + "title": "Typing Speed Game", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Typing_speed.png", + "description": "Typing Speed Game is a game in which the user has to type the word and some parameters would be tested. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Typing Speed Game", + "project-link": "Projects/Typing Speed Game/index.html" }, { - "title":"Villa Hotel Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Villa.png", - "description":"Villa Hotel Website is a website that displays the information about the hotel. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Villa Hotel website", - "project-link":"Projects/Villa Hotel website/index.html" + "title": "Villa Hotel Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Villa.png", + "description": "Villa Hotel Website is a website that displays the information about the hotel. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Villa Hotel website", + "project-link": "Projects/Villa Hotel website/index.html" }, { - "title":"Virtual Keyboard", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Virtual_Keyboard.png", - "description":"Virtual Keyboard is used to type the text without mechanical keyboard. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Virtual Keyboard", - "project-link":"Projects/Virtual Keyboard/index.html" + "title": "Virtual Keyboard", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Virtual_Keyboard.png", + "description": "Virtual Keyboard is used to type the text without mechanical keyboard. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Virtual Keyboard", + "project-link": "Projects/Virtual Keyboard/index.html" }, { - "title":"Visit Counter", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Visit_Counter.png", - "description":"Visit Counter is used to count the number of visitors on the website. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Visit Counter", - "project-link":"Projects/Visit Counter/index.html" + "title": "Visit Counter", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Visit_Counter.png", + "description": "Visit Counter is used to count the number of visitors on the website. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Visit Counter", + "project-link": "Projects/Visit Counter/index.html" }, { - "title":"Voyage Slider GSAP", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Voyage_Slider.png", - "description":"Voyage Slider GSAP is used to display the images in a slider. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Voyage Slider Gsap", - "project-link":"Projects/Voyage Slider Gsap/index.html" + "title": "Voyage Slider GSAP", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Voyage_Slider.png", + "description": "Voyage Slider GSAP is used to display the images in a slider. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Voyage Slider Gsap", + "project-link": "Projects/Voyage Slider Gsap/index.html" }, { - "title":"Weather", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Weather_Details.png", - "description":"Weather website is used to display the weather details of the city. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Weather", - "project-link":"Projects/Weather/index.html" + "title": "Weather", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Weather_Details.png", + "description": "Weather website is used to display the weather details of the city. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Weather", + "project-link": "Projects/Weather/index.html" }, { - "title":"Weight Convertor", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Weight_Convertor.png", - "description":"Weight Convertor is used to convert the weight from one unit to another. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Weight_converter", - "project-link":"Projects/Weight_converter/index.html" + "title": "Weight Convertor", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Weight_Convertor.png", + "description": "Weight Convertor is used to convert the weight from one unit to another. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Weight_converter", + "project-link": "Projects/Weight_converter/index.html" }, { - "title":"Whack A Mole", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Whack_A_Mole.png", - "description":"Whack a mole is a game in which the user has to hit the mole. It is built using HTML, CSS and JavaScript.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Whack-A-Mole", - "project-link":"Projects/Whack-A-Mole/index.html" + "title": "Whack A Mole", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Whack_A_Mole.png", + "description": "Whack a mole is a game in which the user has to hit the mole. It is built using HTML, CSS and JavaScript.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Whack-A-Mole", + "project-link": "Projects/Whack-A-Mole/index.html" }, { - "title":"WhiteBoard", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/WiteBoard.png", - "description":"White Board is used to draw on the screen. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/WhiteBoard", - "project-link":"Projects/WhiteBoard/index.html" + "title": "WhiteBoard", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/WiteBoard.png", + "description": "White Board is used to draw on the screen. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/WhiteBoard", + "project-link": "Projects/WhiteBoard/index.html" }, { - "title":"Wikipedia", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Wikipedia.png", - "description":"Wikipedia is used to search the information about the topic. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Wikipedia", - "project-link":"Projects/Wikipedia/index.html" + "title": "Wikipedia", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Wikipedia.png", + "description": "Wikipedia is used to search the information about the topic. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Wikipedia", + "project-link": "Projects/Wikipedia/index.html" }, { - "title":"Windows 11", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Windows11.png", - "description":"Windows 11 is a clone of the windows 11. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/windows 11", - "project-link":"Projects/windows 11/index.html" + "title": "Windows 11", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Windows11.png", + "description": "Windows 11 is a clone of the windows 11. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/windows 11", + "project-link": "Projects/windows 11/index.html" }, { - "title":"Resume Creator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Resume_Creator.png", - "description":"This project uses Basic HTML, CSS, JavaScript to create a basic Resume Creator, where you can create your resume and most important download the created Resume.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Resume%20Creator", - "project-link":"Projects/Resume Creator/index.html" - }, - { - "title":"Realtime Currency Converter", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/CurrencyConverter.png", - "description":"This is a currency converter web application that fetches real-time data for currency conversion rates using HTML, CSS, and JavaScript. The application allows users to convert currencies by selecting the source currency and the target currency, and it provides an interface to easily switch between the two selected values.", - "github-link":"https://github.com/Alkaison/Currency-Converter/", - "project-link":"Projects/Realtime%20Currency%20Converter/index.html" - }, - { - "title":"World Info Website", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/World_Info.png", - "description":"World Info Website is used to display the information about the world. It is built using html, css and javascript .", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/World Info Website", - "project-link":"Projects/World Info Website/index.html" - }, - { - "title":"Huffman Compressor", - "tags":["HTML","CSS","JavaScript","C++"], - "img":"img/projects/huffman.png", - "description":"Implemented the Huffman coding algorithm achieving efficient data compression without loss of information.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/HuffmanCompression", - "project-link":"Projects/HuffmanCompressor/index.html" - }, - { - "title":"Zomato Landing Page", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Zomato_Clone.png", - "description":"Zomato Landing Page is a clone of the zomato website. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Zomato-Landing-Page", - "project-link":"Projects/Zomato-Landing-Page/index.html" - }, + "title": "Resume Creator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Resume_Creator.png", + "description": "This project uses Basic HTML, CSS, JavaScript to create a basic Resume Creator, where you can create your resume and most important download the created Resume.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Resume%20Creator", + "project-link": "Projects/Resume Creator/index.html" + }, + { + "title": "Realtime Currency Converter", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/CurrencyConverter.png", + "description": "This is a currency converter web application that fetches real-time data for currency conversion rates using HTML, CSS, and JavaScript. The application allows users to convert currencies by selecting the source currency and the target currency, and it provides an interface to easily switch between the two selected values.", + "github-link": "https://github.com/Alkaison/Currency-Converter/", + "project-link": "Projects/Realtime%20Currency%20Converter/index.html" + }, + { + "title": "World Info Website", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/World_Info.png", + "description": "World Info Website is used to display the information about the world. It is built using html, css and javascript .", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/World Info Website", + "project-link": "Projects/World Info Website/index.html" + }, + { + "title": "Huffman Compressor", + "tags": ["HTML", "CSS", "JavaScript", "C++"], + "img": "img/projects/huffman.png", + "description": "Implemented the Huffman coding algorithm achieving efficient data compression without loss of information.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/HuffmanCompression", + "project-link": "Projects/HuffmanCompressor/index.html" + }, + { + "title": "Zomato Landing Page", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Zomato_Clone.png", + "description": "Zomato Landing Page is a clone of the zomato website. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Zomato-Landing-Page", + "project-link": "Projects/Zomato-Landing-Page/index.html" + }, + { + "title": "MESSI MANIA", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/MESSI MANIA.png", + "description": "A simple fan made webpage of LIONEL MESSI", + "github-link": "https://github.com/Soumyajit2825/MESSI_MANIA", + "project-link": "Projects/MESSI MANIA/index.html" + }, + { + "title": "Morse Code Convertor", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Morse_Code_Convertor.png", + "description": "This website can convert the morse code into the text and text into the morse code. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Morse%20Code%20Convertor", + "project-link": "Projects/Morse%20Code%20Convertor/index.html" + }, { - "title":"MESSI MANIA", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/MESSI MANIA.png", - "description":"A simple fan made webpage of LIONEL MESSI", - "github-link":"https://github.com/Soumyajit2825/MESSI_MANIA", - "project-link":"Projects/MESSI MANIA/index.html" - }, + "title": "Leap Years In A Range", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Leap_Years_In_A_Range.png", + "description": "This website can find the number of leap years in between the ranges and enlist all the leap years between the range of years. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Leap_Years_In_A_Range", + "project-link": "Projects/Leap_Years_In_A_Range/index.html" + }, { - "title":"Morse Code Convertor", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Morse_Code_Convertor.png", - "description":"This website can convert the morse code into the text and text into the morse code. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Morse%20Code%20Convertor", - "project-link":"Projects/Morse%20Code%20Convertor/index.html" - }, + "title": "Guess The Gender By Name", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Guess_The_Gender.png", + "description": "This website can guess the gender just by entering the name of the person. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed even on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Guess%20The%20Gender%20By%20Name", + "project-link": "Projects/Guess%20The%20Gender%20By%20Name/index.html" + }, { - "title":"Leap Years In A Range", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Leap_Years_In_A_Range.png", - "description":"This website can find the number of leap years in between the ranges and enlist all the leap years between the range of years. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Leap_Years_In_A_Range", - "project-link":"Projects/Leap_Years_In_A_Range/index.html" - }, + "title": "Text-Utilities", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Text_Utils.png", + "description": "This website can be used to manipulate text in several ways such as change to uppercase or lowercase , and remove extra spaces etc.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Text-Utilities", + "project-link": "Projects/Text-Utilities/index.html" + }, { - "title":"Guess The Gender By Name", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Guess_The_Gender.png", - "description":"This website can guess the gender just by entering the name of the person. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed even on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Guess%20The%20Gender%20By%20Name", - "project-link":"Projects/Guess%20The%20Gender%20By%20Name/index.html" - }, + "title": "Playable Piano", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Playable_Piano.png", + "description": "This project is a beginner friendly and helpful who are new to frontend technology. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed even on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Playable_Piano", + "project-link": "Projects/Playable_Piano/index.html" + }, { - "title":"Text-Utilities", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Text_Utils.png", - "description":"This website can be used to manipulate text in several ways such as change to uppercase or lowercase , and remove extra spaces etc.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Text-Utilities", - "project-link":"Projects/Text-Utilities/index.html" - }, + "title": "Solar System Model", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Solar_System_Model.png", + "description": "Solar system model is the animated project using CSS. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device. Adding data of different solar bodies will makes this website more informative.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Solar%20System%20Model", + "project-link": "Projects/Solar%20System%20Model/index.html" + }, { - "title":"Playable Piano", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Playable_Piano.png", - "description":"This project is a beginner friendly and helpful who are new to frontend technology. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed even on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Playable_Piano", - "project-link":"Projects/Playable_Piano/index.html" - }, + "title": "Solar System Model", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Solar_System_Model.png", + "description": "Solar system model is the animated project using CSS. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device. Adding data of different solar bodies will makes this website more informative.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Solar%20System%20Model", + "project-link": "Projects/Solar%20System%20Model/index.html" + }, { - "title":"Solar System Model", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Solar_System_Model.png", - "description":"Solar system model is the animated project using CSS. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device. Adding data of different solar bodies will makes this website more informative.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Solar%20System%20Model", - "project-link":"Projects/Solar%20System%20Model/index.html" - }, + "title": "Sound Equalizer", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Sound_Equalizer.png", + "description": "Sound Equalizer is a clone of the sound equalizer system. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Sound_Equalizer", + "project-link": "Projects/Sound_Equalizer/index.html" + }, { - "title":"Solar System Model", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Solar_System_Model.png", - "description":"Solar system model is the animated project using CSS. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device. Adding data of different solar bodies will makes this website more informative.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Solar%20System%20Model", - "project-link":"Projects/Solar%20System%20Model/index.html" - }, - { "title":"Sound Equalizer", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Sound_Equalizer.png", - "description":"Sound Equalizer is a clone of the sound equalizer system. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Sound_Equalizer", - "project-link":"Projects/Sound_Equalizer/index.html" - }, - { - "title":"Lorem Ipsum Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Lorem-Ipsum-Generator.png", - "description":"This project can generate random written paragraphs. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Lorem-Ipsum-Generator", - "project-link":"Projects/Lorem-Ipsum-Generator/index.html" - }, - { "title":"Carbon FootPrint Calculator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/carbonFootCalc.png", - "description":"Carbon FootPrint Calculator is an Eco-Friendly Calculator to help you keep your carbon emissions in check and help save the environment, built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Carbon-FootPrint-Calc", - "project-link":"Projects/Carbon-FootPrint-Calc/index.html" - }, - { - "title":"Video Player", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Video_Player.png", - "description":"This website can be used to play videos. This application give the feeling of video gallery as of our mobile phone.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Video-Player", - "project-link":"Projects/Video-Player/index.html" + "title": "Lorem Ipsum Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Lorem-Ipsum-Generator.png", + "description": "This project can generate random written paragraphs. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Lorem-Ipsum-Generator", + "project-link": "Projects/Lorem-Ipsum-Generator/index.html" + }, + { + "title": "Carbon FootPrint Calculator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/carbonFootCalc.png", + "description": "Carbon FootPrint Calculator is an Eco-Friendly Calculator to help you keep your carbon emissions in check and help save the environment, built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Carbon-FootPrint-Calc", + "project-link": "Projects/Carbon-FootPrint-Calc/index.html" + }, + { + "title": "Video Player", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Video_Player.png", + "description": "This website can be used to play videos. This application give the feeling of video gallery as of our mobile phone.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Video-Player", + "project-link": "Projects/Video-Player/index.html" }, { "title": "Chatbot", - "tags":["HTML","CSS","JavaScript"], + "tags": ["HTML", "CSS", "JavaScript"], "img": "img/projects/Chatbot.png", "description": "This is a Chatbot Website you can ask your any doubts this provides solutions with the help of GPT fetched API.", "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Chatbot", "project-link": "Projects/Chatbot/index.html" }, { - "title":"Random Meal Generator", - "tags":["HTML","CSS","JavaScript"], - "img":"img/projects/Random-Meal-Generator.png", - "description":"Random Meal Generator can generator different meals. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", - "github-link":"https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Random-Meal-Generator", - "project-link":"Projects/Random-Meal-Generator/index.html" + "title": "Random Meal Generator", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/Random-Meal-Generator.png", + "description": "Random Meal Generator can generator different meals. It is built using HTML, CSS and JavaScript. It is a responsive website that can be viewed on any device.", + "github-link": "https://github.com/TusharKesarwani/Front-End-Projects/tree/main/Projects/Random-Meal-Generator", + "project-link": "Projects/Random-Meal-Generator/index.html" + }, + { + "title": "Graph Visualizer", + "tags": ["HTML", "CSS", "JavaScript"], + "img": "img/projects/graphVisualizer.png", + "description": "Graph Visualizer is a tool to visualize complex graphs easily by entering nodes and edges as input. Built with HTML, CSS, and JavaScript, it updates the graph visualization in real-time and supports downloading the graph as a PNG image. The interface is clean and user-friendly.", + "github-link": "https://github.com/vivekxsh/graph_visualizer", + "project-link": "https://vivekxsh.github.io/graph_visualizer/", } ]