I have decided to code my own portfolio website, mainly because i actually want to grow my skillset within this field. I do have some past experience working with these two types of code so i am quite comfortable normally with the majority parts of code.
The one thing i hadn’t quite worked with before was the media queries, they are what pretty much helps make your website responsive on different platforms. So to help with that i used a template that my tutor had offered and i continued on my own from there
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="<https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap>" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ryan Wilsdon</title>
</head>
<body>
<main>
<header class="header">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="/index.html"><img src="/images/logo.svg" alt="logo"></a>
<div class="" id="navbarText">
<div class="social-links">
<a href="<https://proximal-diamond-4a0.notion.site/IXD-5eb10ee5770740a097d49ef579cc4ae2?pvs=4>"><img width="20px" src="/images/notion-logo-svgrepo-com 1.svg" alt=""></a>
<a href="<https://www.linkedin.com/in/ryan-wilsdon-499b27224/>"><img width="20px" src="/images/linked-in-logo-of-two-letters-svgrepo-com 1.svg" alt=""></a>
<a href="mailto:[email protected]"><img height="30px" src="/images/email.svg" alt=""></a>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Get In Touch!</h1>
</div>
<div class="modal-body text-center">
<button type="button" class="btn btn-primary contact-btn">
<a href="mailto:[email protected]">Email</a>
</button>
<button type="button" class="btn btn-primary contact-btn"><a href="tel:07714233115">Phone</a></button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<section id="header">
<h1>Hi, Im Ryan Wilsdon</h1>
<h2>UI/UX Designer</h2>
<a href="images/Ryan WIlsdon CV.pdf" download>Download CV</a>
</section>
<section id="work"></section>
<div class="case-studies-container">
<div class="case-studies-row">
<div class="case-study-card" id="Card-One">
<div class="case-study-card-contents">
<a href="sharp.html">
<div class="image-container">
<img src="images/sharp.png">
</div>
<h1>Sharp Banking</h1>
</a>
<h2>Personal Banking Brand App</h2>
<div class="case-study-tags">
<span class="case-study-tag">
Prototyping
</span>
<span class="case-study-tag">
UX Design
</span>
<span class="case-study-tag">
UI Design
</span>
</div>
</div>
</div>
<div class="case-study-card" id="Card-One">
<div class="case-study-card-contents">
<a href="mixrift.html">
<div class="image-container">
<img src="images/mixrift.png">
</div>
<h1>MixRift</h1>
</a>
<h2>Dj Music App</h2>
<div class="case-study-tags">
<span class="case-study-tag">
Prototyping
</span>
<span class="case-study-tag">
UX Design
</span>
<span class="case-study-tag">
UI Design
</span>
</div>
</div>
</div>
</div>
<div class="case-studies-row">
<div class="case-study-card" id="Card-One">
<div class="case-study-card-contents">
<a href="dashboard.html">
<div class="image-container">
<img src="images/dashboard.png">
</div>
<h1>Dashboard</h1>
</a>
<h2>A diagrammatic dashboard based off my weekly activity.</h2>
<div class="case-study-tags">
<span class="case-study-tag">
Prototyping
</span>
<span class="case-study-tag">
UX Design
</span>
<span class="case-study-tag">
UI Design
</span>
</div>
</div>
</div>
<div class="case-study-card" id="Card-One">
<div class="case-study-card-contents">
<a href="easytaxi.html">
<div class="image-container">
<img src="images/taxi.png">
</div>
<h1>EasyTaxi</h1>
</a>
<h2>A Smartwatch Accessible Taxi App</h2>
<div class="case-study-tags">
<span class="case-study-tag">
Prototyping
</span>
<span class="case-study-tag">
UX Design
</span>
<span class="case-study-tag">
UI Design
</span>
</div>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
*{
font-family: 'SF Pro Text', sans-serif;
scroll-behavior: smooth;
text-decoration: none!important;
}
body{
padding-top: 2em;
padding-bottom: 2em;
padding-left: 0.4em;
padding-right: 0.4em;
cursor:default;
background-color: #3E3E3E;
}
@media (min-width: 1024px) {
body{
margin: 0 auto;
}
}
#logo{
float: inline-start;
height: 100px;
width: 100px;
padding-left: 20px;
}
.header {
position: sticky;
width: 100%;
z-index: 3;
padding-bottom: 150px;
background-color: #3E3E3E;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header li a {
display: block;
padding: 20px 20px;
text-decoration: none;
color: #f2f2f2;
font-size: 1.2em;
}
.header li a:hover,
.header .menu-btn:hover {
color: #a6a6a6;
transition: 0.2s;
}
.header .logo {
display: block;
float: left;
font-size: 65px ;
text-decoration: none;
color: #f2f2f2;
font-family: "Raleway";
padding-left: 20px;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.navbar-brand img{
width: 60px;
}
.social-links{
display: flex;
}
.social-links a{
margin: 0 10px;
}
.social-links a img{
width: 25px;
border-radius: 0px;
color: #fff;
}
.social-links a:hover img{
transform: scale(1.1);
}
#header h1{
font-size: 32px;
font-family: "Raleway", sans-serif;
padding-left: 20px;
padding-top: 10px;
color: #f2f2f2;
margin: 0;
font-weight: 300;
}
#header h2{
font-weight: 200;
padding-left: 20px;
margin-bottom: 0px;
font-family: "Raleway", sans-serif;
font-size: 20px;
color: #A6A6A6;
padding-bottom: 35px;
}
#header a{
margin-left: 20px;
padding: 15px 50px;
color: #f2f2f2;
font-weight: 200;
text-decoration: none;
transition-duration: 0.3s;
border-radius: 5px;
border: 2px solid #f2f2f2;
font-family: "Raleway", sans-serif;
}
#header a:hover{
background-color: #232323;
color: #9d9d9d;
}
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 15px 25px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/*********** Case study css************/
.case-studies-container {
padding-left: 0px;
margin-right: 20px;
width: 100%;
padding-top: 200px;
}
.case-study-card {
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 2em;
width: 100%;
margin-right: 0px;
}
.image-container {
width: 100%;
}
img {
width: 100%;
border-radius: 12px;
min-width:100%;
}
.case-study-description {
font-size: 1.3em;
padding-bottom: 10px;
}
.recent-work-label {
color: #333333;
}
.introduction-container {
max-width: 80%;
margin-bottom: 4em;
}
.case-studies-container {
margin-top: 1em;
}
h1{
color: #f2f2f2;
font-size: 25px;
font-weight: 400;
text-decoration: none;
margin-top: 20px;
}
h2{
color: #f2f2f2;
font-size: 22px;
font-weight: 300;
text-decoration: none;
}
.case-study-tags {
margin-top:0.8em;
display:flex;
flex-direction:row;
gap:0.8em;
}
.case-study-tag {
padding:0.4em;
padding-left:0.6em;
padding-right:0.6em;
border: 2px solid #f2f2f2;
border-radius: 12px;
color: #f2f2f2;
}
@media (min-width: 1024px) {
.case-studies-row {
display:flex;
flex-direction:row;
gap: 4em;
margin-bottom:3em;
}
.case-study-card-contents {
height: 100%;
}
.case-study-description {
height:2.6em;
margin-top: 0.2em;
}
.image-container {
height: 16em;
}
img {
height: 100%;
}
}
main{
max-width: 1240px;
margin: 0 auto;
}
/*footer css*/
hr{
color: #f2f2f2;
}
footer {
text-align: left;
border-top: solid 1px;
padding-top: 10px;
padding-bottom: 40px;
}
footer a {
color: #f2f2f2;
font-size: 1.05em;
}
footer a:hover{
color: #999;
transition: 0.2s;
}
footer ul li {
list-style: none;
color: #f2f2f2;
float: left;
}
footer ul{
float: left;
margin: 0;
padding-left: 0px;
}
.footer-nav ul li {
display: inline-grid;
padding-right: 40px;
}
Whenever it came to getting my domain name i used the website 123 Reg,
I chose to buy the domain name ’ryanwilsdon.com’. I thought that i would just keep it casual whenever it came to choosing the name and i am quite happy with it.
To host the website i used the service netlify,
Netlify is a really quick and easy platform to use and be able to host your own websites and i didn’t really face any problems whenever trying to publish my work.
Here is the link to my final portfolio.