Let's Make a Simple Portfolio Page Using HTML and CSS

Web Development Sunil Prasad Regmi August 14, 2024

 


Creating a personal portfolio page is an excellent way to showcase your skills, projects, and professional identity. In this tutorial, we'll guide you through the steps to create a simple yet elegant portfolio page using HTML and CSS. This tutorial is perfect for beginners who want to get hands-on experience in web development.

Step 1: Setting Up the HTML Structure

First, let's start with the basic structure of our HTML document. This includes defining the DOCTYPE, adding metadata, linking the CSS stylesheet, and setting up the content of the page.



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#242628">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A simple and clean portfolio page.">
    <meta name="keywords" content="portfolio, web development, HTML, CSS">
    <meta name="author" content="John Doe">
    <meta name="robots" content="index, follow">
    <title>John Doe | Portfolio</title>
    <link rel="manifest" href="favicon/site.webmanifest"</link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="wrapper">
        <img src="assets/profile.png" alt="Profile Image" class="profile-img">
        <h3>Hey, There!</h3>
        <h1>It's me John Doe</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.</p>
        <h3>Social Links</h3>
        <section class="social-links">
            <a href="#" target="_blank">
                <i class="fab fa-facebook"></i> Facebook
            </a>
            <a href="#" target="_blank">
                <i class="fab fa-twitter"></i> Twitter
            </a>
            <a href="#" target="_blank">
                <i class="fab fa-gitlab"></i> GitLab
            </a>
            <a href="#" target="_blank">
                <i class="fab fa-instagram"></i> Instagram
            </a>
            <a href="#" target="_blank">
                <i class="fab fa-linkedin"></i> LinkedIn
            </a>
            <a href="#" target="_blank">
                <i class="fab fa-github"></i> GitHub
            </a>
        </section>
        <section class="actions">
            <a href="#" download>
                <button>Download CV</button>
            </a>
        </section>
        <footer>
            <p>© 2024 All rights reserved.</p>
        </footer>
    </div>
</body>

</html>

Step 2: Styling the Portfolio with CSS

Now, let's add some CSS to style the portfolio page. We’ll focus on the layout, typography, colors, and responsive design.

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100svh;
  background-color: #242628;
  background-image: url(./assets/background.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  text-align: center;
  align-content: center;
}

.wrapper {
  width: 90%;
  margin: 10px auto;
  max-width: 600px;
}

.profile-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid #f6821f;
  object-fit: cover;
  margin-bottom: 20px;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h3 {
  color: #ff9e40;
  font-size: 20px;
  margin: 0;
}

p {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 15px auto;
}

.social-links a {
  color: #ffffff;
  text-decoration: underline;
  font-size: 1.1rem;
}

.social-links i {
  margin-right: 8px;
  font-size: 1.2rem;
}

.actions a button {
  background-color: #f6821f;
  border: none;
  border-radius: 50px;
  color: #ffffff;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 10px;
}

footer p {
  margin-top: 20px;
  font-size: 0.9rem;
  color: #ffffff;
}

Step 3: Adding the Profile Image and Background

To complete the portfolio, you’ll need a profile image and a background SVG image. Make sure these images are placed in an assets folder within your project directory.

  • Profile Image: Save a square image of yourself as profile.png.
  • Background Image: Create or download a background SVG and save it as background.svg.

Step 4: Deploying Your Portfolio

Now that your portfolio is complete, you can deploy it online. You can use services like Cloudflare Pages, GitHub Pages, Netlify, or any other hosting platform. Simply upload your files, and your portfolio will be live! This tutorial gives you a solid foundation to build a personal portfolio. Feel free to customize the colors, fonts, and layout to match your style and preferences.

Tags

Post a Comment

0 Comments