Skip to content

Instantly share code, notes, and snippets.

@Estebanjgg

Estebanjgg/build-a-personal-portfolio-webpage.markdown

Created May 22, 2022 16:23
Show Gist options
  • Save Estebanjgg/27399157522d3bd9e40df5025863afca to your computer and use it in GitHub Desktop.
Save Estebanjgg/27399157522d3bd9e40df5025863afca to your computer and use it in GitHub Desktop.
Download ZIP
Build a Personal Portfolio Webpage
Raw
index.html
<body>
<ul class="topnav" id="myTopnav"style="z-index:1;">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>
<div class="w3-cell-row">
<div >
<div id="page1">
<a id="about" ></a>
<div>
</div>
</br>
</br>
<div class=" container-fluid bg-1 text-center">
<h3>Who Am I?</h3>
<img class="center-block img-circle img-responsive" src="https://pbs.twimg.com/media/DP1L4-tVoAA-Tih.jpg:large" class="img-circle" alt="Bird" width="200" height="100">
<h3>I'm a programmer</h3>
</div>
<div style="" class="container-fluid bg-2 text-center">
<h3 class="colorti">About</h3>
</br>
<h2 >Student - Web Developer - User Experience Designer - Good Friend</h2>
<p>Front-End Developer and UX/UI designer,with practical experience in project management, branding strategy, and creative direction;devoted to functional programming and information architecture.</p>
</div>
</div>
</div>
<div class="container-fluid bg-4 text-center">
<div class="w3-container" style="margin-left:2%">
<div class="w3-xlarge w3-padding-40">
<div id="page2">
<a id="portfolio"></a>
<h3>Portfolio</h3>
<!-- Flickity HTML init -->
<div class="carousel js-flickity">
<!-- images from unsplash.com -->
<div class="carousel-cell">
<img src="http://www.taranna.com/docs/viajes-tematicos-taranna.jpg" alt="travel" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" alt="contrail" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" alt="golden hour" />
</div>
<div class="carousel-cell">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" alt="flight formation" />
</div>
</div>
</div>
</div>
</div>
</div>
<div style="" class="container-fluid bg-3">
<div class="w3-xlarge w3-padding-40">
<div class="color">
<div id="page3">
<a id="contact"></a>
<div class="container-fluid bg-3 text-center">
<h3 class="colorti">Contact Me</h3></div>
<div><br></br></div>
<div class="row">
<div class="w3-container" style="margin-left:5%;margin-right:5%;">
<div class="w3-xlarge w3-padding-40">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix"> Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="email" class="validate">
<label for="email" >Email</label>
</div>
<div class="input-field col s12">
<i class="material-icons prefix">message</i>
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Message</label>
</div>
<button class="btn waves-effect waves-light tooltipped" data-position="top" data-delay="50" data-tooltip="are you ready for submit?" type="submit" name="action">Submit <i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer class="container-fluid bg-5 text-center">
<div class="w3-xlarge w3-padding-40">
<a href="https://www.facebook.com/pilarmirelesmateo" target="_blank" data-toggle="tooltip" data-placement="bottom" title="facebook"class="w3-text-indigo"><i class="fa fa-facebook-official"></i></a>
<a href="https://es.pinterest.com/pilarmirelesmat/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="pinterest" class="w3-text-red"><i class="fa fa-pinterest-p"></i></a>
<a href="https://twitter.com/pilipink06" target="_blank" data-toggle="tooltip" data-placement="bottom" title="twitter" class="w3-hover-text-light-blue"><i class="fa fa-twitter"></i></a>
<a href="https://do.linkedin.com/in/pilarmireles22" target="_blank" data-toggle="tooltip" data-placement="bottom" title="linkedin" class="w3-text-indigo"><i class="fa fa-linkedin"></i></a>
<a href="https://github.com/pilarmireles22" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Github"><i class="ion-social-github"></i></a>
<a href="https://codepen.io/pilarmireles/" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Codepen"><i class="ion-social-codepen"></i></a>
</div>
<p class="alinear">Cover page by <a href="https://www.facebook.com/pilarmirelesmateo" class="w3-hover-text-green">Pilar Mireles</a></p>
</footer>
</div>
</body>
Raw
script.js
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
/*para el responsive*/
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
/*contact me*/
$(document).ready(function() {
Materialize.updateTextFields();
});
/*portafolio*/
Raw
scripts
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Raw
style.css
body{
background:#333;
}
.container{
background-color:#ef9a9a;
}
.colorti{
color: white;
font-size: 38px;
text-decoration: uppercase;
margin-bottom: 0;
}
h3{
color: white;
font-size: 38px;
text-decoration: uppercase;
margin-bottom: 0;
}
h2{
font-size: 21px;
margin-top: 0;
color: white;
}
p{
font-size: 16px;
color: white;
text-align:justify
}
/*Portafolio*/
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: ;
}
.carousel-cell {
width: 70%;
height: 200px;
/* flex-box, center image in cell */
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.carousel-cell img {
display: block;
max-width: 100%;
max-height: 100%;
/* dim unselected */
opacity: 0.7;
-webkit-transform: scale(0.85);
transform: scale(0.85);
-webkit-filter: blur(5px);
filter: blur(5px);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s, transform 0.3s, -webkit-filter 0.3s, filter 0.3s;
transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
/* brighten selected image */
.carousel-cell.is-selected img {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: none;
filter: none;
}
@media screen and ( min-width: 768px ) {
.carousel-cell {
height: 400px;
}
}
@media screen and ( min-width: 960px ) {
.carousel-cell {
width: 60%;
}
}
/* buttons, no circle */
.flickity-prev-next width: 60px;
height: 60px;
background: transparent;
opacity: 0.6;-button {
}
.flickity-prev-next-button:hover {
background: transparent;
opacity: 1;
}
/* arrow color */
.flickity-prev-next-button .arrow {
fill: white;
}
.flickity-prev-next-button.no-svg {
color: white;
}
/* closer to edge */
.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* hide disabled button */
.flickity-prev-next-button:disabled {
/*te quita la flechita del final*/
display: none;
}
/*Portafolio final*/
.color{
background: ;
}
body {margin:0;}/*para cubrir todo el nav*/
body {
font:14px/2 georgia ,serif;
}
#nav {
max-width:500px;
margin : 1rem auto;
padding : 1rem;
}
ul.topnav{
/*con list-style-type se le quito lo puntos de separacion*/
list-style-type:none;
margin :0;
overflow :hidden;
background-color: black ;
position: fixed;
width: 100%;
top: 0;
padding: .3em;
}
/*para poner el nav de manera vertical*/
ul.topnav li {float:right;}
ul.topnav a{
/*esto sirve para ponerlo dentro de un block*/
display:inline-block;
color: #f2f2f2;
text-align: center;
/*con este padding se separo lo que es las diferentes busquedad */
padding: 14px 16px;
/*con este decoration se le quito la linea de abajo que indica que es un link*/
text-decoration:none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover{background-color:#555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: fixed;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
.style{
margin-top: 20px;
margin-left: 30%;
}
.styleParrafo{
margin-left: 10%;
}
.content div{
float:left;
}
.smaller-image {
width: 200px;
}
.thick-black-border {
border-color: white;
border-width: 5x;
border-style: solid;
border-radius: 20%;
}
.styleTitulo{
margin-top: 20px;
margin-left: 44%;
}
.styleTitulo2{
margin-top: 10px;
margin-left: 25%;
margin-right: 25%;
}
.container{
background-color:white ;
}
.fondo{
/*class="fondo"*/
background-image: url('https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81');
background-repeat: no-repeat;
background-attachment: fixed;
}
/*contact me*/
$('#textarea1').val('New Text');
$('#textarea1').trigger('autoresize');
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
.ion-social-github {
color: white;
}
.ion-social-codepen {
color: white;
}
.bg-1 {
background: url(https://i.pinimg.com/originals/40/37/e9/4037e9c1690db2ae03a3087c73f010df.jpg) center center fixed;
background-color: #1abc9c;
color: white;
}
.bg-2 {
background: url(https://i.pinimg.com/originals/40/37/e9/4037e9c1690db2ae03a3087c73f010df.jpg) center center fixed;
background-color:black;
color: white;
}
.bg-3 {
background: url(https://i.pinimg.com/originals/40/37/e9/4037e9c1690db2ae03a3087c73f010df.jpg) center center fixed;
background-color: black;
color: #555555;
}
.bg-4 {
background: url(https://i.pinimg.com/originals/40/37/e9/4037e9c1690db2ae03a3087c73f010df.jpg) center center fixed;
color: white;
}
.bg-5 {
background-color:Black;
color: #fff;
}
i{
color:white;
}
p{
font-style:italic;
margin-left: 10%;
margin-right: 10%;
}
img{
background-size:cover;
box-shadow:0 2px 3px rgba(0,0,0,0.3);
margin-bottom:3px
}
Raw
styles
<link href="https://npmcdn.com/flickity@2/dist/flickity.css" rel="stylesheet" />
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment