Skip to content

Commit

Permalink
style(global): improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Xavier Nouaille committed Dec 5, 2024
1 parent fba41b2 commit 22d0c13
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 90 deletions.
31 changes: 30 additions & 1 deletion src/app/constants/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,20 @@
export const projects = [
{
asFreelancer: true,
index: 'lemonway',
name: 'lemonway',
url: 'https://lemonway.com',
company: 'lemonway.com',
description: 'Développer FullStack',
tasks:
"Développement d'un système de posts/commentaires et de repost, optimisation du flux d'activité grâce au caching, intégration de paiements via Stripe et de la recherche avec Algolia. Participation au déploiement sur AWS et création de scripts avec AWS Lambda.",
content:
"Republike.io est une plateforme de média social axée sur le partage des profits, le soutien au bien commun, et la propriété utilisateur. Elle adopte un modèle économique \"Pay-to-Own\", permettant aux utilisateurs de devenir copropriétaires de la plateforme, tout en mettant l'accent sur un avenir durable et éthique dans l'ère de l'intelligence artificielle.",
date: '03/2024 - 09/2024',
years: "2024 - aujourd'hui",
techno: ['NodeJS', 'AWS', 'MongoDB'],
logo: 'https://logo.clearbit.com/lemonway.com',
},
{
asFreelancer: true,
index: 'republike',
Expand All @@ -11,21 +27,25 @@ export const projects = [
content:
"Republike.io est une plateforme de média social axée sur le partage des profits, le soutien au bien commun, et la propriété utilisateur. Elle adopte un modèle économique \"Pay-to-Own\", permettant aux utilisateurs de devenir copropriétaires de la plateforme, tout en mettant l'accent sur un avenir durable et éthique dans l'ère de l'intelligence artificielle.",
date: '03/2024 - 09/2024',
years: '2023 - 2024',
techno: ['React', 'NextJS', 'NodeJS', 'AWS', 'MongoDB'],
logo: 'https://logo.clearbit.com/republike.io',
},
{
asFreelancer: true,
index: 'dialonce',
name: 'DialOnce',
url: 'https://dialonce.ai',
url: 'https://dialonce.ai/index.html',
company: 'dialonce.ai',
description: 'Développer FullStack & DevOPS',
tasks:
"Participation au développement frontend, backend et DevOps, conception de services pour les SMS, l'analyse de données et les emails, ainsi que la refonte d'un service utilisé par des milliers d'utilisateurs. En DevOps, optimisation de CI/CD avec GitLab, orchestration de Kubernetes via ArgoCD, et intégration de services via Helm et IaC.",
content:
"Chez Dialonce.ai, une entreprise spécialisée en relation client, j'ai occupé le poste de développeur fullstack, utilisant la stack MERN pour le développement. Mes responsabilités incluaient également la conteneurisation avec Docker, la gestion de clusters Kubernetes avec Helm et ArgoCD, ainsi que la mise en œuvre de l'infrastructure as code avec Terraform et Pulumi.",
date: '05/2022 - 08/2024',
years: '2022 - 2024',
techno: ['React', 'NodeJS', 'Kubernetes', 'Docker', 'Terraform', 'Pulumi'],
logo: 'https://foxeet.fr/images/logo/7e510a87-2df9-4ffd-a722-869a90f47a0d/solution-dialonce-relation-client-intelligence-artificielle.webp',
},
{
asFreelancer: true,
Expand All @@ -39,6 +59,8 @@ export const projects = [
content:
"Chez Orizons, j'ai contribué à digitaliser les services d'efficacité énergétique pour les professionnels et particuliers. Mon rôle en tant que développeur frontend comprenait la mise en place de systèmes d'authentification avec Firebase, la création de formulaires et l'intégration de ces éléments avec des API, spécifiquement en utilisant FastAPI pour le backend.",
date: '06/2022 - 09/2022',
years: '2022',
logo: 'https://cdn.brandfetch.io/orizons.io',
},
{
asFreelancer: true,
Expand All @@ -52,6 +74,8 @@ export const projects = [
content:
"Chez Keeze, une entreprise offrant des espaces de coworking, j'ai œuvré en tant que développeur frontend, axé sur l'intégration et le développement sur la plateforme, utilisant MeteorJS, CSS-in-JS, et ReactJS. J'étais également chargé de la correction de bugs variés, affectant le style et le rendu des applications.",
date: '09/2021 - 02/2022',
years: '2022',
logo: 'https://logo.clearbit.com/keeze.co',
},
{
asFreelancer: false,
Expand All @@ -65,6 +89,8 @@ export const projects = [
content:
"Chez Offeaze, une plateforme dédiée à la mise en relation entre particuliers et professionnels pour la location de bureaux privés, de coworking et d'espaces de réunion, j'ai occupé le poste de développeur frontend. La plateforme, désormais fermée, était développée avec Next.js, Tailwind CSS, et Apollo Client pour le frontend, et NestJS avec Apollo (GraphQL) pour le backend. J'ai également intégré diverses API, telles que Google Maps, Stripe, et Sentry, pour enrichir les fonctionnalités de la plateforme.",
date: '09/2020 - 09/2022',
years: '2020 - 2022',
logo: 'https://media.licdn.com/dms/image/v2/C4E0BAQGq_BaGbuYgTg/company-logo_200_200/company-logo_200_200/0/1634744736608/offeaze_logo?e=2147483647&v=beta&t=yAaQyMXx1t2Q3NBP308AbGkPkzqVBmdGOe7bJ4RrkKw',
},
];

Expand All @@ -74,6 +100,9 @@ export const studies = [
school: 'Epitech',
description: "Master Architecte logiciel et développeur d'application",
date: '09/2017 - 08/2022',
years: '2017 - 2022',
url: 'https://www.epitech.eu',
logo: 'https://logo.clearbit.com/epitech.eu',
},
];

Expand Down
194 changes: 106 additions & 88 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { Metadata } from 'next/types';
import { articles, projects, studies } from './constants';
// import { FaEnvelope, FaLinkedin } from 'react-icons/fa6';
// import { FaGithub } from 'react-icons/fa';

export const metadata: Metadata = {
title: 'Xavier Nouaille | Développeur Fullstack',
Expand All @@ -12,28 +14,31 @@ const Home = () => {
const currentYear = new Date().getFullYear();

return (
<div className='container text-[#333]'>
<div className='text-[#333]'>
{/* <ThemeSwitcher /> */}
<section className='mt-14 py-2'>
<div className='flex flex-col md:flex-row md:space-x-6 md:items-center mb-6'>
<img
className='w-20 h-20 rounded-full mb-2 md:mb-0 hover:scale-110 transition-all ease-in-out duration-300 cursor-pointer'
src='https://media.licdn.com/dms/image/v2/D4E03AQECl4VM6fM72Q/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1727639353667?e=1733356800&v=beta&t=ohqxp5K_G4nRrqS9z9pJ123A5HIFwyBTziOKXQO3mYI'
alt='Xavier Nouaille'
/>
<div>
<h1 className='font-medium text-3xl sm:text-4xl'>
<span className='mb-2'>🙋‍♂️ Bonjour, je suis Xavier</span>
<span className='block text-muted-foreground font-light text-xl'>

<div style={{ backgroundColor: 'rgb(14, 14, 26)' }}>
<section className='container text-white py-12 px-6 md:px-0'>
<div className='flex flex-col md:space-x-6 md:flex-row md:items-center'>
<img
className='w-28 h-28 rounded-full mb-2 md:mb-0 hover:scale-110 transition-all ease-in-out duration-300 cursor-pointer'
src='https://media.licdn.com/dms/image/v2/D4E03AQEBgtVkhJXwXw/profile-displayphoto-shrink_800_800/B4EZOWt_FRHEAc-/0/1733400458738?e=1738800000&v=beta&t=IkIWdqUiSyM7ngJ61guu49iiRElv7fo5Axe300YGg3Y'
alt='Xavier Nouaille'
/>
<div>
<h1 className='font-medium text-3xl sm:text-4xl mb-1'>
Bonjour, je suis Xavier
</h1>
<h2 className='text-xl text-muted-foreground'>
Développeur full-stack freelance.
</span>
</h1>
</h2>
</div>
</div>
</div>
</section>
<hr className='divide-solid divide-y w-full divide-muted-foreground my-4' />
<section className='mx-auto pt-6'>
<p className='pb-8 font-light'>
</section>
</div>

<section className='container mx-auto pt-10 px-6 md:px-0'>
<p className='font-light'>
Ingénieur et développeur fullstack formé à Epitech Paris, je propose
mes compétences pour concevoir des applications web robustes,
performantes et de haute qualité.
Expand All @@ -50,91 +55,85 @@ const Home = () => {
DialOnce. Grâce à ces expériences et à ma motivation, j{"'"}ai acquis
une solide et riche expérience en développement web et en devops.
</p>

<ul>
<li>
<a className='hover:underline' href='tel:+33778389134'>
+33 7 78 38 91 34
</a>
</li>
<li>
<a className='hover:underline' href='mailto:xavier.nouaille@pm.me'>
xavier.nouaille@pm.me
</a>
</li>
<li>
<a
className='hover:underline'
href='https://www.linkedin.com/in/xavier-nouaille/'
>
linkedin.com/in/xavier-nouaille
</a>
</li>
</ul>
</section>

<section className='mt-16 pb-6'>
<div className='flex space-x-6 items-center w-full'>
<div className='w-full'>
<h2 className='font-medium text-2xl p-0 mb-4'>Expériences</h2>
<div className='flex flex-col divide-solid divide-y w-full divide-muted-foreground'>
{projects.map((project) => (
<div className='py-6 flex justify-between' key={project.index}>
<div>
<a
target='_blank'
className='hover:underline'
href={project.url}
>
<h3 className=' font-medium'>{project.company}</h3>
</a>
<p className='font-light'>{project.description}</p>
</div>
<div>
<p className='mt-2 text-[0.9rem] font-light text-right'>
{project.date}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</section>

<section className='mt-16 pb-6'>
<section className='container mt-16 pb-10 md:px-0'>
<div className='flex space-x-6 items-center w-full'>
<div className='w-full'>
<h2 className='font-medium text-2xl p-0 mb-4'>Formations</h2>
<div className='flex flex-col divide-solid divide-y w-full divide-muted-foreground'>
{studies.map((study) => (
<div className='py-6 flex justify-between' key={study.index}>
<div>
<h3 className=' font-medium'>{study.school}</h3>
<p className='font-light'>{study.description}</p>
<div className='p-6 w-full divide-muted-foreground border rounded-md'>
<h2 className='font-semibold text-2xl p-0 mb-6'>Expériences</h2>
<div className='flex flex-col space-y-10'>
{projects.map((project) => (
<div
className='flex flex-col md:flex-row justify-between'
key={project.index}
>
<div className='flex space-x-4 items-center'>
<img
src={project.logo}
alt={project.company}
className='w-12 h-12 rounded-md shadow-md'
/>
<div>
<a target='_blank' href={project.url}>
<h3 className=' font-medium'>{project.company}</h3>
</a>
<p className='font-light'>{project.description}</p>
</div>
</div>
<div>
<p className='mt-2 text-[0.9rem] font-light text-right'>
{project.years}
</p>
</div>
</div>
<div>
<p className='mt-2 text-[0.9rem] font-light text-right'>
{study.date}
</p>
))}
</div>
<h2 className='font-semibold text-2xl p-0 mb-6 mt-12'>
Formations
</h2>
<div className='flex flex-col space-y-10'>
{studies.map((study) => (
<div
className='flex flex-col md:flex-row justify-between'
key={study.index}
>
<div className='flex space-x-4 items-center'>
<img
src={study.logo}
alt={study.school}
className='w-12 h-12 rounded-md shadow-md'
/>
<div>
<a href={study.url} target='_blank'>
<h3 className=' font-medium'>{study.school}</h3>
</a>
<p className='font-light'>{study.description}</p>
</div>
</div>
<div>
<p className='mt-2 text-[0.9rem] font-light text-right'>
{study.years}
</p>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</div>
</section>

<section className='mt-16 pb-6'>
<section className='container pt-10 md:px-0'>
<div className='flex space-x-6 items-center w-full'>
<div className='w-full'>
<h2 className='font-medium text-2xl p-0 mb-4'>
<h2 className='font-semibold text-2xl p-0 mb-4'>
Derniers articles
</h2>
<div className='flex flex-col divide-solid divide-y w-full divide-muted-foreground'>
<div className='flex flex-col border p-6 rounded-md'>
{articles.map((article) => (
<a target='_blank' key={article.title} href={article.url}>
<div className='py-6'>
<div>
<div>
<h3 className=' font-medium'>{article.title}</h3>
<p className='font-light'>{article.description}</p>
Expand All @@ -152,8 +151,27 @@ const Home = () => {
</div>
</section>

<section className='pb-10 pt-10 font-light text-sm'>
<section className='text-center container pb-10 pt-20 font-light text-sm'>
Copyright ©{currentYear}, Xavier Nouaille
{/* `<div className='opacity-80 flex justify-center space-x-2 mt-3'>
<a
href='https://www.linkedin.com/in/xavier-nouaille/'
target='_blank'
>
<FaLinkedin className='w-5 h-5' />
</a>
<a href='https://github.com/xaviernouaille' target='_blank'>
<FaGithub className='w-5 h-5' />
</a>
<a
href='
mailto:xavier.nouaille@protonmail.com'
>
<FaEnvelope className='w-5 h-5' />
</a>
</div>` */}
</section>
</div>
);
Expand Down
5 changes: 4 additions & 1 deletion tailwind.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,16 @@ const config: Config = {
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
fontFamily: {
sans: ['system-ui'],
},
container: {
center: true,
padding: {
DEFAULT: '1rem',
},
screens: {
md: '620px',
md: '720px',
},
},
extend: {
Expand Down

0 comments on commit 22d0c13

Please sign in to comment.