- What is Tech Fair?
@@ -94,8 +94,8 @@
What is Tech Fair?
ChatGPT, summarize this section
-ChatGPT, summarize this section
+-
When: Wednesday, October 15, 2025 from
@@ -127,8 +127,8 @@
ChatGPT, summarize this section
--++I'm a student, why should I go?
Here are 3 reasons:
-
@@ -176,12 +176,208 @@
-
+ ++
+ ++ ++ A career at ICBC is an opportunity to be part of a talented, diverse and inclusive + team that is driven to serve its customers and community. Make the most of your + skills and take the opportunity to grow and develop your career. Expect a + competitive salary, comprehensive benefits and a challenging work environment. + Drive your career with ICBC. +
+
+
+ -
+ ++
+ ++ ++ Kardium Inc. is a rapidly growing medical solutions company that has developed an + advanced system for the treatment of atrial fibrillation (AF), which affects more + than 59 million people worldwide. The Globe® Mapping and Ablation System is the + most complete solution for AF, offering single-shot pulmonary vein isolation, + high-definition mapping, and atrial ablation – all in a single catheter. Kardium + is now preparing for their upcoming commercial launch. This is an exciting and + significant milestone in Kardium's journey to bring this ground-breaking + technology to patients. +
+
+
+ -
+ ++
+ ++ ++ As the global leader in work and resource management software, Planview makes it + easier for all organizations to achieve their business goals. We provide the + industry’s most comprehensive solutions designed for strategic planning, portfolio + and resource management, product innovation, capability and technology management, + Lean and Agile delivery, and collaborative work management. Our solutions span + every class of work, resource, and organization to address the varying needs of + diverse and distributed teams, departments, and enterprises. Headquartered in + Austin, Texas, Planview’s more than 700 employees serve 5,000 customers worldwide + through a culture of innovative technology leadership, market expertise, and + highly engaged communities. +
+
+
+ -
+ ++
+ ++ ++ TELUS' Graduate Technology Leadership Program (GTLP) is a one-of-a-kind technical + development program for new grads in engineering and technology. With talented + team members as mentors and a keen focus on cutting-edge technology, you can join + innovators shaping Canada's tech landscape. +
+
+
+ -
+ ++
+ ++ ++ Safe Software transforms organizations with FME, the only All-Data Any-AI + Enterprise Integration Platform connecting all your data, anywhere, at any + velocity. With over 30 years of expertise and 25,000+ enterprise customers across + 125+ countries, we simplify your data journey, wherever it leads. Founded in 1993, + Safe is headquartered in Surrey, BC with over 300 team members and counting. +
+
+
+ -
+ ++
+ ++ ++ FortisBC is a Canadian-owned, B.C - based energy provider committed to delivering + safe, reliable, and increasingly sustainable energy solutions. With over 2,700 + employees, FortisBC serves approximately 1.3 million customers across 135 + communities and 58 First Nations communities throughout 150 Traditional + Territories. The company supplies natural gas, electricity, propane, and renewable + energy through an extensive network of more than 51,600 km of gas lines and 7,300 + km of power lines. +
+
+
+ FortisBC is recognized as one of BC’s Top Employers and fosters a culture of + safety, inclusion, and innovation. FortisBC is deeply invested in building a + resilient and forward-thinking workforce and infrastructure. We’re looking for + people of all skills and backgrounds—especially those passionate about technology + and information systems—to help us execute on our strategic initiatives and drive + meaningful change. Whether your expertise lies in cybersecurity, cloud + architecture, business systems, or application development, FortisBC offers a + dynamic environment where your contributions directly impact how we serve our + communities. +
+
+ -
+ ++
+ ++ ++ Gatekeeper is a leading provider of video and data solutions for a safer + transportation environment for children, passengers, and drivers on public + transportation fleets. Gatekeeper has provided solutions to more than 60 transit + agencies and 3,500 school districts throughout North America and has installed + more than 57,000 Mobile Data Collectors for customers which record video and data + daily from over 200,000 onboard devices. The Company’s hosted software + applications facilitate AI-assisted video analytics for incident management and + storage. +
+
+
+ -
+ ++
+ ++ ++ Arista Networks is an industry leader in data-driven, client-to-cloud networking + for large data center, campus and routing environments. We have shipped over 20 + million cloud networking ports worldwide with CloudVision and EOS, an advanced + network operating system. Arista’s award-winning platforms, ranging in Ethernet + speeds up to 800G bits per second, redefine scalability, agility, and resilience. +
+
+
I'm a student, why should I go?
++ + + +++ +++Who's coming?
+Join this list of companies interested in hiring you!
++ +-
+
- -++-I work for a company
@@ -195,7 +391,7 @@
I work for a company
thrive in your workplace!+-My company is interested, what else can you tell me?
@@ -215,8 +411,8 @@
My company is interested, what else can you tell me?
Don't miss this chance to show off who you are!-How do I sign up?
++How do I sign us up?
Send an email to @@ -235,7 +431,7 @@
How do I sign up?
- See You There!
+See You There!
diff --git a/public/tech_fair/2025/style.css b/public/tech_fair/2025/style.css
index 66ee8488..b5ccdc4b 100644
--- a/public/tech_fair/2025/style.css
+++ b/public/tech_fair/2025/style.css
@@ -1,6 +1,6 @@
@font-face {
font-family: 'Questrial';
- src: url('fonts/Questrial-Regular.ttf') format('truetype')
+ src: url('fonts/Questrial-Regular.ttf') format('truetype');
}
:root {
@@ -9,6 +9,43 @@
--square-logo-dim: 2.5rem;
--paper-shadow: 5px 5px 7px black;
--photo-w: 460px;
+
+ /* Colours */
+ --insurance: hsl(356 49.5% 49.3%);
+ --telecom: hsl(41 49.5% 49.3%);
+ --energy: hsl(65 100% 35.5%);
+ --medical: hsl(124 47.4% 50%);
+ --software: hsl(194 59.3% 50%);
+ --networking: hsl(235 100% 35.5%);
+ --data-analytics: hsl(284 59.3% 50%);
+}
+
+[class*='--insurance'] {
+ --clr-main: var(--insurance);
+}
+
+[class*='--telecom'] {
+ --clr-main: var(--telecom);
+}
+
+[class*='--energy'] {
+ --clr-main: var(--energy);
+}
+
+[class*='--medical'] {
+ --clr-main: var(--medical);
+}
+
+[class*='--software'] {
+ --clr-main: var(--software);
+}
+
+[class*='--networking'] {
+ --clr-main: var(--networking);
+}
+
+[class*='--data-analytics'] {
+ --clr-main: var(--data-analytics);
}
body {
@@ -26,15 +63,9 @@ ol {
a:link,
a:visited {
- color: black;
text-decoration: none;
}
-a:link:active,
-a:visited:active {
- color: black;
-}
-
.centering {
display: flex;
justify-content: center;
@@ -48,7 +79,6 @@ a:visited:active {
width: fit-content;
}
-
.sticky-note {
background-color: yellow;
aspect-ratio: 1 / 1;
@@ -65,8 +95,9 @@ a:visited:active {
max-width: var(--photo-w);
height: auto;
transform: rotate(-5deg);
+ transition: transform 0.1s linear;
- &>img {
+ & > img {
object-fit: contain;
}
@@ -77,48 +108,57 @@ a:visited:active {
&:hover {
transform: scale(1.25);
z-index: 3;
- transition: transform 0.1s linear;
}
}
+.btn-anchor {
+ color: #d16711;
+}
+
header {
width: 100%;
z-index: 10;
position: fixed;
top: 0;
- &>nav {
+ & > nav {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0.25rem;
- width: 100%;
+ width: 100vw;
backdrop-filter: blur(5px);
/* CSSS Logo */
- &>a {
+ & > a {
/* This keeps the icon at the far left and the nav links centered */
position: absolute;
left: 1vw;
top: 1vh;
- &>#home-logo {
+ & > #home-logo {
width: var(--square-logo-dim);
height: var(--square-logo-dim);
}
}
- &>ul {
+ & a:visited,
+ a:active,
+ a:link,
+ a:hover {
+ color: black;
+ }
+
+ & > ul {
display: flex;
justify-content: space-evenly;
list-style-type: none;
margin: 0;
padding: 1rem 0 0;
- &>li {
-
- &>a {
+ & > li {
+ & > a {
text-align: center;
padding: 0 1rem;
}
@@ -134,7 +174,7 @@ header {
align-items: center;
text-align: center;
- &>.hero-content {
+ & > .hero-content {
position: relative;
height: 70%;
width: 90%;
@@ -143,7 +183,7 @@ header {
justify-content: center;
align-items: center;
- &>p {
+ & > p {
font-size: max(1rem, 2vw);
}
@@ -151,52 +191,55 @@ header {
font-size: max(2rem, 5vw);
}
- &>img {
+ & > img {
width: min(30vw, 30rem);
height: auto;
}
- &>section {
+ & > section {
padding: 1rem;
}
}
}
main {
- &>article {
+ & > article {
display: grid;
- &>section {
+ & a:visited,
+ a:active,
+ a:link,
+ a:hover {
+ color: #d16711;
+ }
+
+ & > section {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1rem 0;
- &>aside {
+ & > aside {
display: none;
}
- & .section-content {
+ & .section__content {
margin: var(--header-height) 0 2rem;
padding: 1.5rem;
max-width: 40rem;
-
- & a {
- color: #d16711;
- }
}
- &>.main {
+ & > .section__main {
display: flex;
flex-direction: column;
align-items: center;
- &>.chat-section {
+ & > .chat-section {
display: flex;
flex-direction: column;
align-items: center;
- &>.right {
+ & > .right {
align-self: flex-end;
display: block;
box-shadow: 5px 5px black;
@@ -205,22 +248,21 @@ main {
margin-right: 1rem;
}
- &>.left {
+ & > .left {
align-self: flex-start;
width: fit-content;
max-width: 80%;
margin-left: 1rem;
}
-
}
- &>p,
+ & > p,
ul,
ol {
font-size: clamp(1rem, 1.5vw, 1.05rem);
}
- &>ul,
+ & > ul,
ol {
margin: 0;
@@ -233,6 +275,75 @@ main {
}
}
+#company-gallery {
+ padding: 0;
+ display: block;
+}
+
+ul.section__main {
+ padding-left: 0;
+}
+
+.company__gallery {
+ display: flex;
+ gap: 4vw;
+ padding: 1rem;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.company-card {
+ flex: 0 0 auto;
+
+ display: grid;
+ place-items: center;
+ grid-template-rows: 35% 60% 5%;
+ padding: 1.5rem;
+ width: 20.75rem;
+ max-height: calc(700px - 5rem);
+}
+
+.company-card__img {
+ display: flex;
+ height: 100%;
+ aspect-ratio: 1 / 1;
+ padding: 1rem;
+
+ & > img {
+ object-fit: contain;
+ }
+}
+
+.company-card__descriptor {
+ overflow: auto;
+ height: 100%;
+}
+
+.company-card__footer {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ position: relative;
+ bottom: 0;
+ margin-top: 1rem;
+
+ & > * {
+ color: white;
+ border-radius: 50px;
+ padding: 0.5rem;
+ font-size: clamp(1rem, 60%, 1.7rem);
+ -webkit-user-select: none;
+ user-select: none;
+ }
+
+ & > a {
+ color: #d16711;
+ }
+
+ & > p {
+ background-color: var(--clr-main);
+ }
+}
#final {
display: flex;
@@ -240,12 +351,12 @@ main {
align-items: center;
padding-bottom: 3rem;
- &>h2 {
+ & > h2 {
text-align: center;
font-size: 2rem;
}
- &>.gallery {
+ & > .gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
@@ -263,7 +374,6 @@ footer {
display: flex;
gap: 0.5rem;
-
& .icon {
width: 1.5em;
height: 1.5em;
@@ -273,21 +383,20 @@ footer {
/* Media queries */
@media (max-width: 400px) {
- header>nav {
-
+ header > nav {
/* These will ensure the nav links will be pushed to the right so CSSS icon will become
* part of the nav's flow again */
- &>a {
+ & > a {
position: relative;
left: 0;
- &>img {
+ & > img {
height: 2rem;
width: 2rem;
}
}
- &>ul {
+ & > ul {
flex-shrink: 0;
}
}
@@ -299,21 +408,20 @@ footer {
@media (min-width: 1200px) {
main {
- &>article {
- &>section {
+ & > article {
+ & > section {
display: grid;
grid-template-columns: 1fr 50% 1fr;
- grid-template-areas:
- 'left center right';
+ grid-template-areas: 'left center right';
- &>.main {
+ & > .main {
grid-area: center;
display: flex;
flex-direction: column;
align-items: center;
}
- &>aside {
+ & > aside {
display: flex;
flex-direction: column;
justify-content: space-between;
@@ -322,12 +430,12 @@ footer {
padding: var(--header-height) 0 0;
}
- &>aside:nth-of-type(1) {
+ & > aside:nth-of-type(1) {
grid-area: left;
align-items: end;
}
- &>aside:nth-of-type(2) {
+ & > aside:nth-of-type(2) {
grid-area: right;
align-items: start;
}
@@ -335,3 +443,24 @@ footer {
}
}
}
+
+@media (hover: none) {
+ ul.section__main {
+ padding-left: 0;
+ }
+
+ .company__gallery {
+ width: 100vw;
+ justify-content: flex-start;
+ flex-wrap: nowrap;
+ overflow-x: scroll;
+ overflow-y: hidden;
+ scroll-snap-type: x mandatory;
+ scrollbar-width: none;
+ }
+
+ .company-card {
+ width: 19rem;
+ scroll-snap-align: center;
+ }
+}
-
+