{"id":1462961,"date":"2025-06-14T12:39:44","date_gmt":"2025-06-14T11:39:44","guid":{"rendered":"https:\/\/webpixelia.com\/portfolio\/jonathan-freelance\/"},"modified":"2025-07-08T14:16:17","modified_gmt":"2025-07-08T13:16:17","slug":"jonathan-freelance","status":"publish","type":"project","link":"https:\/\/webpixelia.com\/en\/portfolio\/jonathan-freelance\/","title":{"rendered":"Jonathan Freelance"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"<p>Personal website built with Next.js, React, and TypeScript, showcasing my profile as a freelance WordPress developer, along with my services, skills, and projects \u2014 featuring API integration and a fully responsive design.<\/p>\n","protected":false},"featured_media":1462952,"template":"","meta":{"_seopress_titles_title":"Jonathan Dhermand \u2013 WordPress & Web Freelance Developer | Next.js Portfolio","_seopress_titles_desc":"Discover the portfolio of Jonathan Dhermand, a freelance WordPress developer specializing in custom website development. Built with Next.js, React, and TypeScript, the site integrates a WordPress API and is fully optimized for performance and SEO.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_uag_custom_page_level_css":"","image_header":1462953,"url_video":"https:\/\/youtu.be\/-SwbSCMVyNs","url_site":"https:\/\/www.jonathandhermand.com\/","cms":"100% static and custom","cahier_des_charges":"The goal of this project was to design a modern, high-performance professional showcase to present my skills as a freelance web developer, while delivering an optimal user experience and quick access to key information for potential visitors. This is a <strong>single-page<\/strong> website built with <strong>Next.js<\/strong>, <strong>React<\/strong>, and <strong>TypeScript<\/strong>, and hosted on <strong>Vercel<\/strong>, ensuring maximum performance and reliability.\n\n<strong>\ud83c\udfa8 Structure &amp; Design<\/strong>\n<ul>\n \t<li><strong>Clean, professional, and elegant design<\/strong> reflecting my positioning as a WordPress expert and web developer.<\/li>\n \t<li><strong>Smooth and responsive user experience<\/strong>, optimized for all devices (desktop, tablet, mobile).<\/li>\n \t<li><strong>Intuitive scroll-based navigation<\/strong> with anchor links for fast access to all sections (Introduction, Services, Skills, Portfolio, Resume, Contact).<\/li>\n \t<li><strong>Built with Tailwind CSS<\/strong> for a sleek, modern, and performant design system<\/li>\n<\/ul>\n<strong>\ud83d\udcbc Content &amp; Goals<\/strong>\n<ul>\n \t<li><strong>Clear and engaging personal <\/strong>presentation to build trust from the very first seconds.<\/li>\n \t<li><strong>Highlight of my core services:<\/strong> WordPress development, maintenance, e-commerce, frontend and backend development.<\/li>\n \t<li><strong>Emphasis on technical skills<\/strong> with visual indicators of proficiency in various languages and tools.<\/li>\n \t<li><strong>Dynamic portfolio<\/strong> section featuring recent projects with detailed descriptions and direct links.<\/li>\n \t<li><strong>One-click access<\/strong> to my r\u00e9sum\u00e9 in PDF format.<\/li>\n \t<li><strong>Optimized contact section<\/strong> with clear CTAs to initiate conversations or request a quote<\/li>\n<\/ul>\n<strong>\u2699\ufe0f Technical Features<\/strong>\n<ul>\n \t<li><strong>Fully static and optimized site<\/strong>, generated with Next.js using output: export for maximum compatibility.<\/li>\n \t<li><strong>Modern codebase<\/strong> using TypeScript for enhanced reliability and scalability.<\/li>\n \t<li><strong>Automatic deployment on Vercel <\/strong>triggered via Git updates.<\/li>\n \t<li><strong>Performance optimized:<\/strong> fast load times, web-optimized images, lazy loading.<\/li>\n \t<li><strong>SEO-ready<\/strong>: structured meta tags, dynamic titles, sitemap generation.<\/li>\n<\/ul>\n<strong>\ud83d\udcc8 Strategy &amp; Long-Term Goals<\/strong>\n<ul>\n \t<li>Strengthen my <strong>online presence as a WordPress freelance developer and fullstack web expert.<\/strong><\/li>\n \t<li>Provide <strong>a clear and engaging entry point<\/strong> for potential clients, agencies, and recruiters.<\/li>\n \t<li>Offer a simple, fast, and reassuring <strong>tool to support lead generation<\/strong> and professional visibility<\/li>\n<\/ul>","apercu_developpemants":"<h3>\ud83e\uddf0 Technologies &amp; Environment<\/h3>\n<strong>Frontend (Next.js \/ React \/ TypeScript)<\/strong>\n<ul>\n \t<li><strong>Next.js<\/strong> static export mode for fast deployment and SEO-friendly architecture<\/li>\n \t<li><strong>React<\/strong> with modular and strongly typed components using <strong>TypeScript<\/strong><\/li>\n \t<li><strong>Tailwind CSS<\/strong> combined with tailwind-merge and tailwindcss-animate for clean, maintainable, and responsive styling<\/li>\n \t<li><strong>Radix UI<\/strong> for accessible and fully customizable UI components<\/li>\n \t<li><strong>Framer Motion<\/strong> to enable smooth transitions and animations<\/li>\n \t<li><strong>Next Themes<\/strong> for dynamic light\/dark mode theme switching<\/li>\n<\/ul>\n<strong>Productivity &amp; Code Quality<\/strong>\n<ul>\n \t<li>Form validation handled with <strong>React Hook Form<\/strong> and robust schema definitions using <strong>Zod<\/strong><\/li>\n \t<li>Class name composition simplified with clsx and class-variance-authority (CVA)<\/li>\n \t<li>Optimized routing system via Next.js App Router, combined with a scalable component architecture<\/li>\n \t<li>Continuous deployment via <strong>Vercel<\/strong>, including <strong>Vercel Analytics<\/strong> and <strong>Speed Insights<\/strong> to monitor performance and user experience in real time<\/li>\n<\/ul>\n<h3>\u2699\ufe0f Developed Features<\/h3>\n<strong>Structured &amp; Interactive One-Page Site<\/strong>\n<ul>\n \t<li>Smooth navigation between sections using native scroll behavior<\/li>\n \t<li>Dynamic UI components powered by Radix UI<\/li>\n \t<li>Dynamic <strong>CV download<\/strong> with clear call-to-action (CTA) button<\/li>\n \t<li>Client-side validated contact form using <strong>Zod + React Hook Form<\/strong><\/li>\n \t<li>User feedback with toasts\/alerts displayed via Sonner<\/li>\n<\/ul>\n<strong>Accessibility &amp; User Experience<\/strong>\n<ul>\n \t<li>Radix UI components following <strong>WAI-ARIA<\/strong> accessibility standards<\/li>\n \t<li>Seamless keyboard navigation with visible and accessible focus states<\/li>\n \t<li><strong>Mobile-first <\/strong>design, tested across multiple screen sizes and resolutions<\/li>\n \t<li>Lightweight, modern SVG icons using <strong>Lucide React<\/strong><\/li>\n<\/ul>\n<h3>\ud83d\udd0d SEO &amp; Performance Optimization<\/h3>\n<ul>\n \t<li>Dynamic meta tags, titles, and Open Graph for each section<\/li>\n \t<li>Lazy loading of images and heavy components for optimized performance<\/li>\n \t<li>Integration of Critters to inline critical CSS<\/li>\n \t<li>Real-time performance monitoring with Vercel Speed Insights<\/li>\n<\/ul>","details_techniques":"<h3>Results<\/h3>\n<ul>\n \t<li><strong>Modern and high-performance website<\/strong>, fully responsive and optimized for all devices (<a href=\"https:\/\/pagespeed.web.dev\/analysis\/https-www-jonathandhermand-com\/vzrmhwacso?form_factor=mobile\" target=\"_blank\" rel=\"nofollow noopener\">Google Speed Insight friendly<\/a>)<\/li>\n \t<li><strong>Clear professional identity<\/strong>, reinforcing my online presence<\/li>\n \t<li><strong>Seamless user experience<\/strong> with intuitive navigation and minimalist design<\/li>\n \t<li><strong>Ultra-fast loading times<\/strong>, powered by Vercel\u2019s CDN optimization<\/li>\n \t<li>Robust and maintainable codebase, <strong>built for long-term scalability<\/strong><\/li>\n \t<li><strong>SEO-optimized<\/strong> with dynamic meta tags, Open Graph integration, and sitemap<\/li>\n \t<li><strong>Sustainable technical solution<\/strong> with no unnecessary back-office or server load<\/li>\n<\/ul>","screens":"[{\"screen_titre\":\"Homepage Laptop\",\"screen_image_id\":1462955},{\"screen_titre\":\"Homepage Tab\",\"screen_image_id\":1462959},{\"screen_titre\":\"Homepage Phone\",\"screen_image_id\":1462957}]","technique":"[]","technologies":"[\"Tailwind\",\"Node.js\",\"Next.js\",\"React\",\"TypeScript\",\"Framer Motion\",\"Radix UI\",\"Lucide React\",\"WordPress REST API\"]","resultats_images":"[1462948,1462950]"},"project_category":[108],"project_tag":[144,146,145,157],"class_list":["post-1462961","project","type-project","status-publish","has-post-thumbnail","project_category-redesign","project_tag-nextjs-en","project_tag-performances-en","project_tag-react-en","project_tag-vercel-en"],"uagb_featured_image_src":{"full":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup.webp",960,640,false],"thumbnail":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup-150x150.webp",150,150,true],"medium":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup-300x200.webp",300,200,true],"medium_large":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup-768x512.webp",768,512,true],"large":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup.webp",960,640,false],"1536x1536":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup.webp",960,640,false],"2048x2048":["https:\/\/webpixelia.com\/wp-content\/uploads\/2025\/06\/jonathan-freelance-feat-laptop-mockup.webp",960,640,false]},"uagb_author_info":{"display_name":"Jonathan Webpixelia","author_link":"https:\/\/webpixelia.com\/en\/"},"uagb_comment_info":0,"uagb_excerpt":"Personal website built with Next.js, React, and TypeScript, showcasing my profile as a freelance WordPress developer, along with my services, skills, and projects \u2014 featuring API integration and a fully responsive design.","_links":{"self":[{"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/project\/1462961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/types\/project"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/media\/1462952"}],"wp:attachment":[{"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/media?parent=1462961"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/project_category?post=1462961"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/webpixelia.com\/en\/wp-json\/wp\/v2\/project_tag?post=1462961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}