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

18
components/landing_page.templ
View File

@@ -2,16 +2,16 @@ package components
templ LandingPage() {
@rootLayout() {
<script defer src="assets/js/landing-page-animations.js"></script>
<main class="flex items-center justify-center h-full bg-gradient-to-b from-slate-900 to-slate-800">
<script defer src="assets/js/landing.js"></script>
<main class="flex flex-col gap-8 bg-gradient-to-b from-slate-900 to-slate-800">
<!-- Hero Section -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 mb-24 sm:py-24">
<div class="max-w-7xl mx-auto">
<div class="px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
<div class="flex flex-col gap-24 ">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- Left Content -->
<div class="space-y-8">
<div class="space-y-4">
<span class="px-4 py-2 bg-emerald-900/50 text-emerald-400 rounded-full text-sm font-medium">Software Developer</span>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-2">
<span class="px-4 w-fit py-2 bg-emerald-900/50 text-emerald-400 rounded-full text-sm font-medium">Software Engineer</span>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight">
Hey there! I'm Mohammad Hariri
</h1>
@@ -46,7 +46,7 @@ templ LandingPage() {
<div class="absolute -inset-4 bg-gradient-to-r from-emerald-500 to-teal-500 rounded-2xl opacity-30 blur-xl"></div>
<div class="relative bg-slate-800 p-4 rounded-2xl shadow-xl">
<img
src="/images/profile.jpg"
src="/assets/images/portfolio-photo.webp"
alt="Mohammad Hariri"
class="w-full h-full object-cover rounded-xl"
/>
@@ -54,7 +54,7 @@ templ LandingPage() {
</div>
</div>
<!-- Stats Section -->
<div class="mt-20 grid grid-cols-2 sm:grid-cols-4 gap-8">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-8">
<div class="text-center">
<div id="years-experience" class="text-4xl font-bold text-emerald-400">0</div>
<div class="text-slate-400 mt-2">Years Experience</div>