<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>picafe</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<style>
.app{margin:0;font-family:system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(circle at 24.1% 68.8%,rgb(30,30,45) 0%,#000 99.4%)}.navbar{margin:4rem 0;z-index:10;animation:f 3s ease-in-out forwards}.navbar ul{display:flex;gap:1.5rem;list-style:none;padding:0;margin:0}.navbar a{text-decoration:none;font-size:1.25rem;color:#94a3b8;transition:.5s}.navbar a:hover,.navbar a.active{color:#e5e7eb}.logo-container{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.5s}.logo{animation:f 3s ease-in-out forwards;height:4rem}.logo-text{color:transparent;font-size:4rem;margin:1rem 0;white-space:nowrap;font-family:Arial,sans-serif;animation:t 3s ease-out forwards;background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.3);z-index:10;background-color:#fff}.description{color:#a1a1aa;margin:4rem 1rem;text-align:center;font-size:1.25rem;animation:f 3s ease-in-out forwards}.container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:0 auto;padding:1rem 0;transition:.5s}.card{color:#e5e7eb;background-color:#1b1b28;border-radius:.5rem;overflow:hidden;max-width:360px;transition:transform .33s;text-decoration:none;border:1px solid #374151}.card:hover{transform:scale(1.05)}.card-info{padding:1rem}.card h2{font-size:1.125rem;color:#fff;font-weight:700;margin-bottom:.5rem}.hidden{display:none}@keyframes f{0%,75%{opacity:0}to{opacity:1}}@keyframes t{0%{line-height:0;letter-spacing:.2em;opacity:0}25%{line-height:10%;letter-spacing:.1em;opacity:0}50%{line-height:45%;opacity:1}to{line-height:100%;opacity:1}}
</style>
</head>
<body class=app>
<nav class=navbar>
<ul>
<li><a id=home class="nav-link active">home</a>
<li><a id=proj class=nav-link>projects</a>
</ul>
</nav>
<div class=logo-container>
<svg class=logo viewBox="0 0 64 64"><g fill="#fff"><path d="M36.1 8.4c-1.7 2.1-2.3 6.9-1.2 9.8 1.6 4.4 3.1 3.4 2.5-1.6-.4-2.4-.2-5.2.5-6.4 1.3-2.4-.1-3.9-1.8-1.8m-6.7 7.7c.7 3.5 2.2 5.7 3.1 4.7 1-1-1-7.1-2.4-7.6-1.1-.4-1.2.3-.7 2.9M26 20c0 .5.5 1 1 1 .6 0 1-.5 1-1 0-.6-.4-1-1-1-.5 0-1 .4-1 1m-12 4.9c0 .6.5 1.3 1 1.6.6.4 1 5.7 1 12.6 0 11.4.1 12.1 2.5 14.4C20.9 55.9 21.3 56 37 56c10 0 16-.4 16-1s-1.6-1-3.6-1c-2.6 0-3.3-.3-2.7-1.3.4-.6 1-3.4 1.3-6.1.5-4.6.7-5 3.7-5.8 6.4-1.6 8.5-9.7 3.8-14.3C53.1 24 53 24 33.5 24c-11.5 0-19.5.4-19.5.9m20.8 2.7 7.4.7-.4 11.3c-.2 6.2-.7 11.7-1.3 12.3-.5.5-4.7 1.2-9.2 1.6-7.9.7-8.3.6-10.7-1.9-2.5-2.4-2.6-3.1-2.6-13.4 0-6 .3-11.1.6-11.5.3-.3 2.5-.4 4.7-.2 2.3.2 7.5.7 11.5 1.1m18.7.9c3.2 3.1 3.1 5 0 8.1-3.5 3.5-4.9 2.6-5.3-3.1-.5-7.9 1-9.4 5.3-5"/><path d="M25.6 37.7c.8 6.9 1 7.3 3.5 7.3 1.6 0 1.9-.8 2-4.3.2-4.1.2-4.2.8-.8.7 3.8 3 5.8 5.5 4.8 1.7-.7 2.3-4.7.6-4.7-.5 0-1-.7-1-1.5s.5-1.5 1-1.5c.6 0 1-1.1 1-2.5 0-2.4-.2-2.5-7.1-2.5h-7zM38 34c0 .5-.5 1-1.1 1-.8 0-1 1.4-.6 4 .4 2.9.1 4-.8 4-1.5 0-2.5-2.2-2.5-5.6 0-1.5-.6-2.4-1.5-2.4-1.1 0-1.5 1.1-1.5 4 0 2.2-.4 4-1 4-.5 0-1-1.8-1-4s-.4-4-1-4c-.5 0-1-.5-1-1 0-.6 2.7-1 6-1s6 .4 6 1m17 21c0 .5.7 1 1.5 1s1.5-.5 1.5-1c0-.6-.7-1-1.5-1s-1.5.4-1.5 1"/></g></svg>
<h1 class=logo-text>picafe</h1>
</div>
<div class=description>
<p>Hi, my name is Surya
<p>I am a Canadian high school student who codes in his free time.
</div>
<div class="container hidden">
<a href="https://github.com/vpci-panther-press/panther-press" class=card>
<div class=card-info>
<h2>Panther Press</h2>
<p>I made the website for my school's student newspaper using Astro & Directus CMS.
</div>
</a>
<a href="https://github.com/Team4914/website" class=card>
<div class=card-info>
<h2>Robotics Club Website</h2>
<p>I contributed to and mentored students to make a website for my school's FTC team in Astro and Svelte.
</div>
</a>
<a class=card>
<div class=card-info>
<h2>LearnLog</h2>
<p>Creating a web app for students to log their required French supplementary learning hours. WIP
</div>
</a>
</div>
<script>
const n=document.querySelectorAll(".nav-link"),p=document.querySelector(".container");function t(e){n.forEach(l=>l.classList.remove("active")),e.target.classList.add("active"),"proj"===e.target.id?(p.classList.remove("hidden"),p.style.opacity=0,setTimeout(()=>{p.style.opacity=1},10)):"home"===e.target.id&&(p.style.opacity=0,setTimeout(()=>{p.classList.add("hidden")},500))}n.forEach(e=>{e.addEventListener("click",t)});
</script>
</body>
</html>