Responsive Portfolio Design for Content Writers Using HTML, CSS, and JavaScript will assist you in creating a quality site design.

Responsive Portfolio Design for Content Writer Using HTML, CSS, and JavaScript (Free Source Code)

Byjvcodes

Every content writer should have an online portfolio in order to gain employment and demonstrate their writing capabilities. Responsive Portfolio Design for Content Writers Using HTML, CSS, and JavaScript will assist you in creating a quality site design.

Here in this article, I will explain every single feature that is included in this portfolio and I’ll also give you tips on how to develop this one I’ll also give you a free source code to try out.

GitHub Source: Responsive Portfolio Design for Content Writer

Features

This portfolio design includes a range of features:

  • Easy to Customize: The code is very simple and can easily switch out colors, fonts, and sections to suit their preference.
  • Responsive: It is responsive to screen sizes – your portfolio will look sharp no matter if it is on a computer, a tablet, or a smartphone.
  • Compatibility: The design is well optimised for all latest browsers to ensure that the experience is similar across all the platforms.
  • Clean Code: The code is written in a proper structure and well-commented which make it easier to read and to make amendments.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Portfolio for Content Writer

Follow these simple steps to create your portfolio:

  • Create Project Folder: The first step to take is to create folder on the computer to hold all the files contained in the portfolio.
  • Create index.html: Create a new file named index.html for the structure that your portfolio will have.
  • Create style.css: Create another file named style.css where you need to design and style your portfolio.
  • Create script.js: Add a file called script.js to add a little interactivity such as an animation or a toggle.
  • Copy & Paste the Code: Your portfolio can be set up quickly with the help of the source code described below.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<!-- 
====================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
====================================================
-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Links -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="images/fav.png" type="image/x-icon">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <title>Portfolio | Content Writer</title>
</head>
<body>
    <div class="container">
    <!-- -- Navigation Section -- -->
      <nav id="header">
        <div class="nav-logo">
            <!-- <p class="nav-name">Javed</p> -->
            <a href="#home" class="nav-name">Emilia</a>
            <span>.</span>
        </div>
        <div class="nav-menu" id="myNavMenu">
            <ul class="nav_menu_list">
                <li class="nav_list">
                    <a href="#home" class="nav-link active-link">Home</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#about" class="nav-link">About</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#projects" class="nav-link">Projects</a>
                    <div class="circle"></div>
                </li>
                <li class="nav_list">
                    <a href="#contact" class="nav-link">Contact</a>
                    <div class="circle"></div>
                </li>
            </ul>
        </div>
        <div class="nav-button">
            <button class="btn">Download CV <i class="uil uil-file-alt"></i></button>
        </div>
        <div class="mode">
            <div class="moon-sun" id="toggle-switch">
                <i class="fa fa-moon" id="moon"></i>
                <i class="fa fa-sun" id="sun"></i>
            </div>
        </div>
        <div class="nav-menu-btn">
            <i class="uil uil-bars" onclick="myMenuFunction()"></i>
        </div>
      </nav>
    <!-- -- Main -- -->
    <main class="wrapper">
       <!-- -- Hero Section -- -->
       <section class="featured-box" id="home">
        <div class="featured-text">
          <div class="featured-text-card">
              <span>Emilia Clarke</span>
          </div>
          <div class="featured-name">
              <p>I'm <span class="typedText"></span></p>
          </div>
          <div class="featured-text-info">
            <p>Professional content writer specializing in crafting compelling blog posts, persuasive copywriting, and engaging product descriptions that captivate audiences and drive results.</p>
          </div>
          <div class="featured-text-btn">
              <button class="btn blue-btn">Hire Me</button>
              <button class="btn">Download CV <i class="uil uil-file-alt"></i></button>
          </div>
          <div class="social_icons">
              <div class="icon"><i class="uil uil-instagram"></i></div>
              <div class="icon"><i class="uil uil-linkedin-alt"></i></div>
              <div class="icon"><i class="uil uil-dribbble"></i></div>
              <div class="icon"><i class="uil uil-github-alt"></i></div>
          </div>
        </div>
        <div class="featured-image">
          <div class="image">
              <img src="images/avatar.webp" alt="avatar">
          </div>
        </div>
        <div class="scroll-icon-box">
          <a href="#about" class="scroll-btn">
              <i class="uil uil-mouse-alt"></i>
              <p>Scroll Down</p>
          </a>
        </div>
     </section>
       <!-- -- About Section -- -->
       <section class="section" id="about">
          <div class="top-header">
            <h1>About Me</h1>
          </div>
          <div class="row">
            <div class="col">
                <div class="about-info">
                    <h3>My introduction</h3>
                    <p>I specialize in crafting content that connects, informs, and inspires. With years of experience in blog writing, SEO-driven copy, and creative storytelling, I help businesses tell their stories effectively.
                    </p>
                    <div class="about-btn">
                        <button class="btn">Download CV <i class="uil uil-import"></i></button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="skills-box">
                    <div class="skills-header">
                        <h3>Expertise</h3>
                    </div>
                    <div class="skills-list">
                        <span>Blog Writing</span>
                        <span>SEO Copywriting</span>
                        <span>Content Strategy</span>
                        <span>Product Descriptions</span>
                        <span>Email Campaigns</span>
                        <span>Editing & Proofreading</span>
                        <span>Storytelling</span>
                    </div>
                </div>                
            </div>
          </div>
       </section>
       <!-- -- Project Section -- -->
       <section class="section" id="projects">
        <div class="top-header">
            <h1>Projects</h1>
        </div>
        <div class="project-container">
            <div class="project-box">
                <i class="uil uil-briefcase-alt"></i>
                <h3>Blog Posts</h3>
                <label>100+ Published Articles</label>
            </div>
            <div class="project-box">
                <i class="uil uil-users-alt"></i>
                <h3>Client Work</h3>
                <label>50+ Satisfied Clients</label>
            </div>
            <div class="project-box">
                <i class="uil uil-award"></i>
                <h3>Achievements</h3>
                <label>Featured in Industry Blogs</label>
            </div>
          </div>
     </section>
       <!-- -- CONTACT BOX -- -->
       <section class="section" id="contact">
        <div class="top-header">
          <h1>Contact Me </h1>
          <span>Have a project or an idea? Let&rsquo;s collaborate to make it a success. Reach out to discuss your content needs.</span>
        </div>
        <div class="row">
            <div class="col">
               <div class="contact-info">
                   <h2>Find Me <i class="uil uil-corner-right-down"></i></h2>
                   <p><i class="uil uil-envelope"></i> Email: info@jvcodes.com</p>
                   <p><i class="uil uil-phone"></i> Tel: +92 305 627 5237</p>
               </div>
            </div>
            <div class="col">
               <div class="form-control">
                   <div class="form-inputs">
                       <input type="text" class="input-field" placeholder="Name">
                       <input type="text" class="input-field" placeholder="Email">
                   </div>
                   <div class="text-area">
                       <textarea placeholder="Message"></textarea>
                   </div>
                   <div class="form-button">
                       <button class="btn">Send <i class="uil uil-message"></i></button>
                   </div>
               </div>
            </div>
         </div>
     </section>
    </main>
    <!-- -- Footer -- -->
    <footer>
        <div class="top-footer">
            <p>Shokat Javed .</p>
        </div>
        <div class="middle-footer">
            <ul class="footer-menu">
                <li class="footer_menu_list">
                    <a href="#home">Home</a>
                </li>
                <li class="footer_menu_list">
                    <a href="#about">About</a>
                </li>
                <li class="footer_menu_list">
                    <a href="#projects">Projects</a>
                </li>
                <li class="footer_menu_list">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <div class="footer-social-icons">
            <div class="icon"><i class="uil uil-instagram"></i></div>
            <div class="icon"><i class="uil uil-linkedin-alt"></i></div>
            <div class="icon"><i class="uil uil-dribbble"></i></div>
            <div class="icon"><i class="uil uil-github-alt"></i></div>
        </div>
        <div class="bottom-footer">
            <p>Copyright &copy; <a href="#home">Emilia Clarke</a> - All rights reserved</p>
        </div>
    </footer>
    </div>

    <!-- -- JS Link -- -->
    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the portfolio:

/*
===================================================
This code is developed by Shokat Javed at JV Codes
Website: www.jvcodes.com
===================================================
*/

/* ----- Poppins font link ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
    --logo-color: rgb(185, 0, 108);
    --first-color: rgb(0, 102, 255);
    --copyright-hover-color: rgb(0, 73, 184);
}

/* -- Base Styles -- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* -- Global scroll -- */
html{
    scroll-behavior: smooth;
}

/* -- Scroll bar design -- */
::-webkit-scrollbar{
    width: 10px;
    border-radius: 25px;
}
::-webkit-scrollbar-track{
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
    background: #747373;
    border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
    background: #a1a1a1;
}

/* -- Global button -- */
.btn{
    font-weight: 500;
    padding: 12px 20px;
    background: #e7e7e7;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: .4s;
}
.btn>i{
    margin-left: 10px;
}
.btn:hover{
    background: var(--first-color);
    color: rgb(255, 255, 255);
}

/* -- Global icon -- */
i{
    font-size: 16px;
}

/* -- Base setting -- */
body{
    background: rgb(250, 250, 250);
}
.container{
    width: 100%;
    position: relative;
}

/* -- Navigation menu -- */
nav {
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    line-height: 90px;
    background: rgb(250, 250, 250);
    padding-inline: 9vw;
    transition: 0.3s;
    z-index: 100;
}

body.dark nav {
    background: #1a1919;
}

.nav-logo {
    position: relative;
}

body.dark .nav-name {
    font-size: 30px;
    font-weight: 600;
    color: var(--logo-color);
}

.nav-name {
    font-size: 30px;
    font-weight: 600;
    color: var(--logo-color);
    text-decoration: none;
}

.nav-logo span {
    position: absolute;
    top: -15px;
    right: -20px;
    font-size: 5em;
    color: rgb(68, 68, 68);
}

body.dark .nav-logo span {
    color: rgb(200, 200, 200);
}

.nav-menu,
.nav_menu_list {
    display: flex;
}

.nav-menu .nav_list {
    list-style: none;
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: rgb(68, 68, 68);
    font-weight: 500;
    padding-inline: 15px;
    margin-inline: 20px;
}

body.dark .nav-link {
    color: rgb(255, 255, 255);
}

.nav-menu-btn {
    display: none;
}

.nav-menu-btn i {
    font-size: 28px;
    cursor: pointer;
}

.active-link {
    position: relative;
    color: var(--first-color);
    transition: 0.3s;
}

body.dark .active-link {
    color: var(--first-color);
}

.mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.moon-sun {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    background: #e7e7e7;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
.moon-sun:hover{
    background: var(--first-color);
}

.moon-sun :is(#moon, #sun) {
    position: absolute;
    color: #2e2e2e;
    font-size: 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.moon-sun:hover :is(#moon, #sun) {
    color: #ffffff;
}

#moon {
    opacity: 1;
    transform: scale(1);
    
}

#sun {
    opacity: 0;
    transform: scale(0.5);
}

body.dark #moon {
    opacity: 0;
    transform: scale(0.5);
}

body.dark #sun {
    opacity: 1;
    transform: scale(1);
}

body.dark {
    background-color: #1a1919;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark .featured-text-info {
    font-size: 15px;
    margin-bottom: 30px;
    color: rgb(255, 255, 255);
}

body.dark .featured-name {
    font-size: 50px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-block: 20px;
}

body.dark .top-header {
    text-align: center;
    margin-bottom: 5em;
}

body.dark .top-header h1 {
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
}

body.dark h3 {
    font-size: 20px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    margin-bottom: 15px;
}

body.dark .about-info {
    background: rgba(0, 0, 0, 0.4);
}

body.dark .about-info p {
    color: #ffffff;
}

body.dark .project-box {
    background: rgba(0, 0, 0, 0.4);
}


/* -- Wrapper design -- */
.wrapper{
    padding-inline: 10vw;
}

/* -- Feature box -- */
.featured-box{
    position: relative;
    display: flex;
    height: 100vh;
    min-height: 700px;
}

/* -- Featured tex -- */
.featured-text{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    min-height: 80vh;
    flex-direction: column;
    width: 50%;
    padding-left: 20px;
}
.featured-text-card span{
    background: var(--first-color);
    color: rgb(255, 255, 255);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 5px;
}
.featured-name{
    font-size: 50px;
    font-weight: 600;
    color: rgb(68, 68, 68);
    margin-block: 20px;
}
.typedText{
    text-transform: capitalize;
    color: var(--first-color);
}
.featured-text-info{
    font-size: 15px;
    margin-bottom: 30px;
    color: rgb(68, 68, 68);
}
.featured-text-btn{
    display: flex;
    gap: 20px;
}
.featured-text-btn>.blue-btn{
    background: var(--first-color);
    color: #f1f1f1;
}
.featured-text-btn>.blue-btn:hover{
    background: var(--first-color);
}
.social_icons{
    display: flex;
    margin-top: 5em;
    gap: 30px;
}
.icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.icon:hover{
    color: var(--first-color);
}

/* -- Feature image -- */
.featured-image{
    display: flex;
    justify-content: right;
    align-content: center;
    min-height: 80vh;
    width: 50%;
}
.image{
    margin: auto 0;
    width: 380px;
    height: 380px;
    border-radius: 55% 45% 55% 45%;
    overflow: hidden;
    animation: imgFloat 7s ease-in-out infinite;
}
.image img{
    width: 380px;
    height: 380px;
    object-fit: cover;
}
@keyframes imgFloat {
    50%{
        transform: translateY(10px);
        border-radius: 45% 55% 45% 55%;
    }
}
.scroll-btn{
   position: absolute;
   bottom: 0;
   left: 50%;
   translate: -50%;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 150px;
   height: 50px;
   gap: 5px;
   text-decoration: none;
   color: rgb(68, 68, 68);
   background: rgb(255, 255, 255);
   border-radius: 30px;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.scroll-btn i{
    font-size: 20px;
}

/* -- Main section -- */
.section{
    padding-block: 5em;
}
.row{
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 50px;
}
.col{
    display: flex;
    width: 50%;
}

/* -- Resuseable styles -- */
.top-header{
    text-align: center;
    margin-bottom: 5em;
}
.top-header h1{
    font-weight: 600;
    color: rgb(68, 68, 68);
    margin-bottom: 10px;
}
.top-header span{
    color: #999;
}
h3{
    font-size: 20px;
    font-weight: 600;
    color: rgb(68, 68, 68);
    margin-bottom: 15px;
}

/* -- About info -- */
.about-info{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-block: 30px 70px;
    padding-inline: 20px;
    width: 100%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 8px 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}
.about-info p{
    text-align: center;
    font-size: 15px;
    color: #777;
}

.about-btn button{
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: var(--first-color);
    background: #f1f1f1;
    border-radius: 30px;
}
.about-btn button:hover{
    background: var(--first-color);
}

/* -- About / Skill box -- */
.skills-box{
    margin: 10px;
}
.skills-header{
    margin-bottom: 30px;
}
.skills-list{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.skills-list span{
    font-size: 14px;
    background: var(--first-color);
    color: rgb(255, 255, 255);
    padding: 2px 10px;
    border-radius: 5px;
}

/* -- Project box -- */
.project-container{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.project-box{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30%;
    height: 250px;
    background: rgb(255, 255, 255);
    border-radius: 20px;
    box-shadow: 1px 8px 10px 2px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.project-box>i{
    font-size: 50px;
    color: var(--first-color);
    margin-bottom: 25px;
}
.project-box label{
    font-size: 15px;
    color: #777;
}
.project-box::after, .contact-info::after{
    content: "";
    position: absolute;
    bottom: -100%;
    background: var(--first-color);
    width: 100%;
    height: 100%;
    transition: .4s;
    z-index: 1;
}
.project-box:hover.project-box::after,
.contact-info:hover.contact-info::after{
    bottom: 0;
}
.project-box:hover.project-box i,
.project-box:hover.project-box>h3,
.project-box:hover.project-box>label{
    color: rgb(255, 255, 255);
    z-index: 2;
}

/* -- Contct box -- */
.contact-info{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    width: 100%;
    height: 315px;
    background: var(--first-color);
    border-radius: 10px;
    box-shadow: 1px 8px 10px 2px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.contact-info>h2{
    color: rgb(255, 255, 255);
    margin-bottom: 20px;
}
.contact-info>p{
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgb(255, 255, 255);
    margin-block: 5px;
}
.contact-info p>i{
    font-size: 18px;
}
.contact-info::after{
    background: rgb(255, 255, 255);
}
body.dark .contact-info::after {
    background: rgb(14, 13, 13);
}
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info p,
.contact-info:hover.contact-info i{
    color: #777;
    z-index: 2;
}

body.dark .contact-info:hover.contact-info h2,
body.dark .contact-info:hover.contact-info p,
body.dark .contact-info:hover.contact-info i {
    color: #ffffff;
}

/* -- Contact form -- */
.form-control{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.form-inputs{
    display: flex;
    gap: 10px;
    width: 100%;
}
.input-field{
    width: 50%;
    height: 55px;
    background: transparent;
    border: 2px solid #AAA;
    border-radius: 10px;
    padding-inline: 20px;
    outline: none;
}
textarea{
    width: 100%;
    height: 250px;
    background: transparent;
    border: 2px solid #AAA;
    border-radius: 10px;
    padding: 15px 20px;
    outline: none;
    resize: none;
}
.form-button>.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--first-color);
    color: rgb(255, 255, 255);
}
.form-button>.btn:hover{
    background: var(--first-color);
}
.form-button i{
    font-size: 18px;
    rotate: -45deg;
}

/* -- Footer Section -- */
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 30px;
    background: #F8F8F8;
    padding-block: 40px 60px;
}

body.dark footer {
    background: #1a1919;
    color: #ffffff;
}

.top-footer p {
    font-size: 25px;
    font-weight: 600;
    color: rgb(68, 68, 68);
}

body.dark .top-footer p {
    color: #ffffff;
}

.middle-footer .footer-menu {
    display: flex;
}

.footer_menu_list {
    list-style: none;
}

.footer_menu_list a {
    text-decoration: none;
    color: rgb(68, 68, 68); 
    font-weight: 500;
    margin-inline: 20px;
}

body.dark .footer_menu_list a {
    color: #cccccc;
}

.footer-social-icons {
    display: flex;
    gap: 30px;
}

.bottom-footer {
    font-size: 14px;
    margin-top: 10px;
    color: rgb(68, 68, 68);
}

.bottom-footer a {
    text-decoration: none;
    color: var(--first-color);
    font-weight: bold;
    transition: color 0.3s ease;
}

.bottom-footer a:hover {
    color: var(--copyright-hover-color);
}

body.dark .bottom-footer {
    color: #bbbbbb;
}

/* -- 1024px - Responsive settings -- */
@media only screen and (max-width: 1024px){
    .featured-text{
        padding: 0;
    }
    .image, .image img{
        width: 320px;
        height: 320px;
    }
}

/* -- 720px - Responsive settings -- */
@media only screen and (max-width: 720px) {
    .nav-button{
        display: none;
    }
    .nav-menu.responsive{
        left: 0;
    }
    .nav-menu{
        position: fixed;
        top: 80px;
        left: -100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        width: 100%;
        min-height: 450px;
        height: 90vh;
        transition: .3s;
    }
    .nav_menu_list{
        flex-direction: column;
    }
    .nav-menu-btn{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .featured-box{
        flex-direction: column;
        justify-content: center;
        height: 100vh;
    }
    .featured-text{
        width: 100%;
        order: 2;
        justify-content: center;
        align-content: flex-start;
        min-height: 60vh;
    }
    .social_icons{
        margin-top: 2em;
    }
    .featured-image{
        order: 1;
        justify-content: center;
        min-height: 220px;
        width: 100%;
        margin-top: 100px;
    }
    .image, .image img{
        width: 220px;
        height: 220px;
    }
    .row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 50px;
    }
    .col{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .about-info, .contact-info{
        width: 100%;
    }
    .project-container{
        justify-content: center;
    }
    .project-box{
        width: 80%;
    }

    .scroll-btn{
        width: 150px;
        height: 40px;
        gap: 4px;
     }
}

/* -- 480px - Responsive settings -- */
@media only screen and (max-width: 480px){
    .featured-name{
        font-size: 40px;
    }
    .project-box{
        width: 100%;
    }
    .form-inputs{
        flex-direction: column;
    }
    .input-field{
        width: 100%;
    }
}

JavaScript

Here is the complete code for script.js file to function the portfolio:

// Visit www.jvcodes.com for more free source codes
document.addEventListener('DOMContentLoaded', () => {
  const toggleSwitch = document.getElementById('toggle-switch');
  const body = document.body;
  toggleSwitch.addEventListener('click', () => {
      body.classList.toggle('dark');
  });
});

/* -- Navigation Function -- */
function myMenuFunction(){
  var menuBtn = document.getElementById("myNavMenu");
  if(menuBtn.className === "nav-menu"){
    menuBtn.className += " responsive";
  } else {
    menuBtn.className = "nav-menu";
  }
}

/* -- Add shadow to the navigation bar when scrolling -- */
window.onscroll = function() {headerShadow()};
function headerShadow() {
  const navHeader =document.getElementById("header");
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop >  50) {
    navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.8)";
    navHeader.style.height = "70px";
    navHeader.style.lineHeight = "70px";
  } else {
    navHeader.style.boxShadow = "none";
    navHeader.style.height = "90px";
    navHeader.style.lineHeight = "90px";
  }
}

/* -- Typing revealing effect -- */
var typingEffect = new Typed(".typedText",{
  strings: ["Content Writer", "Copywriter", "SEO Specialist", "Blogger", "Storyteller", "Technical Writer"],
  loop : true,
  typeSpeed : 100, 
  backSpeed : 80,
  backDelay : 2000
})

/* -- Scroll reveal animation -- */
const sr = ScrollReveal({
  origin: 'top',
  distance: '80px',
  duration: 2000,
  reset: true     
})

/* -- HOME -- */
sr.reveal('.featured-text-card',{})
sr.reveal('.featured-name',{delay: 100})
sr.reveal('.featured-text-info',{delay: 200})
sr.reveal('.featured-text-btn',{delay: 200})
sr.reveal('.social_icons',{delay: 200})
sr.reveal('.featured-image',{delay: 300})
/* -- Project Box -- */
sr.reveal('.project-box',{interval: 200})
/* -- Headings -- */
sr.reveal('.top-header',{})

/* -- Scroll reveal left-right animation -- */
/* -- About info & Contact info -- */
const srLeft = ScrollReveal({
  origin: 'left',
distance: '80px',
duration: 2000,
reset: true
})
srLeft.reveal('.about-info',{delay: 100})
srLeft.reveal('.contact-info',{delay: 100})
/* -- About skills & Form box -- */
const srRight = ScrollReveal({
  origin: 'right',
distance: '80px',
duration: 2000,
reset: true
})
srRight.reveal('.skills-box',{delay: 100})
srRight.reveal('.form-control',{delay: 100})

/* ----- Change active link ----- */
const sections = document.querySelectorAll('section[id]')
function scrollActive() {
const scrollY = window.scrollY;
sections.forEach(current =>{
  const sectionHeight = current.offsetHeight,
      sectionTop = current.offsetTop - 50,
    sectionId = current.getAttribute('id')
  if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link')
  }  else {
    document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link')
  }
})
}
window.addEventListener('scroll', scrollActive)

Download Source Code

There are no copyrights in the project — you can download the source codes of this project fully free of charge. Simply press the download button below and you can use this code in your projects.

This code is written according to good programming practices!

Download Source Code

Conclusion

Using HTML, CSS and JavaScript is a perfect instrument for creating the Responsive Portfolio Design for Content Writers. Take the free source codes for your website and ensure that you give credit to JV Source Codes by linking towards the original source.

You can ask questions or if faced with any problem, you can comment here, and I will reply you soon. Just to remind that you can subscribe to the channel and get more useful guides and free resources there!

Download JV Source Codes

Similar Posts

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

In this article, I have prepared the free source code for the neumorphic sidebar menu that may be easily adjusted and implemented on your website projects.
| | |

Neumorphism Side Bar Menu Using HTML and CSS

In web design the sidebar navigation is important as it offers users easy navigation and a more charismatic experience to users. Before you know it, we’re constantly learning something new like today’s feature a Neumorphism Side Bar Menu Using HTML and CSS. It gives the menu a soft, 3D look that is more engaging. In…

3d Rotating Image Gallery
| |

Create a 3D Rotating Image Gallery in HTML, CSS and JavaScript

Creating engaging and artistic features when it comes to website design is very important in order to attract the attention of the visitors. Some of these are the 3D Rotating Image Gallery which you could find to be really interesting in making your web pages stand out. In this article, I will be glad to…

Do you need an eye-catching and professional Modern Marketing Agency Website Template that will perfectly work on any device?
| |

Modern Marketing Agency Website Template Using HTML, CSS, and JavaScript (Free Source Code)

Do you need an eye-catching and professional Modern Marketing Agency Website Template that will perfectly work on any device? Here is a free source code that I have written and complies with the recommended standards. This marketing agency template is designed using HTML, CSS, and JavaScript which makes it perfect for the digital agencies, startups…

Leave a Reply

Your email address will not be published. Required fields are marked *