Picture by Writer
# Introduction
An internet portfolio isn’t non-obligatory anymore. It’s often the very first thing individuals test once they wish to see what you may really do. Not your CV. Not your LinkedIn. Your work. In case you’re constructing issues as a developer, knowledge scientist, ML engineer, designer, and even simply studying, a portfolio provides your tasks a spot to reside. And also you don’t want paid internet hosting to do it.
Hugging Face Areas is a type of instruments individuals overlook. It’s free, simple to deploy, and ok to host a clear private website with reside demos. You may hold it easy or add interactive items if that matches your work. On this article, we are going to cowl what Hugging Face Areas is, why it’s nice for portfolios, and how one can deploy yours step-by-step.
# What’s Hugging Face Areas?
Hugging Face Areas is a platform that lets you host internet purposes immediately from a GitHub repository, making deployment easy and accessible even for freshmen. Whereas it was initially designed to showcase machine studying demos, the platform has advanced considerably and now helps a variety of use circumstances, together with static web sites, Python-based purposes, interactive person interfaces, and absolutely practical AI-powered demos. You may construct Areas utilizing:
- Static HTML/CSS/JS
- Gradio (Python UI framework)
- Streamlit
For portfolios, this flexibility is a big benefit. Let’s see step-by-step the best way to host your portfolio on Hugging Face Areas without spending a dime.
# Step 1: Making a Hugging Face Account
Go to Hugging Face and enroll.
# Step 2: Making ready Your Portfolio
You may select one of many following approaches:
// Choice A: Static Web site (HTML/CSS/JS)
Your folder would possibly seem like:
portfolio/
│── index.html
│── type.css
│── script.js
// Choice B: Python-Primarily based Portfolio (Gradio / Streamlit)
This contains information as:
# Step 3: Making a New Area
-
Click on New Area
This opens the next web page
-
Select:
- Proprietor: your username
- Area identify: e.g. my-portfolio
- License: MIT (advisable)
-
Choose SDK:
- Static for HTML, CSS, and JS portfolios
- Gradio for Python-based interactive portfolios
- Streamlit for knowledge dashboards
-
After filling up, click on Create Area.
# Step 4: Importing or Connecting Your Code
You may add information immediately or connect with a GitHub repository.
- For Static SDK, simply add index.html and property.
- For Gradio or Streamlit, guarantee:
- app.py exists
- necessities.txt lists dependencies
Hugging Face robotically builds and deploys your Area. For instance, since I chosen Gradio, I’ll click on create the app.py file:
After this, the next web page opens:
I’ll edit the app.py file as follows:
import gradio as gr
def contact_message(identify, message):
return f"Thanks {identify}! Your message has been obtained 😊"
with gr.Blocks(title="Eisha's Portfolio") as demo:
gr.Markdown(
"""
# 👋 Hello, I am Kanwal
### AI / ML Fanatic | Python Developer
Welcome to my portfolio!
I take pleasure in constructing AI-powered purposes and clear backend methods.
"""
)
gr.Markdown("## 🚀 Tasks")
gr.Markdown(
"""
**🔹 PDF Parser with LangChain**
Customized PDF parsing with header/footer removing and LLM integration.
**🔹 Case Similarity Finder (FYP)**
Finds comparable medical/authorized circumstances utilizing LLaMA-based embeddings.
**🔹 AI Chatbot Demo**
Conversational AI constructed utilizing Hugging Face fashions.
"""
)
gr.Markdown("## Resume")
gr.Markdown(
"[Download my resume](https://instance.com/resume.pdf)"
)
gr.Markdown("## Contact Me")
identify = gr.Textbox(label="Your Title")
message = gr.Textbox(label="Your Message", strains=3)
output = gr.Textbox(label="Response")
submit = gr.Button("Ship Message")
submit.click on(contact_message, inputs=[name, message], outputs=output)
gr.Markdown(
"""
---
🔗 **GitHub:** https://github.com/yourusername
🔗 **LinkedIn:** https://linkedin.com/in/yourprofile
"""
)
demo.launch()
After enhancing the app.py file, click on on Commit new file to most important:
# Step 5: Your Portfolio is Stay
Now, on the identical web page, click on on App to view your portfolio.
Upon clicking, you may see your portfolio:
Alternatively, you can even go to https://
- About Me part
- Tasks with reside demos
- Resume obtain
- Contact hyperlinks
- GitHub and LinkedIn
With Gradio, you may flip this into an interactive expertise.
# Tricks to Make Your Portfolio Stand Out
-
Add Stay Demos:
- ML fashions
- Chatbots
- NLP instruments
- Knowledge visualizations
- Preserve It Light-weight: Free Areas have useful resource limits, so optimise property
- Use a Clear UI: Minimal design over flashy animations
- Add a README.md: Your Area web page reveals README content material, so use it properly
# Ultimate Ideas
Hugging Face Areas is greater than a demo platform. It’s a free, trendy, and highly effective internet hosting answer for portfolios. In case your work entails code, knowledge, or AI, internet hosting your portfolio on Areas immediately differentiates you from conventional static websites. Your portfolio shouldn’t simply say what you are able to do. It ought to present it reside.
Kanwal Mehreen is a machine studying engineer and a technical author with a profound ardour for knowledge science and the intersection of AI with drugs. She co-authored the e-book “Maximizing Productiveness with ChatGPT”. As a Google Technology Scholar 2022 for APAC, she champions range and tutorial excellence. She’s additionally acknowledged as a Teradata Range in Tech Scholar, Mitacs Globalink Analysis Scholar, and Harvard WeCode Scholar. Kanwal is an ardent advocate for change, having based FEMCodes to empower ladies in STEM fields.
Picture by Writer
# Introduction
An internet portfolio isn’t non-obligatory anymore. It’s often the very first thing individuals test once they wish to see what you may really do. Not your CV. Not your LinkedIn. Your work. In case you’re constructing issues as a developer, knowledge scientist, ML engineer, designer, and even simply studying, a portfolio provides your tasks a spot to reside. And also you don’t want paid internet hosting to do it.
Hugging Face Areas is a type of instruments individuals overlook. It’s free, simple to deploy, and ok to host a clear private website with reside demos. You may hold it easy or add interactive items if that matches your work. On this article, we are going to cowl what Hugging Face Areas is, why it’s nice for portfolios, and how one can deploy yours step-by-step.
# What’s Hugging Face Areas?
Hugging Face Areas is a platform that lets you host internet purposes immediately from a GitHub repository, making deployment easy and accessible even for freshmen. Whereas it was initially designed to showcase machine studying demos, the platform has advanced considerably and now helps a variety of use circumstances, together with static web sites, Python-based purposes, interactive person interfaces, and absolutely practical AI-powered demos. You may construct Areas utilizing:
- Static HTML/CSS/JS
- Gradio (Python UI framework)
- Streamlit
For portfolios, this flexibility is a big benefit. Let’s see step-by-step the best way to host your portfolio on Hugging Face Areas without spending a dime.
# Step 1: Making a Hugging Face Account
Go to Hugging Face and enroll.
# Step 2: Making ready Your Portfolio
You may select one of many following approaches:
// Choice A: Static Web site (HTML/CSS/JS)
Your folder would possibly seem like:
portfolio/
│── index.html
│── type.css
│── script.js
// Choice B: Python-Primarily based Portfolio (Gradio / Streamlit)
This contains information as:
# Step 3: Making a New Area
-
Click on New Area
This opens the next web page
-
Select:
- Proprietor: your username
- Area identify: e.g. my-portfolio
- License: MIT (advisable)
-
Choose SDK:
- Static for HTML, CSS, and JS portfolios
- Gradio for Python-based interactive portfolios
- Streamlit for knowledge dashboards
-
After filling up, click on Create Area.
# Step 4: Importing or Connecting Your Code
You may add information immediately or connect with a GitHub repository.
- For Static SDK, simply add index.html and property.
- For Gradio or Streamlit, guarantee:
- app.py exists
- necessities.txt lists dependencies
Hugging Face robotically builds and deploys your Area. For instance, since I chosen Gradio, I’ll click on create the app.py file:
After this, the next web page opens:
I’ll edit the app.py file as follows:
import gradio as gr
def contact_message(identify, message):
return f"Thanks {identify}! Your message has been obtained 😊"
with gr.Blocks(title="Eisha's Portfolio") as demo:
gr.Markdown(
"""
# 👋 Hello, I am Kanwal
### AI / ML Fanatic | Python Developer
Welcome to my portfolio!
I take pleasure in constructing AI-powered purposes and clear backend methods.
"""
)
gr.Markdown("## 🚀 Tasks")
gr.Markdown(
"""
**🔹 PDF Parser with LangChain**
Customized PDF parsing with header/footer removing and LLM integration.
**🔹 Case Similarity Finder (FYP)**
Finds comparable medical/authorized circumstances utilizing LLaMA-based embeddings.
**🔹 AI Chatbot Demo**
Conversational AI constructed utilizing Hugging Face fashions.
"""
)
gr.Markdown("## Resume")
gr.Markdown(
"[Download my resume](https://instance.com/resume.pdf)"
)
gr.Markdown("## Contact Me")
identify = gr.Textbox(label="Your Title")
message = gr.Textbox(label="Your Message", strains=3)
output = gr.Textbox(label="Response")
submit = gr.Button("Ship Message")
submit.click on(contact_message, inputs=[name, message], outputs=output)
gr.Markdown(
"""
---
🔗 **GitHub:** https://github.com/yourusername
🔗 **LinkedIn:** https://linkedin.com/in/yourprofile
"""
)
demo.launch()
After enhancing the app.py file, click on on Commit new file to most important:
# Step 5: Your Portfolio is Stay
Now, on the identical web page, click on on App to view your portfolio.
Upon clicking, you may see your portfolio:
Alternatively, you can even go to https://
- About Me part
- Tasks with reside demos
- Resume obtain
- Contact hyperlinks
- GitHub and LinkedIn
With Gradio, you may flip this into an interactive expertise.
# Tricks to Make Your Portfolio Stand Out
-
Add Stay Demos:
- ML fashions
- Chatbots
- NLP instruments
- Knowledge visualizations
- Preserve It Light-weight: Free Areas have useful resource limits, so optimise property
- Use a Clear UI: Minimal design over flashy animations
- Add a README.md: Your Area web page reveals README content material, so use it properly
# Ultimate Ideas
Hugging Face Areas is greater than a demo platform. It’s a free, trendy, and highly effective internet hosting answer for portfolios. In case your work entails code, knowledge, or AI, internet hosting your portfolio on Areas immediately differentiates you from conventional static websites. Your portfolio shouldn’t simply say what you are able to do. It ought to present it reside.
Kanwal Mehreen is a machine studying engineer and a technical author with a profound ardour for knowledge science and the intersection of AI with drugs. She co-authored the e-book “Maximizing Productiveness with ChatGPT”. As a Google Technology Scholar 2022 for APAC, she champions range and tutorial excellence. She’s additionally acknowledged as a Teradata Range in Tech Scholar, Mitacs Globalink Analysis Scholar, and Harvard WeCode Scholar. Kanwal is an ardent advocate for change, having based FEMCodes to empower ladies in STEM fields.
