Portfolio

Developer
Anthony Keithley
Size
3,748 Kb
Views
10,120
  1. Portfolio Previews
  2. Portfolio HTML Codes
  3. Portfolio CSS Codes
  4. Portfolio JS Codes

How do I make an portfolio?

What is a portfolio? How do you make a portfolio? This script and codes were developed by Anthony Keithley on 24 December 2022, Saturday.

Portfolio Previews
IQ Test

Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio</title> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="navbar">
<ul> <a href="#aboutme" id="aboutNav"><li>About Me</li></a> <a href="#projects" id="projNav"><li>Projects</li></a> <a href="#contactInfo" id="conNav"><li>Contact</li></a>
</div>
<div id="topThird"> <div id="aboutme" class="outer"> <h1 id="name">Keithley</h1> <h2>Web Developer - Educator - Champ</h2> <p>I teach Computer Science and Mathematics at San Leandro High School in the San Francisco Bay Area. I have high expectations for my students and enrich their learning experiences with meaningful projects and industry standard practices.</p> <p>See and interact with some of our projects below.</p> </div>
</div>
<div id="fade">
</div>
<div id="middleThird"> <div id="projects"> <h1 id="projectsHeader">Projects</h1> <div id="tip" class="thumb"> <div class="img"> <a href="https://codepen.io/KeithleySLHS/full/bqRyao/" target="_blank"><img src="https://s30.postimg.org/wxwa96i69/Screen_Shot_2017_03_21_at_11_34_42_AM.png" width="200px"> </a> </div> <div class="desc"> <h2>Tip Calculator</h2> <p>Simple tip calculator. Takes a bill amount and gives 4 options for preset tip percentages plus an "other" category where users can enter their own percentage. Outputs the total bill.</p> </div> </div> <div class="lineBreak">
</div> <div id="quad" class="thumb"> <div class="img"> <a href="https://codepen.io/KeithleySLHS/full/bqBwBL/" target="_blank"><img src="https://s28.postimg.org/mryr4w671/Screen_Shot_2017_03_21_at_11_38_23_AM.png" width="200px"> </a> </div> <div class="desc"> <h2>Quadratic Root Finder</h2> <p>Users enter the coefficients and constant terms of a quadratic equation in standard form. Outputs the root(s) and a sketch of the parabola using Desmos.com API. Uses JavaScript to calculate the roots using the quadratic formula.</p> </div> </div> <div class="lineBreak">
</div> <div id="howTo" class="thumb"> <div class="img"> <a href="https://codepen.io/KeithleySLHS/full/wgpVzG/" target="_blank"><img src="https://s11.postimg.org/c39n4qq1v/Screen_Shot_2017_03_21_at_11_39_38_AM.png" width="200px"> </a> </div> <div class="desc"> <h2>How To 360 Flip</h2> <p>One of my first projects using HTML and CSS. Teaches visitors how to do a 360 kickflip on a skateboard. Some experience required.</p> </div> </div>
<div class="lineBreak"></div> <div id="plural" class="thumb"> <div class="img"> <a href="https://codepen.io/KeithleySLHS/full/oZbGqv/" target="_blank"><img src="https://s12.postimg.org/sfdsz558d/Screen_Shot_2017_03_21_at_11_42_00_AM.png" width="200px"> </a> </div> <div class="desc"> <h2>Pluralizer</h2> <p>Users enter a word and receive the plural of that word as an output. The pluralizer uses conditional execution in JavaScript to produce an output.</p> </div> </div> <div class="lineBreak"></div> <div id="plural" class="thumb"> <div class="img"> <a href="#" target="_blank"><img src="https://s27.postimg.org/e8gbx6nkj/999327656.png" width="200px"> </a> </div> <div class="desc"> <h2>News Page</h2> <p>An exercise in positioning, embedding YouTube videos and Twitter feeds, and English language development.</p> </div> </div> </div> </div>
<div id="fade2">
</div>
<div id="bottomThird"> <div id="contactInfo"> <h1>Contact</h1> <h2>email: [email protected]</h2> <p>Join my mailing list:</p> <input type="email" placeholder="[email protected]" id="emailField" required> <input type="submit" onclick="document.getElementById('emailField').value = 'Thanks!'" id="subtn"> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio - Script Codes CSS Codes

*{ margin: 0; padding: 0; box-sizing: border-box;
}
.lineBreak { height: 3px; background: radial-gradient(circle 500px, rgb(22, 197, 214), white);
}
#fade { height: 50px; background: linear-gradient(to bottom, rgb(22, 197, 214), white 80%);
}
#fade2 { height: 50px; background: linear-gradient(to top, rgb(22, 197, 214), white 80%);
}
a { text-decoration: none; color: white;
}
li:hover { transition: background-color 0.5s, color 0.5s; background-color: white; color: rgb(22, 197, 214);
}
ul li{ display: inline-block; font-size: 24px; padding: 15px 17px; text-decoration: none; color: white; font-family: sans-serif;
}
#navbar { background: rgba(22, 197, 214, 0.8); position: fixed; width: 100%;
}
#name { margin-top: 60px;
}
#aboutme { text-align: right; width: 40%; padding:20px; margin: 0 auto; font-family: 'Poppins', sans-serif; color: white;
}
#aboutme h1, h2 { margin-bottom: 20px;
}
#projectsHeader { font-size: 300%; text-align: center; color: rgb(22, 197, 214); font-family: 'Poppins', sans-serif; padding-top: 60px;
}
#aboutme h1 { font-size: 400%;
}
.thumb { width: 50%; border-radius: 15px; margin: 0 auto; height: 300px;
}
.img { float: left; margin-right: 20px; border: 1px solid rgb(22, 197, 214); border-radius: 15px; padding: 20px; /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.desc { margin: 50px 10px;
}
#contactInfo { width: 50%; padding:100px 20px 20px 20px; margin: 0 auto; font-family: Helvetica; color: white; font-family: 'Poppins', sans-serif;
}
#contactInfo h1, h2 { margin-bottom: 20px;
}
#contactInfo h1 { font-size: 400%;
}
#projects { width: 90%; margin: 0 auto; font-family: 'Poppins', sans-serif; font-size: 80%;
}
#middleThird {
}
#topThird { background: rgb(22, 197, 214);
}
#bottomThird{ background: rgb(22, 197, 214); height:100vh;
}
input { width: 300px; height: 30px; font-size: 20px;
}
#subtn { background: white; height: 30px; color: rgb(22, 197, 214); cursor: pointer; width: 100px;
}

Portfolio - Script Codes JS Codes

$("#projNav").click(function() { $('html, body').animate({ scrollTop: $("#projects").offset().top }, 1000);
});
$("#conNav").click(function() { $('html, body').animate({ scrollTop: $("#contactInfo").offset().top }, 1000);
});
$("#aboutNav").click(function() { $('html, body').animate({ scrollTop: $("#aboutme").offset().top }, 1000);
});
Portfolio - Script Codes
Portfolio - Script Codes
Home Page Home
Developer Anthony Keithley
Username KeithleySLHS
Uploaded December 24, 2022
Rating 3
Size 3,748 Kb
Views 10,120
Do you need developer help for 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!

Anthony Keithley (KeithleySLHS) Script Codes
Name
News
CSS Borders
5-2-17
Organizing Your HTML
Nav Bar
SystemsSolver
Input and Output Test
Quadratic
Rectangle Creator
Padding and Margin
Create amazing blog posts 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!