My Portfolio

Developer
Nathan Torquato Da Silva
Size
5,188 Kb
Views
6,072
  1. My Portfolio Previews
  2. My Portfolio HTML Codes
  3. My Portfolio CSS Codes
  4. My Portfolio JS Codes

How do I make an my portfolio?

What is a my portfolio? How do you make a my portfolio? This script and codes were developed by Nathan Torquato Da Silva on 19 January 2023, Thursday.

My Portfolio Previews
IQ Test

My Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Portfolio</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id = "topMenu" class="nav navbar navbar-fixed-top navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" onclick="myFunction(this)"> <span class="sr-only">Toggle navigation</span> <span id = "bar1" class="icon-bar"></span> <span id = "bar2" class="icon-bar"></span> <span id = "bar3" class="icon-bar"></span> </button><a class="navbar-brand" href="/"><strong><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Torquato N</strong></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact-form">Contact</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid -->
</nav> <!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron text-center"> <div class="container shadow"> <h1>It's Nice To Meet You</h1> <p>Take a look at my portfolio and contact me</p> <hr /> <div class="row"> <a href="https://br.linkedin.com/in/torquato-nathan-806656a8" target = _blank><button class="btn btn-default" href="#" role="button"><i class="fa fa-linkedin-square" aria-hidden="true"></i> LinkedIn</button></a> <a href="https://github.com/TorquatoNathan" target = _blank ><button class="btn btn-default" href="#" role="button"><i class="fa fa-github" aria-hidden="true"></i> Git Hub</button></a> </div> </div>
</div>
<!-- about section -->
<div class="container"> <div class="row" id = "about"> <h1 class = "text-center" >About</h1> <div class="col-lg-6 col-lg-offset-1 col-md-6"> <h4>What's up? I'm Nathan Torquato, a 23 years old brazilian full stack web developer. After working with manufacturing process efficiency as well as continuous improvement for a few years I decided to do something I really enjoy: <strong>Web Development.</strong></h4> <p></p> <h4>Currently, I've been studying at <a href="https://freecodecamp.com" target = _blank >Free Code Camp University</a> and you're Welcome to check out what I've been developing!</h4> </div> <div class="col-lg-4 col-md-8"> <img id = "face" class = "img-responsive center-block" src="https://scontent-gru2-1.xx.fbcdn.net/v/t1.0-9/10520679_713134892068374_4123452392316535285_n.jpg?oh=d9e46aa4c7b38805c06a58829cdec18a&oe=57CEFB63" alt="Nathan" /> </div> </div> <div id = "languages" class="col-xs-8 col-xs-offset-2 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4"> <img class = "img-responsive" src="https://www.seoclerks.com/pics/303921-16BAHd1418475893.jpg" alt="" /> </div>
</div> <!-- about section -->
<!-- portfolio -->
<div id = "portfolio" class="container-fluid text-center"> <h1>Portfolio</h1> <h4><em>This is just the beggining</em></h4> <div id = "projects" class="row text-center"> <!-- cards --> <div class="col-sm-4"> <div class = "card"> <a href="https://codepen.io/TorquatoN/full/OXRzLK/" target= _blank ><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToyJO7LybMD65dY6Nlkd3F2C_vMx9-1Q3v_ADtd8DstHv8TdqZ" alt="Mark Zuckerberg ahead Facebook's logo" style="width:100%"></a> <div class="cardContainer"> <h4><b>Tribute Page</b></h4> <p>Facts About Mark Zuckerberg</p> </div> </div> </div> <div class="col-sm-4"> <div class = "card"> <a href="https://codepen.io/TorquatoN/full/ZOeOvZ/" target= _blank ><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT2FUGXdUc74FEQWtCJzEhp8319ajEZ38EslAN9liKeMZRpE2uU" alt="Double quotes symbol" style="width:100%"></a> <div class="cardContainer"> <h4><b>Random "Quotes"</b></h4> <p>Find your inspiration</p> </div> </div> </div> </div> <!-- cards -->
</div> <!-- portfolio -->
<div id = "last"> <h1 id = "contactMe" class = "text-center" >Contact Me</h1> <form id="contact-form" method="post" action="contact.php" role="form"> <div class="messages"></div> <div class="controls"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_name">Firstname *</label> <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_lastname">Lastname *</label> <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required."> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="form_email">Email *</label> <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required."> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="form_phone">Phone</label> <input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone"> <div class="help-block with-errors"></div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="form-group"> <label for="form_message">Message *</label> <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea> <div class="help-block with-errors"></div> </div> </div> <div class="col-md-12"> <input type="submit" class="btn btn-success btn-send" value="Send message"> </div> </div> <div class="row"> <div class="col-md-12"> <p id = "property" class="text-muted"><strong>*</strong> These fields are required. Contact form template by <a href="http://bootstrapious.com" target="_blank">Bootstrapious</a>.</p> </div> </div> </div> </form>
</div>
<footer class = "text-center"> <p>&copy; 2016 Torquato N</p> <h5 class = "text-center" >Developed by <a href="https://br.linkedin.com/in/torquato-nathan-806656a8" target = _blank> Torquato, Nathan.</a></h5>
</footer> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

My Portfolio - Script Codes CSS Codes

html{	margin: 0 auto;	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.19);
}
#topMenu {	background-color: rgba(250, 250, 250, 0.90);	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#bs-example-navbar-collapse-1 a {	font-size: 16px;
}
#bs-example-navbar-collapse-1 a:hover {	background: #f2f2f2;
}
body{	padding-top: 50px;	font-family: "Source Sans Pro", Sans-serif;
}
.jumbotron{	height: 500px;	background-image: url("http://www.road9media.com/images/blog/coding.jpg");	background-repeat: no-repeat;	background-size: cover;	background-attachment: fixed; background-position: center;	margin-bottom: 0;	padding-top: 0;
}
.jumbotron .container{	width: 800px;	height: 200px;	padding-top: 0%;	position: absolute;	top: 50%;	margin-top: -130px;	left: 50%;	margin-left: -400px;
}
.shadow h1, .shadow p{	color: white;	text-shadow: 1px 1px 1px #000;	margin-top:0;
}
hr{ color: white;	border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}
.jumbotron button{	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.19);
}
#about, #portfolio {	padding: 20px 15px 20px 15px;
}
#face {	border-radius: 50%;	width: 55%;	margin: 0 auto;	padding: 20px 20px 20px 20px;
}
#languages{	margin-bottom: 30px;
}
#portfolio {	background: #f2f2f2;
}
#projects {	width: 75%;	margin: 35px auto;
}
.card { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);	margin-top: 10px;	max-height: 25%; transition: 0.3s;
/* border-radius: 25px; */
}
.card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.cardContainer { background: #FFF;	padding: 2px 16px;
/*	border-radius: 5px 5px 0 0; */
}
#contact-form {	color: white;	max-width: 70%;	margin: 30px auto;	margin-bottom: 0;	padding-bottom: 30px;
/*	background-color: rgba(255, 255, 255, 0.1); */
}
#last{	background-image: url("http://sauer-medientechnik.de/wp-content/uploads/2015/03/beratung_3_small.jpg");	background-repeat: no-repeat;	background-size: cover;	background-attachment: fixed; background-position: center;	margin: 0 auto;
}
#contactMe {	margin-top: 0;	padding-top: 30px;	color: #FFF;
}
#property{	background-color: rgba(255, 255, 255, 0.1);	color: #000;	margin-top: 10px;	text-align: center;
}
footer{	background: #f2f2f2;	height: 100%;	padding: 20px;
}
#about h1{	margin-bottom: 0;
}
#about h4{	margin: 0 auto;	padding-top: 20px;
}
#about h4:nth-of-type(1){	padding-top: 30px;
}
#bar1, #bar2, #bar3{	transition: 0.5s;
}
/* Rotate first bar */
.change #bar1 { -webkit-transform: rotate(-90deg) translate(-5px, 6px) ; transform: rotate(-90deg) translate(-5px, 6px) ;
}
/* Fade out the second bar */
.change #bar2 { -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
/* Rotate last bar */
.change #bar3 { -webkit-transform: rotate(90deg) translate(-7px, 6px) ; transform: rotate(90deg) translate(-7px, 6px) ;
}
.fa-fw {	font-size: 16px;
}

My Portfolio - Script Codes JS Codes

// https://www.pexels.com/photo/coffee-writing-computer-blogging-34600/
$(function(){	function myFunction(x) {	x.classList.toggle("change");	}	$(window).scroll(function(){	var wScroll = $(this).scrollTop();	$(".jumbotron .container").css({ 'transform':'translate(0px, '+ wScroll /2 + '%)'	})	})
})
My Portfolio - Script Codes
My Portfolio - Script Codes
Home Page Home
Developer Nathan Torquato Da Silva
Username TorquatoN
Uploaded January 19, 2023
Rating 3
Size 5,188 Kb
Views 6,072
Do you need developer help for My Portfolio?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nathan Torquato Da Silva (TorquatoN) Script Codes
Name
DotGame
Local Weather App
SassLab
WikiViewer
Tribute Page
AJAX RESTful APP
SASS
Twitch.tv
Ajax
NatteJS
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!