Extract hooks folder

src/app/components/AboutBrief.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import Container from 'react-bootstrap/Container';
 import Image from 'react-bootstrap/Image'
-import { usePersonContext } from './PersonContext';
+import { usePersonContext } from '../hooks/PersonContext';
 import { Col, Row } from 'react-bootstrap';
 
 export default function AboutBrief() {

src/app/components/Contacts.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
-import { usePersonContext } from './PersonContext'
+import { usePersonContext } from '../hooks/PersonContext'
 import Container from 'react-bootstrap/esm/Container'
-import { useAutoFocus } from '../FocusedElement'
+import { useAutoFocus } from '../hooks/FocusedElement'
 import { Col, Row } from 'react-bootstrap'
 
 export function Contact(props: {icon?: string, text: string}) {

src/app/components/Education.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { usePersonContext } from './PersonContext';
+import { usePersonContext } from '../hooks/PersonContext';
 import JobHistory from './JobHistory';
 
 export default function WorkExperience() {

src/app/components/Footer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Container } from 'react-bootstrap';
-import { usePersonContext } from './PersonContext';
+import { usePersonContext } from '../hooks/PersonContext';
 
 export default function Footer() {
     const personalData = usePersonContext()

src/app/components/JobCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Card from 'react-bootstrap/Card';
-import { useAutoFocus, useFocusedElement } from '../FocusedElement';
+import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
 
 export type Props = {
     heading?: string,

src/app/components/Skills.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import Container from 'react-bootstrap/Container';
-import { PersonContext } from './PersonContext';
+import { PersonContext } from '../hooks/PersonContext';
 import TagCloud from './TagCloud';
 
 export default function Skills() {

src/app/components/TagCloud.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import Container from 'react-bootstrap/Container';
-import { useAutoFocus, useFocusedElement } from '../FocusedElement';
+import { useAutoFocus, useFocusedElement } from '../hooks/FocusedElement';
 
 export type Props = {
     title: string,

src/app/components/WorkExperience.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { usePersonContext } from './PersonContext';
+import { usePersonContext } from '../hooks/PersonContext';
 import JobHistory from './JobHistory';
 
 export default function WorkExperience() {

src/app/layout.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Inter } from 'next/font/google'
 
 import './globals.css'
-import { PersonProvider } from './components/PersonContext'
+import { PersonProvider } from './hooks/PersonContext'
 import { personalData } from '../PersonalData'
 
 const inter = Inter({ subsets: ['latin'] })