isx2.github.io/app.js at main · ISX2/isx2.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
const { createApp, ref, onMounted } = Vue

createApp({
  setup() {
    const portfolio = {
      name: "Your Name",
      tagline: "Game Developer & Sound Designer",
      skills: [
        { name: "Programming", class: "programming" },
        { name: "Sound Design", class: "sound-design" },
        // Add more skills as needed
      ],
      projects: [
        {
          id: 1,
          title: "Awesome Game 1",
          description: "This is a detailed description of my first game project. I worked on the gameplay mechanics, level design, and implemented the core systems using Unity and C#.",
          skills: [
            { name: "Programming", class: "programming" }
          ],
          media: [
            { type: "image", url: "game1-screenshot1.jpg" },
            { type: "image", url: "game1-screenshot2.jpg" },
            { type: "video", url: "game1-gameplay.mp4" }
          ]
        },
        {
          id: 2,
          title: "Amazing Game 2",
          description: "For this project, I created all the sound effects and music. I collaborated with a team of three developers to bring this atmospheric experience to life.",
          skills: [
            { name: "Sound Design", class: "sound-design" }
          ],
          media: [
            { type: "image", url: "game2-screenshot1.jpg" },
            { type: "video", url: "game2-gameplay.mp4" },
            { type: "image", url: "game2-screenshot2.jpg" }
          ]
        },
        {
          id: 3,
          title: "Cool Game 3",
          description: "A solo project where I handled both development and sound design. This game was featured on itch.io's front page and received positive feedback for its innovative mechanics.",
          skills: [
            { name: "Programming", class: "programming" },
            { name: "Sound Design", class: "sound-design" }
          ],
          media: [
            { type: "image", url: "game3-screenshot1.jpg" },
            { type: "image", url: "game3-screenshot2.jpg" },
            { type: "video", url: "game3-gameplay.mp4" }
          ]
        },
        {
          id: 4,
          title: "Exciting Game 4",
          description: "My most recent project, still in development. I'm implementing advanced physics systems and procedural generation techniques.",
          skills: [
            { name: "Programming", class: "programming" }
          ],
          media: [
            { type: "image", url: "game4-screenshot1.jpg" },
            { type: "video", url: "game4-prototype.mp4" },
            { type: "image", url: "game4-screenshot2.jpg" }
          ]
        }
      ]
    }

    const activeProjectIndex = ref(0)
    const carouselPositions = ref({})

    // Initialize carousel positions for each project
    onMounted(() => {
      portfolio.projects.forEach((_, index) => {
        carouselPositions.value[index] = 0
      })

      // Initialize GSAP ScrollTrigger
      setupScrollTriggers()
    })

    const setupScrollTriggers = () => {
      gsap.registerPlugin(ScrollTrigger)

      // Create scroll triggers for each project
      portfolio.projects.forEach((_, index) => {
        const projectEl = document.getElementById(`project-${index}`)
        if (!projectEl) return

        ScrollTrigger.create({
          trigger: projectEl,
          start: "top center",
          end: "bottom center",
          onEnter: () => {
            activeProjectIndex.value = index
          },
          onEnterBack: () => {
            activeProjectIndex.value = index
          }
        })
      })
    }

    const nextSlide = (projectIndex) => {
      const project = portfolio.projects[projectIndex]
      const currentPos = carouselPositions.value[projectIndex] || 0
      const maxPos = (project.media.length - 1) * 100

      if (currentPos < maxPos) {
        carouselPositions.value[projectIndex] = currentPos + 100
      } else {
        carouselPositions.value[projectIndex] = 0
      }
    }

    const prevSlide = (projectIndex) => {
      const project = portfolio.projects[projectIndex]
      const currentPos = carouselPositions.value[projectIndex] || 0
      const maxPos = (project.media.length - 1) * 100

      if (currentPos > 0) {
        carouselPositions.value[projectIndex] = currentPos - 100
      } else {
        carouselPositions.value[projectIndex] = maxPos
      }
    }

    const scrollToProject = (index) => {
      const projectElement = document.getElementById(`project-${index}`)
      if (projectElement) {
        window.scrollTo({
          top: projectElement.offsetTop - 100,
          behavior: 'smooth'
        })
      }
    }

    return {
      portfolio,
      activeProjectIndex,
      carouselPositions,
      nextSlide,
      prevSlide,
      scrollToProject
    }
  }
}).mount('#app')