style(global): adjustments

xaviernouaille · Sep 30, 2024 · 36dd648 · 36dd648
1 parent d7da1ad
commit 36dd648
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 13 deletions.
diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
@@ -6,7 +6,7 @@ const Footer = () => {
       id='footer'
       className='mt-24 md:mt-24 container px-6 mx-auto pb-16 md:px-0 border-t pt-8 border-slate-300'
     >
-      <ul className='flex flex-col md:flex-row md:items-center md:space-x-6 text-slate-600 mb-5 text-sm'>
+      <ul className='flex flex-col md:flex-row md:items-center md:space-x-6 mb-5 text-sm'>
         <Link href='tel:+33778389134'>+33 7 78 38 91 34</Link>
         <Link href='mailto:xavier.nouaille@pm.me'>xavier.nouaille@pm.me</Link>
         <Link

diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx
@@ -29,9 +29,9 @@ const Header = () => {
     <div className='sticky top-6 z-30 -mx-px transition duration-75 will-change-transform opacity-100'>
       <div
         className={clsx(
-          'bg-slate-100/30 flex justify-between items-center transition-all border border-transparent ease-in-out duration-200 max-w-[850px] mx-2 sm:mx-auto rounded-2xl py-2 pl-3 pr-4 md:pr-6 shadow-surface-glass backdrop-blur',
+          'bg-slate-100/40 flex justify-between items-center transition-all ease-in-out duration-200 max-w-[850px] mx-2 sm:mx-auto rounded-2xl py-2 pl-3 pr-4 md:pr-6 shadow-surface-glass backdrop-blur',
           {
-            'border-gray-200 max-w-[880px] border-opacity-50': isScrolled,
+            'max-w-[880px]': isScrolled,
           },
         )}
       >
@@ -44,7 +44,7 @@ const Header = () => {
           />
         </Link>
         <div>
-          <ul className='flex items-center space-x-5 md:space-x-6 text-slate-600 font-mono tracking-tight font-semibold text-sm'>
+          <ul className='flex items-center space-x-5 md:space-x-6 font-mono tracking-tighter font-medium text-sm '>
             <Link
               className={clsx({ 'opacity-60': pathname === '/about/' })}
               href='/about'

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,8 +3,13 @@ import clsx from 'clsx';
 import localFont from 'next/font/local';
 import Footer from './components/Footer';
 import Header from './components/Header';
+import { Source_Code_Pro } from 'next/font/google';
 
 const myFont = localFont({ src: '../../public/font/my-font.woff2' });
+const monoFont = Source_Code_Pro({
+  subsets: ['latin'],
+  variable: '--font-source-code-pro',
+});
 
 export default function RootLayout({
   children,
@@ -14,7 +19,11 @@ export default function RootLayout({
   return (
     <html lang='en'>
       <body
-        className={clsx(myFont.className, 'overflow-x-hidden bg-[#F7FAFC]')}
+        className={clsx(
+          myFont.className,
+          monoFont.variable,
+          'overflow-x-hidden bg-[#F7FAFC]',
+        )}
       >
         <Header />
         {children}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -13,7 +13,7 @@ const Home = () => {
   return (
     <>
       <section className='mt-28 container md:px-0 pb-14 border-b border-slate-300 mb-14'>
-        <div className='flex flex-col md:flex-row md:space-x-6 md:items-center mb-6'>
+        <div className='flex flex-col md:flex-row md:space-x-5 md:items-center mb-6'>
           {/* eslint-disable-next-line */}
           <img
             className='w-20 h-20 rounded-full mb-2 md:mb-0'
@@ -43,20 +43,20 @@ const Home = () => {
         </Link>
       </section>
 
-      <section className='max-w-[850px] px-6 md:px-0 mx-auto mt-14'>
+      <section className='max-w-[1000px] px-6 md:px-0 mx-auto mt-14'>
         <div className='container px-0 mb-10'>
           <h2 className='text-2xl font-medium'>Mes projets</h2>
           <p className='text-slate-700 font-light mt-3 text-lg'>
             Vous trouverez ci-dessous une sélection de projets récents sur
             lesquels j{"'"}ai travaillé.
           </p>
         </div>
-        <div className='flex flex-col space-y-10'>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-8'>
           {projects.map((project) => (
             <Link
               href={project.url}
               target='_blank'
-              className='bg-slate-100 rounded-2xl p-5 flex flex-col md:flex-row hover:bg-[#f0f2f5] ease-in-out duration-200'
+              className='bg-slate-100 rounded-2xl p-6 md:p-8 flex flex-col hover:bg-[#f0f2f5] ease-in-out duration-200'
               key={project.index}
             >
               <div className='w-full'>
@@ -67,12 +67,12 @@ const Home = () => {
                   alt={project.company}
                 />
               </div>
-              <div className='w-full p-6'>
+              <div className='w-full pt-6'>
                 <h3 className='text-xl font-medium'>{project.company}</h3>
-                <p className='text-slate-600 font-light'>
+                <p className='text-slate-600'>
                   {project.description} - {project.date}
                 </p>
-                <p className='mt-2 text-base font-light'>
+                <p className='mt-2 text-base font-light text-slate-500'>
                   {project.tasks.substring(0, 100)}...
                 </p>
               </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -8,10 +8,13 @@ const config: Config = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    fontFamily: {
+      mono: ['var(--font-source-code-pro)'],
+    },
     container: {
       center: true,
       padding: {
-        DEFAULT: '1.5rem',
+        DEFAULT: '1rem',
       },
       screens: {
         sm: '100%',