rushilwiz/potentia-website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/potentia-website.git synced 2025-04-09 14:50:16 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

progress 👍

Browse Source
This commit is contained in:
SanjayramVempati 2023-03-29 20:40:23 -04:00
parent dc45c67eae
commit 54bb6535ca
5 changed files with 75 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Nav.astro
View File

@ -10,21 +10,24 @@ import NavLink from "./NavLink.astro";
<!-- Logo -->
<a href="/">
<img src={logo} alt="Logo" class="my-2 h-10 ml-2" />
<img src={logo} alt="Logo" class="mt-4 mb-2 h-10 ml-4 " />
</a>
<!-- Desktop Pages -->
<div class="flex flex-row visible max-sm:hidden my-auto mr-20 text-sm space-x-6 max-lg:space-x-10 max-md:space-x-4 ">
<NavLink href="#" text="Page 1" class="nav" />
<NavLink href="#" text="Page 2" class="nav" />
<NavLink href="#" text="Home" class="nav"/>
<div class="flex flex-row visible max-sm:hidden my-auto mr-4 text-sm space-x-6 ">
<div class="mt-2 space-x-5 max-lg:space-x-10 max-md:space-x-4">
<NavLink href="/" text="About Us" />
<NavLink href="/" text="Timeline" />
<NavLink href="/" text="Olympian" />
<NavLink href="/" text="Sponsors" />
<NavLink href="/" text="Contact" />
</div>
<a href="/">
<button class="outline outline-purple-400 px-2 rounded-md
shadow-lg
<button class="outline outline-purple-400 px-4 rounded-md
shadow-lg py-1 mt-1
text-white font-mono font-bold text-xl hover:bg-slate-100
hover:text-purple-400 hover:shadow-purple-600 transition-all duration-300">Login</button>
hover:text-purple-400 hover:shadow-purple-600 transition-all duration-300">Donate</button>
</a>
@ -33,8 +36,8 @@ import NavLink from "./NavLink.astro";
<!-- Hamburger button -->
<button type="button" id='burg' class="block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10 visible sm:hidden">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<button type="button" id='burg' class="mt-2 block text-gray-500 hover:text-white focus:text-white focus:outline-none mr-10 visible sm:hidden">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24 ">
<path id="ham" class="visible" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
<path id="x" class="hidden" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"/>
@ -90,8 +93,23 @@ import NavLink from "./NavLink.astro";
});
// Remove the navlinks when the screen gets too small
// Remove mobile menu once screen size goes back to desktop
window.addEventListener('resize', () => {
if (window.innerWidth > 640) {
links.classList.add('hidden');
}
});
// Also change the icon back
window.addEventListener('resize', () => {
if (window.innerWidth > 640) {
ham.classList.remove('hidden');
}
});
window.addEventListener('resize', () => {
if (window.innerWidth > 640) {
x.classList.add('hidden');
}
});
</script>

2
src/components/NavLink.astro
View File

@ -3,6 +3,6 @@ const {href, text} = Astro.props;
---
<a href={href} class=" text-xl font-mono object-cover text-slate-300 hover:underline ">
<a href={href} class=" text-xl font-mono object-cover text-slate-300 hover:text-gray-400 duration-500 nav ">
{text}
</a>

BIN
src/images/olympian_hero.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 418 KiB

BIN
src/images/team_pic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

53
src/pages/index.astro
View File

@ -6,24 +6,57 @@ import Layout from '../layouts/Layout.astro';
import Nav from '../components/Nav.astro';
import Footer from '../components/Footer.astro';
//Image import
import mountain from '../images/mountain.jpg';
import olympian_hero from '../images/olympian_hero.png';
import team_pic from '../images/team_pic.png';
---
<Layout>
<div class="bg-black h-52 w-full relative">
<img src={mountain} alt="" class="w-full h-full object-cover absolute bg-fixed">
<!-- Nav -->
<Nav></Nav>
<div class="relative">
<img src={olympian_hero} class="brightness-50 contrast-75 object-none w-full h-[44rem]" />
<div class="absolute top-48 left-1/2 -translate-x-1/2 -translate-y-1/2">
<h1 class="font-bold text-7xl font-sans text-center text-white ">Potentia Robotics</h1>
<h2 class="font-bold text-center text-xl mt-10 font-sans text-red-600 italic">The first high school team to design and build a walking humanoid robot. </h1>
</div>
</div>
<div class=" flex flex-row pb-20" >
<div class="ml-20 mt-20">
<h1 class="text-3xl text-cyan-800 font-bold ">Who We Are</h1>
<div class="mt-6 mr-20">
<p class=" text-lg ">Potentia Robotics is the <span class="font-bold">first high school team</span> to design and build a <span class="font-bold">fully-functional humanoid robot</span> entirely from scratch. It's run by students from the Thomas Jefferson High School for Science and Technology (TJHSST).</p>
<p class="mt-6 text-lg ">At Potentia Robotics, we want to push the boundaries of what high-school students can achieve. Our ultimate goal is to <span class="font-bold">further STEM knowledge</span> in the K-12 community while leading by example and showing other students that age isn't a limiting factor for any project, no matter how large-scale.</p>
</div>
</div>
<div class="mr-60 mt-20">
<img src={team_pic} alt="" class="w-[120em] ">
<a href="/team" >
<button class=" outline outline-orange-400 rounded-md
shadow-lg py-2 px-4 mt-7
text-white bg-cyan-700 font-mono font-bold text-xl hover:bg-white
hover:text-cyan-400 hover:shadow-cyan-600 transition-all duration-300">Meet the Team -> </button>
</a>
</div>
<div class="absolute w-full ">
<Nav></Nav>
</div>
</div>
<div class="h-96 bg-slate-500"></div>
<div class="h-96 bg-slate-500"></div>
<Footer></Footer>
</Layout>
<Footer></Footer>
</Layout>