A Personal Portfolio you must try !

msranjana — Fri, 27 Jun 2025 16:46:50 +0000

Yes. I finally did the thing.

After refining pixels, tweaking animations, and obsessing over every line of CSS — I’ve built my art portfolio that finally feels like me.
👉 Live here

🤔 Why tho?

Honestly?
I wanted a space that reflects both my code and my creativity.

🔍 What’s inside?

This portfolio isn’t just HTML and vibes. Here's the tech stack I used (because devs love lists):

Frameworks & Libraries

Frontend Framework: React.js
Styling: Tailwind CSS
Animations: Framer Motion
Email Handling: emailjs-com

Features

Home Section – A basic homepage for my art portfolio.
About Me – A brief overview of about myself.
Gallery – A categorized display of my artwork (Mandala, Paintings, Sketches, and Doodles).
Navbar – Smooth navigation.
Animations – Engaging hover and click effects powered by Framer Motion.
Contact – Contact form for easy communication.
Responsive Design – Works on all devices.

⭐ Star it on GitHub

👉GitHub Repo

💬 I need you (for feedback, not money… yet)

Top 5 Frontend Mini Projects You Must Try 🚀

msranjana — Fri, 10 Jan 2025 14:31:56 +0000

If you're diving into frontend development, building these mini-projects is one of the best ways to practice your skills and enhance your portfolio. Here are five exciting and beginner-friendly frontend mini-projects that will help you master core concepts while having fun!

1. Bill Splitter 💰

What It Is:

A handy tool for splitting bills among friends or family. This app takes the total bill amount, the number of people, and optionally includes a tip percentage to calculate how much each person owes.

Why You Should Try It:

Master input handling and form validation.
Practice using JavaScript math functions.
Learn how to make responsive designs with CSS Grid or Flexbox.

Features:

Users can specify the number of people to split the bill.
Clear labels and placeholders for inputs.
A reset button to clear all inputs and outputs.

Source Code:

GitHub Repository for Bill Splitter

Live Demo:

Try the Bill Splitter Live!

2. Spell Bee 🐝

What It Is:

This is an interactive Spell Bee game where users can test their spelling skills by listening to a randomly generated word and typing its correct spelling into the input field. It combines fun and education, making it a great project for improving vocabulary.

Why You Should Try It:

Gain experience in DOM manipulation and event handling.
Practice working with arrays of words.
Build interactive user interfaces with smooth feedback for correct/incorrect inputs.

Features:

Displays alerts for correct or incorrect submissions, along with the correct spelling of the word if the answer is wrong.
Generates a random word from a predefined word list when the "Generate a new word" button is clicked.
Reads the displayed word aloud using the Web Speech API when the "Speak" button is clicked.

Source Code:

GitHub Repository for Spell Bee

Live Demo:

Play the Spell Bee Game

3. Rock, Paper, Scissors ✊📄✂

What It Is:

A fun and interactive game where users play Rock, Paper, Scissors against the computer. The computer makes random choices, and the result is displayed instantly.

Why You Should Try It:

Learn about random number generation in JavaScript.
Get comfortable with conditional logic.
Build visually engaging animations using CSS for better UX.

Features:

Users select Rock, Paper, or Scissors by clicking on the respective options.
Displays the result of the game (Win, Lose, or Draw) in real-time.

Source Code:

GitHub Repository for Rock, Paper, Scissors

Live Demo:

Play Rock, Paper, Scissors Now!

4. Expense Tracker 💰

What It Is:

An expense tracker app that helps users manage their income and expenses by displaying balances and transaction history in real-time. This project is perfect for practicing JavaScript array methods and event handling.

Why You Should Try It:

Gain experience with state management using arrays.
Learn DOM manipulation to dynamically add, update, and delete elements.
Build modern user interfaces with interactive animations and responsive design.

Features:

Automatically updates the transaction history and calculations upon submission.
Updates in real-time whenever a transaction is added or removed.
Provides a delete button (x) for each transaction to remove it from the list.

Source Code:

GitHub Repository for Expense Tracker

Live Demo:

View the Expense Tracker Demo

5. Password Strength Checker🔒

What It Is:

A sleek, interactive app that evaluates the strength of user-entered passwords. It provides instant feedback on password characteristics, helping users create more secure passwords.

Why You Should Try It:

Deepen your understanding of regular expressions and event listeners in JavaScript.
Learn to style interactive components using CSS animations and dynamic updates.
Gain hands-on experience with real-time UI feedback mechanisms.

Features:

Real-time Password Analysis: Checks for lowercase, uppercase, numbers, special characters, and length.
Visual Feedback:
- Displays password strength as "Weak," "Medium," or "Strong."
- Dynamic progress bar with colors indicating strength level.
- Indicators toggle based on whether criteria are met.
Character Count: Displays the number of characters in the password.
Interactive Styling: Animations and hover effects for a responsive UI.

Source Code:

GitHub Repository for Password Strength Detector

Live Demo:

View the Password Strength Detector Demo

Why Build These Projects?

All these projects are small enough to complete within a weekend yet challenging enough to teach you valuable frontend concepts. They’ll not only boost your coding confidence but also serve as excellent portfolio pieces to showcase your skills.

Conclusion:

Ready to get started? Choose any of these projects and start coding! The more you build, the more confident you'll become as a frontend developer.
Also ⭐ it & feel free to contribute :)

Forem: msranjana

A Personal Portfolio you must try !

🤔 Why tho?

🔍 What’s inside?

Frameworks & Libraries

Features

⭐ Star it on GitHub

💬 I need you (for feedback, not money… yet)

Top 5 Frontend Mini Projects You Must Try 🚀

1. Bill Splitter 💰

What It Is:

Why You Should Try It:

Features:

Source Code:

Live Demo:

2. Spell Bee 🐝

What It Is:

Why You Should Try It:

Features:

Source Code:

Live Demo:

3. Rock, Paper, Scissors ✊📄✂

What It Is:

Why You Should Try It:

Features:

Source Code:

Live Demo:

4. Expense Tracker 💰

What It Is:

Why You Should Try It:

Features:

Source Code:

Live Demo:

5. Password Strength Checker🔒

What It Is:

Why You Should Try It:

Features:

Source Code:

Live Demo:

Why Build These Projects?

Conclusion: