isx2.github.io/index.html 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Game Dev Portfolio</title>
  <!-- Vue.js CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- GSAP for animations -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app">
    <section class="landing">
      <h1>{{ portfolio.name }}</h1>
      <p>{{ portfolio.tagline }}</p>
      <div class="skills-container">
        <span v-for="skill in portfolio.skills" :key="skill.name"
              :class="['skill', skill.class]">
          {{ skill.name }}
        </span>
      </div>
    </section>

    <div class="timeline-container">
      <div class="timeline">
        <div v-for="(project, index) in portfolio.projects"
             :key="project.id"
             :class="['timeline-point', { active: activeProjectIndex === index }]"
             :style="{ left: `${(index / (portfolio.projects.length - 1)) * 100}%` }"
             @click="scrollToProject(index)">
        </div>
      </div>
    </div>

    <div class="projects-container">
      <div v-for="(project, index) in portfolio.projects"
           :key="project.id"
           :id="'project-' + index"
           :class="['project', { active: activeProjectIndex === index }]">
        <div class="project-content">
          <div class="carousel">
            <div class="carousel-controls">
              <button class="carousel-button" @click="prevSlide(index)">&lt;</button>
              <button class="carousel-button" @click="nextSlide(index)">&gt;</button>
            </div>

            <div class="carousel-container" :style="{ transform: `translateX(-${carouselPositions[index] || 0}%)` }">
              <div v-for="(media, mediaIndex) in project.media"
                   :key="mediaIndex"
                   class="carousel-slide">
                {{ media.type === 'image' ? 'Image: ' + media.url : 'Video: ' + media.url }}
              </div>
            </div>

            <div class="carousel-progress">
              <div class="carousel-progress-bar" :style="{ width: `${((carouselPositions[index] || 0) / ((project.media.length - 1) * 100)) * 100}%` }"></div>
            </div>
          </div>

          <div class="project-description">
            <h3>{{ project.title }}</h3>
            <p>{{ project.description }}</p>
            <div v-if="project.skills.length > 0">
              <strong>Skills:</strong>
              <div class="skills-container">
                <span v-for="skill in project.skills" :key="skill.name"
                     :class="['skill', skill.class]">
                  {{ skill.name }}
                </span>
              </div>
            </div>

            <div class="description-waves">
              <div class="wave"></div>
              <div class="wave"></div>
              <div class="wave"></div>
              <div class="wave"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">
      <p>&copy; {{ new Date().getFullYear() }} {{ portfolio.name }} - Game Developer Portfolio</p>
    </footer>
  </div>

  <script src="app.js"></script>
</body>
</html>