feat(design)!: Introduce new portfolio design (#25)

Author: alphatrl

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -10,11 +10,14 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "classnames": "^2.5.1",
     "lodash": "^4.17.21",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-grid-layout": "^2.2.2",
     "styled-components": "^6.1.13",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-safe-area": "^1.3.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

public/images/background/background-1.png

@@ -1,21 +1,17 @@
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
 
-import Introduction from './components/Introduction';
-import Projects from './components/Projects';
-import DefaultLayout from './layout/DefaultLayout';
-import { theme } from './theme';
+import DefaultLayout from './layouts/DefaultLayout';
+import Introduction from './shared/components/Introduction';
+import Projects from './shared/components/Projects';
 
 const App: React.FC = () => {
   return (
-    <ThemeProvider theme={theme}>
-      <DefaultLayout title="Portfolio">
-        <div className="flex flex-col">
-          <Introduction />
-          <Projects />
-        </div>
-      </DefaultLayout>
-    </ThemeProvider>
+    <DefaultLayout title="Portfolio">
+      <div className="flex flex-col">
+        <Introduction />
+        <Projects />
+      </div>
+    </DefaultLayout>
   );
 };
 

public/images/profile/amos.jpeg

@@ -1,11 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
 
-import SEO from '../components/SEO';
-
-const Wrapper = styled.div`
-  margin: 0 auto;
-`;
+import SEO from '../shared/components/SEO';
 
 interface Props {
   title?: string;
@@ -15,10 +10,10 @@ const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = (props) => {
   const { title = 'Amos Tan', children } = props;
 
   return (
-    <Wrapper>
+    <div className="m-auto ">
       <SEO title={title} />
       <main>{children}</main>
-    </Wrapper>
+    </div>
   );
 };