Wrap Up with Low-Hanging Styling Fruit

15Dkatz · Oct 19, 2022 · 21e873f · 21e873f
1 parent 2d4d453
commit 21e873f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
diff --git a/portfolio/public/index.html b/portfolio/public/index.html
@@ -25,6 +25,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/portfolio/src/App.js b/portfolio/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Projects from './Projects';
 import SocialProfiles from './SocialProfiles';
+import profile from './assets/profile.png';
 
 class App extends Component {
   state = { displayBio: false };
@@ -12,6 +13,7 @@ class App extends Component {
   render() {
     return (
       <div>
+        <img src={profile} alt='profile' className='profile' />
         <h1>Hello!</h1>
         <p>My name is David. I'm a software engineer.</p>
         <p>I'm always looking forward to work on meaningful projects.</p>

diff --git a/portfolio/src/index.css b/portfolio/src/index.css
@@ -0,0 +1,27 @@
+@font-face {
+  font-family: RobotoCondensed;
+  src: url(assets/roboto-condensed.light.ttf);
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: EconomicaBold;
+  src: url(assets/economica-bold.ttf);
+}
+
+body {
+  text-align: center;
+  font-size: 20px;
+  padding: 2.5%;
+  font-family: 'RobotoCondensed';
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: 'EconomicaBold';
+}
+
+.profile {
+  width: 200px;
+  height: 200px;
+  border-radius: 100px;
+}
diff --git a/portfolio/src/index.js b/portfolio/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<App />);