Portfolio page

Developer
Dylan
Size
4,382 Kb
Views
8,096
  1. Portfolio page Previews
  2. Portfolio page HTML Codes
  3. Portfolio page CSS Codes
  4. Portfolio page JS Codes

How do I make an portfolio page?

What is a portfolio page? How do you make a portfolio page? This script and codes were developed by Dylan on 07 January 2023, Saturday.

Portfolio page Previews
IQ Test

Portfolio page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <title>Dylan Thomas - Web developer</title> <meta charset="utf-8"> <meta name="author" content="Dylan Thomas - Web developer"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design --> <script src="https://use.fontawesome.com/9fbc54472a.js"></script> <!-- Font awesome icons --> <link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet"> <!-- One font throughout site --> <script src="dist/js/smooth-scroll.js"></script>
</head>
<body> <div class="container"> <header class="bk-image"> <nav id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <a href="#about">About</a> <a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav> <span class="menu" onclick="openNav()">&#9776;</span> <h1>Dylan Thomas</h1> </header> <!-- Main body --> <div id="about"> <h2>About</h2> <!-- Section needs to be longer and move to two columns for med and lg screens. Looks stretched. --> <hr /> <p>I am a web developer from Melbourne looking to join an organisation to continue my development in creating web applications. I have a passion for clean code and minimalist web design that is simple and enjoyable for users to navigate. When I'm not </p><br /> <hr /> </div> <!-- Photo and CV section --> <section class="cv bk-image"> <button>Download CV</button> </section> <!-- Projects section --> <article id="projects"> <h2>Projects</h2> <hr> <div class="project-images"> <img src="https://s3.amazonaws.com/static.oculus.com/website/2016/01/riftblogpierre1.jpg" alt="Project 1" /> <img src="https://s3.amazonaws.com/static.oculus.com/website/2016/01/riftblogpierre1.jpg" alt="Project 2" /> <img src="https://s3.amazonaws.com/static.oculus.com/website/2016/01/riftblogpierre1.jpg" alt="Project 3" /> <br /> </div> <button>View my GitHub</button> <br /> </article> <!-- Footer section --> <section class="contact bk-image"> <button>Contact</button> </section> <footer> <div class="icons"> <a href="#"><i class="fa fa-twitter fa-2x padding" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-github fa-2x padding" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-envelope fa-2x padding" aria-hidden="true"></i></a> </div> <div class="copyright"> <small>&copy 2017</small> </div> </footer> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Portfolio page - Script Codes CSS Codes

/* The side navigation menu */
.sidenav { height: 100%; /* Prefer when it doesn't take up full height */ width: 0; /* 0 width - change with JavaScript */ position: fixed; z-index: 1; /* Stay on top */ top: 0; left: 0; background-color: #111; overflow-x: hidden; /* Disable horizontal scroll */ padding-top: 70px; /* Place content 60px from the top */ transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 22px; color: #bbb; display: block; transition: 0.3s; text-transform: uppercase;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{ color: #eee;
}
/* Position and style then close button (top right corner) */
.sidenav .closebtn { position: absolute; top: 0; right: 20px; font-size: 50px; margin-left: 30px;
}
.menu { position: relative; top: 10px; left: 15px; font-size: 40px; cursor: pointer;
}
.menu:hover { color: #eee;
}
/* ------------------------------ */
body { width: 100%;
}
.container { width: 100%; margin: auto; background-color: #efefef;
}
header { background-image: url(http://www.spyderonlines.com/images/wallpapers/pictures-of-nature/pictures-of-nature-21.jpg);
}
.bk-image { height: 450px; opacity: 0.85;
/* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
h1 { font-family: 'Georgia', serif; color: #eee; font-weight: 400; text-align: center; position: relative; top: 50%;
}
h2 { font-size: 32px; font-family: 'Cormorant Garamond', serif; text-align: center; color: #555; text-transform: uppercase; letter-spacing: 0.15em; text-shadow: #c1c1c1 -1px 1px 0, #c2c2c2 -2px 2px 0, #c3c3c3 -3px 3px 0, #c4c4c4 -4px 4px 0, #c5c5c5 -5px 5px 0, #c6c6c6 -6px 6px 0
}
p, a, button { font-family: 'Georgia', serif; letter-spacing: 0.05em; line-height: 1.5em; text-align: left; color: #555;
}
p { font-size: 18px;
}
button { font-size: 18px; background: #444; color: #eee; margin: 0 auto; text-align: center; text-transform: uppercase; border-style: ridge; border: 1px solid #bbb; border-radius: 10px; padding: 3px 10px; cursor: pointer; display: block; position: relative; top: 80%; transition: ease-in 0.4s;
}
button:hover { background: #fff; color: #111;
}
button:active { background: #fff; color: #111;
}
hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); margin: 0 0 30px 0;
}
nav { float: right; margin-right: 8%; line-height: 2em;
}
nav ul { list-style: none;
}
nav ul a { text-decoration: none; letter-spacing: 0.1em; color: #222; text-transform: uppercase;
}
nav ul a:hover { color: #ccc;
}
#about { width: 90%; margin: 50px auto;
}
.cv { background-image: url(https://images.unsplash.com/photo-1473615695634-d284ec918736?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=10ae4e3e7c210d0186fa7ad4e38cf2c4);
}
#projects { margin: 30px auto;
}
#projects img { display: block; border: 1px solid gray; width: 60%; margin: 30px auto; opacity: 0.5; transition: ease-in 0.3s;
}
#projects img:hover { opacity: 1.0; cursor: pointer;
}
.contact { background-image: url(https://hd.unsplash.com/photo-1471539491521-29b5b92d0e47);
}
footer { background-color: #333; padding: 25px;
}
.icons { text-align: center;
}
.icons a { color: #eee; padding: 10px; transition: ease-in 0.3s;
}
.icons a:hover { color: #64B5F6;
}
.copyright { text-indent: -8px; font-weight: 600; text-align: center; color: #aaa; margin: 25px 0 0 0;
}
/* Breakpoint for tablets */ @media only screen and (min-width: 380px) and (max-width: 767px) { #about { margin: 50px auto; } .icons a { padding: 20px; } .icons i { font-size: 50px; }
} /* END OF MEDIA QUERY - TABLETS */
/* Breakpoint for desktop */ @media only screen and (min-width: 768px) { #about { max-width: 40em; margin: 50px auto; } #projects img { display: inline; border: 1px solid gray; width: 29.5%; margin: 5% 1.5%; } button { font-size: 20px; } p { font-size: 18px; } .icons { margin: 15px; } .icons a { padding: 20px; } .icons i { font-size: 60px; } small { font-size: 18px; }
} /* END OF MEDIA QUERY - DESKTOP */

Portfolio page - Script Codes JS Codes

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; document.body.style.backgroundColor = "white";
}
Portfolio page - Script Codes
Portfolio page - Script Codes
Home Page Home
Developer Dylan
Username thommyboy02
Uploaded January 07, 2023
Rating 3
Size 4,382 Kb
Views 8,096
Do you need developer help for Portfolio page?

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!

Dylan (thommyboy02) Script Codes
Name
React-router
Time React
Project mockup
State change
Prototype
Refs - clear input
Filter, map, reduce
Project prototype
Countdown timer - following
State - mapping through data
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!