Skip to content

Commit 53ee669

Browse files
jbriones1jbriones1
committed
feat: Changed how images are referenced and added more photos
1 parent 5658c38 commit 53ee669

8 files changed

Lines changed: 46 additions & 39 deletions

File tree

‎public/tech_fair/2025/images/arista-booth2.jpg‎

358 KB
Loading

‎public/tech_fair/2025/images/astera-labs-booth.jpg‎

252 KB
Loading

‎public/tech_fair/2025/images/student-group.jpg‎

342 KB
Loading

‎public/tech_fair/2025/images/uncompressed/arista-booth2.jpg‎

4.01 MB
Loading

‎public/tech_fair/2025/images/uncompressed/astera-labs-booth.jpg‎

2.56 MB
Loading

‎public/tech_fair/2025/images/uncompressed/student-group.JPG‎

3.65 MB
Loading

‎public/tech_fair/2025/index.html‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<link rel="stylesheet" href="/tech_fair/2025/reset.min.css" />
7-
<link rel="stylesheet" href="/tech_fair/2025/style.css" />
6+
<link rel="stylesheet" href="./reset.min.css" />
7+
<link rel="stylesheet" href="./style.css" />
88
<script defer src="main.js"></script>
99
<link rel="icon" type="image/png" href="/static/icons/favicon_colourful.svg" />
1010
<script defer src="/static/js/gsap.min.js"></script>
@@ -29,7 +29,7 @@
2929

3030
<div class="hero">
3131
<div class="hero-content">
32-
<img src="/tech_fair/2025/images/mountain-laptop.svg" alt="Tech Fair Logo" />
32+
<img src="./images/mountain-laptop.svg" alt="Tech Fair Logo" />
3333
<h1>Tech Fair 2025</h1>
3434
<p>Oct 15, 2025 @ AQ North</p>
3535
<p>brought to you by the CSSS</p>
@@ -40,9 +40,8 @@ <h1>Tech Fair 2025</h1>
4040
<article>
4141
<section id="about">
4242
<aside>
43-
<div class="photo">
44-
<img src="/tech_fair/2025/images/long-shot1.jpg" alt="Long shot 1" />
45-
</div>
43+
<img src="./images/long-shot1.jpg" class="photo" alt="Long shot 1" />
44+
<img src="./images/tf-image-1.jpg" class="photo" alt="Old photo 1" />
4645
</aside>
4746
<div class="main">
4847
<div class="section-content chat">
@@ -86,9 +85,16 @@ <h2 class="chat section-content right">ChatGPT, summarize this section</h2>
8685
</div>
8786
</div>
8887
</div>
88+
<aside>
89+
<img src="./images/long-shot2.jpg" class="photo" alt="Long shot 2" />
90+
<img src="./images/tf-image-2.jpg" class="photo" alt="Old photo 2" />
91+
</aside>
8992
</section>
9093

9194
<section id="students">
95+
<aside>
96+
<img src="./images/arista-booth2.jpg" class="photo" alt="Arista booth 2" />
97+
</aside>
9298
<div class="main">
9399
<div class="section-content chat">
94100
<h2>I'm a student, why should I go?</h2>
@@ -133,9 +139,15 @@ <h2>I'm a student, why should I go?</h2>
133139
</div>
134140
</div>
135141
</div>
142+
<aside>
143+
<img src="./images/student-group.jpg" class="photo" alt="Group of students" />
144+
</aside>
136145
</section>
137146

138147
<section id="companies">
148+
<aside>
149+
<img src="./images/kardium-booth.jpg" class="photo" alt="Kardium booth" />
150+
</aside>
139151
<div class="main">
140152
<div class="chat section-content">
141153
<h2>I work for a company</h2>
@@ -180,32 +192,23 @@ <h2>How do I sign up?</h2>
180192
<p>We promise to get back to you as soon as possible!</p>
181193
</div>
182194
</div>
195+
<aside>
196+
<img src="./images/astera-labs-booth.jpg" class="photo" alt="Astera Labs booth" />
197+
</aside>
183198
</section>
184199

185200
<section id="final">
186201
<h2 class="chat section-content">See You There!</h2>
187202
<div class="gallery">
188-
<img src="/tech_fair/2025/images/attendees1.jpg" class="photo" alt="Attendees 1" />
189-
<img src="/tech_fair/2025/images/attendees3.jpg" class="photo" alt="Attendees 2" />
190-
<img src="/tech_fair/2025/images/attendees2.jpg" class="photo" alt="Attendees 3" />
191-
<img src="/tech_fair/2025/images/arista-booth.jpg" class="photo" alt="Arista booth" />
192-
<img src="/tech_fair/2025/images/brave-booth.jpg" class="photo" alt="Brave booth" />
193-
<img
194-
src="/tech_fair/2025/images/fortinet-booth.jpg"
195-
class="photo"
196-
alt="Fortinet booth"
197-
/>
198-
<img
199-
src="/tech_fair/2025/images/dark-vision-booth.jpg"
200-
class="photo"
201-
alt="Dark Vision booth"
202-
/>
203-
<img src="/tech_fair/2025/images/vigilon-booth.jpg" class="photo" alt="Kardium booth" />
204-
<img
205-
src="/tech_fair/2025/images/offworld-booth.jpg"
206-
class="photo"
207-
alt="Offworld booth"
208-
/>
203+
<img src="./images/attendees1.jpg" class="photo" alt="Attendees 1" />
204+
<img src="./images/attendees3.jpg" class="photo" alt="Attendees 2" />
205+
<img src="./images/attendees2.jpg" class="photo" alt="Attendees 3" />
206+
<img src="./images/arista-booth.jpg" class="photo" alt="Arista booth" />
207+
<img src="./images/brave-booth.jpg" class="photo" alt="Brave booth" />
208+
<img src="./images/fortinet-booth.jpg" class="photo" alt="Fortinet booth" />
209+
<img src="./images/dark-vision-booth.jpg" class="photo" alt="Dark Vision booth" />
210+
<img src="./images/vigilon-booth.jpg" class="photo" alt="Vigilon booth" />
211+
<img src="./images/offworld-booth.jpg" class="photo" alt="Offworld booth" />
209212
</div>
210213
</section>
211214
</article>

‎public/tech_fair/2025/style.css‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,16 +74,13 @@ a:visited:active {
7474
width: 100%;
7575
max-width: var(--photo-w);
7676
height: auto;
77+
transform: rotate(-5deg);
7778

7879
&>img {
7980
object-fit: contain;
8081
}
8182

82-
&:nth-child(odd) {
83-
transform: rotate(-5deg);
84-
}
85-
86-
&:nth-child(even) {
83+
&:nth-child(2n) {
8784
transform: rotate(5deg);
8885
}
8986
}
@@ -134,7 +131,7 @@ header {
134131
}
135132

136133
.hero {
137-
height: 100vh;
134+
height: 110vh;
138135
display: flex;
139136
justify-content: center;
140137
align-items: center;
@@ -320,16 +317,23 @@ footer {
320317
align-items: center;
321318
}
322319

323-
&>aside:nth-child(1) {
324-
display: block;
320+
&>aside {
321+
display: flex;
322+
flex-direction: column;
323+
justify-content: space-between;
324+
row-gap: 5rem;
325+
height: fit-content;
326+
padding: var(--header-height) 0 0;
327+
}
328+
329+
&>aside:nth-of-type(1) {
325330
grid-area: left;
326-
padding: 0 10%;
331+
align-items: end;
327332
}
328333

329-
&>aside:nth-child(2) {
330-
display: block;
334+
&>aside:nth-of-type(2) {
331335
grid-area: right;
332-
padding: 0 10%;
336+
align-items: start;
333337
}
334338
}
335339
}

0 commit comments

Comments
 (0)