Minifolio ⚡

A minimal portfolio template for developers
⚠️ We are now accepting pull requests ! Let's code

               

🚩 License

MIT License

🫥 Code Of Conduct

Code Of Conduct

⚡ What's New ?

v0.1 24/09/2023 - Published Minifolio

v0.2 12/10/2023 - Added new features

vRes 26/12/2023 - Resumed the project

v0.3 08/10/2024 - Added new enhancements

v0.4 17/10/2024 - Added various new sections

✌🏻 Contribute

1 Join The Discussion

2 Visit CONTRIBUTING.md

3 Create Issues

4 Create Pull Request

5 Star The Repository

📁 Content

1️ Features

2️ Getting Started

3 How To Use

4️ Deployment

5️ Technology

6 Star

7 Hacktoberfest

8 Author

9 Contributors

😄 Features

1 Modern UI/UX

2 One page layout

3 Valid HTML5 and CSS3

4 Fully responsive

🚀 Getting Started

1 Fork this repo

2 Clone the repo

3 Create a branch

4 Make pull request

🔥 How To Use

Follow the instruction to customize the portfolio

🌳 Tree Diagram

.
└── Minifolio
    ├── index.html
    ├── css
    │   ├── style.css
    │   ├── 404.css
    │   ├── navbar.css
    │   └── button.css
    │
    ├── js
    │   ├── script.js
    │   ├── 404.js
    │   ├── copyRight.js
    │   └── typingAnimation.js
    │
    ├── logo
    │   ├── minifolio.ico
    │   ├── minifolio.png
    │   └── minifolio.svg
    │
    └── images
        ├── link.png
        ├── facebook.png
        ├── linkedin.png
        └── twitter.png

🏠 Home Page

<span> Replace it with Your Name

<a> Replace it with Custom Label

<onclick> Replace the link with your profile link in script.js

<div id="home" class="home">
    <div class="container">
        <div class="icons-container"></div>
        Hi, my name is <span>Your Name</span> <br />I'm <span id="role"> </span>
        <a class="button" href="#about">Know more</a>
        <a class="buttonIcon">
          <div class="boxes" onclick="twitter()">
            <i class="ri-twitter-line"></i>
          </div>
          <div class="boxes" onclick="linkedin()">
            <i class="ri-linkedin-line"></i>
          </div>
          <div class="boxes" onclick="instagram()">
            <i class="ri-instagram-line"></i>
          </div>
          <div class="boxes" onclick="link()"><i class="ri-link"></i></div>
        </a>
    </div>
</div>

🫤 About Me

<title> Replace it with Custom Title

<text> Replace it Your Name or any Text

<textMain> Replace it with a short Bio

<div class="aboutC">
  <div class="title">&ThickSpace;&ThickSpace;&MediumSpace;ABOUT 🫥</div>
  <div class="titleGap"></div>
  <div class="titleSmall">This and that</div>
  <div class="containerGap"></div>
  <div class="container">
    <div class="leftC">
      <div class="text">Hi, I'm a developer</div>
      <br />
      <div class="textMain">
        I design websites. That's the long and short of it. UI and UX, Sketch,
        Design, and pretty decent HTML and CSS — with Javascript and that nice
        dabble with Java.
      </div>
    </div>
    <div class="rightC">
      <div class="text">TL;DR</div>
      <br />
      <div class="textMain">Web UI & UX <br />Figma<br />HTML & CSS</div>
      <div class="btnC">
        <a class="btn btn-custom btn-lg btn-about" href="#"> Click Me </a>
      </div>
    </div>
  </div>
  <div class="bottomC"></div>
</div>

🏛️ Education

<text> Replace it with Custom Title

<event-time> Replace it with the Time duration

<textMain> Replace it with a short Description

<div class="timeline-container">
  <div class="timeline-line"></div>

  <div class="event-item">
    <div class="empty-space"></div>
    <div class="event-icon">
      <svg>
        <title>...</title>
        <path d="..." />
      </svg>
    </div>

    <div class="event-content">
      <p class="text">Your School Title Here</p>
      <p class="event-time">Year: 20XX- 20XX</p>
      <p class="textMain">
        Completed my 12th standard with a focus on Science and Mathematics,
        achieving a score of XX%.
      </p>
    </div>
  </div>

  <div class="event-item reverse">
    <div class="empty-space"></div>
    <div class="event-icon">
      <svg>
        <title>...</title>
        <path d="..." />
      </svg>
    </div>

    <div class="event-content">
      <p class="text">University Name</p>
      <p class="event-time">Year: 20XX- 20XX</p>
      <p class="textMain">
        Pursuing a Bachelor's degree in ABC, focusing on web development and
        software engineering.
      </p>
    </div>
  </div>

  <div class="event-item">
    <div class="empty-space"></div>
    <div class="event-icon">
      <svg>
        <title>...</title>
        <path d="..." />
      </svg>
    </div>

    <div class="event-content">
      <p class="text">Your Master's Program Title Here</p>
      <p class="event-time">Year: 20XX- 20XX</p>
      <p class="textMain">
        Details about your master's program and focus areas will go here.
      </p>
    </div>
  </div>
</div>

😎 Skills

<a> Replace the href with your github profile link

<div class="container">
  <div class="boxes">
    <div class="left"><i class="ri-html5-fill"></i></div>
    <div class="right">FRONTEND DEVELOPMENT</div>
  </div>
  <div class="boxes">
    <div class="left"><i class="ri-nodejs-fill"></i></div>
    <div class="right">BACKEND DEVELOPMENT</div>
  </div>
  <div class="boxes">
    <div class="left">
      <i class="ri-gamepad-line" style="font-size: 30px"></i>
    </div>
    <div class="right">GAME DEVELOPMENT</div>
  </div>
  <div class="boxes">
    <div class="left">
      <i class="ri-android-fill" style="font-size: 30px"></i>
    </div>
    <div class="right">APP DEVELOPMENT</div>
  </div>
  <div class="buttonCont">
    <a
      class="btn btn-custom btn-lg btn-skills"
      href="https://github.com"
      target="_blank"
    >
      View more
    </a>
  </div>
</div>

🛠️ Services

<text> Replace it with Custom Title

<textMain> Replace it with a short Description

<div class="servicesC" id="services">
  <div class="title">&ThickSpace;&ThickSpace;&MediumSpace;SERVICES 🛠️</div>
  <div class="titleGap"></div>
  <div class="titleGap"></div>

  <div class="titleSmall">What I Offer</div>
  <div class="containerGap"></div>
  <div class="titleGap"></div>

  <div class="container">
    <div class="serviceItem">
      <div class="serviceIcon">
        <ion-icon name="laptop-outline"></ion-icon>
      </div>
      <div class="serviceText">
        <div class="text">Web Dev</div>
        <div class="textMain">
          Building responsive and high-quality websites.
        </div>
      </div>
    </div>
    <div class="serviceItem">
      <div class="serviceIcon">
        <ion-icon name="brush-outline"></ion-icon>
      </div>
      <div class="serviceText">
        <div class="text">UI/UX Design</div>
        <div class="textMain">
          Designing user-friendly interfaces and experiences.
        </div>
      </div>
    </div>
    <div class="serviceItem">
      <div class="serviceIcon">
        <ion-icon name="stats-chart-outline"></ion-icon>
      </div>
      <div class="serviceText">
        <div class="text">SEO Expert</div>
        <div class="textMain">
          Optimizing websites for better search engine ranking.
        </div>
      </div>
    </div>
  </div>
</div>

🌗 Footer

<onclick> Replace the link with your profile link in script.js

<bottomText> Replace the email with your work email

<div class="topHeader">
    <div class="left">2024</div>
    <div class="right">Github</div>
</div>
<div class="linksSection">
    <div class="left">
      <div class="container">
        <div class="topText">Get in touch</div>
        <div class="bottomText">youremail@proton.me</div>
      </div>
      <div class="container">
        <div class="topText">Connect</div>
        <div class="bottomText" onclick="github()">Github</div>
        <div class="bottomText" onclick="instagram()">Instagram</div>
        <div class="bottomText" onclick="twitter()">Twitter (X)</div>
        <div class="bottomText" onclick="linkedin()">Linkedin</div>
      </div>
    </div>
</div>

📦 Deployment

Minifolio is deployed by Github Page

🌱 Technology

1 HTML

2 CSS

3 JavaScript

4 Github

⭐ Star

If you like the project, give a Star

🎯 Hacktoberfest

Hacktoberfest is a month-long celebration of open source projects, the maintainers, and the entire community of contributors.

You'll receive your digital reward once you’ve completed four accepted pull/merge requests.

The first 50,000 participants to have their first PR/MR accepted will have a tree planted in their name through Tree Nation.

✒️ Author

@ Divyanshu Dhruv

⌚ Contributors

@ Contributors