updated styling, added gitea, deployed tomodachi
This commit is contained in:
+72
-18
@@ -12,7 +12,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="z-20 flex justify-between px-12 md:px-48 py-4 bg-zinc-900/40 text-slate-50/80 fixed w-screen text-shadow items-end">
|
||||
<nav class="z-20 flex justify-between px-12 md:px-48 py-4 bg-zinc-900/40 text-slate-50/80 fixed w-screen text-shadow items-end backdrop-blur-md">
|
||||
<h1 class="text-4xl">Annika Bisson</h1>
|
||||
<ul class="hidden md:flex">
|
||||
<li class="px-4 hover:text-rose-700"><a href="#about">About</a></li>
|
||||
@@ -58,37 +58,86 @@
|
||||
</section>
|
||||
<section id="applications">
|
||||
<div class="bg-zinc-800 h-[40vh] p-8 md:p-24">
|
||||
<h2 class="text-center text-4xl text-zinc-100 pb-12">Check out these projects and more on Github!</h2>
|
||||
<h2 class="text-center text-4xl text-zinc-100 pb-12">Check out these projects and more on Gitea or Github!</h2>
|
||||
<div class="flex justify-center">
|
||||
<a href="https://github.com/annikyet" class="text-zinc-900 bg-zinc-100 w-48 p-4 text-center text-2xl rounded-full hover:bg-rose-700 hover:text-zinc-100">
|
||||
<a href="https://code.annikadev.com/annika" class="text-zinc-900 bg-zinc-100 w-48 py-4 px-2 md:px-4 text-center text-2xl rounded-full hover:bg-rose-700 hover:text-zinc-100 mx-4 md:mx-12">
|
||||
<i class="mdi mdi-git"></i>
|
||||
Gitea
|
||||
</a>
|
||||
<a href="https://github.com/annikyet" class="text-zinc-900 bg-zinc-100 w-48 py-4 px-2 md:px-4 text-center text-2xl rounded-full hover:bg-rose-700 hover:text-zinc-100 mx-4 md:mx-12">
|
||||
<i class="mdi mdi-github"></i>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 min-h-[50vh] p-4 md:p-0 bg-zinc-800">
|
||||
<div class="grid grid-cols-1 xl:grid-cols-3 min-h-[50vh] p-4 md:p-0 bg-zinc-800">
|
||||
|
||||
<a href="https://annikyet.github.io/tomodachi/" class="relative pb-4 md:pb-0">
|
||||
<a href="https://tomodachi.annikadev.com" class="relative pb-4 md:pb-0 md:mb-24">
|
||||
<img src="./src/img/screenshots/tomodachi.jpg" alt="Tomodachi" class="object-left object-cover h-full w-full rounded-lg md:rounded-none">
|
||||
<div class="opacity-0 hover:opacity-100 absolute top-0 left-0 h-full w-full backdrop-blur-md bg-rose-700/60 flex flex-col justify-center items-center text-zinc-100 p-4 rounded-lg md:rounded-none">
|
||||
<h3 class="text-center text-2xl">Tomodachi</h3>
|
||||
<p class="text-lg">A stylish static webpage using CSS and Bootstrap.</p>
|
||||
<div class="absolute top-0 left=0 w-full h-full flex flex-col justify-end">
|
||||
<div class="h-36 w-full backdrop-blur-md bg-slate-700/60 flex flex-col justify-center text-zinc-100 p-4 rounded-b-lg md:rounded-none border-t-8 border-rose-700">
|
||||
<div class="flex justify-start">
|
||||
<h3 class="text-center text-2xl pr-2">Tomodachi</h3>
|
||||
<p class="text-md md:text-lg pl-2 border-l-2 border-zinc-400">A stylish static webpage using CSS and Bootstrap.</p>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
Bootstrap
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/Annikyet/budgit" class="relative pb-4 md:pb-0">
|
||||
<a href="https://code.annikadev.com/annika/budgit" class="relative pb-4 md:pb-0 md:mb-24">
|
||||
<img src="./src/img/screenshots/budgit.jpg" alt="Budg.it" class="object-left object-cover h-full w-full rounded-lg md:rounded-none">
|
||||
<div class="opacity-0 hover:opacity-100 absolute top-0 left-0 h-full w-full backdrop-blur-md bg-rose-700/60 flex flex-col justify-center items-center text-zinc-100 p-4 rounded-lg md:rounded-none">
|
||||
<h3 class="text-center text-2xl">Budg.it</h3>
|
||||
<p class="text-lg">A budgeting app built with tailwindcss, Vue.js, nodeJS, and mongoDB.</p>
|
||||
<div class="absolute top-0 left=0 w-full h-full flex flex-col justify-end">
|
||||
<div class="h-36 w-full backdrop-blur-md bg-slate-700/60 flex flex-col justify-center text-zinc-100 p-4 rounded-b-lg md:rounded-none border-t-8 border-rose-700">
|
||||
<div class="flex justify-start">
|
||||
<h3 class="text-center text-2xl pr-2">Budg.it</h3>
|
||||
<p class="text-md md:text-lg pl-2 border-l-2 border-zinc-400">A budgeting app built with tailwindcss, Vue.js, nodeJS, and mongoDB.</p>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
Tailwind CSS
|
||||
</div>
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
Vue.js
|
||||
</div>
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
Node.js
|
||||
</div>
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
MongoDB
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/Annikyet/keepr" class="relative">
|
||||
<a href="https://code.annikadev.com/annika/keepr" class="relative pb-4 md:pb-0 md:mb-24">
|
||||
<img src="./src/img/screenshots/keepr.jpg" alt="Keepr" class="object-left object-cover h-full w-full rounded-lg md:rounded-none">
|
||||
<div class="opacity-0 hover:opacity-100 absolute top-0 left-0 h-full w-full backdrop-blur-md bg-rose-700/60 flex flex-col justify-center items-center text-zinc-100 p-4 rounded-lg md:rounded-none">
|
||||
<h3 class="text-center text-2xl">Keepr</h3>
|
||||
<p class="text-lg">A social media application for sharing and keeping images. Built with Bootstrap, Vue.js, C#/.NET, and mySQL.</p>
|
||||
<div class="absolute top-0 left=0 w-full h-full flex flex-col justify-end">
|
||||
<div class="h-36 w-full backdrop-blur-md bg-slate-700/60 flex flex-col justify-center text-zinc-100 p-4 rounded-b-lg md:rounded-none border-t-8 border-rose-700">
|
||||
<div class="flex justify-start">
|
||||
<h3 class="text-center text-2xl pr-2">Keepr</h3>
|
||||
<p class="text-md md:text-lg pl-2 border-l-2 border-zinc-400">A social media application for sharing and keeping images. Built with Bootstrap, Vue.js, C#/.NET, and mySQL.</p>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
Bootstrap
|
||||
</div>
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
Vue.js
|
||||
</div>
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
.NET
|
||||
</div>
|
||||
<div class="py-1 px-2 md:py-2 md:px-4 text-center text:lg md:text-xl border-2 rounded-lg md:rounded-xl border-rose-700/80 bg-rose-700/10 ml-2 md:ml-4 mt-4">
|
||||
MySQL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -109,11 +158,16 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="p-2">
|
||||
<div class="p-2 text-zinc-500">
|
||||
<p>
|
||||
<a href="https://tailwindcss.com" class="hover:text-rose-700">Made with tailwindcss.</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://unsplash.com/photos/Bd7gNnWJBkU?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink" class="hover:text-rose-700">
|
||||
Background image by Andras Vas.
|
||||
</a>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user