Skip to content

Instantly share code, notes, and snippets.

@vsanrocha

vsanrocha/index.html

Created December 6, 2017 17:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vsanrocha/02ad1ad6c4482d052b00a7f470221c38 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vsanrocha/02ad1ad6c4482d052b00a7f470221c38 to your computer and use it in GitHub Desktop.
Download ZIP
My portifolio
Raw
index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>My portifolio</title>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="opacity:0.5;">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#" >Website Name</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#aboutme">Sobre</a></li>
<li class="nav-item"><a class="nav-link" href="#imagesportifolio">Portifolio</a></li>
<li class="nav-item"><a class="nav-link" href="#technology">Tecnologias</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contato</a></li>
</ul>
</nav>
</div>
<div id="particles-js"></div>
<div class="container-fluid container-flex">
<div>
<div>
<h1 style="padding-right:150px;">function name() {</h1>
</div>
<div>
<h1 style="padding-left:150px;">return: Vinicius Rocha;</h1>
</div>
<div>
<h1 style="padding-right:430px;">}</h1>
</div>
</div>
</div>
<div class="container-aboutme background-color" id="aboutme">
<div class="container-flex box-aboutme-title">
<h1>Sobre</h1>
</div>
<div class="box-aboutme-picture container-flex">
<div class="img-responsive">
<img class="profile-picture" src="https://farm5.staticflickr.com/4563/24617753418_a47b4bd5a9_h.jpg" alt="profile vinicius rocha">
</div>
</div>
<div class="box-aboutme-text container-flex">
<p class="profile-text">Apaixonado por tecnologia, autodidata e empreendedor por natureza, graduado em Processos Gerencias, mas no momento em busca de um novo caminho, aventurando na busca por conhecimento em Dev.</p>
</div>
</div>
<div class="container-portifolio container-background" id="imagesportifolio">
<div class="container-flex box-backgound-image-title">
<h1>Portifolio</h1>
</div>
<div class="container-portifolio-content">
<div class="box-portifolio-placeholder-one">
<div class="image-container">
<img src="https://farm5.staticflickr.com/4551/26859741419_0bb146b9f9_m.jpg" />
<div class="after"><a href="https://github.com/vsanrocha/Miwok-Starter-code" target="_blank">Aplicativo android</a></div>
</div>
</div>
<div class="box-portifolio-placeholder-two">
<div class="image-container">
<img src="https://farm5.staticflickr.com/4572/26859744019_a5866d0f3d_o.png" />
<div class="after">
<a href="https://codepen.io/vsanrocha/pen/RjgaeR" target="_blank">Tributo a Desmond Doss</a>
</div>
</div>
</div>
<div class="box-portifolio-placeholder-three">
<div class="image-container">
<img src="https://farm5.staticflickr.com/4572/26859744019_a5866d0f3d_o.png" />
<div class="after">
<a href="https://codepen.io/vsanrocha/pen/RjgaeR" target="_blank">Tributo a Desmond Doss</a>
</div>
</div>
</div>
<div class="box-portifolio-placeholder-four">
<div class="image-container">
<img src="https://farm5.staticflickr.com/4572/26859744019_a5866d0f3d_o.png" />
<div class="after">
<a href="https://codepen.io/vsanrocha/pen/RjgaeR" target="_blank">Tributo a Desmond Doss</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-technology" id="technology">
<div class="container-flex box-technology-title">
<h1>Tecnologias</h1>
</div>
<div class="box-technology-content">
<div class="icons">
<div class="icons-technology">
<img src="https://image.flaticon.com/icons/svg/174/174836.svg" alt="android icon" title="Android"/>
<p class="icons-technology-text">Básico</p>
</div>
<div class="icons-technology">
<img src="https://image.flaticon.com/icons/svg/226/226777.svg" alt="Java icon" title="Java"/>
<p>Básico</p>
</div>
<div class="icons-technology">
<img src="https://image.flaticon.com/icons/svg/174/174854.svg" alt="Html5 icon" title="HTML 5"/>
<p>Básico</p>
</div>
<div class="icons-technology">
<img src="https://cdn4.iconfinder.com/data/icons/scripting-and-programming-languages/512/js-512.png" alt="Javascript icon" title="JavaScript"/>
<p>Básico</p>
</div>
<div class="icons-technology">
<img src="https://icon-icons.com/icons2/93/PNG/256/configure_database_16704.png" alt="SQL icon" title="SQL"/>
<p>Básico</p>
</div>
</div>
</div>
</div>
<div class="container-contact container-background" id="contact">
<div class="box-contact-title container-flex">
<h1 class="text-center">Contato</h1>
</div>
<div class="box-content">
<div class="box-content-technology">
<div class="box-contact-email">
<div class="sub-box-contact-email">
<h4>vsanrocha@gmail.com</h4>
</div>
</div>
<div class="box-contact-rede">
<div class="sub-box-contact-email">
<div class="box-contact-img">
<a href="https://github.com/vsanrocha" target="_blank"><img src="https://image.flaticon.com/icons/svg/25/25657.svg" /></a>
</div>
<div class="box-contact-img">
<a href="https://www.linkedin.com/in/vsanrocha/" target="_blank"><img src="https://image.flaticon.com/icons/svg/174/174857.svg" /></a>
</div>
<div class="box-contact-img">
<a href="https://codepen.io/vsanrocha" target="_blank"><img src="https://image.flaticon.com/icons/svg/51/51767.svg" /></a>
</div>
<div class="box-contact-img">
<a href="https://www.facebook.com/vsrocha89" target="_blank"><img src="https://image.flaticon.com/icons/svg/174/174848.svg" /></a>
</div>
<div class="box-contact-img">
<a href="https://api.whatsapp.com/send?phone=5531985669886&text=Ol%C3%A1!" target="_blank"><img src="https://image.flaticon.com/icons/svg/134/134937.svg" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="container-footer">
<p>Vinicius Rocha © 2017. All Rights Reversed</p>
</footer>
</body>
Raw
script.js
/* ---- particles.js config ---- */
particlesJS("particles-js", {
"particles": {
"number": {
"value": 50,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
/* ---- stats.js config ---- */
Raw
scripts
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
Raw
style.css
html{
height: 100%;
}
body {
margin: 0;
font:normal 75% Arial, Helvetica, sans-serif;
font-family: Verdana, Tahoma, Arial;
padding:0;
height:100%;
}
canvas {
display: block;
vertical-align: bottom;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color:;
background-image: url("https://farm5.staticflickr.com/4581/26713101369_898ae76bfc_k.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
background-attachment: fixed;
}
.particle, .particle > canvas {
z-index: 1 !important;
}
#stats,
.count-particles{
-webkit-user-select: none;
}
#stats{
border-radius: 3px 3px 0 0;
overflow: hidden;
}
* {
list-style:none;
padding:0px;
margin:0px;
z-index: 2;
}
.container-flex {
min-height: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
flex-flow: row;
color: #fff;
}
.container-fluid {
width: 100%;
height: 100%;
}
.container-background {
position: relative;
background-image: url("https://farm5.staticflickr.com/4581/26713101369_898ae76bfc_k.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
/** Container aboutme **/
.container-aboutme {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 15% 75%;
width: 100%;
height: 100%;
background-color: #912F40;
position: relative;
}
.background-color {
background-color: #912F40;
}
.box-aboutme-title {
grid-area: 1 / 1 / 2 / 3;
background-color: #5B2333;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.box-aboutme-picture {
grid-area: 2 / 1 / 3 / 2;
padding-left: 60px;
}
.box-aboutme-text {
grid-area: 2 / 2 / 3 / 3;
padding-right: 200px;
}
.profile-picture {
max-width: 300px;
width: auto;
height: auto;
}
.profile-text {
max-width: 100%;
padding: 0 15%;
text-align: center;
font-size: 1.2em;
}
/** Container Portifolio **/
.container-portifolio {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 15% 75%;
width: 100%;
height: 100%;
}
.container-portifolio-content {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 50% 50%;
width: 100%;
height: 100%;
grid-gap: 15px;
}
.container-portifolio-content img {
width: auto;
height: 100%;
overflow: hidden;
display: table;
margin-left: auto;
margin-right: auto;
}
.box-portifolio-content {
grid-area: 2 / 1 / 3 / 5;
}
.box-portifolio-title {
grid-area: 1 / 1 / 2 / 5;
}
.box-portifolio-images-dimensions {
width: 100%;
height: 100%;
}
.box-portifolio-placeholder-one {
grid-area: 1 / 2 / 2 / 3;
width: auto;
height: auto;
overflow: hidden;
position: relative;
}
.box-portifolio-placeholder-two {
grid-area: 1 / 3 / 2 / 4;
width: auto;
height: auto;
overflow: hidden;
}
.box-portifolio-placeholder-three {
grid-area: 2 / 2 / 3 / 3;
width: auto;
height: 100%;
overflow: hidden;
}
.box-portifolio-placeholder-four {
grid-area: 2 / 3 / 3 / 4;
wwidth: auto;
height: 100%;
overflow: hidden;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
color: white !important;
font-size: 20px;
}
a.container-portifolio:link, a:visited, a:active {
text-decoration: none;
color: white !important;
}
a.container-portifolio:hover {
text-decoration: underline;
color: white !important;
}
@media screen and (max-width: 600px) {
.container-aboutme {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 15% 40% 35%;
width: 100%;
height: 100%;
}
.box-aboutme-picture {
grid-area: 2 / 1 / 3 / 2;
}
.box-aboutme-text {
grid-area: 3 / 1 / 4 / 2;
}
.container-portifolio-content {
grid-template-columns: 100%;
grid-template-rows: 25% 25% 25% 25%;
}
.box-portifolio-placeholder-one {
grid-area: 1 / 1 / 2 / 2;
}
.box-portifolio-placeholder-two {
grid-area: 2 / 1 / 3 / 2;
}
.box-portifolio-placeholder-three {
grid-area: 3 / 1 / 4 / 2;
}
.box-portifolio-placeholder-four {
grid-area: 4 / 1 / 5 / 2;
}
}
/** Container Technology **/
.container-technology {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 15% 75%;
width: 100%;
height: 100%;
text-align: center;
position: relative;
background-color: #912F40;
}
.box-technology-title {
grid-area: 1 / 1 / 2 / 3;
background-color: #5B2333;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
.box-technology-content {
grid-area: 2 / 1 / 3 / 3;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
margin-top: 2.5em;
padding: 2.5em;
line-height: 1.875em;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 15%;
transform: translateY(-50%);
}
.icons{
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s;
width: 100%;
height: 100%;
}
.icons-technology {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.9em;
margin-right: 50px;
color: transparent;
}
.icons-technology:hover {
animation-duration: 1s;
color: #000;
}
.icons-technology img {
width: auto;
height: 130px;
}
.icons-technology p {
margin-top: 0.9em;
font-size: 1.2em;
}
/** Container Contact **/
.container-contact {
display: grid;
grid-template-rows: 20% 80%;
width: 100%;
height: 300px;
}
.box-contact-title {
grid-area: 1 / 1 / 2 / 3;
}
.box-content {
grid-area: 2 / 1 / 3 / 3;
}
.box-content-technology {
display: grid;
grid-template-columns: 50% 50%;
height:100%;
}
.box-contact-email {
grid-area: 1 / 1 / 2 / 2;
}
.sub-box-contact-email {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
color: #fff;
height: 100%;
}
.box-contact-rede {
grid-area: 1 / 2 / 2 / 3;
height: 100%;
}
.box-contact-img {
padding: 0 10px;
}
.container-contact img {
width: auto;
height: 50px;
}
.container-footer {
background-color: #5B2333;
height: 50px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
::-webkit-scrollbar {
width: 4px;
background-color: #b30086;
}
::-webkit-scrollbar-thumb {
background-color: #00bcd4;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment