Create A Personal Portfolio Website Using HTML and CSS Only

In today's digital landscape, establishing a robust online presence is vital, particularly for professionals seeking to showcase their expertise and talents. A portfolio website acts as a dynamic platform, enabling individuals to present their work in an organized and visually captivating manner. Whether you specialize in design, development, writing, or any other creative field, a meticulously crafted portfolio website can elevate your visibility and attract potential clients or employers.

Crafting Your Portfolio Website Strategy:

Before embarking on the journey of building your portfolio website, it's imperative to develop a comprehensive strategy.

Clarify Your Objectives:

Begin by defining the primary purpose of your portfolio website. Are you aiming to spotlight your design projects, coding prowess, writing samples, or a blend of these disciplines? Understanding your objectives will inform the content and design decisions, ensuring they align with showcasing your unique skills and expertise.

Identify Your Audience:

Consider the individuals who will frequent your portfolio website. Are they prospective employers, clients, collaborators, or peers within your industry? Tailoring your content and design to resonate with your target audience's preferences and expectations is key to crafting a compelling and engaging user experience.

Curate Your Showcase:

Select a curated collection of your finest work to feature on your portfolio website. Highlight projects that exemplify your creativity, technical proficiency, and problem-solving abilities. Strive for diversity in your showcased projects to demonstrate your versatility and adaptability across various mediums and disciplines.

Designing Your Layout:

Mapping out the structure and layout of your portfolio website is a pivotal step in its development process.

Sketch Your Blueprint:

Visualize and sketch the layout of your portfolio website, outlining essential components such as the navigation menu, project galleries, about me section, contact details, and any additional features you wish to incorporate. Prioritize user-centric design principles to ensure seamless navigation and intuitive interaction.

Customizing Your Workspace:

Setting up your development environment lays the foundation for bringing your portfolio website to life.

Select Your Tools:

Choose a text editor suited to your coding preferences and workflow. Popular options include Visual Studio Code, Sublime Text, Atom, and Notepad++. Opt for a tool that offers robust features, customization options, and a user-friendly interface to streamline your coding process.

Organize Your Assets:

Establish a dedicated project folder on your computer to store your portfolio website files systematically. Arrange your files into subfolders for HTML, CSS, images, and any additional assets required for your website's construction.

Implementing Your Vision:

Translating your vision into code is where the magic truly happens in creating your portfolio website.

Start Coding:

Initiate the coding process by structuring the HTML and CSS code based on your preconceived layout and design. Begin by crafting the foundational elements of your website, such as the header, navigation menu, project showcases, about me section, and contact form.

Refining Your Aesthetic:

Elevate the visual appeal of your portfolio website by experimenting with typography, color palettes, spacing, and layout compositions. Strive to create a cohesive and visually captivating design that reflects your personal brand and resonates with your target audience.

Testing and Iterating:

Continuously evaluate and refine your portfolio website to ensure optimal performance and user experience.

Conduct Comprehensive Testing:

Thoroughly test your website across various devices, screen sizes, and browsers to identify and address any compatibility issues or usability concerns. Solicit feedback from peers, mentors, or online communities to gain valuable insights and perspectives for improvement.

Iterate and Enhance:

Iteratively refine your portfolio website based on user feedback and testing results. Continuously seek opportunities to enhance usability, accessibility, and visual aesthetics to create an engaging and memorable experience for visitors.

Create an HTML file(index.html)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <link rel="stylesheet" href="style.css">

    <title>Portfolio Website</title>

</head>

<body>

    <nav>

        <div class="logo">

            <img src="logo.png" alt="">

        </div>

        <div class="nav-container">

            <div class="links">

                <a href="">Home</a>

                <a href="">Skills</a>

                <a href="">Introduction</a>

                <a href="">Services</a>

                <a href="">Contact</a>

            </div>

        </div>

        <i class="fa-solid fa-bars hamburg" onclick="hamburg()"></i>

        <div class="dropdown">

            <div class="links">

                <a href="">Home</a>

                <a href="">Skills</a>

                <a href="">Introduction</a>

                <a href="">Services</a>

                <a href="">Contact</a>

                <i class="fa-solid fa-xmark cancel" onclick="cancel()"></i>

            </div>    

        </div>

    </nav>

    <section>

        <div class="main-container">

            <div class="content">

                <h1 data-aos="fade-right" data-aos-duration="1500">Hey I'm Prachi</h1>

                <div class="typewriter" data-aos="zoom-out" data-aos-duration="1500" data-aos-delay="200">I'm a <span class="typewriter-text"></span><label for="">|</label></div>

                <p data-aos="flip-down" data-aos-duration="1500" data-aos-delay="400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur ducimus inventore, magna.</p>

                <button data-aos="zoom-in" data-aos-duration="1500" data-aos-delay="600">Download CV</button>

            </div>

            <div class="image">

                <img src="main.png" data-aos="fade-left" data-aos-duration="2000">

            </div>

        </div>

    </section>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

    <script>

      AOS.init({offset: 1});

    </script>

    <script src="script.js"></script>

</body>

</html>

Now,

Create a CSS file (style.css)

*{

    padding: 0;

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    box-sizing: border-box;

}

body{

    width: 100%;

    height: 100vh;

    background-color: black;

    overflow: hidden;

}

nav{

    width: 100%;

    position: sticky;

    height: 10vh;

}

.nav-container{

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}

.logo img{

    position: absolute;

    top: 8px;

    left: 15px;

    width: 150px;

}

.hamburg{

    opacity: 0;

}

.hamburg,

.cancel{

    cursor: pointer;

    position: absolute;

    right: 15px;

    top: 10px;

    color: white;

    font-size: clamp(2.5rem, 0.5rem + 5vw, 3rem);

}

.nav-container .links a{

    font-size: 1.2rem;

    color: white;

    margin: 0 20px;

    text-decoration: none;

}

.nav-container .links a:hover{

    color: #6e58e0;

}

.dropdown{

    position: absolute;

    top: 0;

    transform: translateY(-500px);

    width: 100%;

    height: auto;

    backdrop-filter: brightness(40%) blur(2px);

    box-shadow: 0 0 20px black;

    transition: 0.3s linear;

}

.dropdown .links a{

    display: flex;

    color: white;

    text-decoration: none;

    padding: 10px 0;

    justify-content: center;

    align-items: center;

}

.dropdown .links a{

    justify-content: center;

    align-items: center;

    transform: 0.3s linear;

}

.dropdown .links a:hover{

    background-color: #6e58e0;

}

/* Section Starts */

section{

    width: 100%;

    height: 90vh;

}

.main-container{

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}

.main-container .content{

    color: white;

    width: 40%;

    min-height: 100px;

    box-shadow: 0 0 120px 50px black;

}

.content h1{

    font-size: clamp(1rem, 1rem + 5vw, 1.8rem);

}

.content .typewriter{

    font-size: clamp(1rem, 1rem + 5vw, 2.5rem);

    font-weight: 700;

    margin: 10px 0;

}

.typewriter span{

    color: #6e58e0;

}

.content p{

    font-size: clamp(0.8rem, 0.5rem + 3vw, 1.7rem);

    margin: 20px 0;

}

.content button{

    width: 50%;

    height: 6vh;

    margin: 30px;

    background-color: #6e58e0;

    color: white;

    border: none;

    outline: none;

    font-size: 140%;

    font-weight: 700;

    border-radius: 5px;

    transition: 0.2s linear;

}

.content button:hover{

    scale: 1.1;

    border: 2px solid #6e58e0;

    background-color: transparent;

    font-weight: 700;

    box-shadow: 0 0 40px 5px #6e58e0;

}

.main-container .image{

    max-width: 600px;

    min-height: 350px;

    width: 100%;

    overflow: hidden;

}

.main-container .image img{

    width: 100%;

}

@media (max-width: 884px) {

    .main-container {

        display: flex;

        flex-direction: column-reverse;

    }

    .nav-container .links{

        display: none;

        display: none;

    }

    .hamburg{

        opacity: 1;

    }

    .logo img{

        width: 11rem;

    }

    .main-container .content{

        width: 80%;

    }

    .main-container .image{

        width: 50%;

    }

    .content button{

        margin: 0 25%;

    }

}

@media (max-width:440px) {

    .logo img{

        width: 9rem;

    }

    .main-container .image{

        width: 70%;

        height: 50%;

    }

    .main-container .content{

        width: 90%;

    }

}

Now Create javascript file (script.js)

function hamburg(){

    const navbar = document.querySelector('.dropdown');

    navbar.style.transform = 'translateY(0px)';

}

function cancel(){

    const navbar = document.querySelector('.dropdown');

    navbar.style.transform = 'translateY(-500px)';

}

const texts = [

    "DEVELOPER",

    "DESIGNER",

    "PROGRAMMER",

];

const speed = 100;

const textElements = document.querySelector('.typewriter-text');

let textIndex = 0;

let characterIndex = 0;

function typeWriter(){

    if(characterIndex < texts[textIndex].length){

        textElements.innerHTML += texts[textIndex].charAt(characterIndex);

        characterIndex++;

        setTimeout(typeWriter, speed);

    }

    else{

        setTimeout(eraseText, 1000);

    }

}

function eraseText(){

    if(textElements.innerHTML.length > 0){

        textElements.innerHTML = textElements.innerHTML.slice(0, -1);

        setTimeout(eraseText, 50);

    }

    else{

        textIndex = (textIndex + 1)%texts.length;

        characterIndex = 0;

        setTimeout(typeWriter, 500);

    }

}

window.onload = typeWriter;

Conclusion:

By meticulously planning, designing, and developing your portfolio website, you can create a compelling digital showcase that effectively communicates your skills, talents, and professional achievements. Stay committed to refining and optimizing your website over time, ensuring it remains a relevant and impactful representation of your capabilities in the ever-evolving digital landscape.