Personal Portfolio Webpage

Developer
Sam Koshy
Size
8,383 Kb
Views
12,144
  1. Personal Portfolio Webpage Previews
  2. Personal Portfolio Webpage HTML Codes
  3. Personal Portfolio Webpage CSS Codes
  4. Personal Portfolio Webpage JS Codes

How do I make an personal portfolio webpage?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/VemmoX/.. What is a personal portfolio webpage? How do you make a personal portfolio webpage? This script and codes were developed by Sam Koshy on 03 November 2022, Thursday.

Personal Portfolio Webpage Previews
IQ Test

Personal Portfolio Webpage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Portfolio Webpage</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.1/bootstrap-social.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Dosis|Abel' rel='stylesheet' type='text/css'>
<!-- Navigation bar start -->
<nav class="navbar navbar-default navbar-fixed-top" id="navbarID"> <ul class="nav nav-tabs"> <!--- nav-tabs" id="nav-tabID">--> <li role="presentation" class="well nav-left-button"><a><big><strong>Sam Koshy</strong></big></a></li> <li role="presentation" class="move-right"><a href="#contact-page"><strong>Contact</strong></a></li> <li role="presentation" class="move-right"><a href="#portfolio-page"><strong>Portfolio</strong></a></li> <li role="presentation" class="move-right" id="about-tab"><a href="#about-page"><strong>About</strong></a></li> <li role="presentation" class="move-right" id="home-tab"><a href="#homeID"><strong>Home</strong></a></li> </ul>
</nav>
<!-- Navigation bar end -->
<!-- Home page start -->
<div class="home container-fluid" id="homeID"> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-8"> <h1 class='text-center title'>Codinger </h1> </div> <div class="col-xs-2"></div> </div> <div class="row"> <div class="col-xs-2"></div> <div class="col-xs-8"> <blockquote class="row-quote"> <p class="quote">Education is what remains after one has forgotten what one has learned in school.</p> </blockquote> </div> <div class="col-xs-2"></div> </div> <div class="row"> <div class="col-xs-8"> </div> <div class="col-xs-4"> <p id="Al">- Albert Einstein</p> </div> </div> <div class="row"> <div class="col-xs-1"> </div> <div class="page-header col-xs-10"></div> <div class="col-xs-1"> </div> </div> <div class="row-social"> <div class="col-xs-2"></div> <div class="col-xs-2"><a href="https://github.com/CodingerSK" class="btn btn-block btn-social btn-github btn-lg"><i class="fa fa-github "></i>GitHub </a></div> <div class="col-xs-3"> <a href="https://www.linkedin.com/pub/sam-koshy/92/3a5/724" class="btn btn-block btn-social btn-linkedin btn-lg"><i class="fa fa-linkedin "></i>LinkedIn </a> </div> <div class="col-xs-3"> <!-- <a class="btn btn-social btn-block btn-fcc btn-lg" href="https://www.freecodecamp.com/codingersk" id="lets"> <span style="font-size: 150%; font-family: 'Abel';"><img src='https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png' height='50px' width='42px'></span><span style="font-family: 'Abel', sans-serif;">freeCodeCamp</span> </a> ---> <a class="btn btn-social btn-block btn-fcc btn-lg" href="https://www.freecodecamp.com/codingersk" id="lets"> <span style="font-size: 150%; font-family: 'Abel';">(<i class="fa fa-fire" style="font-size: 90%;" ></i>)</span><span style="font-family: 'Abel', sans-serif;">freeCodeCamp</span> </a> </div> <div class="col-xs-2"></div> </div> <div class="TopPhotoAttribute"> <h5> <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><i class="fa fa-creative-commons"></i></a> Photo by <a href="http://www.lonelyspeck.com/about/">Lonely Speck</a></h5> </div>
</div>
<!-- Page 2 start-->
<div class="about container-fluid" id="about-page"> <div class="aboutMe"> <div class="col-lg-2 col-md-2 col-xs-2" id="HeadShot"><img src="https://s29.postimg.org/xtjvzk7o7/Head_Shot.png" style="width:180px;height:230px; margin-top:60px; margin-left:-19px; opacity:0.7; border-radius:10px"></img> </div> <div class="col-lg-9 col-md-10 col-xs-10"> <h3 style="margin-top:55px; margin-left:10px; color:rgb(255,255,255); font-family: " Dosis ""><strong>About me:</strong><br><h4 style="margin-left:10px; margin-bottom:15px; color:rgb(255,255,255); margin-top:-3px; font-weight: 400;font-family: "Dosis"">&nbsp &nbsp &nbsp I'm teaching myself web development thanks to <a href="https://www.freecodecamp.com">freeCodeCamp</a>'s curriculum. My undergraduate degree is in astrophysics and I have a master's degree in physics. Given this technical background, my journey albeit long, has been smooth and very rewarding. <br></h4><h4 style="margin-left:10px; margin-bottom:15px; color:rgb(255,255,255); margin-top:-3px;font-weight: 400;font-family: "Dosis""> &nbsp &nbsp &nbsp Although it was not initially apparent to me during my schooling I realized that I enjoyed programming during a summer internship I held, where I had to learn <a href="http://www.exelisvis.com/ProductsServices/IDL.aspx">IDL</a> (a programming language routinely used in astronomy) from scratch to perform the needed analysis. Since then the passion for programming has never left me and I picked up other languages (such as Fortran, Java, Javascript, Python, etc) along the way. <br></h4><h4 style="margin-left:10px; margin-bottom:10px; color:rgb(255,255,255); margin-top:-3px;font-weight: 400;font-family: "Dosis""> &nbsp &nbsp &nbsp I currently work as an educator and pursued this career with the hope of making a positive impact in our inner city schools. Amongst the many benefits of my current career is the time I have during summers where I can pursue my other passions with a fervor full time. Learning to code via freeCodeCamp has been a project I chose this summer.<br></h4></h3></div> <div class="col-lg-1"></div> </div> <div class="SecondPhotoAttribute"> <h5> <a href="https://creativecommons.org/licenses/by-nc/2.0/"><i class="fa fa-creative-commons"></i></a> Photo by <a href="https://www.flickr.com/photos/jrmyst/4529918527/in/photolist-7Ui1Xz">Jeremy Sternberg</a></h5> </div>
</div>
<!-- Page 3 start-->
<div class="portfolio container-fluid text-center" id="portfolio-page"> <div> <h2 style="margin-top:40px; margin-bottom:42px;">A sampling of my work:</h2> </div> <div class="squares"> <a href="https://www.freecodecamp.com/codingersk" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/FCC.png"><p>freeCodeCamp Portfolio</p></a> <!-- <a href="https://s.codepen.io/codinger/full/BoWaEr"><span class="quoteThumb thumbnail" style="background-color:#fb2e01;">Random Quote Generator</span></a> --> <a href="https://s.codepen.io/codinger/full/BoWaEr" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/RandomQuotes.png"><p>Random Quote Generator</p></a> <!-- <a href="https://s.codepen.io/codinger/full/dYZMjN"><span class="timerThumb thumbnail" style="background-color:#9166C7;">Pomodoro Timer</span></a>--> <a href="https://s.codepen.io/codinger/full/dYZMjN" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/Pomodoro.png"><p>Pomodoro Timer</p></a> <!-- <a href="https://s.codepen.io/codinger/full/meZjjJ"><span class="calculatorThumb thumbnail" style="background-color:#666547;">JavaScript Calculator</span></a>--> <a href="https://s.codepen.io/codinger/full/meZjjJ" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/JavascriptCalculator.png"><p>JavaScript Calculator</p></a> <!-- <a href="https://s.codepen.io/codinger/full/MKbGjr"><span class="weatherThumb thumbnail" style="background-color:#FB8301;">Weather App</span></a>--> <a href="https://s.codepen.io/codinger/full/MKbGjr" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/WeatherApp.png"><p>Weather App</p></a> <!-- <a href="https://s.codepen.io/codinger/full/adwErq"><span class="wikiThumb thumbnail" style="background-color:#109B8C;">Wikipedia Viewer</span></a>--> <a href="https://s.codepen.io/codinger/full/adwErq" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/WikiViewer.png"><p>Wikipedia Viewer</p></a> <!-- <a href="https://s.codepen.io/codinger/full/JGLEQZ"><span class="twitchThumb thumbnail" style="background-color:#694AD9;">Twitch.tv Channel Status</span></a>--> <a href="https://s.codepen.io/codinger/full/JGLEQZ" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/TwitchTV.png"><p>Twitch.tv Channel Status</p></a> <!-- <a href="https://s.codepen.io/codinger/full/zqBymd"><span class="tictactoeThumb thumbnail" style="background-color:#74E069;">Tic Tac Toe</span></a>--> <a href="https://s.codepen.io/codinger/full/zqBymd" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/TicTacToe.png"><p>Tic Tac Toe</p></a> <!-- <a href="#"><span class="comingSoonThumb thumbnail" style="background-color:#ffe28a;">Coming Soon</span></a> </div>--> <a href="https://codepen.io/codinger/full/XpJpoX/" class="thumbnail"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/simonSays.png"><p>Simon Game</p></a> <div class="ThirdPhotoAttribute"> <h5> <a href="https://creativecommons.org/licenses/by-nc-nd/2.0/"><i class="fa fa-creative-commons"></i></a> Photo by <a href="https://www.flickr.com/photos/dearsomeone/4430663256/">jon jablonsky</a></h5> </div>
</div>
<!-- Page 4 start-->
<div class="contact container-fluid" id="contact-page"> <div class="row" style="margin-top: 200px"> <div class="col-xs-1"></div> <div class="col-xs-7"> <h2 style="color:rgb(255,255,255); font-family:" Dosis "">Connect with me at:<br></h2> <h2 style="color:rgb(255,255,255);font-weight: 400; font-family:" Dosis ""> [email protected] </h2></div> <div class="col-xs-3"><a href="https://github.com/CodingerSK" class="btn btn-block btn-social btn-github btn-lg"><i class="fa fa-github "></i>GitHub </a> <br><a href="https://www.linkedin.com/pub/sam-koshy/92/3a5/724" class="btn btn-block btn-social btn-linkedin btn-lg"><i class="fa fa-linkedin "></i>LinkedIn </a> <br> <a class="btn btn-social btn-block btn-fcc btn-lg" href="https://www.freecodecamp.com/codingersk" id="lets"> <span style="font-size: 150%; font-family: 'Abel';">(<i class="fa fa-fire" style="font-size: 90%;" ></i>)</span><span style="font-family: 'Abel', sans-serif;">freeCodeCamp</span> </a> </div> <div class="col-xs-1"></div> </div> <div class="LastPhotoAttribute"> <h5> <a href="https://creativecommons.org/licenses/by-nc/2.0/"><i class="fa fa-creative-commons"></i></a> Photo by <a href="https://www.flickr.com/photos/nasamarshall/20331301099">NASA's Marshall Space Flight Center
</a></h5> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Personal Portfolio Webpage - Script Codes CSS Codes

body { background: linear-gradient(0deg, black, rgba(0, 0, 0, 0.7)); background-color: #1D1B42;
}
.navbar { background: transparent; border: transparent;
}
.navbar .nav { margin-left: 15px; margin-right: 15px; border-color: rgba(255, 255, 255, 0.4);
}
/*.navbar .nav .active a{ //controls the active tab background:rgba(255,255,255,0.4); border-color: rgba(255,255,255,0);
}*/
.navbar .nav li a { color: #a10081; margin-bottom: -23px; font-size: 17px;
}
.navbar .nav .move-right a:hover { background: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0);
}
.nav-left-button { margin-top: -21px; opacity: 0.4; border-radius: 0px;
}
.navbar .nav .nav-left-button a:hover { background-color: transparent; border-color: transparent;
}
.navbar .nav .nav-left-button a { color: #000000;
}
.navbar .nav .move-right { float: right;
}
/**** navigation bar end ******/
/**** 'Home' page start*****/
.home { background: url(' https://s3-us-west-1.amazonaws.com/pictureholder/medium-format-astrophotography-4.jpg') center; height: auto; padding: 25px; margin-bottom: 500px;
}
.title { font-size: 100px; color: #ffffff; margin-top: 150px;
}
.quote { font-family: serif; font-style: italic; color: #ffffff; font-size: 28px;
}
#Al { font-family: serif; font-size: 27px; color: #ffffff;
}
.row-quote { margin-top: 0px; margin-bottom: -5px;
}
.row-social { margin-top: 50px;
}
.btn-fcc { color: #ffffff; background: #08640a;
}
.btn-fcc:hover { color: #ffffff; background: #004A14;
}
/*
.btn-fcc:hover img{ opacity:0.1;
}
*/
.btn-fcc:focus { color: #ffffff; background: #004A14;
}
.TopPhotoAttribute { color: #ffffff; margin-left: 2px; margin-top: 290px;
}
/**** 'Home' page end*****/
/**** 'About' page start*****/
.about { background: url(https://s3-us-west-1.amazonaws.com/pictureholder/4529918527_525e056d32_o.jpg) center; height: auto; padding: 25px; background-size: cover; margin-bottom: 500px;
}
.SecondPhotoAttribute { color: #ffffff; margin-left: -2px; margin-top: 768px;
}
/*
.navbar .nav .move-right a:active { background:rgba(255,255,255,0.4); border-color: rgba(255,255,255,0);
} */
.portfolio { background: url(https://s3-us-west-1.amazonaws.com/pictureholder/4430663256_5e1a7a5749_o.jpg) center; height: auto; padding: 25px; background-size: cover; margin-bottom: 500px;
}
.thumb { padding-left: 15px; padding-right: 15px; padding-bottom: 15px; display: inline-block;
}
/* .squares{ display:block; padding-left:60px; padding-right:60px;
}
*/
.thumbnail { width: 270px; height: 215px; background: #404040; border: 0px; font-family: 'Roboto', sans-serif; color: #FFFFFF; font-size: 16px; font-weight: bold; border-radius: 10px; display: inline-block; margin: 0 20px 20px 0; box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.5); /*The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow*/
}
.thumbnail:hover { color: #6DBDD6; text-decoration: none;
}
.thumbnail img { width: 275px; height: 185px; border-radius: 10px 10px 0 0; padding-right: 0;
}
.thumbnail p { margin-top: 2px;
}
/*
.thumbnail{ display:inline-block; width:270px; height:200px; line-height:200px; border-radius:10px; margin-bottom:20px; border:0; margin-right:20px;
}
.thumbnail img{ display:inline-block; width:270px; height:200px; line-height:200px; border-radius:10px; margin-bottom:20px; border:0; margin-right:20px;
}
.portfolioThumb{ color:#2F678C; font-size: 16px; font-weight:bold;
}
.quoteThumb{ color:#6fcb9f; font-size: 16px; font-weight:bold;
}
*/
.timerThumb { color: #E1F974; font-size: 16px; font-weight: bold;
}
.calculatorThumb { color: #fb2e01; font-size: 16px; font-weight: bold;
}
.weatherThumb { color: #D6015B; font-size: 16px; font-weight: bold;
}
.wikiThumb { color: #FAAB1A; font-size: 16px; font-weight: bold;
}
.twitchThumb { color: #FFFFFF; font-size: 16px; font-weight: bold;
}
.tictactoeThumb { color: #E57F30; font-size: 16px; font-weight: bold;
}
.comingSoonThumb { color: #2E0854; font-size: 16px; font-weight: bold;
}
.ThirdPhotoAttribute { color: #ffffff; margin-left: -2px; text-align: left;
}
/**** 'Contact' page start*****/
.contact { background: url(https://s3-us-west-1.amazonaws.com/pictureholder/20331301099_1402bbc2c4_o.jpg); height: auto; padding: 25px; background-size: cover; margin-bottom: 500px;
}
.LastPhotoAttribute { color: #ffffff; margin-left: -2px; margin-top: 390px;
}
/* changing values based on screen width
@media (max-width: 600px) { // For mobile phones: .navbar .nav .move-right{ width:30%; font-size:23px; } .navbar .nav{ margin-right:-50px; margin-top:-5px; border-color:transparent; } .navbar .nav .move-right a:hover{ background:transparent; } .title{ margin-top:110px; font-size:80px; } .quote{ font-size:25px; } #Al{ font-size:24px; float:right; } [class*="col-"] { display:block; width: 100%; } .page-header{ width:80%; margin-left:60px; } #HeadShot{ text-align:center; float:none; zoom:60%; margin-top:45px; margin-bottom: -20px; } .aboutMe .col-xs-12{ //margin-left:-40px; //text-align:center; } .aboutMe .col-xs-12 h3{ font-size:16px; } .aboutMe .col-xs-12 h4{ margin-left:-20px; font-size:16px; } .SecondPhotoAttribute{ margin-top:0; } .thumb{ zoom:35%; } .LastPhotoAttribute{ margin-top:300px; }
}
*/
/***************************/

Personal Portfolio Webpage - Script Codes JS Codes

//$(document).ready(function() { });
Personal Portfolio Webpage - Script Codes
Personal Portfolio Webpage - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 03, 2022
Rating 3
Size 8,383 Kb
Views 12,144
Do you need developer help for Personal Portfolio Webpage?

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!

Sam Koshy (codinger) Script Codes
Name
Random Quote Machine
Pomodoro Clock
Tic Tac Toe
Data Visualization - US GDP
Heat Map
Camper News
Twitchtv Status
Simon
Tic Tac Toe _ Alternate
Local Weather App
Create amazing Facebook ads 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!