2022-08-09 16:47:50 -06:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-08-20 14:19:35 -07:00
< link rel = "stylesheet" href = "tailwind.css" >
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
2022-08-09 16:47:50 -06:00
< link rel = 'stylesheet' href = 'https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css' >
2022-08-20 14:19:35 -07:00
<!-- <link rel="stylesheet" href="input.css"> -->
2022-08-09 16:47:50 -06:00
< title > Annika Bisson - Software Developer< / title >
< / head >
< body >
< header >
2026-07-15 18:24:09 -07:00
< 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" >
2022-08-09 16:47:50 -06:00
< 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 >
< li class = "px-4 hover:text-rose-700" > < a href = "#languages" > Skills< / a > < / li >
< li class = "px-4 hover:text-rose-700" > < a href = "#applications" > Projects< / a > < / li >
< li class = "px-4 hover:text-rose-700" > < a href = "#contact" > Contact< / a > < / li >
< / ul >
< / nav >
< / header >
< main >
< section class = "bg-[url('./src/img/andras-vas-Bd7gNnWJBkU-unsplash.jpg')] h-screen w-screen bg-cover bg-center flex items-center justify-center" >
< h2 class = "text-center text-6xl md:text-8xl text-slate-50/80 text-shadow" > Software Developer< / h2 >
< / section >
< section id = "about" class = "bg-rose-700 min-h-[40vh] p-8 md:p-24" >
< h2 class = "text-center text-4xl text-zinc-100" > About Me< / h2 >
< div class = "text-zinc-100 py-12 md:px-24" >
< p class = "pb-4" > Hi, I'm Annika 👩🏼💻< / p >
< p >
I'm a full-stack software developer with a background in data analysis. I have a passion for good design and elegant solutions to problems. I'm always thinking about how to make UX better, and how to optimize everything for maximum efficiency.
< / p >
< / div >
< / section >
< section id = "languages" class = "bg-zinc-100 min-h-[80vh] p-8 md:p-24" >
< h2 class = "text-zinc-900 text-center text-4xl pb-12" > Languages, Frameworks, and Tools< / h2 >
< ul class = "flex justify-between flex-wrap" >
<!-- center images -->
<!-- make html and css same size -->
<!-- a tag newtab target blank newtab -->
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://developer.mozilla.org/en-US/docs/Web/HTML" > < img src = "./src/img/badges/html.png" alt = "HTML5" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS" > < img src = "./src/img/badges/CSS.png" alt = "CSS" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://developer.mozilla.org/en-US/docs/Web/javascript" > < img src = "./src/img/badges/JavaScript.png" alt = "JavaScript" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://vuejs.org/" > < img src = "./src/img/badges/Vue.png" alt = "Vue.js" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://nodejs.org/en/" > < img src = "./src/img/badges/node.png" alt = "nodeJS" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://getbootstrap.com/" > < img src = "./src/img/badges/bootstrap.png" alt = "Bootstrap" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://tailwindcss.com/" > < img src = "./src/img/badges/tailwind.svg" alt = "tailwindcss" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://docs.microsoft.com/en-us/dotnet/csharp/" > < img src = "./src/img/badges/csharp.png" alt = "C#/.NET" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://www.python.org/" > < img src = "./src/img/badges/python.png" alt = "Python" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://www.mysql.com/" > < img src = "./src/img/badges/mySQL.png" alt = "mySQL" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://www.mongodb.com/" > < img src = "./src/img/badges/mongodb.png" alt = "mongoDB" > < / a > < / li >
< li class = "h-24 w-24 md:h-64 md:w-64 p-4" > < a href = "https://docs.microsoft.com/en-us/sql/?view=sql-server-ver16" > < img src = "./src/img/badges/mssql.png" alt = "Microsoft SQL" > < / a > < / li >
< / ul >
< / section >
< section id = "applications" >
< div class = "bg-zinc-800 h-[40vh] p-8 md:p-24" >
2026-07-15 18:24:09 -07:00
< h2 class = "text-center text-4xl text-zinc-100 pb-12" > Check out these projects and more on Gitea or Github!< / h2 >
2022-08-09 16:47:50 -06:00
< div class = "flex justify-center" >
2026-07-15 18:24:09 -07:00
< 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" >
2022-08-09 16:47:50 -06:00
< i class = "mdi mdi-github" > < / i >
Github
< / a >
< / div >
< / div >
2026-07-15 18:24:09 -07:00
< div class = "grid grid-cols-1 xl:grid-cols-3 min-h-[50vh] p-4 md:p-0 bg-zinc-800" >
2022-08-09 16:47:50 -06:00
2026-07-15 18:43:40 -07:00
< a href = "https://tomodachi.annikadev.com" class = "relative pb-4 md:pb-0 mb-4 md:mb-0" >
2022-08-09 16:47:50 -06:00
< img src = "./src/img/screenshots/tomodachi.jpg" alt = "Tomodachi" class = "object-left object-cover h-full w-full rounded-lg md:rounded-none" >
2026-07-15 18:39:01 -07:00
< div class = "absolute top-0 left=0 w-full h-full flex flex-col justify-end hover:bg-rose-700/30 hover:backdrop-blur-md" >
2026-07-15 18:43:40 -07:00
< div class = "h-48 w-full backdrop-blur-sm 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" >
2026-07-15 18:24:09 -07:00
< 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 >
2022-08-09 16:47:50 -06:00
< / div >
< / a >
2026-07-15 18:43:40 -07:00
< a href = "https://code.annikadev.com/annika/budgit" class = "relative pb-4 md:pb-0 mb-4 md:mb-0" >
2022-08-09 16:47:50 -06:00
< img src = "./src/img/screenshots/budgit.jpg" alt = "Budg.it" class = "object-left object-cover h-full w-full rounded-lg md:rounded-none" >
2026-07-15 18:39:01 -07:00
< div class = "absolute top-0 left=0 w-full h-full flex flex-col justify-end hover:bg-rose-700/30 hover:backdrop-blur-md" >
2026-07-15 18:43:40 -07:00
< div class = "h-48 w-full backdrop-blur-sm 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" >
2026-07-15 18:24:09 -07:00
< 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 >
2022-08-09 16:47:50 -06:00
< / div >
< / a >
2026-07-15 18:43:40 -07:00
< a href = "https://code.annikadev.com/annika/keepr" class = "relative pb-4 md:pb-0 mb-4 md:mb-0" >
2022-08-09 16:47:50 -06:00
< img src = "./src/img/screenshots/keepr.jpg" alt = "Keepr" class = "object-left object-cover h-full w-full rounded-lg md:rounded-none" >
2026-07-15 18:39:01 -07:00
< div class = "absolute top-0 left=0 w-full h-full flex flex-col justify-end hover:bg-rose-700/30 hover:backdrop-blur-md" >
2026-07-15 18:43:40 -07:00
< div class = "h-48 w-full backdrop-blur-sm 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" >
2026-07-15 18:24:09 -07:00
< 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 >
2022-08-09 16:47:50 -06:00
< / div >
< / a >
< / div >
< / section >
< / main >
< footer >
< section id = "contact" class = "bg-zinc-100 min-h-[20vh]" >
< div class = "p-8 md:p-24 text-zinc-900" >
< h2 class = "text-center text-4xl" > Contact Me!< / h2 >
< p class = "text-lg text-center py-4 md:py-12" > If you like what you see, consider contacting me on LinkedIn:< / p >
< div class = "flex justify-center" >
< a href = "https://www.linkedin.com/in/annikadev" class = "text-zinc-100 bg-zinc-800 w-48 px-4 py-3 mb-4 md:mb-12 text-center text-2xl rounded-full hover:text-rose-700 hover:bg-zinc-100 border-zinc-800 border-4 hover:border-rose-700" >
< i class = "mdi mdi-linkedin" > < / i >
LinkedIn
< / a >
< / div >
< / div >
2026-07-15 18:24:09 -07:00
< div class = "p-2 text-zinc-500" >
< p >
< a href = "https://tailwindcss.com" class = "hover:text-rose-700" > Made with tailwindcss.< / a >
< / p >
< p >
2022-08-09 16:47:50 -06:00
< 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 >
2026-07-15 18:24:09 -07:00
< / p >
< / div >
2022-08-09 16:47:50 -06:00
< / section >
< / footer >
< / body >
< / html >
