Merge pull request #3 from warpf1s/dev

WIP: Rewrite

.vscode/extensions.json

@@ -1,18 +1,17 @@
 {
     // Update `../.devcontainer/devcontainer.json` as well.
     "recommendations": [
+        "aaron-bond.better-comments",
         "albert.tabout",
         "alexanderte.dainty-one-dark-pro-vscode",
         "christian-kohler.path-intellisense",
-        "donjayamanne.githistory",
+        "formulahendry.auto-rename-tag",
         "github.copilot",
-        "github.copilot-chat",
-        "github.copilot-labs",
         "gruntfuggly.todo-tree",
         "leonardssh.vscord",
-        "mhutchie.git-graph",
         "pkief.material-icon-theme",
-        "redhat.vscode-yaml",
+        "streetsidesoftware.code-spell-checker",
+        "streetsidesoftware.code-spell-checker-british-english",
         "wakatime.vscode-wakatime",
         "yandeu.five-server"
     ],

about-us/index.html

@@ -70,7 +70,7 @@ <h2>Our Achievements</h2>
 
         <p>From winning entry class, to also getting fastest car and best engineered, our team has never disappointed,
             with a plethora of awards to show for our hard and dedicated work. We hope to carry this momentum into Dev
-            class, where we are planning to continue into the UK Nationals, and if all goes to plan, even Worlds. <a
+            class, where we are planning to continue to, at a minimum, UK nation finals. <a
                 href="../our-journey/?id=our-journey" target="_blank">Read More...</a></p>
     </div>
 
@@ -82,7 +82,7 @@ <h2>Our Members</h2>
                 <h3 id="abhinav-malladi">Abhinav Malladi</h3>
                 <p id="role">Team Manager / Engineer</p>
 
-                <p>When I first heard of the F1s competition, I found it compelling and quickly formed a team. I never
+                <p>When I first heard of the F1iS competition, I found it compelling and quickly formed a team. I never
                     knew that it would become such a deep and demanding project at the start, but it is something that I
                     truly enjoy and value. The feeling of winning is something you can't beat, and I want to help my
                     team on its journey.</p>
@@ -92,8 +92,8 @@ <h3 id="abhinav-malladi">Abhinav Malladi</h3>
                 <h3 id="aneeq-weerasinghe">Aneeq Weerasinghe</h3>
                 <p id="role">Sponsorship & Marketing Manager</p>
 
-                <p>F1s has always sounded like an amazing stem project, and as an avid DT enthusiast I knew that it was
-                    the right decision to partake. Free time is also very hard to fill, and I knew F1s would
+                <p>F1iS has always sounded like an amazing stem project, and as an avid DT enthusiast I knew that it was
+                    the right decision to partake. Free time is also very hard to fill, and I knew F1iS would
                     make that time well spent. I also love the adrenalin rush that comes with winning, and I hope to
                     share that feeling with my teammates.</p>
             </div>
@@ -102,7 +102,7 @@ <h3 id="aneeq-weerasinghe">Aneeq Weerasinghe</h3>
                 <h3 id="michael-qu">Michael Qu</h3>
                 <p id="role">Portfolio / Marketing</p>
 
-                <p>F1s seems like an awesome, incredibly fun, and difficult project that I can use to challenge myself.
+                <p>F1iS seems like an awesome, incredibly fun, and difficult project that I can use to challenge myself.
                     It gives me an opportunity to learn new skills and work to my best. Although my job is not on the
                     car itself, I would love to see through its development and hopefully help throughout.</p>
             </div>
@@ -111,7 +111,7 @@ <h3 id="michael-qu">Michael Qu</h3>
                 <h3 id="neal-ye">Neal Ye</h3>
                 <p id="role">Engineer / Graphics Manager</p>
 
-                <p>I've always taken a liking towards motorsports (especially F1), and when I heard of F1s I knew this
+                <p>I've always taken a liking towards motorsports (especially F1), and when I heard of F1iS I knew this
                     was a perfect opportunity for me. The concept of racing a miniature car along a 20m track captured
                     my interest immediately. Being a part of a team and seeing its growth throughout the years feels
                     awesome!</p>
@@ -121,17 +121,17 @@ <h3 id="neal-ye">Neal Ye</h3>
                 <h3 id="thomas-howcroft">Thomas Howcroft</h3>
                 <p id="role">Finance Manager / Graphics</p>
 
-                <p>I enjoy various aspects of DT, and view F1s as a way to challenge myself in a way that could benefit
+                <p>I enjoy various aspects of DT, and view F1iS as a way to challenge myself in a way that could benefit
                     my career path. Although there are a few aspects of technology and engineering that I have explored
-                    in depth, F1s is new to me, and I hope I can learn new things about it and help my team along our
+                    in depth, F1iS is new to me, and I hope I can learn new things about it and help my team along our
                     journey.</p>
             </div>
         </div>
     </div>
 
     <div id="footer">
         <p id="copyright">©<a href="https://github.com/warpf1s/warpf1s.github.io/blob/main/LICENSE.md"
-                target="_blank">skifli</a>
+                target="_blank">WARP</a>
             2022 - {current_year}. All rights
             reserved.</p>
 

assets/css/footer.css

@@ -1,9 +1,9 @@
 #footer {
     align-items: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
     display: flex;
     justify-content: space-between;
-    padding: 10px 20px
+    padding: 5px 20px
 }
 
 #footer ul {
@@ -14,10 +14,14 @@
 }
 
 #footer ul li {
-    padding-left: 20px
+    padding: 0px 10px
 }
 
-#footer ul li img {
+#footer ul li a {
+    display: flex;
+}
+
+#footer ul li a img {
     height: auto;
     width: 30px
 }
@@ -28,14 +32,14 @@
     }
 
     #footer #copyright {
-        padding: 10px 0
+        padding: 0px 0px;
     }
 
     #footer ul {
         flex-direction: column
     }
 
     #footer ul li {
-        padding: 5px 0 0
+        padding: 5px 0px
     }
 }

assets/css/global.css

@@ -18,6 +18,10 @@
     scroll-behavior: smooth
 }
 
+body {
+    background-color: var(--background-color)
+}
+
 h2 {
     font-weight: 400;
     margin-bottom: 15px

assets/css/navbar.css

@@ -12,7 +12,8 @@ body {
     padding: .5rem;
     position: fixed;
     top: 0;
-    width: 100%
+    width: 100%;
+    z-index: 1;
 }
 
 #navbar #logo {

assets/css/pages/index.css

@@ -1,5 +1,54 @@
-#cover {
-    background-image: url(../../img/index.webp)
+#title-section {
+    display: flex;
+    align-items: center;
+    padding: 2rem 0rem 2rem 2rem;
+    position: relative;
+    overflow: hidden;
+    height: 100vh;
+    background-image: url(../../img/index.png);
+}
+
+#title {
+    width: 50%;
+}
+
+#title h1 {
+    color: white;
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    display: block;
+    padding-left: 10px;
+    text-align: right;
+}
+
+.gradient-text {
+    background-image: linear-gradient(45deg, var(--accent-darker), var(--accent), #CA4246);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -moz-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -moz-text-fill-color: transparent;
+    background-size: 100%;
+    background-repeat: repeat;
+}
+
+model-viewer {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#title #hover {
+    background: linear-gradient(to left, #4245A0 50%, #592087 50%) right;
+    background-size: 200%;
+    color: var(--opposite-text-color);
+    transition: .5s ease-out;
+}
+
+#title #hover:hover {
+    background-position: left;
 }
 
 #meet-the-team #card {

assets/css/pages/our-cars.css

@@ -1,5 +1,5 @@
 #cover {
-    background-image: url(../../img/our-cars.webp)
+    background-image: url(../../img/our-cars.jpg)
 }
 
 #our-cars .car-banner {

assets/css/pages/our-journey.css

@@ -1,5 +1,5 @@
 #cover {
-    background-image: url(../../img/our-journey.webp)
+    background-image: url(../../img/our-journey.png)
 }
 
 #our-journey {

assets/css/pages/sponsors.css

@@ -1,3 +1,3 @@
 #cover {
-    background-image: url(../../img/sponsors.webp)
+    background-image: url(../../img/sponsors.jpg)
 }

assets/js/pages/our-cars.js

@@ -3,7 +3,7 @@ let entryClassCarImage = document.getElementById('entry-class-car-image');
 var entryClassSlide = 0;
 
 function entryClassCarSlider() {
-    if (entryClassSlide++ == 3) {
+    if (entryClassSlide++ == 4) {
         entryClassSlide = 1;
     }
 

index.html

@@ -16,6 +16,7 @@
     <link href="assets/css/pages/index.css" rel="stylesheet">
 
     <script defer src="assets/js/global.js"></script>
+    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
 </head>
 
 <body>
@@ -49,11 +50,20 @@
         </div>
     </div>
 
-    <div id="cover" class="cover">
-        <div id="cover-text">
-            <h1>WΔRP</h1>
-            <p>Defining speed</p>
+    <div id="title-section" class="cover">
+        <div id="title">
+            <h1>LONDON NORTH</h1>
+            <h1>
+                <span class="gradient-text">2022 - 23 ENTRY</span>
+            </h1>
+            <h1 id="hover">WINNERS</h1>
         </div>
+
+        <model-viewer src="./assets/model-viewer/car.glb" auto-rotate disable-tap disable-zoom camera-controls
+            poster="./assets/model-viewer/poster.webp" shadow-intensity="2" camera-orbit="-125.2deg 70.3deg 14.02m"
+            field-of-view="30deg" min-camera-orbit="auto 70deg 14.02m" max-camera-orbit="auto 70deg auto"
+            min-field-of-view="30deg" interaction-prompt="none" style="background-color: unset;">
+        </model-viewer>
     </div>
 
     <div id="about-us" class="middle">
@@ -71,7 +81,7 @@ <h2>About Us</h2>
         <h2>Meet the Team</h2>
 
         <div id="card">
-            <img alt="Team Picture" src="assets/img/team/cover.webp">
+            <img alt="Team Picture" src="assets/img/team/cover.png">
         </div>
 
         <div id="members">
@@ -133,7 +143,7 @@ <h2>F1 in Schools</h2>
 
     <div id="footer">
         <p id="copyright">©<a href="https://github.com/warpf1s/warpf1s.github.io/blob/main/LICENSE.md"
-                target="_blank">skifli</a>
+                target="_blank">WARP</a>
             2022 - {current_year}. All rights
             reserved.</p>
 

our-cars/index.html

@@ -78,7 +78,7 @@ <h3>Accel - 0.026N Drag</h3>
 
     <div id="footer">
         <p id="copyright">©<a href="https://github.com/warpf1s/warpf1s.github.io/blob/main/LICENSE.md"
-                target="_blank">skifli</a>
+                target="_blank">WARP</a>
             2022 - {current_year}. All rights
             reserved.</p>
 

our-journey/index.html

@@ -95,12 +95,26 @@ <h2>Members Change - 6th June 2023</h2>
                         new members. They are Michael Q and Thomas H.</p>
                 </div>
             </div>
+            <div class="container right">
+                <div class="content">
+                    <h2>First Sponsorship - August 2023</h2>
+                    <p>Ansys agrees to become our first sponsor, giving our engineers access to world class CFD software
+                        for free. This enabled us to refine our car designs even more than before.</p>
+                </div>
+            </div>
+            <div class="container left">
+                <div class="content">
+                    <h2>Aosom becomes a sponsor - October 2023</h2>
+                    <p>Aosom becomes our second sponsor, and first monetary sponsor, funding us for for the foreseeable
+                        future. We are extremely grateful to them for their generous donation.</p>
+                </div>
+            </div>
         </div>
     </div>
 
     <div id="footer">
         <p id="copyright">©<a href="https://github.com/warpf1s/warpf1s.github.io/blob/main/LICENSE.md"
-                target="_blank">skifli</a>
+                target="_blank">WARP</a>
             2022 - {current_year}. All rights
             reserved.</p>
 

sponsors/index.html

@@ -94,7 +94,7 @@ <h3>Ansys <i>(Interstellar Software Sponsor)</i></h3>
 
     <div id="footer">
         <p id="copyright">©<a href="https://github.com/warpf1s/warpf1s.github.io/blob/main/LICENSE.md"
-                target="_blank">skifli</a>
+                target="_blank">WARP</a>
             2022 - {current_year}. All rights
             reserved.</p>