portfolio/project3.html at main · rickford1/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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Autonomous Ground Vehicle</title>
  <link rel="stylesheet" href="style.css" />
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f7f9fa;
      color: #333;
    }

    .container {
      max-width: 900px;
      margin: 3rem auto;
      padding: 2rem;
      background: #fff;
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      border-radius: 8px;
    }

    h1 {
      text-align: center;
      color: #2c3e50;
      margin-bottom: 1.5rem;
    }

    h2 {
      text-align: center;
      color: #2c3e50;
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto 1.5rem;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    p {
      line-height: 1.6;
      margin-bottom: 1rem;
    }

    video {
      display: block;
      width: 100%;
      max-width: 700px;
      height: auto;
      margin: 2rem auto;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    }

    a.back-link {
      display: inline-block;
      margin-top: 2rem;
      color: #3498db;
      text-decoration: none;
      font-weight: 600;
    }

    a.back-link:hover {
      text-decoration: underline;
    }

    /* === Sensor Section Styling === */
    .sensor-flex {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2.5rem;
      flex-wrap: wrap;
    }

    .sensor-flex ul {
      flex: 1 1 350px;
      margin: 0;
      padding-left: 2rem;
    }

    .sensor-image {
      flex: 1 1 400px;
      max-width: 420px;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

    @media (max-width: 768px) {
      .sensor-flex {
        flex-direction: column;
        align-items: center;
      }

      .sensor-flex ul {
        padding-left: 1.2rem;
      }

      .sensor-image {
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Autonomous Ground Vehicle</h1>

    <img src="images/Ros2Still.jpg" alt="Screenshot of Project 1" width="500">

    <div class="section">
      <h2>Overview</h2>
      <p>This project was completed as part of my 2025 senior design capstone. The goal was to design and build a fully autonomous ground vehicle using the Robot Operating System 2 (ROS2).</p>
      <p>My responsibilities included leading the development of the electronics and software stack, working in C, C++, ROS2, and Linux. I was also heavily involved in testing, debugging, and system validation.</p>
    </div>

    <div class="section sensors-section">
      <h2>Integration Components</h2>
      <div class="sensor-flex">
        <ul>
          <li>Nvidia Jetson Orin Nano</li>
          <li>Teensy 4.0</li>
          <li>Teknic ClearPath motors (4 × 48V motors)</li>
          <li>Custom motor feedback boards</li>
          <li>Zed2 Stereo Camera</li>
          <li>Oak-D Stereo Camera</li>
          <li>Hokuyo UTM-30LX Lidar</li>
          <li>9-DOF IMU</li>
          <li>Varying step-down converters</li>
        </ul>

        <img src="images/WiringDiagram.jpg" alt="Sensors diagram" class="sensor-image">
      </div>
    </div>

    <p style="text-align: center;">Watch a demonstration video below:</p>

    <!-- Embedded MP4 video -->
    <video controls muted>
      <source src="images/OffRoad.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>

    <a class="back-link" href="index.html">← Back to Home</a>
  </div>
</body>
</html>