Portfolio Website

Developer
Shikun Ke
Size
3,215 Kb
Views
14,168
  1. Portfolio Website Previews
  2. Portfolio Website HTML Codes
  3. Portfolio Website CSS Codes
  4. Portfolio Website JS Codes

How do I make an portfolio website?

What is a portfolio website? How do you make a portfolio website? This script and codes were developed by Shikun Ke on 28 November 2022, Monday.

Portfolio Website Previews
IQ Test

Portfolio Website - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Website</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=NTR:400'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation"> <button class="btn btn-default button-nav">Contact</button> <button class="btn btn-default button-nav">Portfolio</button> <button class="btn btn-default button-nav">About</button> <button class="btn btn-default button-nav">Home</button>
</nav>
<!-------main page------>
<a name="home"></a>
<div class="main-page"> <div class="container"> <div class="title"> <h1 id="target1">Barry Ke's Personal Website</h1> </div> <div class="intro tag1"> Diligency and Hardworking </div> <div class="intro tag2"> Lifestyle and Music </div> <div class="intro tag3"> Pursuit of Truth </div> </div> </div>
<!-------about------>
<a name="about"></a>
<div class="About-page"> <div class="introduction"> I am an undergraduate student in Columbia University double majoring Applied Physics and Applied Mathematics, and I am a self-taught front-end developer and designer in New York city. My goal is to use technology to provide better solution to real-world projects. <br/><br/>I am proficient in HTML, CSS, JavaScript, JQuery, Bootstrap and other front-end development techniques. <br/><br/>Meanwhile, I am a guitarist who plays folk songs and fingerstyle. </div> <div class="title-about"> <b>About Me</b> </div> <img class="img-circle img-responsive" src="https://scontent-lga3-1.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10522725_508773229268816_5583950040059920432_n.jpg?oh=6b075b023979a2aa05a937308fb3e01c&oe=56975CF2"> </div>
<!--------portfolio-------->
<a name="portfolio"></a>
<div class="portfolio"> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Website - Script Codes CSS Codes

body,
html { width: 100%; height: 100%;
}
h1{ font-weight:700; font-family:"Comic Sans MS", cursive, sans-serif; color: #1B86D7
}
/*navigation*/
.button-nav{ float:right; margin:5px;
}
/*main-page*/
.main-page{
height: 400px; padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ padding-bottom: 50px; background: url('http://www.icanbecreative.com/res/freeweb/2011/04/Bow-Tie.png') no-repeat center center fixed; background-size: cover; height: 600px;}
.overlay1{ height:855px; background:rgba(0,0,0, 0.1);
}
.About-page{ padding: 50px 0; background: url('http://static.simpledesktops.com/uploads/desktops/2015/06/16/pattern_1.png') no-repeat center center fixed; background-size:cover; height: 650px;
}
/*protfolio*/
.portfolio{ height:800px; padding-top:50px; padding-bottom:50px; background:url('http://static.simpledesktops.com/uploads/desktops/2015/07/28/splash7.png') no-repeat center center fixed; background-size:cover;
}
.title{ position:absolute; right:20px; top:160px;
}
.intro{ display:inline-block; border: 1px solid #ffffff; font-size:18px; color: #FFFFFF; padding: 1% 1% 1% 1%; margin: 0 auto 0.7% auto; border-radius: 0.3em; box-shadow: .2em .2em .2em #444; opacity: 0.7;
}
.tag1{ background-color:#4551fe; position:absolute; right:150px; top:260px;
}
.tag2{ background-color:#998efe; position:absolute; right:150px; top:330px;
}
.tag3{ background-color:#14AB23; position:absolute; right:150px; top:400px;
}
.introduction{ position:absolute; margin-top:90px; width: 700px; left:160px; font-size:20px; font-family:Brush Script Std; color:#555555;
}
.title-about{ font-family:cursive; font-size:30px; position:absolute; left:180px; margin-top:40px; color:#444444;
}
.img-circle{ width:200px; position:absolute; right:150px; top:1030px; box-shadow: 3px 3px 3px rgba(0,0,0,0.6);
}
.photo{ right:150px; top:300px; position:absolute;
}

Portfolio Website - Script Codes JS Codes

$(document).ready(function(){ $("#target1").addClass("animated bounce");
});
Portfolio Website - Script Codes
Portfolio Website - Script Codes
Home Page Home
Developer Shikun Ke
Username BarryKe
Uploaded November 28, 2022
Rating 3
Size 3,215 Kb
Views 14,168
Do you need developer help for Portfolio Website?

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!

Shikun Ke (BarryKe) Script Codes
Name
Simple Calculator_Freecodecamp
Main page display
Cash Register Drawer
A Pen by Shikun Ke
Random Quote Machine_FreeCodeCamp
25min countdown
Create amazing video scripts 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!