macayan_portfolio/index.html at main · MacayanRochel/macayan_portfolio · 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Rochel Macayan Portfolio</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>

  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <!-- Sidebar -->
<aside id="sidebar">
  <div class="profile-section text-center">
    <img src="profile.png" alt="Profile" class="profile-img" />
    <h3 class="profile-name">Rochel Macayan</h3>

    <!-- Social Media Icons (Moved here) -->
    <div class="social-icons mt-2">
      <a href="https://github.com" target="_blank" class="nav-link d-inline-block mx-1">
        <i class="fab fa-github"></i>
      </a>
      <a href="https://facebook.com" target="_blank" class="nav-link d-inline-block mx-1">
        <i class="fab fa-facebook"></i>
      </a>
      <a href="https://instagram.com" target="_blank" class="nav-link d-inline-block mx-1">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="https://google.com" target="_blank" class="nav-link d-inline-block mx-1">
        <i class="fab fa-google"></i>
      </a>
    </div>

<nav class="sidebar-nav">
  <ul class="nav flex-column text-center">
    <li class="nav-item">
      <a class="nav-link fw-semibold text-dark" href="#main-content">
        <i class="bi bi-house-door"></i> <span>Home</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link fw-semibold text-dark" href="#about">
        <i class="bi bi-person"></i> <span>About</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link fw-semibold text-dark" href="#ppt">
        <i class="bi bi-filetype-ppt"></i> <span>Presentations</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link fw-semibold text-dark" href="#output">
        <i class="bi bi-file-earmark-text"></i> <span>Output</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link fw-semibold text-dark" href="#video">
        <i class="bi bi-camera-video"></i> <span>Video</span>
      </a>
    </li>
  </ul>
</nav>


  </div>

</aside>


  <!-- Main Content -->
  <main id="main-content">
    <!-- Cover Section -->
    <header class="cover-section d-flex align-items-center mb-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-5 text-center mb-4 mb-md-0">
            <div class="profile-wrapper position-relative d-inline-block">
              <img src="profile.png" alt="Profile" class="profile-img-lg" />
              <div class="shape-outline"></div>
            </div>
          </div>
          <div class="col-md-7 text-center text-md-start">
            <h1 class="fw-bold">
              Hey I'm <span class="text-gold">Rochel Macayan</span>
            </h1>
            <h3 class="fw-semibold">
              I'm a BSIT Student
            </h3>
            <p class="lead mt-3">Welcome to my portfolio! Explore my work below.</p>
            <a href="#about" class="btn btn-gold mt-4">See More</a>
          </div>
        </div>
      </div>
    </header>

    <!-- About Section -->
    <section id="about" class="section-fullscreen bg-white text-dark py-5 rounded shadow-sm mb-5">
      <div class="container">
        <h2 class="section-title text-center mb-4">About Me</h2>
        <div class="row align-items-center">
          <div class="col-md-3 text-center mb-4 mb-md-0">
            <img src="profile.png" alt="About Me" class="img-fluid rounded shadow" />
          </div>
          <div class="col-md-7">
            <p class="about-text">
              Hello! I'm <span class="text-gold fw-bold">Rochel Macayan</span>, a Bachelor of Science in Information Technology student with a growing passion for the digital world.
              Ever since I began my journey in IT, I’ve been curious about how things work behind every application and system.
              This curiosity led me to dive into programming, problem-solving, and creative development.
              I enjoy exploring new software tools, experimenting with design ideas, and understanding how technology can improve our daily lives.
              I believe that learning in IT goes far beyond the classroom — it’s a lifelong journey of exploration and innovation.
            </p>
            <p class="about-text">
              As an IT student, I strive to strengthen my skills in both frontend and backend development.
              I’m particularly interested in how web and mobile applications are built to serve real-world needs efficiently.
              I value teamwork, adaptability, and continuous learning, which I believe are essential in the fast-paced world of tech.
              I'm excited about the opportunities this field offers and am committed to evolving with the ever-changing demands of technology.
              With every project I work on, I aim to grow into a competent and resourceful IT professional who contributes meaningfully to future innovations.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- PPT Section -->
    <section id="ppt" class="section-fullscreen bg-white text-dark py-5 rounded shadow-sm mb-5">
      <div class="container">
        <h2 class="section-title text-center mb-4">PowerPoint Presentations</h2>
        <ul class="list-group">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="CHAPTER-2-GROUP-1.pdf" target="_blank">📄 CHAPTER-2-GROUP-1</a>
            <a href="CHAPTER-2-GROUP-1.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="ATTITUDE.pdf" target="_blank">📄 ATTITUDE</a>
            <a href="ATTITUDE.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="CHAPTER-4-A-PERDEV.pdf" target="_blank">📄 CHAPTER-4-A-PERDEV</a>
            <a href="CHAPTER-4-A-PERDEV.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="Facing-interview.pdf" target="_blank">📄 Facing Interview</a>
            <a href="Facing-interview.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="personality-development.pdf" target="_blank">📄 Personality Development</a>
            <a href="personality-development.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="Personality.pdf" target="_blank">📄 Personality</a>
            <a href="Personality.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="Work-Ethic.pdf" target="_blank">📄 Work Ethic</a>
            <a href="Work-Ethic.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <a href="FINAL_PERDEV-REPORT.pdf" target="_blank">📄 Final Perdev Report</a>
            <a href="FINAL_PERDEV-REPORT.pdf" target="_blank" class="btn btn-sm btn-gold">View</a>
          </li>
        </ul>
      </div>
    </section>

<section id="output" class="section-fullscreen bg-light py-5 rounded shadow-sm mb-5">
  <div class="container">
    <h2 class="section-title text-center mb-4">Outputs</h2>
    <div class="row g-3 justify-content-center output-gallery">
      <div class="col-md-6 col-lg-4">
        <a href="Resume.png" target="_blank" class="output-item">
          <img src="Resume.png" alt="Resume" class="output-img img-fluid rounded shadow" />
          <div class="overlay">
            <span class="overlay-text">Resume</span>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4">
        <a href="Applicationpaper.png" target="_blank" class="output-item">
          <img src="Applicationpaper.png" alt="Application Paper" class="output-img img-fluid rounded shadow" />
          <div class="overlay">
            <span class="overlay-text">Application Paper</span>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4">
        <a href="reflection paper1.png" target="_blank" class="output-item">
          <img src="reflection paper1.png" alt="Reflection Paper" class="output-img img-fluid rounded shadow" />
          <div class="overlay">
            <span class="overlay-text">Reflection Paper 1</span>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4">
        <a href="reflection paper2.png" target="_blank" class="output-item">
          <img src="reflection paper2.png" alt="Reflection Paper" class="output-img img-fluid rounded shadow" />
          <div class="overlay">
            <span class="overlay-text">Reflection Paper 2</span>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4">
        <a href="examf.png" target="_blank" class="output-item">
          <img src="examf.png" alt="Exam" class="output-img img-fluid rounded shadow" />
          <div class="overlay">
            <span class="overlay-text">Exam F</span>
          </div>
        </a>
      </div>
      <div class="col-md-6 col-lg-4">
        <a href="examb.png" target="_blank" class="output-item">
          <img src="examb.png" alt="Exam" class="output-img img-fluid rounded shadow" />
          <div class="overlay">
            <span class="overlay-text">Exam B</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>

    <!-- Video Section -->
<section id="video" class="section-fullscreen bg-white text-dark py-5 rounded shadow-sm mb-5">
  <div class="container">
    <h2 class="section-title text-center mb-4">Interview</h2>

    <p class="text-center">Watch the job interview simulation below.</p>
    <!-- Button to open video in a new tab -->
    <div class="text-center">
      <a href="https://drive.google.com/file/d/15nD97C34NGpF5B4kV6g27ELkRfNNi5Ii/view?usp=drive_link" target="_blank" class="btn-video">View Video in New Tab</a>
    </div>
  </div>
</section>


    <!-- Footer -->
    <footer class="text-center py-3 bg-gold text-white">
      © 2025 Rochel M. Macayan
    </footer>
  </main>

  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  ></script>
</body>
</html>