Improve layout of technologies section

1 files changed, 32 insertions, 16 deletions

diff --git a/src/components/home/TechnologiesSection.js b/src/components/home/TechnologiesSection.js
index 79c1eaee..5e2ec2fc 100644
--- a/src/components/home/TechnologiesSection.js
+++ b/src/components/home/TechnologiesSection.js
@@ -5,25 +5,41 @@ import ContentSection from "./ContentSection";
 const TechnologiesSection = () => (
     <ContentSection name="technologies" title="Technologies">
         <ul className="list-group text-left">
-            <li className="list-group-item list-group-item-primary">
-                <FontAwesome name="window-maximize"/> &nbsp;
-                <strong>Browser</strong> &nbsp;
-                JavaScript, React, Redux, HTML5 Canvas
+            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary">
+                <span style={{minWidth: 100}}>
+                    <FontAwesome name="window-maximize" className="mr-2"/>
+                    <strong className="">Browser</strong>
+                </span>
+                <span className="text-right">
+                    JavaScript, React, Redux, Konva
+                </span>
             </li>
-            <li className="list-group-item list-group-item-warning">
-                <FontAwesome name="television"/> &nbsp;
-                <strong>Server</strong> &nbsp;
-                Python, Flask, FlaskSocketIO, OpenAPI
+            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning">
+                <span style={{minWidth: 100}}>
+                    <FontAwesome name="television" className="mr-2"/>
+                    <strong>Server</strong>
+                </span>
+                <span className="text-right">
+                    Python, Flask, FlaskSocketIO, OpenAPI
+                </span>
             </li>
-            <li className="list-group-item list-group-item-success">
-                <FontAwesome name="database"/> &nbsp;
-                <strong>Database</strong> &nbsp;
-                MariaDB
+            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success">
+                <span style={{minWidth: 100}}>
+                    <FontAwesome name="database" className="mr-2"/>
+                    <strong>Database</strong>
+                </span>
+                <span className="text-right">
+                    MariaDB
+                </span>
             </li>
-            <li className="list-group-item list-group-item-danger">
-                <FontAwesome name="cogs"/> &nbsp;
-                <strong>Simulator</strong> &nbsp;
-                Kotlin
+            <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger">
+                <span style={{minWidth: 100}}>
+                    <FontAwesome name="cogs" className="mr-2"/>
+                    <strong>Simulator</strong>
+                </span>
+                <span className="text-right">
+                    Kotlin
+                </span>
             </li>
         </ul>
     </ContentSection>