Modified code to support mobile devices

This commit is contained in:
Nabil Ould Hamou 2023-09-12 15:56:20 +02:00
parent 153e423b0c
commit 8508998048
4 changed files with 8 additions and 8 deletions

View file

@ -4,5 +4,5 @@
@tailwind utilities; @tailwind utilities;
.content-container { .content-container {
height: calc(100vh - theme('spacing.14')); height: calc(100vh - theme('spacing.16'));
} }

View file

@ -1,9 +1,9 @@
<script> <script>
import routes from '$lib/Routes.ts' import routes from '$lib/Routes'
export let path; export let path;
</script> </script>
<div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center'> <div class='h-14 w-full top-0 left-0 sticky flex justify-center items-center bg-dark-charcoal-gray'>
<div class='pt-4 w-4/5 flex justify-between'> <div class='pt-4 w-4/5 flex justify-between'>
<img alt="Logo" src="/images/console.png" class='w-12 h-12' /> <img alt="Logo" src="/images/console.png" class='w-12 h-12' />
<div class='flex items-center justify-between gap-x-8 font-medium text-lg'> <div class='flex items-center justify-between gap-x-8 font-medium text-lg'>

View file

@ -1,5 +1,5 @@
<div class='flex flex-col justify-center items-center h-full'> <div class='flex flex-col justify-center items-center my-6'>
<div class='text-justify w-2/5'> <div class='text-justify w-4/5 lg:w-3/5'>
<h3 class='text-accent text-6xl pb-5 font-bold'>About Me</h3> <h3 class='text-accent text-6xl pb-5 font-bold'>About Me</h3>
<p class='text-xl'>Hello I am <span class='text-accent'>Nabil Ould Hamou</span>, a passionate <span class='text-accent'>computer scientist</span> <p class='text-xl'>Hello I am <span class='text-accent'>Nabil Ould Hamou</span>, a passionate <span class='text-accent'>computer scientist</span>
with a penchant for crafting robust back-end solutions and a keen interest in front-end development. As a computer scientist, with a penchant for crafting robust back-end solutions and a keen interest in front-end development. As a computer scientist,
@ -7,6 +7,6 @@
where I've had the occasion of improving my skills in fullstack web development. My focus primarily revolves around back-end development, where I've had the occasion of improving my skills in fullstack web development. My focus primarily revolves around back-end development,
where I architect and optimize the logic that powers the web applications we interact with daily.</p> where I architect and optimize the logic that powers the web applications we interact with daily.</p>
<h3>---</h3> <h3>---</h3>
<p class='text-2xl'>Contact: ouldhamounabil@gmail.com</p> <p class='lg:text-2xl md:text-xl'>Contact: ouldhamounabil@gmail.com</p>
</div> </div>
</div> </div>

View file

@ -5,9 +5,9 @@
<div class='flex flex-col items-center'> <div class='flex flex-col items-center'>
<h1 class='text-accent text-4xl font-bold my-10'>Projects</h1> <h1 class='text-accent text-4xl font-bold my-4'>Projects</h1>
<div class='grid gap-4 grid-cols-3 grid-rows-2'> <div class='flex flex-wrap gap-4 w-4/5 mb-6 items-center justify-center'>
{#each projects as project} {#each projects as project}
<Project name={project.name} stack={project.stack} description={project.description} url={project.url} /> <Project name={project.name} stack={project.stack} description={project.description} url={project.url} />