♻️ refactor: use ESM import notation

.vscode/settings.json

@@ -49,6 +49,8 @@
   // Javascript
   "javascript.updateImportsOnFileMove.enabled": "always",
   "typescript.updateImportsOnFileMove.enabled": "always",
+  "javascript.preferences.importModuleSpecifierEnding": "js",
+  "typescript.preferences.importModuleSpecifierEnding": "js",
   "typescript.suggest.paths": true,
   // json
   "[json,jsonc]": {
@@ -68,9 +70,8 @@
   "todo-tree.filtering.excludeGlobs": [
     "**/node_modules"
   ],
+  // other extensions
   "vitest.enable": true,
-  "javascript.preferences.importModuleSpecifierEnding": "js",
-  "typescript.preferences.importModuleSpecifierEnding": "js",
   "cSpell.words": [
     "SRDF",
     "URDF"

src/components/molecules/Footer/index.tsx

@@ -4,7 +4,7 @@ import { Box, Link, Stack, Typography } from '@mui/material'
 import PolicyIcon from '@mui/icons-material/Policy'
 import CookieIcon from '@mui/icons-material/Cookie'
 
-import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms'
+import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms/IconLinks/index.js'
 import CookieConsent from 'components/molecules/CookieConsent/index.js'
 
 type FooterProps = {

src/components/molecules/Hero/Hero.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Avatar, Box, IconButton, Stack, Typography } from '@mui/material'
+import ExpandMore from '@mui/icons-material/ExpandMore'
 
-import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms'
+import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atoms/IconLinks/index.js'
-import { ExpandMore } from '@mui/icons-material'
 
 const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) => {
   return (

src/components/pages/ContactPage/ContactPage.tsx

@@ -3,7 +3,7 @@ import DraftsIcon from '@mui/icons-material/Drafts'
 import LinkedInIcon from '@mui/icons-material/LinkedIn'
 import GitHubIcon from '@mui/icons-material/GitHub'
 
-import { Page } from 'components/templates'
+import { Page } from 'components/templates/index.js'
 
 interface ListItemProps {
   children?: React.ReactNode

src/components/pages/CurriculumPage/CurriculumPage.tsx

@@ -1,8 +1,8 @@
 import { Box, Divider, Link, Stack, Table, TableCell, TableRow, Typography } from '@mui/material'
 
-import { Award, ExternalIconLink, Extracurricular, Publication, SectionHeader, SectionSubheader } from 'components/atoms'
+import { Award, ExternalIconLink, Extracurricular, Publication, SectionHeader, SectionSubheader } from 'components/atoms/index.js'
-import { CurriculumItem } from 'components/molecules'
+import { CurriculumItem } from 'components/molecules/index.js'
-import { Page } from 'components/templates'
+import { Page } from 'components/templates/index.js'
 
 const Curriculum = () => {
   return (

src/components/pages/MainPage/MainPage.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { Box, Stack, Typography } from '@mui/material'
 
 import { ViewportProvider } from 'components/utils/viewport'
-import { AcademyIconLink, DescriptionIconLink, ExternalAppIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms'
+import { AcademyIconLink, DescriptionIconLink, ExternalAppIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms/index.js'
-import { Footer, Hero, Toolbar, ProjectSpotlight } from 'components/molecules'
+import { Footer, Hero, Toolbar, ProjectSpotlight } from 'components/molecules/index.js'
 
 const MainPage = () => {
   React.useEffect(() => {

src/components/pages/ProjectsPage/ProjectsPage.tsx

@@ -1,8 +1,8 @@
 import { Box, Divider, Link, Typography } from '@mui/material'
 
-import { GitHubIconLink, DescriptionIconLink, VideoIconLink, AcademyIconLink, ExternalAppIconLink } from 'components/atoms'
+import { GitHubIconLink, DescriptionIconLink, VideoIconLink, AcademyIconLink, ExternalAppIconLink } from 'components/atoms/index.js'
-import { Project } from 'components/molecules'
+import { Project } from 'components/molecules/index.js'
-import { Page } from 'components/templates'
+import { Page } from 'components/templates/index.js'
 
 const ProjectsPage = () => {
   return (

src/components/templates/Page/Page.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box, BoxProps, Container, Divider, Typography } from '@mui/material'
 
-import { Footer, Toolbar } from 'components/molecules'
+import { Footer, Toolbar } from 'components/molecules/index.js'
 
 interface PageProps extends BoxProps {
   showCookieConsent?: boolean