samyesuraj.github.io/index.html at main · samyesuraj/samyesuraj.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sam Yesuraj | Robotics Portfolio</title>
  <link rel="icon" type="image/x-icon" href="/img/robotic-arm.png">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="loader.css">
</head>
<body>
  <div id="loader-overlay">
    <div class="loader-content">
      <h1 class="loader-title">WELCOME TO MY<br>WORLD!</h1>
      <p class="loader-subtitle">I’m Sam Yesuraj, a Robotic Engineering Student who is<br>enthusiastic about creating engaging and<br>delightful digital experiences.</p>
      <div id="progress-bar">
        <div id="progress-bar-inner"></div>
        <span id="progress-bar-label"></span>
      </div>
      <button id="explore-btn" style="display:none;">EXPLORE MY WORLD &rarr;</button>
    </div>
  </div>
  <img class="image-gradient" src="img/gradient.png" alt="gradient">
  <div class="layer-blur"></div>
  <canvas id="robot-canvas" class="robot-bg-canvas"></canvas> <!-- Robot background canvas -->
  <header class="header">
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item active">Home</li>
        <li class="nav-item">Projects</li>
        <li class="nav-item">Skills</li>
        <li class="nav-item">Contact</li>
      </ul>
    </nav>
    <div class="theme-toggle-container">
      <label id="theme-toggle-label" for="theme-toggle-btn">Day Mode</label>
      <input type="checkbox" id="theme-toggle-btn" class="theme-toggle-switch" />
      <span class="theme-toggle-slider"></span>
    </div>
    <div class="rotate-toggle-container">
      <label id="rotate-toggle-label" for="rotate-toggle-btn">Auto-Rotate</label>
      <input type="checkbox" id="rotate-toggle-btn" class="rotate-toggle-switch" />
      <span class="toggle-slider"></span>
    </div>
  </header>
  <!-- About Card (top left) -->
  <div class="info-card about-card">
    <h2>About Me</h2>
    <p>A passionate Robotics Engineering student 🚀 having experience in building smart machines, automation systems, and innovative robotics solutions using ROS, Arduino, Python, C++, and other cutting-edge technologies.</p>
  </div>
  <!-- Specs Card (bottom left) -->
  <div class="detail-card">
    <h2>Find Me Online</h2>
    <div class="social-buttons">
      <a href="https://instagram.com/sam_yesuraj" target="_blank" aria-label="Instagram">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="https://linkedin.com/in/samyesuraj" target="_blank" aria-label="LinkedIn">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="https://github.com/samyesuraj" target="_blank" aria-label="GitHub">
        <i class="fab fa-github"></i>
      </a>
    </div>
  </div>
  <!-- Skills Card (right) -->
  <div class="info-card skills-card">
    <h2>Major Skills</h2>
    <ul class="skills-list">
      <li>ROS</li>
      <li>Python</li>
      <li>C++</li>
      <li>Arduino</li>
      <li>OpenCV</li>
    </ul>
  </div>
  <!-- My Journey Card (right bottom) -->
  <div class="info-card my-journey-card">
    <h2>My Journey</h2>
    <div class="journey-section">
      <strong>• B.Tech Robotics & Automation Engineering</strong><br>
      <span>2023 - Present</span><br>
      <span>Pursuing Robotics at Saintgits College of Engineering.</span>
    </div>
    <div class="journey-section">
      <strong>• Intern - Automation Systems</strong><br>
      <span>June 2024 - Aug 2024</span><br>
      <span>Worked on robotic arms and PLC integration.</span>
    </div>
  </div>
  <footer class="footer">
    <span>&copy; 2024 Sam Yesuraj. All rights reserved.</span>
  </footer>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.178.0/examples/jsm/"
      }
    }
    </script>
  <script type="module" src="script.js"></script>
</body>
</html>