├── README.md
├── main.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # hello-world
2 | My first repository 
3 | git is a little simplier than I thought. I'm sure there's a big learning curve, but it's not intimidating. 
4 | 


--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
  1 | @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);
  2 | 
  3 | body{
  4 |   background-color: #eff0ee;
  5 | }
  6 | 
  7 | p{
  8 | 	color: #737373;
  9 | 	line-height: 150%;
 10 | 	padding-left: 25px;
 11 | }
 12 | 
 13 | h1{
 14 | 	font-family: 'Roboto Condensed', sans-serif;
 15 | 	padding-left: 50px;
 16 | }
 17 | 
 18 | h4{
 19 | 	padding-left: 25px;
 20 | }
 21 | 
 22 | h3{
 23 | 	padding-left: 25px;
 24 | 	margin-top: -5px;
 25 | }
 26 | 
 27 | a{
 28 | 	color: #737373;
 29 | 	text-decoration: none;
 30 | }
 31 | 
 32 | strong{
 33 | 	color: black;
 34 | }
 35 | 
 36 | .pngImages{
 37 | 	padding-right: 20px;
 38 | 	width: 20px;
 39 | }
 40 | .flex-container{
 41 | 	box-sizing: border-box;
 42 |    -webkit-display: flex;
 43 |    -moz-display: flex;
 44 |    -o-display: flex;
 45 |    display: flex;
 46 |    -webkit-flex-wrap: wrap;
 47 |    -moz-flex-wrap: wrap;
 48 |    -o-flex-wrap: wrap;
 49 |    flex-wrap: wrap;
 50 |    margin: 0 auto;
 51 |    width: 959px;
 52 | }
 53 | 
 54 | .flex-item{
 55 | 	background-color: white;
 56 | 	
 57 | 	border-radius: 10px;
 58 | 	box-sizing: border-box;
 59 | 	height: 313px;
 60 | 	width: 313px;
 61 | }
 62 | 
 63 | .name{
 64 | 	margin-right: 10px;
 65 | 	margin-bottom: 10px;
 66 | }
 67 | 
 68 | .name h1{
 69 |    font-size: 3em;
 70 |    padding-right: 50px;
 71 |    text-align: center;
 72 | }
 73 | 
 74 | .name p{
 75 | 	font-size: 1.5em;
 76 | 	text-align: center;
 77 | }
 78 | .personalDetails{
 79 | 	margin-right: 10px;
 80 | }
 81 | 
 82 | .getInTouch{
 83 | 
 84 | }
 85 | 
 86 | .education{
 87 | 	margin-right: 10px;
 88 | 	margin-bottom: 10px;
 89 | }
 90 | 
 91 | .moveUp{
 92 | 	margin-top: -20px;
 93 | }
 94 | 
 95 | .extraSpace{
 96 | 	height: 100px;
 97 | 	overflow-y: scroll;
 98 | }
 99 | 
100 | .employmentHistory{
101 | 	margin-right: 10px;
102 | }
103 | 
104 | .employmentHistory h1{
105 | 	margin-left: -10px;
106 | }
107 | 
108 | .employmentContinued{
109 | 
110 | }
111 | 
112 | .profesionalSkills{
113 | 	margin-right: 10px;
114 | 	margin-bottom: 10px;
115 | }
116 | 
117 | .personalSkills{
118 | 	margin-right: 10px;
119 | }
120 | 
121 | .portfolio{
122 | 
123 | }
124 | 
125 | .emailMe{
126 |    background-color: #eff0ee;
127 |    width: 313px;
128 | }
129 | 
130 | .emailMe input[type=text]{
131 | 	padding: 5px 10px 5px 10px;
132 | 	width: 200px;
133 | }
134 | 
135 | .emailMe textarea{
136 | 	padding: 5px 10px 5px 10px;
137 | 	margin-bottom: -20px;
138 | 	width: 200px;
139 | }
140 | 
141 | .emailMe input[type=submit]{
142 |   padding: 5px 10px 5px 10px;
143 |   width: 70px;
144 | }
145 |  
146 | input[type=submit]:hover{
147 | 	
148 | } 
149 | 
150 | form{
151 | 	margin-top: -10px;
152 | }
153 | 
154 | .authorImg{
155 | 	border: 3px solid white;
156 | 	position: relative;
157 |     margin: 0;
158 | 	height: 90px;
159 | 	top: -1060px;
160 | 	left: -10px;
161 | 	width: 90px;
162 | }
163 | 
164 | .socialMedia{
165 |   position: relative;
166 |   left: -5px;
167 |   top: -1040px;
168 | }
169 | 
170 | .socialList{
171 | 	list-style: none;
172 | 	padding: 0;
173 | 	margin: 0;
174 | }
175 | 
176 | .socialList img{
177 | 	height: 32px;
178 | 	width: 32px;
179 | }
180 | 
181 | span{
182 |  display: none;
183 | }
184 | 
185 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="author" content="Viardiny Mathieu">
 6 |     <meta name="keywords" content="Resume, Html, CSS">
 7 |     <meta name="description" content="A flexbox webpage of my resume">
 8 |     <link rel="stylesheet" type="text/css" href="main.css">
 9 | 	<title>Viardiny Mathieu Resume</title>
10 | </head>
11 | <body>
12 |   <div class="flex-container">
13 |     <div class="flex-item name">
14 |       <h1>Viardiny Mathieu</h1>
15 |       <p>Junior Web Developer.</p>
16 |     </div>	
17 |     <div class="flex-item personalDetails">
18 |       <h1>Personal Details</h1>
19 |       <p><strong>Location:</strong> Boston</p>
20 |       <p><strong>Birthday:</strong> 17 November 1988 (27)</p>
21 |       <p><strong>Education:</strong> Law and Psychology at Regis College</p>
22 |       <p><strong>Experience:</strong> 1 Year</p>
23 |       <p><strong>Availibility</strong> Full Time</p>
24 |     </div>
25 |     <div class="flex-item getInTouch">
26 |       <h1>Get in Touch</h1>
27 |       <p><img class="pngImages" src="images/phone.png"><strong>Phone:</strong> <a href="tel:617-272-0870">617-272-0870</a></p>
28 |       <p><img src="images/email.png" class="pngImages"><strong>Email:</strong> <a href="mailto:viardiny89@yahoo.com">viardiny89@yahoo.com</a></p>
29 |       <p><img src="images/webpage.png" class="pngImages"><strong>Website:</strong> <a href="#">Viardiny's Homepage</a></p>
30 |       <p><img src="images/facebook1.png" class="pngImages"><strong>Facebook:</strong> <a href="facebook.com">Facebook.com</a></p>
31 |     </div>	
32 |     <div class="flex-item education">
33 |       <h1>Education</h1>
34 |       <h4>College</h4>
35 |       <p class="moveUp">Graduate Regis College 2011. Double majored in Law and Government and Psychology.</p>
36 |       <h4>Self Education</h4>
37 |       <p class="moveUp extraSpace">Started early 2015. I studied from varies sources which included: Google, Youtube, Team Tree House, Lynda, Code Academy, Code School, Code Avengers, Front End  Masters, W3Schools, and a few other sources.</p>
38 |     </div>
39 |     <div class="flex-item employmentHistory">
40 |       <h1>Employment History</h1>	
41 |       <h4>Td Garden 2006-Present</h4>
42 |       <p class="moveUp">Lorem ipsum dolor sit amet, quo appareat lobortis laboramus at. No amet aliquando est, est ut ullum dolorum, velit interpretaris</p>
43 |       <h4>Hertz 2012-2013</h4>
44 |       <p class="moveUp">Lorem ipsum dolor sit amet, quo appareat lobortis laboramus at. No amet aliquando est, est ut ullum dolorum </p>
45 |     </div>	
46 |     <div class="flex-item employmentContinued">
47 |       <h4>Data Entry 2013-2014</h4>
48 |       <p>Lorem ipsum dolor sit amet, quo appareat lobortis laboramus at. No amet aliquando est, est ut ullum dolorum, velit interpretaris in nec. Est et sumo deseruisse suscipiantur, pro ex corpora euripidis. </p>
49 |     </div>
50 |     <div class="flex-item profesionalSkills">
51 |       <h1>Profesional Skills</h1>
52 |       <h3>Html 5</h3>
53 |       <h3>Css 3</h3>
54 |       <h3>JavaScript</h3>
55 |       <h3>JQuery</h3>
56 |       <h3>Angurla Js</h3>
57 |       <h3>Web Design</h3>
58 |     </div>	
59 |     <div class="flex-item personalSkills">
60 |       <h1>Personal Skills</h1>	
61 |       <h3>Organized</h3>
62 |       <h3>Creativity</h3>
63 |       <h3>Communication</h3>
64 |       <h3>Teamwork</h3>
65 |       <h3>Adaptive</h3>
66 |       <h3>Dedicated</h3>
67 |     </div>
68 |     <div class="flex-item portfolio">
69 |       <h1>Portfolio</h1>	
70 |     </div>	
71 |     <div class="flex-item emailMe">
72 |       <h1>Email Me</h1>
73 |       <form>
74 |         <p><input type="text" name="name" placeholder="Name"></p>	
75 |         <p><input type="text" name="email" placeholder="Email"></p>
76 |         <p><input type="text" name="phone" placeholder="Phone"></p>
77 |         <p><textarea name="message" placeholder="Comment" rows="5"></textarea></p>
78 |         <p><input type="submit" value="send"></p>
79 |       </form>
80 |     </div>
81 |   </div>
82 |   <div class="sidebar">
83 |     <img src="images/aboutme.jpg" class="authorImg" alt="Picture of me" title="Picture of the author">	
84 |   </div>
85 |   <div class="socialMedia">
86 |     <ul class="socialList">
87 |       <li class="facebook"><a href="#"><img src="images/faceb.png"><span>FaceBook</span></a></li>	
88 |       <li class="git"><a href="#"><img src="images/git.png"><span>Github</span></a></li>
89 |       <li class="linkedIn"><a href="#"><img src="images/link.png"><span>linkedin</span></a></li>
90 |       <li class="twitter"><a href="#"><img src="images/twitter.png"><span>Twitter</span></a></li>
91 |     </ul>  	
92 |   </div>
93 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
94 | 
95 |   <script type="text/javascript" src="main.js"></script>
96 | </body>
97 | </html>


--------------------------------------------------------------------------------