Stateless Functional Components

portfolio/src/App.js → portfolio/src/components/App.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import Projects from './Projects';
 import SocialProfiles from './SocialProfiles';
 import Title from './Title';
-import profile from './assets/profile.png';
+import profile from '../assets/profile.png';
 
 class App extends Component {
   state = { displayBio: false };

portfolio/src/components/Projects.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PROJECTS from '../data/projects';
+
+const Project = props => {
+  const { title, image, description, link } = props.project;
+
+  return (
+    <div style={{ display: 'inline-block', width: 300, margin: 10 }}>
+      <h3>{title}</h3>
+      <img src={image} alt='profile' style={{ width: 200, height: 120 }} />
+      <p>{description}</p>
+      <a href={link}>{link}</a>
+    </div>
+  );
+}
+
+const Projects = () => (
+    <div>
+      <h2>Highlighted Projects</h2>
+      <div>
+        {
+          PROJECTS.map(PROJECT => (
+            <Project key={PROJECT.id} project={PROJECT} />
+          ))
+        }
+      </div>
+    </div>
+  );
+
+export default Projects;

portfolio/src/components/SocialProfiles.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import SOCIAL_PROFILES from '../data/socialProfiles';
+
+const SocialProfile = props => {
+  const { link, image } = props.socialProfile;
+
+  return (
+    <span>
+      <a href={link}>
+        <img src={image} alt='social-profile' style={{ width: 35, height: 35, margin: 10 }} />
+      </a>
+    </span>
+  )
+}
+
+const SocialProfiles = () => (
+    <div>
+      <h2>Connect with me!</h2>
+      <div>
+        {
+          SOCIAL_PROFILES.map(SOCIAL_PROFILE => {
+            return <SocialProfile key={SOCIAL_PROFILE.id} socialProfile={SOCIAL_PROFILE} />;
+          })
+        }
+      </div>
+    </div>
+  );
+
+export default SocialProfiles;

portfolio/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import App from './components/App';
 import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));