A minimal portfolio template for developers
⚠️ We are now accepting pull requests ! Let's code
Important
🎉 Special THANKS & SHOUTOUT to @valdemirum for their valuable ⭐ contributions and support in bringing this project to 🌌 Next.js! Your help made this transition 🎡 smooth and efficient, and we couldn’t have done it without 🙌 you.
v0.124/09/2023- Published Minifolio
v0.212/10/2023- Added new features
vRes26/12/2023- Resumed the project
v0.308/10/2024- Added new enhancements
v0.417/10/2024- Added various new sections
v1.003/03/2025- Conversion to NextJS
1Join TheDiscussion
2VisitCONTRIBUTING.md
3CreateIssues
4CreatePull Request
5Star TheRepository
1️Features
4️Deployment
5️Technology
6Star
8Author
1Modern UI/UX
2One page layout
3Valid HTML5 and CSS3 and NextJS
4Fully responsive
1Fork this repo
2Clone the repo
3Create a branch
4Make pull request
Follow the instruction to customize the portfolio─ src/ # Source code directory
├── app/ # Next.js app directory
│ ├── favicon.ico
│ ├── globals.css # Global styles
│ ├── layout.tsx # Layout component
│ └── page.tsx # Main page component
│
├── components/ # Reusable UI components
│ ├── about/ # "About" section components
│ ├── education/ # "Education" section components
│ ├── footer/ # Footer components
│ ├── hero/ # Hero/landing section
│ ├── navbar/ # Navigation bar components
│ ├── services/ # "Services" section components
│ └── skills/ # "Skills" section components
│
├── ui/ # UI-specific shared components
│ └── icons.tsx # Icon components
│
└── utils/ # Utility/helper functions
└── fonts.ts # Font configuration
Old Documentation
> ## 🏠 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>
<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">     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>
<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>
<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>
<text>Replace it with Custom Title
<textMain>Replace it with a short Description
<div class="servicesC" id="services">
<div class="title">     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>
<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>Minifolio is deployed by Vercel
1NextJS
2CSS
3JavaScript
4Github
5TypeScript
6Vercel
If you like the project, give a
Star
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.
