diff options
| author | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-09-26 21:29:28 +0200 |
|---|---|---|
| committer | Georgios Andreadis <g.andreadis@student.tudelft.nl> | 2017-09-26 21:29:28 +0200 |
| commit | ee662378b41328c735283a9451820ac3e57d6472 (patch) | |
| tree | 49374cf1cbaf51b58b26b19e697cc212e01c62d4 /src/components | |
| parent | 83518ce800aba586b7591959f232a7ddfe4f8a9f (diff) | |
Improve layout of technologies section
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/home/TechnologiesSection.js | 48 |
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"/> - <strong>Browser</strong> - 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"/> - <strong>Server</strong> - 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"/> - <strong>Database</strong> - 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"/> - <strong>Simulator</strong> - 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> |