Hello,
I am currently working on building my own website, i wanted to establish if i am using flexbox effectively, i have applied flexbox to the container, it doesnt seem that when i shrink the browser that it becomes flexible/scaleable, it is still a work in progress, below is the code:
Salvatore Saia<header class="header">
<div class="header-items">
<a href="https://www.linkedin.com/in/salvatore-saia-490b1b/"> <i class="fab fa-linkedin-in"> </i> </a>
<a href="https://twitter.com/salv236"> <i class="fab fa-twitter"> </i> </a>
<a href="https://github.com/salv236"> <i class="fab fa-github"> </i> </a>
</div>
<img src="./resources/img/Salvatore-Saia.jpg" class="header-image" width="300" height="400" alt="Salvatore Saia"/>
<h1 class="header-primaryHeading"> Salvatore Saia </h1>
<p class="header-phone"> <i class="fas fa-phone-volume"></i> +32495459975</p>
<a href="mailto:salvatoresaia@gmail.com" class="header-email"> <i class="fas fa-at"></i> Email Me! </a>
<p class="header-about"> Experienced IT Professional, with an enjoyment for front-end technologies offers value by combining Web
Development with soft skills. A good listener, planner and communicator enabling me to understand the
requirements prior to building projects. </p>
</header>
<nav class="navigation">
<ul>
<li> <a href="#"> About </a></li>
<li> <a href="#"> Education </a></li>
<li> <a href="#"> Professional Training </a></li>
<li> <a href="#"> Experience </a></li>
<li> <a href="#"> Skills </a></li>
<li> <a href="#"> Portfolio </a></li>
<li> <a href="#"> Interests </a></li>
</ul>
</nav>
<!--EXPERIENCE-->
<main>
<section>
<h2> Experience </h2>
<article>
<h3>Junior UX Specialist</h3>
<h3> European Commission </h3>
<p> May 2018 - November 2018 </p>
<p> Conversion of PSD files to HTML5/CSS3 using <abbr title="Block, Element, Modifier"> BEM </abbr>
methodolgy, further information on BEM can be found <a href="http://getbem.com/"> here </a> improved layout of Electronic forms for one of the Commission's web applications by
using CSS3's flexbox features. Uploaded code onto the team's SVN repository. Improved the HTMl5
coding practices enabling improved accessibility for visitors that rely on screen readers.
</p>
</article>
<article>
<h3> Web Developer - Intern</h3>
<h3> Bamsell</h3>
<p> October 2018 - December 2018 </p>
<p> As part of the 6 month full stack web developer bootcamp program i was accepted
on an internship for a startup company that operated within ecommerce where i was
involved in improving and adding features towards the company's ecommerce website.
Using the Symphone Framework and PHPStorm, myself and the senior developer was reponsible
for setting up the website in multi-language format. Using Jquery a show/hide special effect
was implemented within the login area when click on a field it would hide additional ones
that had no relevance. Using some of symfony's built in features ORM, entity manager and
doctrine. I also implemented a way to geenrate a form for visitors to contact the company.
</p>
</article>
<article>
<h3> Web Developer Full Stack Bootcamp Training</h3>
<h3> <a href="https://www.becode.org/"> Becode </a></h3>
<p> April 2017 - October 2017 </p>
<p> A 6 month full stack bootcamp which included an overview of technologies which included
HTML5, CSS3, Bootstrap, Zurb Foundation, Javascript, Jquery, JSON PHP, MySql, Symfony, Ajax, Wordpress,
<abbr title="Object Oriented Programming"> OOP.</abbr> throughout the bootcamp, I was also involved with
external projects that included:
</p>
<ul>
<li> Croix rouge - Assisted with the formatting of their content using Wordpress</li>
<li> Immoweb - lead a team of 3 people where I as also involved in the front-end development using HTML5, CSS3 & Bootstrap.</li>
</ul>
</article>
<article>
<h3> Lights for Rights</h3>
<h3> Web Developer </h3>
<a href="http://salvatoresaia.com/lightsforrights/"> URL</a>
<p> January 2017 </p>
<p> For a non profit organisation whom were promoting a women's rights campaign i helped develop
their online presence. HTML5 & CSS3, Bootstrap for the responsive, content upload on their webhost
and google webmaster technologies to crawl their content for Google to index for the entire world to see.
</p>
</article>
<article>
<h3> Transcyber Innovation </h3>
<h3> Web Developer </h3>
<a href="http://salvatoresaia.com/transcyber/"> URL</a>
<p> September 2016 - November 2016 </p>
<p> For a startup company that operates within cybersecurity specialising in mobile application security. The website was built using HTML5, CSS3, Bootstrap and Javascript for the scrollspy effect.
Google Webmaster tools for the indexing of content.
</p>
</article>
<article>
<h3> Transcyber Innovation </h3>
<h3> Web Developer </h3>
<a href="http://salvatoresaia.com/transcyber/"> URL</a>
<p> September 2016 - November 2016 </p>
<p> For a startup company that operates within cybersecurity specialising in mobile application security.
The website was built using HTML5, CSS3, Bootstrap and Javascript for the scrollspy effect. Google
Webmaster tools for the indexing of content.
</p>
</article>
<article>
<h3> SP Beattie Podiatry </h3>
<h3> Web Developer </h3>
<a href="http://salvatoresaia.com/sbeattie-podiatry-bootstrap/"> URL</a>
<p> January 2016 - August 2016 </p>
<p> For a small organisation operating within the health sector, website was built using
HTML5, CSS3 and Bootstrap, the carousel component was used for the sliding images.
Google webmaster tools was used to index the website content, some SEO as implemented
using Google Keyword Planner.
</p>
</article>
</section>
<section>
<h2> Education </h2>
<article>
<h3> KCT Computer Training - Bourneville, Birmingham (UK) </h3>
<p> City & Guilds - Information Technology </p>
<p> 2001 </p>
</article>
<article>
<h3> <a href="https://www.sandwell.ac.uk/higher-education/?ak_ct_rd=false&ak_ct_sid=15QEhAJUs&creativeid=309817602227&campaign_id=1622947833"> Sandwell College - Smethwick (UK) </a></h3>
<p> <abbr title="Higher National Certificate"> HNC </abbr> - PC Maintenance </p>
<p> 2000 - 2001 </p>
</article>
<article>
<h3> <a href="https://www.sandwell.ac.uk/higher-education/?ak_ct_rd=false&ak_ct_sid=15QEhAJUs&creativeid=309817602227&campaign_id=1622947833"> Sandwell College - Wednesbury (UK) </a></h3>
<p> <abbr title="Higher National Diploma"> HND </abbr> - Business & Finance </p>
<p> September 1997 - June 1999 </p>
</article>
<article>
<h3> <a href="http://www.bmilner.dudley.sch.uk/"> Bishop Milner College - Dudley (UK) </a></h3>
<p> <abbr title="General National Vocational Qualification"> GNVQ </abbr> - Business Intermediate </p>
<p> A Level French </p>
<p> September 1994 - June 1997 </p>
</article>
</section>
<section>
<h2> Professional Training </h2>
<article>
<h3> Fujitsu Belgium </h3>
<a href="https://www.axelos.com/certifications/itil-certifications/itil-foundation-level">ITILv3 </a>
<p> 2018 </p>
</article>
<article>
<h3> <a href="http://www.evoliris.be/"> Evoliris </a> </h3>
<p> Introduction to Javascript, Jquery & Ajax </p>
<p> 2018 </p>
</article>
<article>
<h3> <a href="https://www.udemy.com/"> Udemy </a></h3>
<p> Build real world responsive websites with HTML5 & CSS3 - Jonas Schmedtmann </p>
<p> Bootstrap basics – program responsive websites – Brad Hussey </p>
<p> Custom SEO Strategy: Keyword Research, Audit & Link Building - Christine Maisel </p>
<p> Build an HTML5 Business Web Application – Phil Cowcill </p>
<p> Projects in CSS – Brad Traversy </p>
<p> 1 Hour Javascript - John Bura </p>
<p> 2016 </p>
</article>
<article>
<h3> <a href="https://www.u2u.be/"> U2U </a> Zelik, Belgium </h3>
<p> Programming with HTML5, CSS3, Javascript & AJAX </p>
<p> 2015 </p>
</article>
</section>
<section>
<h2> Skills </h2>
<img src="resources/img/html5.svg" alt="HTML5"/>
<img src="resources/img/css3.svg" alt="CSS3"/>
<img src="resources/img/bootstrap.svg" alt="Bootstrap"/>
</section>
<section>
<h2> Portfolio </h2>
</section>
<section>
<h2> Interests </h2>
<i class="fas fa-dumbbell"></i>
<i class="fas fa-plane-departure"></i>
<i class="fas fa-camera"></i>
</section>
</main>
</div> <!--container END-->
html {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 75%;
}
body {
font-family: 'Karla', sans-serif;
background-color: #fffcef;
}
h3 {
font-size: 1.3em;
}
p {
font-size: 1.2em;
}
ul {
list-style: none;
}
/TEMP MARKERS/
.navigation {
outline: 1px solid black;
}
/*#ff9eff - for sections alterate with #fffcef; */
.container {
max-width: 70%;
margin: 0 auto;
display: flex;
flex-direction: column;
text-align: center;
}
.header-items {
font-size: 200%;
}
.fa-linkedin-in,
.fa-twitter,
.fa-github {
margin-right: 0.5em;
transition: color2s,font-size 2s;
}
.fa-linkedin-in:hover,
.fa-twitter:hover,
.fa-github:hover {
color: #666;
font-size: 200%;
}
.header-primaryHeading {
font-size: 3em;
}
.header-image {
border-radius: 1.5%;
box-shadow: 1px 1px 1px #adaa9a;
}
.header-image,
.header-primaryHeading,
.header-phone,
.header-email {
margin-top: 1em;
}
.header-phone {
margin-right: 9em;
}
.header-email {
display: inline-block;
width: 13em;
padding: 0.5em 0;
margin-right: 7em;
background: #E8E0AF;
}
.header-about {
flex-basis: 60em;
margin: 1em auto 0 auto;
}
.navigation {
position: fixed;
left: 0;
top: 0;
height: 100%;
background: #E8E0AF;
}