Skip to content

Commit 5fdd015

Browse files
jonaspmjonaspm
committed
style: adjust padding and spacing for improved layout consistency
1 parent 9ae4063 commit 5fdd015

File tree

2 files changed

+87
-85
lines changed

2 files changed

+87
-85
lines changed

‎src/components/Navigation.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const navItems = ['Home', 'Bio', 'Skills', 'Projects', 'Contact'];
33
---
44

55
<header class="fixed top-0 left-0 right-0 z-20 bg-grayblue-800 bg-opacity-90">
6-
<nav class="container mx-auto px-6 py-3">
6+
<nav class="container mx-auto px-6 py-4">
77
<!-- Mobile menu button -->
88
<div class="flex items-center justify-between md:hidden">
99
<a href="#home" class="text-grayblue-100 font-medium text-lg">Jonas <span class="text-blue-300">PM</span></a>

‎src/pages/index.astro‎

Lines changed: 86 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -48,98 +48,100 @@ const projects = [
4848

4949
<Layout title="Jonas Perusquia Morales">
5050
<main class="max-w-7xl mx-auto px-6 pt-14 xs:pt-20">
51-
<!-- HOME SECTION -->
52-
<section id="home" class="py-14 sm:py-20">
53-
<div class="flex flex-col items-center lg:flex-row lg:justify-between">
54-
<div class="mb-8 text-center lg:mb-0 lg:text-left lg:w-1/2">
55-
<h1 class="mb-4 text-5xl font-medium">Jonas Perusquia Morales</h1>
56-
<h2 class="mb-6 text-2xl font-light text-blue-300">Chief Technology Officer</h2>
57-
<p class="max-w-2xl text-xl text-grayblue-300">
58-
Innovative tech leader with a passion for building scalable solutions and fostering high-performing teams.
59-
</p>
60-
<div class="flex gap-4 mt-6 justify-center lg:justify-start">
61-
{
62-
socialNetworks.map(socialNetwork => (
63-
<a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
64-
<div class="h-6 w-6">
65-
<Fragment set:html={socialNetwork.image} />
66-
</div>
67-
</a>
68-
))
69-
}
51+
<div class="flex flex-col gap-y-20">
52+
<!-- HOME SECTION -->
53+
<section id="home" class="py-8 scroll-mt-20">
54+
<div class="flex flex-col items-center lg:flex-row lg:justify-between">
55+
<div class="mb-8 text-center lg:mb-0 lg:text-left lg:w-1/2">
56+
<h1 class="mb-4 text-5xl font-medium">Jonas Perusquia Morales</h1>
57+
<h2 class="mb-6 text-2xl font-light text-blue-300">Chief Technology Officer</h2>
58+
<p class="max-w-2xl text-xl text-grayblue-300">
59+
Innovative tech leader with a passion for building scalable solutions and fostering high-performing teams.
60+
</p>
61+
<div class="flex gap-4 mt-6 justify-center lg:justify-start">
62+
{
63+
socialNetworks.map(socialNetwork => (
64+
<a aria-label={socialNetwork.name} href={socialNetwork.url} class="text-grayblue-300 hover:text-blue-300 transition-transform hover:scale-110">
65+
<div class="h-6 w-6">
66+
<Fragment set:html={socialNetwork.image} />
67+
</div>
68+
</a>
69+
))
70+
}
71+
</div>
72+
</div>
73+
<div class="relative h-64 w-64 overflow-hidden rounded-full border-4 border-blue-300 lg:h-80 lg:w-80">
74+
<Image
75+
src={profilePicture}
76+
alt="Jonas Perusquia Morales"
77+
width={320}
78+
height={320}
79+
class="rounded-full object-cover"
80+
loading="eager"
81+
/>
7082
</div>
7183
</div>
72-
<div class="relative h-64 w-64 overflow-hidden rounded-full border-4 border-blue-300 lg:h-80 lg:w-80">
73-
<Image
74-
src={profilePicture}
75-
alt="Jonas Perusquia Morales"
76-
width={320}
77-
height={320}
78-
class="rounded-full object-cover"
79-
loading="eager"
80-
/>
84+
<div class="mt-12 animate-bounce text-center">
85+
<span class="material-symbols-rounded mx-auto text-5xl! text-blue-300 rotate-90">chevron_right</span>
8186
</div>
82-
</div>
83-
<div class="mt-12 animate-bounce text-center">
84-
<span class="material-symbols-rounded mx-auto text-5xl! text-blue-300 rotate-90">chevron_right</span>
85-
</div>
86-
</section>
87+
</section>
8788

88-
<!-- BIO SECTION -->
89-
<section id="bio" class="py-14 sm:py-20">
90-
<h2 class="mb-12 text-center text-3xl font-medium">About Me</h2>
91-
<div class="mx-auto bg-grayblue-800 p-8 rounded-lg shadow-lg">
92-
<p class="text-lg leading-relaxed text-grayblue-300">
93-
With a passion for technology and over eight years of experience in web development, I've dedicated myself to adopting and implementing the latest industry trends and tools. My portfolio includes a diverse range of cloud projects spanning websites, mobile applications, and desktop software.
94-
</p>
95-
<p class="text-lg leading-relaxed text-grayblue-300 mt-4">
96-
As a self-taught perfectionist and natural leader, I bring strong problem-solving abilities to every project I undertake. My consistently positive, motivating, and inclusive approach enables me to thrive in collaborative environments where knowledge sharing is valued.
97-
</p>
98-
<p class="text-lg leading-relaxed text-grayblue-300 mt-4">
99-
Beyond the professional realm, I find balance through music, sports, and quality time with family.
100-
</p>
101-
</div>
102-
</section>
89+
<!-- BIO SECTION -->
90+
<section id="bio" class="py-8 scroll-mt-20">
91+
<h2 class="mb-12 text-center text-3xl font-medium">About Me</h2>
92+
<div class="mx-auto bg-grayblue-800 p-8 rounded-lg shadow-lg">
93+
<p class="text-lg leading-relaxed text-grayblue-300">
94+
With a passion for technology and over eight years of experience in web development, I've dedicated myself to adopting and implementing the latest industry trends and tools. My portfolio includes a diverse range of cloud projects spanning websites, mobile applications, and desktop software.
95+
</p>
96+
<p class="text-lg leading-relaxed text-grayblue-300 mt-4">
97+
As a self-taught perfectionist and natural leader, I bring strong problem-solving abilities to every project I undertake. My consistently positive, motivating, and inclusive approach enables me to thrive in collaborative environments where knowledge sharing is valued.
98+
</p>
99+
<p class="text-lg leading-relaxed text-grayblue-300 mt-4">
100+
Beyond the professional realm, I find balance through music, sports, and quality time with family.
101+
</p>
102+
</div>
103+
</section>
103104

104-
<section id="skills" class="py-14 sm:py-20">
105-
<h2 class="mb-12 text-center text-3xl font-medium">Skills & Expertise</h2>
106-
<div class="grid grid-cols-2 gap-8 md:grid-cols-4">
107-
{skills.map((skill) => (
108-
<div class="rounded-lg bg-grayblue-800 p-6 text-center shadow-lg transition-all duration-300 hover:bg-slate-700 hover:scale-110">
109-
<p class="text-lg text-center break-words hyphens-auto font-medium">{skill}</p>
110-
</div>
111-
))}
112-
</div>
113-
</section>
105+
<section id="skills" class="py-8 scroll-mt-20">
106+
<h2 class="mb-12 text-center text-3xl font-medium">Skills & Expertise</h2>
107+
<div class="grid grid-cols-2 gap-8 md:grid-cols-4">
108+
{skills.map((skill) => (
109+
<div class="rounded-lg bg-grayblue-800 p-6 text-center shadow-lg transition-all duration-300 hover:bg-slate-700 hover:scale-110 flex items-center justify-center">
110+
<p class="text-lg text-center break-words hyphens-auto font-medium">{skill}</p>
111+
</div>
112+
))}
113+
</div>
114+
</section>
114115

115-
<section id="projects" class="py-14 sm:py-20">
116-
<h2 class="mb-12 text-center text-3xl font-medium">Featured Projects</h2>
117-
<div class="grid gap-8 md:grid-cols-2">
118-
{
119-
projects.map(project =>
120-
<a href={project.url} class="rounded-lg bg-grayblue-800 p-6 shadow-lg scale-image grid md:grid-cols-2 gap-4">
121-
<div id="project-info" class="flex flex-col gap-3">
122-
<h3 class="text-xl font-semibold text-blue-300">{ project.name }</h3>
123-
<p class="text-grayblue-300">{ project.description }</p>
124-
</div>
125-
<div class="project-image self-center">
126-
<div class="overflow-hidden aspect-video rounded-lg">
127-
<img loading="lazy" class="duration-300 transition-all aspect-video " src={ project.image.src } alt={ project.name }></img>
116+
<section id="projects" class="py-8 scroll-mt-20">
117+
<h2 class="mb-12 text-center text-3xl font-medium">Featured Projects</h2>
118+
<div class="grid gap-8 md:grid-cols-2">
119+
{
120+
projects.map(project =>
121+
<a href={project.url} class="rounded-lg bg-grayblue-800 p-6 shadow-lg scale-image grid md:grid-cols-2 gap-4">
122+
<div id="project-info" class="flex flex-col gap-3">
123+
<h3 class="text-xl font-semibold text-blue-300">{ project.name }</h3>
124+
<p class="text-grayblue-300">{ project.description }</p>
125+
</div>
126+
<div class="project-image self-center">
127+
<div class="overflow-hidden aspect-video rounded-lg">
128+
<img loading="lazy" class="duration-300 transition-all aspect-video " src={ project.image.src } alt={ project.name }></img>
129+
</div>
128130
</div>
129-
</div>
130-
</a>
131-
)
132-
}
133-
</div>
134-
</section>
131+
</a>
132+
)
133+
}
134+
</div>
135+
</section>
135136

136-
<!-- GET IN TOUCH SECTION -->
137-
<section id="contact" class="py-14 sm:py-20">
138-
<h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium">Get in Touch</h2>
139-
<div class="flex justify-center">
140-
<div class="tidycal-embed" data-path="jperusm/15-minute-meeting"></div><script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>
141-
</div>
142-
</section>
137+
<!-- GET IN TOUCH SECTION -->
138+
<section id="contact" class="py-8 scroll-mt-20">
139+
<h2 class="mb-12 text-center text-3xl text-grayblue-100 font-medium">Get in Touch</h2>
140+
<div class="flex justify-center">
141+
<div class="tidycal-embed" data-path="jperusm/15-minute-meeting"></div><script src="https://asset-tidycal.b-cdn.net/js/embed.js" async></script>
142+
</div>
143+
</section>
144+
</div>
143145
</main>
144146

145147
<footer class="bg-grayblue-800 py-6 text-center text-sm text-grayblue-400">

0 commit comments

Comments
 (0)