-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (169 loc) · 8.93 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Developer Firm Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header Section -->
<header>
<div class="profile">
<img src="Images/IMG_7248.jpg" alt="Profile Picture" class="profile-pic">
<div class="tabs">
<button class="tab-button active" data-target="tab1">Web & Mobile App Development</button>
<button class="tab-button" data-target="tab2">AI Application & Web Development</button>
<button class="tab-button" data-target="tab3">AR/VR App Development</button>
<button class="tab-button" data-target="tab4">Computer Vision App Development</button>
</div>
</div>
</header>
<!-- Content Section -->
<main>
<!-- Tab 1: Web & Mobile App Development -->
<section id="tab1" class="tab-content active">
<div class="app-section">
<div class="app-description">
<h2>Zoomer</h2>
<p>Zoomer is a full stack marketplace app. It allows users to make peer to peer transactions using Stripe integration and post or reply to user listings.</p>
</div>
<div class="app-images">
<img src="Images/Zoomer Frames.png" alt="Zoomer App" class="single-image">
</div>
</div>
</section>
<!-- Tab 2: AI Application & Web Development -->
<section id="tab2" class="tab-content">
<div class="app-section">
<div class="app-description">
<h2>AI Application & Web Development</h2>
<p>Explore our AI-based applications and web development projects. We specialize in creating intelligent solutions that leverage machine learning, AI, and cutting-edge web technologies.</p>
</div>
<div class="app-images">
<img src="Images/imageslive preview (2).png" alt="AI Application Preview" class="app-preview-image">
</div>
</div>
</section>
<!-- Tab 3: AR/VR App Development -->
<section id="tab3" class="tab-content">
<div class="app-section">
<h2>AR Stop Motion</h2>
<p>Explore our work in Augmented and Virtual Reality. We design immersive experiences for a variety of industries.</p>
<div class="app-images">
<img src="Images/PLAY 3D Cards.png" alt="AR/VR Development" class="app-preview-image">
</div>
<!-- First Button -->
<div class="button-container">
<a href="https://apps.apple.com/us/app/play-3d-cards/id6630388112" class="app-store-button">View on App Store</a>
</div>
<!-- Video Section -->
<div class="video-section">
<h3>AR Stop Motion</h3>
<p>Tabletop 3D viewport and scene designer with recording and animation functions allowing the user to use drag and drop assets from an object library to create unique 3D movies in AR.</p>
<div class="app-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fVYMVtoRwmI?si=xE6N8ByPdgyyPbj9" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- New Text Section Below Video -->
<p class="extra-description">
Use your camera to move and track through space to simulate a real-world cinematography and virtual production experience.
</p>
<!-- Second Button -->
<div class="button-container">
<a href="https://apps.apple.com/us/app/ar-stop-motion/id6575346170" class="app-store-button">View AR Stop Motion on App Store</a>
</div>
</div>
<!-- New Section for Play 3D Books -->
<div class="app-section">
<h3>Play 3D Books</h3>
<p>Play 3D Books is an application that allows each page of a book to play an animation tracked in AR space to the physical page of the book.</p>
<!-- Embedded Video -->
<div class="app-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Cu92JAYE7Xg?si=ISrw_b1hZjXpTdKD" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Button for Play 3D Books -->
<div class="button-container">
<a href="https://apps.apple.com/us/app/play-3d/id6502537893" class="app-store-button">View Play 3D Books on App Store</a>
</div>
</div>
</div>
</section>
<!-- Tab 4: Computer Vision Development -->
<section id="tab4" class="tab-content">
<div class="app-section">
<h2>Computer Vision Development</h2>
<p>Our expertise in computer vision powers applications that utilize image recognition and AI-based solutions for innovative projects.</p>
<!-- YouTube Video -->
<div class="app-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/K_ALeKfOh4w?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Spacer and New Heading -->
<div class="spacer"></div> <!-- Adds space between sections -->
<div class="section-heading">
<h3>Research, Development & Application</h3>
<p>Using modern best practices and innovations to apply the latest and best technology to add value to the user.</p>
</div>
<!-- PDF and Text Area Section (Below YouTube Video) -->
<div class="pdf-text-container">
<!-- Embed the PDF using an iframe -->
<iframe src="PDF/ML Animation Study (1).pdf" width="300" height="400" title="PDF"></iframe>
<!-- Text description beside the PDF -->
<div class="text-area">
<h3>Creating Custom PyTorch Models</h3>
<p>
In this project I used and developed the skills of data collection, data labeling, synthetic data generations
and curation, model fine-tuning and refinement as well as built a better general understanding of working
with transformer models.
</p>
<!-- Button to view PDF in full screen -->
<a href="PDF/ML Animation Study (1).pdf" target="_blank" class="view-pdf-button">View Full PDF</a>
</div>
</div>
</div>
</section>
</main>
<!-- Full-screen Popup Containers for Images -->
<!-- Popup for Zoomer -->
<div id="popup-container-zoomer" class="popup-container">
<div class="popup-content">
<img src="Images/Zoomer Frames.png" alt="Zoomer Full Preview" class="popup-image">
<button id="close-popup-zoomer" class="close-popup">Close</button>
</div>
</div>
<!-- Popup for AI Application -->
<div id="popup-container-ai" class="popup-container">
<div class="popup-content">
<img src="Images/imageslive preview (2).png" alt="AI Application Full Preview" class="popup-image">
<button id="close-popup-ai" class="close-popup">Close</button>
</div>
</div>
<!-- Popup for AR/VR Development -->
<div id="popup-container-arvr" class="popup-container">
<div class="popup-content">
<img src="Images/PLAY 3D Cards.png" alt="AR/VR Full Preview" class="popup-image">
<button id="close-popup-arvr" class="close-popup">Close</button>
</div>
</div>
<!-- External Script -->
<script src="script.js"></script>
</body>
</html>
<!-- Footer Section -->
<footer>
<div class="footer-content">
<h3>Contact Information</h3>
<p>Chris Walsh</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Location: Toronto, Ontario</p>
<p>Phone: <a href="tel:+19059798389">905-979-8389</a></p>
</div>
<div class="footer-links">
<h3>Policies</h3>
<ul>
<li><a href="play3d-books-policy.html">Play 3D Books Policy</a></li>
<li><a href="play3d-cards-policy.html">Play 3D Cards Policy</a></li>
<li><a href="ar-stop-motion-policy.html">AR Stop Motion Policy</a></li>
</ul>
</div>
</footer>