Skip to content

GitLab

Commit 119c6450 authored by unknown's avatar unknown
Browse files

adding page outline

parent 0cfd1857
Hide whitespace changes
Inline Side-by-side
Showing with 776 additions and 0 deletions
.idea/dictionaries/Filippos.xml 0 → 100644
View file @ 119c6450
<component name="ProjectDictionaryState">
<dictionary name="Filippos">
<words>
<w>biomanufacturing</w>
<w>biometrology</w>
<w>bioprinting</w>
<w>electrohydrodynamics</w>
<w>electrospinning</w>
<w>electrowriting</w>
<w>filippos</w>
<w>gershenfeld</w>
<w>instrucotr</w>
<w>macroscale</w>
<w>metrology</w>
<w>microorgan</w>
<w>multiphysics</w>
<w>nano</w>
<w>printability</w>
<w>sudoku</w>
<w>tourlomousis</w>
</words>
</dictionary>
</component>
\ No newline at end of file
.idea/misc.xml 0 → 100644
View file @ 119c6450
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
View file @ 119c6450
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/my-portfolio.iml" filepath="$PROJECT_DIR$/.idea/my-portfolio.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/my-portfolio.iml 0 → 100644
View file @ 119c6450
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
View file @ 119c6450
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/my-htmaa-2018" vcs="Git" />
</component>
</project>
\ No newline at end of file
.idea/workspace.xml 0 → 100644
View file @ 119c6450
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="33061d0c-84e3-4051-bf3c-7d807428912a" name="Default" comment="" />
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FUSProjectUsageTrigger">
<session id="992491880">
<usages-collector id="statistics.lifecycle.project">
<counts>
<entry key="project.closed" value="2" />
<entry key="project.open.time.0" value="3" />
<entry key="project.opened" value="3" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
<counts>
<entry key="css" value="2" />
<entry key="html" value="5" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.open">
<counts>
<entry key="CSS" value="2" />
<entry key="HTML" value="5" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.edit">
<counts>
<entry key="html" value="3199" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
<counts>
<entry key="HTML" value="3199" />
</counts>
</usages-collector>
</session>
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/portfoilogrid-final/portfoilogrid/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="7202">
<caret line="277" column="8" selection-start-line="277" selection-start-column="8" selection-end-line="277" selection-end-column="62" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="556">
<caret line="103" column="25" selection-start-line="103" selection-start-column="25" selection-end-line="103" selection-end-column="25" />
<folding>
<element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#div#2;n#div#1;n#div#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/css/style.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="546">
<caret line="21" column="28" selection-start-line="21" selection-start-column="28" selection-end-line="21" selection-end-column="28" />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FindInProjectRecents">
<replaceStrings>
<replace />
</replaceStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/my-htmaa-2018" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/css/style.css" />
<option value="$PROJECT_DIR$/portfoilogrid-final/portfoilogrid/index.html" />
<option value="$PROJECT_DIR$/startbootstrap-blog-home-gh-pages/startbootstrap-blog-home-gh-pages/index.html" />
<option value="$PROJECT_DIR$/index.html" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="NodePackageJsonFileManager">
<packageJsonPaths>
<path value="$PROJECT_DIR$/startbootstrap-blog-home-gh-pages/startbootstrap-blog-home-gh-pages/package.json" />
</packageJsonPaths>
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-1928" />
<option name="y" value="-8" />
<option name="width" value="1936" />
<option name="height" value="1056" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="my-portfolio" type="b2602c69:ProjectViewProjectNode" />
<item name="my-portfolio" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="my-portfolio" type="b2602c69:ProjectViewProjectNode" />
<item name="my-portfolio" type="462c0819:PsiDirectoryNode" />
<item name="css" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="my-portfolio" type="b2602c69:ProjectViewProjectNode" />
<item name="my-portfolio" type="462c0819:PsiDirectoryNode" />
<item name="portfoilogrid-final" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="my-portfolio" type="b2602c69:ProjectViewProjectNode" />
<item name="my-portfolio" type="462c0819:PsiDirectoryNode" />
<item name="portfoilogrid-final" type="462c0819:PsiDirectoryNode" />
<item name="portfoilogrid" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="my-portfolio" type="b2602c69:ProjectViewProjectNode" />
<item name="my-portfolio" type="462c0819:PsiDirectoryNode" />
<item name="startbootstrap-blog-home-gh-pages" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="my-portfolio" type="b2602c69:ProjectViewProjectNode" />
<item name="my-portfolio" type="462c0819:PsiDirectoryNode" />
<item name="startbootstrap-blog-home-gh-pages" type="462c0819:PsiDirectoryNode" />
<item name="startbootstrap-blog-home-gh-pages" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="G:/rheometer-cover" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="G:\my-portfolio" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="33061d0c-84e3-4051-bf3c-7d807428912a" name="Default" comment="" />
<created>1528656424087</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1528656424087</updated>
<workItem from="1528656426137" duration="13219000" />
<workItem from="1528675010040" duration="3928000" />
<workItem from="1529731419658" duration="1926000" />
<workItem from="1529775496146" duration="69000" />
<workItem from="1535771879523" duration="9399000" />
<workItem from="1536473512076" duration="5223000" />
<workItem from="1536522854762" duration="5054000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="38818000" />
</component>
<component name="ToolWindowManager">
<frame x="-7" y="-7" width="1550" height="838" extended-state="6" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.14210178" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Terminal" order="8" />
<window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
<window_info anchor="bottom" id="Version Control" order="10" show_stripe_button="false" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/portfoilogrid-final/portfoilogrid/css/style.css">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/startbootstrap-blog-home-gh-pages/startbootstrap-blog-home-gh-pages/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1336">
<caret line="75" column="24" lean-forward="true" selection-start-line="75" selection-start-column="24" selection-end-line="75" selection-end-column="24" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/portfoilogrid-final/portfoilogrid/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="7202">
<caret line="277" column="8" selection-start-line="277" selection-start-column="8" selection-end-line="277" selection-end-column="62" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/css/style.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="546">
<caret line="21" column="28" selection-start-line="21" selection-start-column="28" selection-end-line="21" selection-end-column="28" />
</state>
</provider>
</entry>
<entry file="file://G:/rheometer-cover/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="520">
<caret line="20" selection-start-line="20" selection-end-line="22" selection-end-column="16" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="556">
<caret line="103" column="25" selection-start-line="103" selection-start-column="25" selection-end-line="103" selection-end-column="25" />
<folding>
<element signature="n#style#0;n#div#0;n#div#1;n#div#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#div#1;n#div#1;n#div#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#div#2;n#div#1;n#div#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
</component>
</project>
\ No newline at end of file
css/style.css 0 → 100644
View file @ 119c6450
#main-header img {
width: 100%;
height: 100%;
}
#main-header .port-item {
width: 30%;
}
#main-header .port-item:hover {
opacity: 0.8;
cursor: pointer;
}
.bg-black {
color: #fff;
background: #000;
}
@media (min-width: 1199px) {
.port-item {
padding: 3em !important;
}
}
index.html 0 → 100644
View file @ 119c6450
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css"/>
<link rel="stylesheet" href="css/style.css">
<title>Filippos Tourlomousis</title>
</head>
<body>
<div class="container">
<header id="main-header">
<div class="row no-gutters">
<div class="col-lg-5 col-md-5">
<img src="img/profile-pic-1.jpg" alt="">
</div>
<div class="col-lg-7 col-md-6">
<div class="d-flex flex-column">
<div class="p-5 bg-dark text-white">
<div class="d-flex flex-row justify-content-between align-items-center">
<h1 class="display-4">Filippos Tourlomousis</h1><br>
<div>
<a href="http://instagram.com" class="text-white">
<i class="fab fa-instagram"></i>
</a>
</div>
<div>
<a href="http://github.com" class="text-white">
<i class="fab fa-github"></i>
</a>
</div>
</div>
</div>
<div class="p-4 bg-black">
PostDoc Associate<br>
The Center for Bits and Atoms, MIT
</div>
<div>
<div class="d-flex flex-row text-white align-items-stretch text-center">
<div class="port-item p-4 bg-info" data-toggle="collapse" data-target="#home">
<i class="fa fa-university fa-2x d-block"></i>
<span class="d-none d-sm-block">Home</span>
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#research">
<i class="fas fa-graduation-cap fa-2x d-block"></i>
<span class="d-none d-sm-block">Research</span>
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#machines">
<i class="fa fa-wrench fa-2x d-block"></i>
<span class="d-none d-sm-block">Machines</span>
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#blog">
<i class="fa fa-music fa-2x d-block"></i>
<span class="d-none d-sm-block">Blog</span>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- HOME -->
<div id="home" class="collapse show">
<div class="card card-body bg-info text-white py-5">
<h2>Welcome To My Page</h2>
<p class="lead">Hi! I'm Filippos and currently I'm a PostDoc Associate at MIT's Center for Bits and Atoms,
home of the 1000 Fab Labs around the world and sister lab of the Media Lab.
<br>
<br>
I am a participating to the famous <b>How to Make (<i>almost</i>) Anything</b> and the <b>Machines that Make Machines
</b> class taught by Prof. Neil Gershenfeld from CBA and the <b>Fluid Mechanics</b> class by Prof. John Bush
from the Dpt. of Mathematics at MIT!<br>
Check them out below!
<br>
<br>
I am also part of CBA's team working on a recently awarded NIST grant that aims to make Materials Measurement
Machines, Modeling and Design accessible to the Masses in collaboration with the Argonne National Laboratories
and the Materiome Project in Chile!
</p>
</div>
<hr>
<!--CARD DECK-->
<div class="card-deck">
<div class="card bg-light text-black text-center " style="height:25rem;">
<img class="card-img" src="img/IMG_0302.JPG" alt="">
<div class="card-img-overlay h-100 d-flex flex-column align-items-center d-flex justify-content-center">
<h2 class="card-title">How to Make <i>(almost)</i> Anything <br><br>
<br>
<a href="#" class="btn btn-primary btn-lg">Weekly Log</a>
<a href="#" class="btn btn-primary btn-lg">Final Project</a>
</h2>
</div>
</div>
<div class="card bg-light text-black text-center " style="height:25rem;">
<img class="card-img" src="img/IMG_0302.JPG" alt="">
<div class="card-img-overlay h-100 d-flex flex-column align-items-center d-flex justify-content-center">
<h2 class="card-title">Machines that Make Machines<br><br>
<br>
<a href="#" class="btn btn-primary btn-lg">Weekly Log</a>
<a href="#" class="btn btn-primary btn-lg">Final Project</a>
</h2>
</div>
</div>
<div class="card bg-light text-black text-center " style="height:25rem;">
<img class="card-img" src="img/IMG_0302.JPG" alt="">
<div class="card-img-overlay h-100 d-flex flex-column align-items-center d-flex justify-content-center">
<h2 class="card-title">Fluid Mechanics<br><br>
<br>
<br>
<a href="#" class="btn btn-primary btn-lg">Weekly Log</a>
<a href="#" class="btn btn-primary btn-lg">Final Project</a>
</h2>
</div>
</div>
</div>
<hr>
</div>
<!-- RESEARCH-->
<div id="research" class="collapse">
<div class="card card-body bg-success text-white py-5">
<h2>My Research Interests</h2>
<p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, ut!</p>
</div>
<div class="card card-body py-5">
<h3>Research Interests</h3>
<p> Rapid Prototyping of Machines, Electrohydrodynamics, Complex Fluids, Electrowriting, Biometrology.</p>
</div>
<div class="card card-body py-5">
<h3>Papers:</h3>
<ul>
<li><i> [Electrohydrodynamics] [Electrowriting] [Biometrology]</i>:<br>
<b>2018</b> - Tourlomousis F. et al. <i>"An Integrated Precision Manufacturing – Metrology Platform
for Studying Cell-Matrix Interactions"</i> (under submission to Advanced Healthcare Materials)
</li>
<li><i>[Biometrology]</i><br>
<b>2018</b> - Tourlomousis F. et al. <i>"Investigation of Cellular Confinement in Three-Dimensional
Microscale
Fibrous Substrates: Fabrication and Metrology"</i>, Journal of Micro and Nano-Manufacturing,
2(6),
(doi: 10.1115/1.4038803)
</li>
<li><i>[Bioprinting] [Biometrology]</i><br>
<b>2017</b> - Ding H., Tourlomousis F. et al. "Bioprinting Multidimensional Constructs: A
Quantitative Approach to Understanding Printed
Cell Density and Redistribution Phenomena", Biomedical Physics & Engineering Express, 3(3). (doi
link)
</li>
<li><i> [Machine Building] [Electrowriting] [Electrohydrodynamics] </i><br>
<b>2017</b> - Tourlomousis F. et al. <i>"Melt Electrospinning Writing Process Guided by a
“Printability Number”</i>,
Journal of Manufacturing Science and Engineering, 139(8) (doi: 10.1115/1.4036348)
</li>
<li><i>[Multiphysics Modeling]</i><br>
<b>2015</b> - Tourlomousis F. and Chang R.<i> "Numerical Investigation of Dynamic Microorgan Devices
as
Drug Screening Platforms: Part I: Macroscale Modeling Approach & Validation"</i>, Biotechnology
& Bioengineering,
113:612-622. (doi:10.1002/bit.25822)
</li>
</ul>
</div>
<div class="card card-body py-5">
<h3>Collaborators</h3>
<ul>
<li>Dilhan Kalyon, Highly Filled Materials Institute</li>
<li>Paul Dalton, University of Wurzburg</li>
</ul>
</div>
<div class="card card-body py-5">
<h3>Where Have I Worked?</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque similique saepe inventore rem
vitae
esse.</p>
<div class="card-deck">
<div class="card">
<div class="card-body">
<h4 class="card-title">Devmasters</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor,
magnam.</p>
<p class="p-2 mb-3 bg-dark text-white">
Position: Full Stack Developer
</p>
<p class="p-2 mb-3 bg-dark text-white">
Phone: (444) 444-4444
</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Dates: 2015 - 2018</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">123 Designs</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor,
magnam.</p>
<p class="p-2 mb-3 bg-dark text-white">
Position: Web Designer
</p>
<p class="p-2 mb-3 bg-dark text-white">
Phone: (222) 222-2222
</p>
</div>
<div class="card-footer">
<h6 class="text-muted">Dates: 2013 - 2015</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Web Designer Pros</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor,
magnam.</p>
<p class="p-2 mb-3 bg-dark text-white">
Position: Web Designer
</p>
<p class="p-2 mb-3 bg-dark text-white">
Phone: (333) 333-3333
</p>