DEV Community

Cover image for How I Created My First Portfolio Website Using GitHub Pages
Tejaswini
Tejaswini

Posted on

How I Created My First Portfolio Website Using GitHub Pages

#html #webdev #portfolio #beginners 
                             _INTRODUCTION_

AS a CSE student aspiring to become a Software Engineer , I wanted to showcase my projects online for free. That's when I discovered GitHub pages- a simple way to host a websites directly from a GitHub repository.

In this post, I'll walk you through how I built my first portfolio website in just a few steps.

STEP 1: Create a GitHub Repository
- Log in to "GitHub".
- Click new repository.
- Name it as yourusername.github.io
- Make it public and click Create repository.

STEP 2: Add your HTML File
- On your computer, create a file named index.html.
- Add basic HTML code:
<!DOCTYPE html>




MUNUKUNTLA TEJASWINI - Portfolio
<br> body {<br> font-family: Arial, sans-serif;<br> margin: 0;<br> background-color: #f9f9f9;<br> color: #333;<br> line-height: 1.6;<br> }<br> header {<br> background: #222;<br> color: white;<br> text-align: center;<br> padding: 2rem;<br> }<br> header h1 {<br> margin: 0;<br> font-size: 2.5rem;<br> }<br> header p {<br> font-size: 1.2rem;<br> color: #bbb;<br> }<br> section {<br> padding: 2rem;<br> max-width: 900px;<br> margin: auto;<br> }<br> h2 {<br> color: #222;<br> border-bottom: 2px solid #ddd;<br> padding-bottom: 0.5rem;<br> }<br> .skills, .projects {<br> display: grid;<br> grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));<br> gap: 1rem;<br> }<br> .card {<br> background: white;<br> padding: 1rem;<br> border-radius: 8px;<br> box-shadow: 0 2px 6px rgba(0,0,0,0.1);<br> }<br> a {<br> color: #007acc;<br> text-decoration: none;<br> }<br> a:hover {<br> text-decoration: underline;<br> }<br> footer {<br> text-align: center;<br> padding: 1rem;<br> background: #222;<br> color: white;<br> margin-top: 2rem;<br> }<br>



MUNUKUNTLA TEJASWINI


Aspiring Software Engineer | Java & Web Development


<section>
    <h2>About Me</h2>
    <p>Hello! I am a Computer Science student passionate about coding and problem-solving.
       I enjoy building web applications and working on Java projects.
       I’m currently preparing for placements and improving my GitHub profile.</p>
</section>

<section>
    <h2>Skills</h2>
    <div class="skills">
        <div class="card">Java</div>
        <div class="card">HTML & CSS</div>
        <div class=”card”>PHP</div>
        <div class=”card”>MySQL</div>
        <div class="card">JavaScript</div>
        <div class="card">Git & GitHub</div>
    </div>
</section>

<section>
    <h2>Projects</h2>
    <div class="projects">
        <div class="card">
            <h3>Circle Parameter Finder</h3>
            <p>A simple Java program to calculate circumference and area of a circle.</p>
            <a href="#">View on GitHub</a>
        </div>
        <div class="card">
            <h3>Portfolio Website</h3>
            <p>This personal website, built with HTML & CSS, hosted on GitHub Pages.</p>
            <a href="#">View on GitHub</a>
        </div>
    </div>
</section>

<section>
    <h2>Contact</h2>
    <p>Email: <a href="malito:tejut2225@gmail.com">tejut2225@gmail.com</a></p>
</section>

<footer>
    <p>© 2025 MUNUKUNTLA TEJASWINI</p>
</footer>

      - Upload this file to your GitHub repository.

STEP 3: Enable GitHub Pages
- Go to your repository Settings.
- Scroll to pages.
- Under "Source", select main branch and save.

STEP 4: Share Your Link
After enabling Pages, GitHub will give you a link like- https://github.com/tejut2225/tejaswini.github.io.git
You can share this link in your resume , LinkedIn , and GitHub profile bio

OBSERVATIONS

  • GitHub pages is beginner friendly and free.
  • You only need an index.html file to get started.
  • Small projects like this help build confidence for larger ones.

Tech stack
-Built with HTML5 , CSS3 , and basic JavaScript

I plan to improve my portfolio by adding CSS styling , JavaScript interactivity and more and showcasing my coding projects. My goal is to contribute to open-source projects and prepare for roles like Associate Software Engineer at rt Camp. This is just the beginning of my web development journey. I'd love feedback on my portfolio - let me know what you think...

Top comments (0)