My personal website
renderg.host
1import AboutPage from '@/pages/AboutPage';
2import HomePage from '@/pages/HomePage';
3import WorksPage from '@/pages/PortfolioPage';
4import WorkPage from '@/pages/WorkPage';
5import WritingPage from '@/pages/WritingPage';
6import React, { useEffect } from 'react';
7import { Route, Routes } from 'react-router-dom';
8
9/**
10 * Main App component with routing.
11 *
12 * @returns Main application JSX element
13 */
14const App: React.FC = () => {
15 // Set dark mode based on system preference
16 useEffect(() => {
17 const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
18
19 const updateTheme = (e: MediaQueryListEvent | MediaQueryList) => {
20 if (e.matches) {
21 document.documentElement.classList.add('dark');
22 } else {
23 document.documentElement.classList.remove('dark');
24 }
25 };
26
27 // Set initial theme
28 updateTheme(mediaQuery);
29
30 // Listen for changes
31 mediaQuery.addEventListener('change', updateTheme);
32
33 return () => mediaQuery.removeEventListener('change', updateTheme);
34 }, []);
35
36 return (
37 <div id="app" className="min-h-screen">
38 <Routes>
39 <Route path="/" element={<HomePage />} />
40 <Route path="/about" element={<AboutPage />} />
41 <Route path="/work" element={<WorkPage />} />
42 <Route path="/works" element={<WorksPage />} />
43 <Route path="/writing" element={<WritingPage />} />
44 {/* <Route path="/studies" element={<Studies />} /> */}
45 </Routes>
46 </div>
47 );
48};
49
50export default App;