From 6c2f5fc6a0de5ca6a71a5176e74810f1c545493b Mon Sep 17 00:00:00 2001 From: Matteo Date: Thu, 26 Sep 2024 16:13:57 +0200 Subject: [PATCH 1/2] update: responsive on all sections. Need a grid for team section. --- src/components/content.tsx | 8 ++-- src/components/heading2.tsx | 22 +++++++++++ src/components/project.tsx | 33 ++++++++++++++-- src/components/sections/about.tsx | 11 ++---- src/components/sections/faq.tsx | 15 +++++--- src/components/sections/header.tsx | 6 +-- src/components/sections/projects.tsx | 6 +-- src/components/sections/team.tsx | 26 ++++++------- src/components/timer.tsx | 2 +- src/hooks/use-media-query.ts | 57 ++++++++++++++++++++++++++++ 10 files changed, 145 insertions(+), 41 deletions(-) create mode 100644 src/components/heading2.tsx create mode 100644 src/hooks/use-media-query.ts diff --git a/src/components/content.tsx b/src/components/content.tsx index c9a5dd8..0f74c6e 100644 --- a/src/components/content.tsx +++ b/src/components/content.tsx @@ -17,7 +17,7 @@ const BottomFooter = () => {

404 Devinci

@@ -34,7 +34,7 @@ const Nav = () => { return (
-

Social media

+

Social media

-
404@devinci.fr diff --git a/src/components/heading2.tsx b/src/components/heading2.tsx new file mode 100644 index 0000000..4d746cb --- /dev/null +++ b/src/components/heading2.tsx @@ -0,0 +1,22 @@ +import { gasoekOne } from "@/app/font"; +import cn from "@/utils/function"; +import React from "react"; + +interface H2Props { + children: React.ReactNode; + className?: string; +} + +const H2 = ({ children, className }: H2Props) => { + return ( +

+ {children} +

+ ); +} + +export default H2; \ No newline at end of file diff --git a/src/components/project.tsx b/src/components/project.tsx index b679a8b..934cbde 100644 --- a/src/components/project.tsx +++ b/src/components/project.tsx @@ -1,5 +1,6 @@ "use client"; +import { useMediaQuery } from "@/hooks/use-media-query"; import cn from "@/utils/function"; import { motion } from "framer-motion"; import Image from "next/image"; @@ -23,6 +24,11 @@ const anim = { const Project = ({ project, index }: ProjectProps) => { const [isActive, setIsActive] = useState(false); + const isComputerOrLarger = useMediaQuery('(min-width: 1280px)'); + + if(!isComputerOrLarger) { + return + } return (
{ onMouseLeave={() => {setIsActive(false)}} >
-

{project.name}

+

{project.name}

{

{project.date}

- ); + ); } -export default Project; \ No newline at end of file +export default Project; + + +const MobileProject = ({ project, index }: ProjectProps) => { + + return( +
+
+

{project.name}

+
+

{project.date}

+
+ ) +} \ No newline at end of file diff --git a/src/components/sections/about.tsx b/src/components/sections/about.tsx index 3a27d5a..39b1533 100644 --- a/src/components/sections/about.tsx +++ b/src/components/sections/about.tsx @@ -1,16 +1,13 @@ -import { gasoekOne } from "@/app/font"; -import cn from "@/utils/function"; +import H2 from "../heading2"; const AboutSection = () => { return (
-

+

Who we are -

-
+ +

404 Devinci is an association focused on web development and UI/UX design. We're also interested in emerging technologies such as AI diff --git a/src/components/sections/faq.tsx b/src/components/sections/faq.tsx index 8754b21..cc5e4d4 100644 --- a/src/components/sections/faq.tsx +++ b/src/components/sections/faq.tsx @@ -1,5 +1,6 @@ -import { gasoekOne } from "@/app/font"; +import { montserrat } from "@/app/font"; import cn from "@/utils/function"; +import H2 from "../heading2"; const faqData = { "fr": [ @@ -53,11 +54,13 @@ const faqData = { const FaqSection = () => { return ( -

-

- questions & - answers -

+
+

+ questions & + answers +

{faqData.en.map(({ question, answer }, index) => (
{ return (
{/* HEADING */} -
-

+
+

404
@@ -18,7 +18,7 @@ const Header = () => {

- Paris + Paris
diff --git a/src/components/sections/projects.tsx b/src/components/sections/projects.tsx index e2e5ab8..3409377 100644 --- a/src/components/sections/projects.tsx +++ b/src/components/sections/projects.tsx @@ -1,4 +1,4 @@ -import { gasoekOne } from "@/app/font"; +import H2 from "../heading2"; import Project from "../project"; const projects = [ @@ -22,9 +22,9 @@ const projects = [ const ProjectsSection = () => { return (
-

+

What we made -

+

{projects.map((project, index) => ( diff --git a/src/components/sections/team.tsx b/src/components/sections/team.tsx index 086209e..749cd3c 100644 --- a/src/components/sections/team.tsx +++ b/src/components/sections/team.tsx @@ -1,7 +1,6 @@ -import { gasoekOne } from "@/app/font"; -import cn from "@/utils/function"; import Image from "next/image"; import Arrow from "../arrow"; +import H2 from "../heading2"; const members = [ { @@ -24,25 +23,24 @@ const members = [ const TeamSection = () => { return (
-
-

+
+

Our team -

-
+

+
- - Meet the team - + + Meet the team +
-
+
{members.map((member, index) => (
{member.image ? ( diff --git a/src/components/timer.tsx b/src/components/timer.tsx index 7a41b99..da345fa 100644 --- a/src/components/timer.tsx +++ b/src/components/timer.tsx @@ -20,7 +20,7 @@ const Timer = () => { if (!mounted) return; return ( - {time} + {time} ); } diff --git a/src/hooks/use-media-query.ts b/src/hooks/use-media-query.ts new file mode 100644 index 0000000..653c183 --- /dev/null +++ b/src/hooks/use-media-query.ts @@ -0,0 +1,57 @@ +import { useIsomorphicLayoutEffect } from 'framer-motion'; +import { useState } from 'react'; + +type UseMediaQueryOptions = { + defaultValue?: boolean; + initializeWithValue?: boolean; +}; + +const IS_SERVER = typeof window === 'undefined'; + +export function useMediaQuery( + query: string, + { + defaultValue = false, + initializeWithValue = true, + }: UseMediaQueryOptions = {}, +): boolean { + const getMatches = (query: string): boolean => { + if (IS_SERVER) { + return defaultValue; + } + return window.matchMedia(query).matches; + }; + + const [matches, setMatches] = useState(() => { + if (initializeWithValue) { + return getMatches(query); + } + return defaultValue; + }); + + // Handles the change event of the media query. + function handleChange() { + setMatches(getMatches(query)); + } + + useIsomorphicLayoutEffect(() => { + if (IS_SERVER) { + return; + } + + const matchMedia = window.matchMedia(query); + + // Set the initial state + setMatches(matchMedia.matches); + + // Add the event listener + matchMedia.addEventListener('change', handleChange); + + // Clean up the event listener + return () => { + matchMedia.removeEventListener('change', handleChange); + }; + }, [query]); + + return matches; +} \ No newline at end of file From ad672f1538215039e67f201dd53509136e67fd0f Mon Sep 17 00:00:00 2001 From: Matteo Date: Fri, 27 Sep 2024 09:01:45 +0200 Subject: [PATCH 2/2] add: member & project type, member card component and grid for team section. --- src/app/globals.css | 1 + src/components/member-card.tsx | 41 ++++++++++++++++++++++++++++++++ src/components/project.tsx | 7 ++---- src/components/sections/team.tsx | 38 +++++------------------------ src/utils/types.ts | 11 +++++++++ 5 files changed, 61 insertions(+), 37 deletions(-) create mode 100644 src/components/member-card.tsx create mode 100644 src/utils/types.ts diff --git a/src/app/globals.css b/src/app/globals.css index 46cc781..a41c309 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -12,4 +12,5 @@ html, body { background-color: #070707; + overflow-x: hidden; } diff --git a/src/components/member-card.tsx b/src/components/member-card.tsx new file mode 100644 index 0000000..e66f4a2 --- /dev/null +++ b/src/components/member-card.tsx @@ -0,0 +1,41 @@ +import { MemberType } from "@/utils/types"; +import Image from "next/image"; + +interface MemberCardProps { + member: MemberType; +} + +const MemberCard = ({ member }: MemberCardProps) => { + return ( +
+
+ {member.image ? ( + {member.name} + ) : ( + {member.name} + )} +
+
+ {member.name} + {member.position} +
+
+ ); +} + +export default MemberCard; \ No newline at end of file diff --git a/src/components/project.tsx b/src/components/project.tsx index 934cbde..1bcff6e 100644 --- a/src/components/project.tsx +++ b/src/components/project.tsx @@ -2,16 +2,13 @@ import { useMediaQuery } from "@/hooks/use-media-query"; import cn from "@/utils/function"; +import { ProjectType } from "@/utils/types"; import { motion } from "framer-motion"; import Image from "next/image"; import { useState } from "react"; interface ProjectProps { - project: { - name: string; - date: string; - image: string; - }; + project: ProjectType; index: number; } diff --git a/src/components/sections/team.tsx b/src/components/sections/team.tsx index 749cd3c..1477371 100644 --- a/src/components/sections/team.tsx +++ b/src/components/sections/team.tsx @@ -1,6 +1,6 @@ -import Image from "next/image"; import Arrow from "../arrow"; import H2 from "../heading2"; +import MemberCard from "../member-card"; const members = [ { @@ -20,6 +20,8 @@ const members = [ }, ] + + const TeamSection = () => { return (
@@ -29,44 +31,16 @@ const TeamSection = () => {

Our team

-
+
Meet the team
-
+
{members.map((member, index) => ( -
-
- {member.image ? ( - {member.name} - ) : ( - {member.name} - )} -
-
- {member.name} - {member.position} -
-
+ ))}
diff --git a/src/utils/types.ts b/src/utils/types.ts new file mode 100644 index 0000000..a9757c2 --- /dev/null +++ b/src/utils/types.ts @@ -0,0 +1,11 @@ +export type MemberType = { + name: string; + position: string; + image: string; +}; + +export type ProjectType = { + name: string, + date: string, + image: string, +} \ No newline at end of file