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

8
components/layout_templ.go
View File

@@ -29,7 +29,7 @@ func rootLayout() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<html class=\"w-full h-full overflow-hidden bg-slate-900 text-white\"><head><script src=\"https://unpkg.com/@tailwindcss/browser@4\"></script><script src=\"https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.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><title>Mohammad's Portfolio</title><style>\n\t\t\t@keyframes fadeIn {\n\t\t\t\tfrom { opacity: 0; }\n\t\t\t\tto { opacity: 1; }\n\t\t\t}\n\n\t\t\t@keyframes slideIn {\n\t\t\t\tfrom { \n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransform: translateY(20px);\n\t\t\t\t}\n\t\t\t\tto {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransform: translateY(0);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.animate-fade-in {\n\t\t\t\topacity: 0;\n\t\t\t\tanimation: fadeIn 1s ease-in forwards;\n\t\t\t}\n\n\t\t\t.animate-slide-in {\n\t\t\t\topacity: 0;\n\t\t\t\tanimation: slideIn 1s ease-out forwards;\n\t\t\t}\n\n\t\t\t.delay-300 {\n\t\t\t\tanimation-delay: 300ms;\n\t\t\t}\n\n\t\t\t.delay-600 {\n\t\t\t\tanimation-delay: 600ms;\n\t\t\t}\n\n\t\t\t.delay-900 {\n\t\t\t\tanimation-delay: 900ms;\n\t\t\t}\n\t\t</style></head><body class=\"flex flex-col w-full h-full\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<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></head><body class=\"flex flex-col w-full h-full\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -37,15 +37,11 @@ func rootLayout() templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<div class=\"h-full w-full\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var1.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</div></body></html>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</body></html>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}