mohammad/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: animations, responsive design

Browse Source 
Animations
- added opacity animation for experience page
- added stagger animation for navbar items on mobile
- added animation for landing page for years and language indications

Pages
- About Page mockup

Redesign
- Navbar to include icons on desktop
This commit is contained in:
Mohammad Hariri
2025-02-21 00:07:25 +01:00
parent 32fea815f2
commit 5070f591d3
56 changed files with 2552 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
components/layout.templ
View File

@@ -1,58 +1,23 @@
package components
templ rootLayout() {
<html class="w-full h-full overflow-hidden bg-slate-900 text-white">
<html class="w-screen h-screen overflow-x-hidden bg-slate-900 text-white">
<head>
<!-- tailwindcss -->
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="assets/css/styles.css"/>
<!-- Motion.js -->
<script src="https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js"></script>
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Mohammad's Portfolio</title>
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
.animate-slide-in {
opacity: 0;
animation: slideIn 1s ease-out forwards;
}
.delay-300 {
animation-delay: 300ms;
}
.delay-600 {
animation-delay: 600ms;
}
.delay-900 {
animation-delay: 900ms;
}
</style>
</head>
<body class="flex flex-col w-full h-full">
@navbar()
<div class="h-full w-full">
{ children... }
</div>
{ children... }
</body>
</html>
}