Personal Portfolio

Developer
Tomasz
Size
5,159 Kb
Views
30,360
  1. Personal Portfolio Previews
  2. Personal Portfolio HTML Codes
  3. Personal Portfolio CSS Codes
  4. Personal Portfolio JS Codes

How do I make an personal portfolio?

Second freeCodeCamp assignment. User stories: 1. I can access all of the portfolio webpage's content just by scrolling.. What is a personal portfolio? How do you make a personal portfolio? This script and codes were developed by Tomasz on 08 August 2022, Monday.

Personal Portfolio Previews
IQ Test

Personal Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Portfolio</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <div class="container"> <div class="navbar-header"> <a href="#home">Tomasz Gil</a> </div> <div class="navbar-nav"> <ul> <li><a 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> </ul> </div> </div>
</nav>
<section id="home"> <div class="container"> <h1>Code & Design</h1> <p>My name is Tomasz and I'm a webdeveloper and designer, with extensive practical experience in brand strategy, creative direction and project management. Also a huge fan of semantics and futuristic interfaces.</p> </div>
</section>
<section id="about"> <div class="container"> <h3>About</h3> <div class="line"></div> <div class="left"><img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /></div> <div class="right"> <p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong> Fusce elementum, dui quis rhoncus viverra, magna turpis hendrerit sem, et vehicula libero libero sit amet felis. Vestibulum sed ipsum risus</p> <p> Vestibulum at euismod quam, sit amet volutpat quam. Quisque id nisi eget tortor viverra vestibulum. In ultrices efficitur posuere. Curabitur metus nisi, porttitor id velit quis, maximus semper felis.</p> <div class="social"> <a href="https://twitter.com/gil_tomasz" target="_blank"><i id="twitter" class="icon-twitter"></i></a> <a href="https://github.com/tomaszgil" target="_blank"><i id="github" class="icon-github"></i></a> <a href="https://www.linkedin.com/in/tomasz-gil-282319123" target="_blank"><i id="linkedin" class="icon-linkedin-sign"></i></a> <a href="mailto:[email protected]"><i id="mail" class="icon-envelope"></i></a> </div> </div> </div>
</section>
<section id="portfolio"> <div class="container"> <h3>Portfolio</h3> <div class="line"></div> <div class="row"> <img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /> <img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /> <img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /> </div> <div class="row"> <img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /> <img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /> <img src="http://www.crossingcities.it/wp-content/uploads/2014/10/200375921-001.jpg" alt="" /> </div> </div>
</section>
<section id="contact"> <div class="container"> <h3>Contact</h3> <div class="line"></div> <div class="left"> <h2>Send me a message</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec enim in neque tempor fermentum. Nullam efficitur mauris in massa lobortis viverra.</p> </div> <div class="right"> <form action="#"> <input type="text" placeholder="Your name" /> <input type="text" placeholder="Your e-mail address"/> <input id="textarea" type="text" placeholder="Your message..."/> <input type="submit" value="Send message" /> </form> </div> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal Portfolio - Script Codes CSS Codes

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';
* { font-family: Roboto;
}
body { margin: 0; background-color: #fbfbff;
}
.container { width: 780px; margin: 0 auto;
}
nav { background-color: #2d3142; position: fixed; top: 0; left: 0; width: 100vw; z-index: 1;
}
a { text-decoration: none; color: #fbfbff;
}
.navbar-header { font-weight: bold; display: inline-block; margin-left: 10px; margin-top: 16px;
}
.navbar-header a { transition: color 300ms ease-in-out;
}
.navbar-header a:hover { color: #bfc3ba;
}
.navbar-nav { display: inline-block; float: right;
}
.navbar-nav ul { list-style-type: none; margin-right: 16px;
}
.navbar-nav ul li { display: inline-block; width: 100px; text-align: right;
}
.navbar-nav ul li a { color: #bfc3ba; transition: color 300ms ease-in-out;
}
.navbar-nav ul li a:hover { color: #fbfbff;
}
#home { background-color: #384e77; height: 100vh; padding-left: 10px;
}
#home p { font-size: 16pt; color: #bfc3ba; width: 600px;
}
h1 { font-size: 48pt; color: #fbfbff; padding-top: 200px; margin: 0;
}
h3 { text-align: center; text-transform: uppercase; font-size: 12pt; letter-spacing: 0.05em;
}
.line { margin: 0 auto; margin-bottom: 50px; width: 30px; height: 3px;
}
#about { padding-top: 70px; background-color: #fbfbff; height: 100vh; padding-left: 10px;
}
#about h3 { color: #333;
}
#about .line { background-color: #333;
}
#about p { padding-top: 20px;
}
#about img { border-radius: 50%; display: inline-block; width: 100%;
}
.left { display: inline-block; width: 220px; padding: 10px; float: left;
}
.right { color: #777; width: 500px; float: right;
}
.social { text-align: center; font-size: 2em; padding: 1.5em 0; position: relative; overflow: hidden;
}
.social i { margin-left: 10px; color: #555; transition: color 300ms ease-in-out, top 300ms ease-in-out;
}
.social i:hover { position: relative; top: -0.2em; cursor: pointer;
}
.social i#twitter:hover { color: #77DDF6;
}
.social i#github:hover { color: black;
}
.social i#linkedin:hover { color: #0177B5;
}
.social i#mail:hover { color: #F7B401;
}
#portfolio { padding-top: 70px; background-color: #bfc3ba; padding-left: 10px; padding-bottom: 60px;
}
#portfolio h3 { color: #333;
}
#portfolio .line { background-color: #333;
}
#portfolio img { width: 240px; margin: 8px;
}
.row { display: inline-block; margin: 0 auto;
}
.left { display: inline-block;
}
.right { display: inline-block;
}
#contact { padding-top: 70px; background-color: #04080f; height: 100vh; padding-left: 10px;
}
#contact h3 { color: #bfc3ba;
}
#contact .line { background-color: #bfc3ba;
}
#contact p { color: #777; font-size: 10pt;
}
#contact h2 { color: #bfc3ba;
}
form { margin-top: 3.6em;
}
input[type="text"] { padding: 0.5em; width: 41%; margin: 1em; background-color: inherit; border: 0; border-bottom: 1px solid #777; color: #777; transition: color 300ms ease-in-out, border-bottom 300ms ease-in-out;
}
input[type="text"]:focus { border-bottom: 2px solid #bfc3ba; color: #bfc3ba;
}
#textarea { height: 100px; width: 91%; vertical-align: text-bottom; word-wrap: normal; overflow: scroll;
}
input[type="submit"] { margin: 1em; display: block; float: right; background: none; color: #777; text-transform: uppercase; padding: 0.5em 1em; border: 2px solid #777;
}
input[type="submit"]:active { border-color: #bfc3ba; color: #bfc3ba;
}

Personal Portfolio - Script Codes JS Codes

$(function (){ smoothScroll(1000);
});
function smoothScroll(duration) { $("a").on('click', function (event) { var target = $( $(this).attr('href')); event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, duration); });
}
Personal Portfolio - Script Codes
Personal Portfolio - Script Codes
Home Page Home
Developer Tomasz
Username tomaszgil
Uploaded August 08, 2022
Rating 3
Size 5,159 Kb
Views 30,360
Do you need developer help for Personal 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!

Tomasz (tomaszgil) Script Codes
Name
Twitch App
Wiki Search Box
Random Quote Generator
Quick Weather App
JavaScript Calculator
Simon Game
TicTacToe Game
Pomodoro Clock
A Pen by Tomasz
Create amazing captions 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!