My_Projects/script.js at main · subratamondal1029/My_Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import Aos from "aos";
import 'aos/dist/aos.css';
Aos.init({
   offset: 20,
   duration: 300,
})

fetch('/projectData.json')
.then(res => res.json())
.then(printProjects)


const freeLanceContainer = document.getElementById('freelancing')
const ownProjectContainer = document.getElementById('ownProject')

function printProjects(data){
const freelancingProjects = data.freelanceProject
const ownProjects = data.ownProject

freelancingProjects.forEach((project) =>{
   freeLanceContainer.innerHTML += `<div class="projectCard" data-aos="zoom-in">
                <img src="/images/freelanceImage/${project.imageUrl}" alt="${project.projectName}">
                <div class="projectDetails">
                    <h3 class="projectName">${project.projectName}</h3>
                    <p class="projectDescrip">${project.projectDescription}</p>
                </div>
                <div class="projectLinks">
                    <a class="link" href="${project.previewLink}"><i class="fa-solid fa-link"></i>Preview</a>
                </div>
            </div>`


})

ownProjects.forEach((project) =>{
   ownProjectContainer.innerHTML += `<div class="projectCard" data-aos="zoom-in">
                <img src="/${project.folderName}/images/site.webp" alt="${project.projectName}">
                <div class="projectDetails">
                    <h3 class="projectName">${project.projectName}</h3>
                    <p class="projectDescrip">${project.projectDescription}</p>
                </div>
                <div class="projectLinks">
                    <a class="link" href="${project.previewLink}"><i class="fa-solid fa-link"></i>Preview</a>
                    <a class="link" href="${project.codeLink}"><i class="fa-solid fa-link"></i>Code</a>
                </div>
            </div>`
})
}