SimpsonGames.github.io/portfolio_import.js at main · SimpsonGames/SimpsonGames.github.io · 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
fetch('portfolio.json')
  .then(response => response.json())
  .then(data => {
    // Use the data to populate your website

    //Populate featured list
    const featuredContainer = document.querySelector('#featured-grid');

    if (featuredContainer)
    {
      data.projects.forEach(project => {
        if (project.featured)
        {
          const featuredElement = document.createElement('div');
          featuredElement.classList.add('portfolio-panel');

          let featuredInfo = `
          <img class="panel-image" src="img/portfolio/panels/${project.image}" alt="${project.title}">
          <h3>${project.title} (${project.date})</h3>
          <p class="panel-desc">${project.description}</p>
          `;

          if (project.portfolioPage !== null && project.portfolioPage !== "#")
          {
            featuredInfo += `<a href="portfolio/${project.portfolioPage}"><button class="button">Read More</button></>`;
          }

          if (project.externalPage !== null && project.externalPage !== "#")
          {
            featuredInfo += `<a href="${project.externalPage}" target="_blank"><button class="button">View Project Page</button></>`;
          }

          featuredElement.innerHTML = featuredInfo;
          featuredContainer.appendChild(featuredElement);
        }
      });
    }
    else
    {
      console.log('No element found with selector "#featured-grid"');
    }

    //Populate projects container
    const projectsContainer = document.querySelector('#portfolio-grid');

    if (projectsContainer)
    {
      data.projects.forEach(project => {
        const projectElement = document.createElement('div');
        projectElement.classList.add('portfolio-panel');

        let projectInfo = `
        <img class="panel-image" src="img/portfolio/panels/${project.image}" alt="${project.title}">
        <h3>${project.title} (${project.date})</h3>
        <p class="panel-desc">${project.description}</p>
      `;

        if (project.portfolioPage !== null && project.portfolioPage !== "#")
        {
          projectInfo += `<a href="portfolio/${project.portfolioPage}"><button class="button">Read More</button></>`;
        }

        if (project.externalPage !== null && project.externalPage !== "#")
        {
          projectInfo += `<a href="${project.externalPage}" target="_blank"><button class="button">View Project Page</button></>`;
        }

        projectElement.innerHTML = projectInfo;
        projectsContainer.appendChild(projectElement);
      });
    }
    else
    {
      console.log('No element found with selector "#portfolio-grid"');
    }
  });

fetch('portfolio_music.json')
  .then(response => response.json())
  .then(data => {
    //Populate music list
    const musicContainer = document.querySelector('#music-grid');

    if (musicContainer)
    {
      data.albums.forEach(album => {
        const albumElement = document.createElement('div');
        albumElement.classList.add('portfolio-panel');

        let albumInfo = `
        <img class="panel-image" src="img/portfolio/panels/${album.image}" alt="${album.title}">
        <h3>${album.title}</h3>
        `;

        if (album.page !== null && album.page !== "#")
        {
          albumInfo += `<a href="../portfolio/music/${album.page}"><button class="button">View Music</button></a>`;
        }

        albumElement.innerHTML = albumInfo;
        musicContainer.appendChild(albumElement);
      });
    }
    else
    {
      console.log('No element found with selector "#music-grid"');
    }
  })