├── images ├── developer.png ├── hardy.png ├── header_bg.png └── icons │ ├── facebook.png │ ├── insta.png │ ├── js.png │ ├── mongo.png │ ├── nodejs.png │ ├── react.png │ └── twitter.png ├── index.html └── styles └── portfolio.css /images/developer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/developer.png -------------------------------------------------------------------------------- /images/hardy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/hardy.png -------------------------------------------------------------------------------- /images/header_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/header_bg.png -------------------------------------------------------------------------------- /images/icons/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/facebook.png -------------------------------------------------------------------------------- /images/icons/insta.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/insta.png -------------------------------------------------------------------------------- /images/icons/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/js.png -------------------------------------------------------------------------------- /images/icons/mongo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/mongo.png -------------------------------------------------------------------------------- /images/icons/nodejs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/nodejs.png -------------------------------------------------------------------------------- /images/icons/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/react.png -------------------------------------------------------------------------------- /images/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/responsive-webdeveloper-portfolio/dada69fe0b48ba761cc9ac0fdad0f50617c19822/images/icons/twitter.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web Developer Portfolio 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 28 | 39 |
40 |
41 |
42 |

About Me

43 |

44 | I, m a designer & developer with a passion for web design. I enjoy developing simple, clean and slick 45 | websites that provide real value to the end user. Thousands of clients have procured exceptional resulfs 46 | while working with me. Delivering work within time and budget which meets clients requirements in our 47 | mata. 48 |

49 |
50 | 51 |
52 |

Name:

53 |

Mary Hardy

54 |
55 |
56 |

Email:

57 |

info@gmail.com

58 |
59 |
60 |

Date of birth:

61 |

11 November 1987

62 |
63 |
64 |

From:

65 |

Los Angeles, USA

66 |
67 |
68 |
69 | 70 | 71 |
72 |

What I do

73 |

74 | I have more than 10 years experience building software for clients all over the world. Below is a quick 75 | overview of my main technical skill sets and technologies i use. Want to find out more about my 76 | experience? Check out my online resume and project portfolio. 77 |

78 |
79 | 80 |
81 | 82 |

Vanilla JavaScript

83 |

List skill/technologies here. You can change the icon above to any of 84 | the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.

85 |
86 |
87 | 88 |

React

89 |

List skill/technologies here. You can change the icon above to any of 90 | the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.

91 |
92 |
93 | 94 |

Node.js

95 |

List skill/technologies here. You can change the icon above to any of 96 | the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.

97 |
98 |
99 | 100 |

MongoDB

101 |

List skill/technologies here. You can change the icon above to any of 102 | the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor.

103 |
104 |
105 |
106 | 107 |
108 |

A summary of My Resume

109 | 110 |
111 | 112 |
113 |

My Education

114 | 115 |
116 |

Master in Computer Engineering

117 |

Harvard University / 2015 - 2017

118 |

List skill/technologies here. You can change the icon above 119 | to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor. 120 |

121 |
122 |
123 |
124 |

Master in Computer Engineering

125 |

Harvard University / 2015 - 2017

126 |

List skill/technologies here. You can change the icon above 127 | to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor. 128 |

129 |
130 |
131 |
132 |

Master in Computer Engineering

133 |

Harvard University / 2015 - 2017

134 |

List skill/technologies here. You can change the icon above 135 | to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor. 136 |

137 |
138 | 139 | 140 |
141 |
142 |

My Experience

143 |
144 |

Master in Computer Engineering

145 |

Harvard University / 2015 - 2017

146 |

List skill/technologies here. You can change the icon above 147 | to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor. 148 |

149 |
150 |
151 |
152 |

Master in Computer Engineering

153 |

Harvard University / 2015 - 2017

154 |

List skill/technologies here. You can change the icon above 155 | to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor. 156 |

157 |
158 |
159 |
160 |

Master in Computer Engineering

161 |

Harvard University / 2015 - 2017

162 |

List skill/technologies here. You can change the icon above 163 | to any of the 1500+ FontAwesome 5 free icons available. Aenean commodo ligula eget dolor. 164 |

165 |
166 |
167 |
168 |
169 | 170 |
171 |
172 |
173 | 174 | 196 | 197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /styles/portfolio.css: -------------------------------------------------------------------------------- 1 | /* common shared styles*/ 2 | body { 3 | font-family: 'Lato', sans-serif; 4 | font-family: 'Open Sans', sans-serif; 5 | } 6 | 7 | .text-primary { 8 | color: #FD6E0A; 9 | } 10 | 11 | .btn-primary { 12 | border-radius: 5px; 13 | background: #FD6E0A; 14 | border: 0; 15 | color: white; 16 | font-size: 20px; 17 | font-weight: 700; 18 | padding: 15px 35px; 19 | } 20 | 21 | .section-title { 22 | color: #181818; 23 | text-align: center; 24 | font-size: 35px; 25 | font-weight: 700; 26 | } 27 | 28 | .section-description { 29 | color: #757575; 30 | text-align: center; 31 | font-size: 18px; 32 | } 33 | 34 | /* nav related styles */ 35 | nav { 36 | display: flex; 37 | justify-content: space-between; 38 | align-items: center; 39 | margin: 0 200px; 40 | } 41 | 42 | .nav-title { 43 | color: #181818; 44 | font-size: 45px; 45 | font-weight: 800; 46 | } 47 | 48 | nav>ul { 49 | display: flex; 50 | align-items: center; 51 | } 52 | 53 | nav li { 54 | list-style: none; 55 | margin-right: 50px; 56 | } 57 | 58 | nav a { 59 | text-decoration: none; 60 | color: #474747; 61 | } 62 | 63 | /* header related styles */ 64 | .header { 65 | background-color: #FFF8F3; 66 | background-image: url('../images/header_bg.png'), url('../images/developer.png'); 67 | background-repeat: no-repeat; 68 | background-position: bottom right, top left; 69 | } 70 | 71 | .banner { 72 | padding: 30px 30px 0px 150px; 73 | display: flex; 74 | align-items: center; 75 | justify-content: space-between; 76 | } 77 | 78 | .banner-content { 79 | max-width: 500px; 80 | } 81 | 82 | .banner .profile-pic { 83 | width: 500px; 84 | } 85 | 86 | .banner-greeting { 87 | font-size: 45px; 88 | color: #474747; 89 | margin-bottom: 0; 90 | } 91 | 92 | .banner-title { 93 | font-size: 85px; 94 | font-weight: 700; 95 | margin-top: 5px; 96 | margin-bottom: 20px; 97 | } 98 | 99 | /* main section styles */ 100 | main { 101 | max-width: 1140px; 102 | margin: 0 auto; 103 | } 104 | 105 | main section { 106 | margin-top: 130px; 107 | } 108 | 109 | /* about section styles */ 110 | .about { 111 | padding: 130px; 112 | border-radius: 10px; 113 | background: #FFF8F3; 114 | margin: 130px 0; 115 | } 116 | 117 | .about-info-container { 118 | display: flex; 119 | justify-content: space-around; 120 | } 121 | 122 | .about-info { 123 | text-align: center; 124 | } 125 | 126 | /* skills related styles */ 127 | 128 | #what-i-do-description { 129 | padding: 30px 150px; 130 | } 131 | 132 | .skills-container { 133 | display: flex; 134 | gap: 24px; 135 | } 136 | 137 | .skill { 138 | padding: 30px; 139 | 140 | border-radius: 5px; 141 | background: #FFF; 142 | box-shadow: 0px 6px 50px 0px rgba(0, 0, 0, 0.06); 143 | } 144 | 145 | .skill-description { 146 | color: #757575; 147 | } 148 | 149 | /* Resume Section styles */ 150 | .resume-column-title { 151 | color: #474747; 152 | font-size: 30px; 153 | font-weight: 700; 154 | } 155 | 156 | .resume-container { 157 | display: flex; 158 | gap: 50px; 159 | } 160 | 161 | .resume-item-title { 162 | color: #474747; 163 | font-size: 25px; 164 | font-weight: 700; 165 | margin-bottom: 10px; 166 | } 167 | 168 | .resume-item-institute { 169 | margin-bottom: 20px; 170 | margin-top: 0px; 171 | } 172 | 173 | .resume-item-institute, 174 | .resume-item-description { 175 | color: #757575; 176 | } 177 | 178 | .resume-container hr { 179 | margin: 30px; 180 | } 181 | 182 | .download-cv { 183 | text-align: center; 184 | margin-top: 50px; 185 | } 186 | 187 | /* footer style */ 188 | footer { 189 | display: flex; 190 | gap: 100px; 191 | background: #FFF8F3; 192 | margin-top: 100px; 193 | padding: 130px 200px; 194 | } 195 | 196 | .footer-column { 197 | width: 50%; 198 | } 199 | 200 | .social-links a { 201 | margin-right: 25px; 202 | } 203 | 204 | .contact input[type="text"], 205 | .contact input[type="email"], 206 | textarea { 207 | display: block; 208 | margin-bottom: 25px; 209 | padding: 18px 35px; 210 | color: #757575; 211 | border-radius: 5px; 212 | background: #FFF; 213 | border: 0; 214 | width: 100%; 215 | } 216 | 217 | /* responsive styles */ 218 | 219 | /* mobile devices */ 220 | .hide { 221 | display: none; 222 | } 223 | 224 | @media screen and (max-width:576px) { 225 | .header{ 226 | background-image: none; 227 | } 228 | 229 | nav, 230 | nav > ul, 231 | .banner, 232 | .skills-container, 233 | .resume-container, 234 | .about-info-container, 235 | footer { 236 | flex-direction: column; 237 | } 238 | 239 | nav > ul { 240 | gap: 10px; 241 | } 242 | 243 | .banner .profile-pic{ 244 | width: 100%; 245 | } 246 | 247 | .banner, 248 | #what-i-do-description { 249 | padding: 20px; 250 | } 251 | 252 | footer, .about { 253 | padding: 10px; 254 | } 255 | 256 | .btn-primary{ 257 | margin-bottom: 15px; 258 | } 259 | 260 | .footer-column { 261 | width: 100%; 262 | } 263 | 264 | .contact input[type="text"], 265 | .contact input[type="email"], 266 | textarea { 267 | width: 80%; 268 | } 269 | } 270 | 271 | @media screen and (min-width:576px) and (max-width:960px) { 272 | footer { 273 | padding: 30px; 274 | } 275 | .btn-primary{ 276 | margin-bottom: 15px; 277 | } 278 | } --------------------------------------------------------------------------------