├── favicon.ico
├── img
    ├── dublin.jpg
    ├── profiler.png
    ├── linkedin-logo.png
    ├── projects
    │   ├── Slack.png
    │   ├── jobbie1.png
    │   ├── mydeliverypal.png
    │   └── vistoryscreen1.png
    └── techlogos
    │   ├── java.png
    │   ├── android.png
    │   ├── firebase.png
    │   └── androidstudio.png
├── readme.md
├── css
    └── styles.css
└── index.html


/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/favicon.ico


--------------------------------------------------------------------------------
/img/dublin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/dublin.jpg


--------------------------------------------------------------------------------
/img/profiler.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/profiler.png


--------------------------------------------------------------------------------
/img/linkedin-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/linkedin-logo.png


--------------------------------------------------------------------------------
/img/projects/Slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/projects/Slack.png


--------------------------------------------------------------------------------
/img/techlogos/java.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/techlogos/java.png


--------------------------------------------------------------------------------
/img/projects/jobbie1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/projects/jobbie1.png


--------------------------------------------------------------------------------
/img/techlogos/android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/techlogos/android.png


--------------------------------------------------------------------------------
/img/techlogos/firebase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/techlogos/firebase.png


--------------------------------------------------------------------------------
/img/projects/mydeliverypal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/projects/mydeliverypal.png


--------------------------------------------------------------------------------
/img/projects/vistoryscreen1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/projects/vistoryscreen1.png


--------------------------------------------------------------------------------
/img/techlogos/androidstudio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chippd/modern/HEAD/img/techlogos/androidstudio.png


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | <h1>"Modern" portfolio page</h1>
2 | 
3 | <p><a href="https://chippd.github.io/modern/">View demo here</a></p>
4 | 


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | 
  2 | h1, h2, h3, h4, h5{
  3 | 	color:#4A4E69;
  4 | 	font-weight: 300;
  5 | 	font-family: 'Open Sans', sans-serif;
  6 | }
  7 | 
  8 | p {
  9 | 	color: #4A4E69;
 10 | 	font-weight: 300;
 11 | 	font-family: 'Open Sans', sans-serif;
 12 | }
 13 | 
 14 | section {
 15 | 	width:100%;
 16 |   margin: 40px 0;
 17 | 	padding: 0 5%;
 18 | }
 19 | 
 20 | .section-heading {
 21 | 	text-transform: uppercase;
 22 |   font-size: 1.6em;
 23 | }
 24 | 
 25 | hr {
 26 | 	max-width:300px;
 27 | }
 28 | 
 29 | 
 30 | .navbar.navbar-default {
 31 | 	background: none;
 32 | 	border: none; 
 33 |   z-index: 1;
 34 | }
 35 | 
 36 | 
 37 | .navbar-default .navbar-text {
 38 | 	color:white;
 39 | }
 40 | 
 41 | 
 42 | .row-header {
 43 |   padding: 10vh 10vw 0 10vw;
 44 |   background-image: url('../img/dublin.jpg');
 45 |   background-repeat: no-repeat;
 46 |   background-position: bottom;
 47 |   background-size: cover;
 48 |   margin-bottom:100px;
 49 |   display: flex;
 50 |   align-items: center
 51 | }
 52 | 
 53 | .header-col {
 54 | 	position: relative;
 55 |   background: rgb(255, 255, 255);
 56 |   border-radius: 5px;
 57 |   box-shadow: 0 1px 10px 3px rgba(0, 0, 0, 0.18);
 58 |   bottom: -60px;
 59 |   padding: 30px 0;
 60 |   max-width:400px;
 61 |   margin:auto;
 62 | }
 63 | 
 64 | .profile-pic {
 65 | 	border-radius:50%;
 66 | 	width:40%;
 67 | 	max-width: 200px;
 68 | }
 69 | 
 70 | .header-col h2 {
 71 | 	font-size: 1.3em;
 72 |   margin-bottom: 20px;
 73 |   margin-top: 0;
 74 | }
 75 | 
 76 | .email {
 77 |   margin-top:20px;
 78 | }
 79 | 
 80 | .email .glyphicon {
 81 | 	margin-right:5px;
 82 | }
 83 | 
 84 | 
 85 | .project-img-col img {
 86 | 	max-width: 250px;
 87 |   margin: auto;
 88 | }
 89 | 
 90 | 
 91 | .list-container {
 92 |   max-width: 600px;
 93 |   margin: auto;
 94 | }
 95 | 
 96 | .techlogo {
 97 | 	width:140px;
 98 | }
 99 | 
100 | .tech-item {
101 | 	margin:10px;
102 |   display: inline-flex;
103 |   align-items: center;
104 |   flex-direction: column;
105 | }
106 | 
107 | .tech-item-text {
108 | 	margin-top:10px;
109 | }
110 | 
111 | .tech-item i {
112 | 	font-size:5em;
113 | }
114 | 
115 | .tech-tool-item {
116 | 	margin-left:15px;
117 |   display: inline-block;;
118 | }
119 | 
120 | .row-footer {
121 | 	padding: 0vh 10vw 10vw 10vw;
122 | 	margin-top:100px;
123 | 	background-image: url('../img/dublin.jpg');
124 |   background-position: bottom;
125 |   background-repeat: no-repeat;
126 |   background-size: cover;
127 |   position: relative;
128 | }
129 | 
130 | .footer-col {
131 | 	position: relative;
132 |   background: rgb(255, 255, 255);
133 |   border-radius: 5px;
134 |   box-shadow: 0 1px 10px 3px rgba(0, 0, 0, 0.18);
135 |   top: -60px;
136 |   padding: 50px 0;
137 |   max-width:400px;
138 |   margin:auto;
139 | }
140 | 
141 | .btn.outline {
142 | 	background: none;
143 | 	padding: 12px 22px;
144 | }
145 | 
146 | .btn-primary.outline {
147 | 	border: 2px solid #0099cc;
148 | 	color: #0099cc;
149 | 	border:0;
150 | }
151 | 
152 | .linkedin-btn {
153 | 	background-color: white;
154 | 	width:140px;
155 | 	box-shadow: 0px 2px 5px 1px lightgrey;
156 | 	padding: 12px;
157 | 	border-radius: 5px;
158 | }
159 | 
160 | .btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
161 | 	color: #33a6cc;
162 | 	border-color: #33a6cc;
163 | }
164 | .btn-primary.outline:active, .btn-primary.outline.active {
165 | 	border-color: #007299;
166 | 	color: #007299;
167 | 	box-shadow: none;
168 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 | 
  8 |     <title>Chris Dermody</title>
  9 | 
 10 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 11 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
 12 | 
 13 |     <!-- Google Fonts -->
 14 |     <!-- <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Open+Sans:300,400" rel="stylesheet"> -->
 15 |     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
 16 | 
 17 |     <link rel="stylesheet" href="https://cdn.rawgit.com/konpa/devicon/4f6a4b08efdad6bb29f9cc801f5c07e263b39907/devicon.min.css">
 18 | 
 19 | 
 20 |     <link rel="stylesheet" href="css/styles.css">
 21 | 
 22 |     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 23 |     <!-- Leave those next 4 lines if you care about users using IE8 -->
 24 |     <!--[if lt IE 9]>
 25 |       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 26 |       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 27 |     <![endif]-->
 28 |   </head>
 29 |   <body>
 30 | 
 31 |   <div class="container-fluid">
 32 | 
 33 |     <div class="row text-center row-header">
 34 |       <div class="col-xs-12">
 35 |         <div class="header-col">
 36 |           <img src="img/profiler.png" alt="profile pic" class="img-responsive profile-pic center-block">
 37 |           <h1>Chris Dermody</h1>
 38 |           <h2>Freelance Web Developer</h2>
 39 |           <a href="mailto:email@email.com" class="email"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>email@email.com</a>
 40 |         </div>
 41 |         
 42 |       </div>
 43 |     </div>
 44 | 
 45 | 
 46 |   <!-- Projects -->
 47 |   <section style="margin-top:0">
 48 | 
 49 |     <div class="row">
 50 |       <div class="col xs-12">
 51 |         <h1 class="text-center section-heading">Work</h1>
 52 |       </div>
 53 |     </div>
 54 | 
 55 |     <div class="row">
 56 | 
 57 |       <div class="col-sm-8 col-sm-offset-2">
 58 |         
 59 |         <div class="col-lg-8">
 60 |           <img src="img/projects/jobbie1.png" alt="" class="img-responsive center-block">
 61 |         </div>
 62 | 
 63 |         <div class="col-lg-4">
 64 |           <h3>Jobb.ie</h3>
 65 |           <p>A simple web app built to quickly find jobs in Ireland. Users enter the search term and desired county, and are offered job listings from 3 of the most popular job sites in Ireland</p>
 66 |           <p><a href="http://jobb.ie/">Launch</a></p>
 67 |         </div>
 68 | 
 69 |         <div class="col-xs-12 text-center">
 70 |           <img src="img/techlogos/android.png" alt="android logo" class="techlogo">
 71 |           <img src="img/techlogos/androidstudio.png" alt="firebase logo" class="techlogo">
 72 |           <img src="img/techlogos/java.png" alt="android studio logo" class="techlogo">
 73 |           <img src="img/techlogos/firebase.png" alt="java logo" class="techlogo">
 74 |         </div>
 75 | 
 76 |       </div>
 77 | 
 78 |     </div>
 79 | 
 80 | 
 81 |   </section>
 82 | 
 83 |   <hr>
 84 | 
 85 |   <!-- Technical Experience -->
 86 |   <section>
 87 |     
 88 |     <div class="row">
 89 |       <div class="col xs-12">
 90 |         <h1 class="text-center section-heading">Technologies</h1>
 91 |       </div>
 92 |     </div>
 93 | 
 94 |     <div class="row text-center">
 95 |       <div class="col-xs-12">
 96 |         <div class="list-container">
 97 | <!--             <div class="tech-item">
 98 |               <i class="devicon-heroku-plain-wordmark colored"></i>
 99 |             </div> -->
100 |             <span class="tech-item">
101 |               <i class="devicon-csharp-plain colored"></i>
102 |               <span class="tech-item-text">
103 |                 C#
104 |               </span>
105 |             </span>
106 |             <span class="tech-item">
107 |               <i class="devicon-cplusplus-plain colored"></i>
108 |               <span class="tech-item-text">
109 |                 C++
110 |               </span>
111 |             </span>
112 |             <span class="tech-item">
113 |               <i class="devicon-java-plain colored"></i>
114 |               <span class="tech-item-text">
115 |                 Java
116 |               </span>
117 |             </span>
118 |             <span class="tech-item">
119 |               <i class="devicon-git-plain colored"></i>
120 |               <span class="tech-item-text">
121 |                 Git
122 |               </span>
123 |             </span>
124 |         </div>
125 |       </div>
126 |     </div>
127 | 
128 |   </section>
129 | 
130 |   <hr>
131 | 
132 |   <section>
133 |     <div class="row">
134 |       <div class="col xs-12">
135 |         <h1 class="text-center section-heading">Tools</h1>
136 |       </div>
137 |     </div>
138 | 
139 |     <div class="row text-center">
140 |       <div class="col-xs-12">
141 |         <div class="list-container">
142 |             <span class="tech-tool-item">
143 |               <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
144 |               Android Studio
145 |             </span>
146 |             <span class="tech-tool-item">
147 |               <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
148 |               Microsoft Visual Studios
149 |             </span>
150 |             <span class="tech-tool-item">
151 |               <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
152 |               IntelliJ IDEA
153 |             </span>
154 |             <span class="tech-tool-item">
155 |               <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
156 |               TortoiseGit
157 |             </span>
158 |             <span class="tech-tool-item">
159 |               <span class="glyphicon glyphicon glyphicon-ok" aria-hidden="true"></span>
160 |               FireBase
161 |             </span> 
162 |         </div>
163 |       </div>
164 |     </div>
165 |   </section>
166 | 
167 | 
168 |     
169 |     <div class="row row-footer">
170 |       <div class="col footer-col text-center">
171 |         <h3>I'm available for work</h3>
172 |         <a href="mailto:email@email.com" class="email"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>email@email.com</a>
173 |       </div>
174 |     </div>
175 | 
176 |     </div> <!-- end container -->
177 | 
178 |     <!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
179 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
180 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
181 |   </body>
182 | </html>


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