🎨 Jiya The Coolartist — Art Portfolio Website

Showcasing creativity, one brushstroke at a time

📖 Table of Contents

• About The Project
• Features
• Tech Stack
• Project Structure
• Getting Started
• Screenshots
• Roadmap
• Contributing
• FAQ
• Show Your Support
• License
• Contact & Author
• Acknowledgments

🧠 About The Project

Jiya The Coolartist is a personal art portfolio website that serves as a digital gallery, learning hub, and inspiration platform for aspiring artists worldwide. This project showcases a diverse collection of artwork across multiple mediums while providing practical resources for beginners.

🎯 Project Goals

1. Showcase Artistic Work — Display 80+ artworks across 5 different art styles
2. Educate Beginners — Provide material recommendations and learning resources
3. Inspire Creativity — Share the authentic journey of an artist who started at age 16
4. Build Community — Connect with fellow artists and art enthusiasts
5. Open Source Learning — Serve as a template for other artists to create their portfolios

What Makes This Portfolio Special?

• 🎨 Diverse Art Styles — Oil Pastel, Watercolor, Pencil Shading, Colored Pencil, and Mandala art
• 🧰 Practical Resources — Detailed material lists with budget-friendly alternatives for beginners
• 📹 Multimedia Integration — Embedded tutorials, YouTube videos, and social media links
• 📖 Personal Storytelling — Authentic journey from beginner (age 16) to established artist
• 🌐 Fully Responsive — Optimized for viewing on all device sizes (mobile, tablet, desktop)
• 💡 Beginner-Friendly — Clear guidance on materials, techniques, and getting started
• 🚀 Open Source — Free template for other artists to fork and customize
• ⚡ Zero Dependencies — Pure HTML/CSS/JS means fast loading and easy maintenance

Target Audience

• 🎨 Aspiring Artists — Beginners looking for guidance and inspiration
• 📚 Art Students — Learning about different mediums and techniques
• 🌟 Portfolio Seekers — Developers wanting a simple portfolio template
• 👥 Art Enthusiasts — People who appreciate diverse art styles
• 💼 Potential Clients — Those interested in commissioning artwork

Live Demo

🌐 Visit the live website: https://jiyabatra.github.io/ArtPortfolio-jtc/

Try it on your phone, tablet, or desktop to see the responsive design in action!

✨ Features

🏠 Home Page (index.html)

• Hero Section — Eye-catching introduction with artist branding
• Sticky Navigation — Always-accessible menu bar with smooth scrolling
• Mobile Hamburger Menu — Responsive navigation for mobile devices
• Materials Reference Table — Comprehensive list of art supplies with budget-friendly alternatives
• Art Category Cards — Interactive cards linking to different art galleries
• Artist Journey Timeline — Visual storytelling of artistic milestones
• Social Media Integration — Direct links to YouTube and Instagram
• Custom Cursor Animation — Aesthetic animated cursor for enhanced UX

👤 About Page (about.html)

• Personal Story Section — Authentic narrative about starting art at age 16
• Artistic Philosophy — Values and approach to art creation
• Career Highlights — Key achievements and milestones
• Visual Biography — Image-rich storytelling layout
• Inspiration Sources — Credits to mentors and influences

📞 Contact Page (contact.html)

• Instagram Direct Link — Quick access to DM the artist
• Email Contact Option — Professional email communication
• Example Questions — Helpful prompts for common queries
• Response Time Info — Clear expectations (24-hour reply time)
• Beginner-Friendly — Encourages questions from new artists

📧 Get In Touch Page (getInTouch.html)

• Simplified Contact Form — Quick action page for reaching out
• Call-to-Action Buttons — Clear, prominent contact options

🎬 Art Studio Page (youtube.html)

• Embedded Tutorial Videos — Step-by-step art lessons
• YouTube Channel Integration — Direct access to full video library
• Categorized Resources — Organized learning materials
• Learning Guides — Curated playlists for beginners

🎯 Individual Art Gallery Pages

🖍️ Oil Pastel Page (oilpastel.html)

• Gallery showcasing vibrant oil pastel artwork
• Technique highlights and material recommendations
• 10+ high-quality artwork images

🌊 Watercolor Painting Page (painting.html)

• Collection of watercolor artworks
• Color palette inspiration
• 15+ painting thumbnails with full-view options

✏️ Pencil Shading Page (pencilshading.html)

• Monochrome graphite artwork gallery
• Light and shadow technique demonstrations
• Portraits and realistic drawings

🎨 Pencil Color Page (pencilcolor.html)

• Colored pencil artwork showcase
• Blending and layering examples
• Nature and portrait subjects

🪷 Mandala Art Page (mandalaart.html)

• Intricate mandala designs
• Symmetry and pattern inspiration
• Meditative art examples

🌐 Cross-Page Features

• Fully Responsive Design — Works on all screen sizes (mobile, tablet, desktop)
• Fast Loading Times — Optimized images and minimal dependencies
• SEO Optimized — Proper meta tags and semantic HTML structure
• Browser Compatible — Works on Chrome, Firefox, Safari, and Edge
• Accessible Navigation — Keyboard-friendly and screen reader compatible
• Consistent Branding — Unified color scheme and typography across all pages
• No External Dependencies — Pure HTML/CSS/JS (no frameworks required)

🛠️ Tech Stack

Technology	Purpose	Why We Use It
	Structure & Content	Semantic markup for SEO and accessibility
	Styling & Layout	Flexbox, Grid, animations, and responsive design
	Interactivity	Hamburger menu, smooth scrolling, and UI enhancements
	Hosting	Free, reliable, and automatic deployment

🎯 Technology Choices Explained

Why Pure HTML/CSS/JS?

✅ Advantages:

• No Build Process — Edit and see changes instantly, no compilation needed
• Zero Dependencies — No package.json, no node_modules, no bloat
• Fast Loading — Minimal file sizes mean quick page loads (under 2 seconds)
• Easy Maintenance — Anyone with basic web knowledge can contribute
• SEO Friendly — Clean semantic HTML is loved by search engines
• Free Hosting — GitHub Pages serves static sites for free
• Long-term Stability — No framework updates or breaking changes to worry about
• Learning Friendly — Perfect for beginners to learn web development basics

📚 Perfect for:

• Personal portfolios and art galleries
• Beginner-friendly open source projects
• Fast prototyping and MVPs
• Projects focused on content over complexity

Browser Compatibility

Tested and working on:

• ✅ Chrome/Edge 90+
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

📦 No Installation Required!

Unlike modern web frameworks, this project requires:

• ❌ No npm install
• ❌ No build tools
• ❌ No virtual environments
• ❌ No package managers

Just clone and open in a browser! 🚀

📁 Project Structure

ARTPORTFOLIO-JTC
│
├── .git/                 → Git version control data
├── .github/              → GitHub workflows, templates, configs
│
├── assets/               → Static files and media
│   └── images/           → All image assets used in the site
│
├── components/           → Reusable UI components
│   ├── footer.html       → Site footer
│   └── navbar.html       → Site navigation bar
│
├── css/                  → All stylesheets
│   ├── 3d-effects.css            → 3D visual effects
│   ├── aboutStyle.css            → About page styles
│   ├── contactStyle.css          → Contact page styles
│   ├── getInTouch.css            → Get In Touch page styles
│   ├── style.css                 → Global styles
│   └── typographyAnimations.css  → Text & typography animations
│
├── js/                   → JavaScript files
│   ├── 3d-parallax.js     → Parallax and depth effects
│   ├── CustomCursor.js    → Custom cursor behavior
│   └── getInTouch.js      → Get In Touch page scripts
│
├── pages/                → All website pages
│   ├── paintings/        → Painting gallery pages
│   │   ├── mandalaart.html
│   │   ├── oilpastel.html
│   │   ├── painting.html
│   │   ├── pencilcolor.html
│   │   └── pencilshading.html
│   │
│   ├── about.html        → About page
│   ├── contact.html      → Contact page
│   ├── getInTouch.html   → Get In Touch page
│   └── youtube.html      → YouTube showcase page
│
├── Contributing.md       → Contribution guidelines
├── index.html            → Main landing page
├── LICENSE               → Open-source license
└── README.md             → Project documentation

File Descriptions

File/Folder	Purpose	Key Features
index.html	Portfolio homepage	Hero section, materials table, art categories
pages/about.html	Artist biography	Personal journey, achievements, milestones
pages/contact.html	Contact information	Instagram & email links, example questions
pages/youtube.html	Art studio & tutorials	Embedded YouTube videos and learning resources
pages/getInTouch.html	Direct contact page	Quick contact action and outreach section
pages/paintings/*.html	Individual art galleries	Dedicated pages for each art medium and artwork collection
components/navbar.html	Reusable navigation bar	Shared header navigation across all pages
components/footer.html	Reusable footer	Common footer content across site
css/style.css	Global stylesheet	Layout system, responsive design, base typography
css/aboutStyle.css	About page styles	Page-specific layout and design
css/contactStyle.css	Contact page styles	Contact layout and visual styling
css/getInTouch.css	Get In Touch page styles	Form and interaction styling
css/3d-effects.css	Visual effects styles	3D transforms and depth effects
css/typographyAnimations.css	Text animations	Animated headings and typography effects
js/3d-parallax.js	Parallax effects script	Depth and scroll-based motion effects
js/CustomCursor.js	Cursor enhancement script	Custom interactive cursor behavior
js/getInTouch.js	Contact interaction script	Page-specific interactive functionality
assets/images/	Image assets	Artwork images and visual media used across the site
Contributing.md	Contribution guidelines	Rules and standards for contributors
README.md	Project documentation	Overview, setup guide, and structure
LICENSE	Open-source license	Legal usage and distribution terms

🚀 Getting Started

Prerequisites

No special software required! You only need:

• ✅ A modern web browser (Chrome, Firefox, Safari, or Edge)
• ✅ A text editor (VS Code, Sublime Text, or even Notepad)
• ✅ Git (optional, for version control)

That's it! No installations, no dependencies, no build tools. 🎉

Installation & Local Setup

Option 1: Quick Start (Beginners) 🌟

1. Download the project

   • Click the green "Code" button on GitHub
   • Select "Download ZIP"
   • Extract the ZIP file to your desired location

2. Open the project

   • Navigate to the extracted folder
   • Double-click index.html
   • The website will open in your default browser!

Option 2: Using Git (Recommended) 💻

1. Clone the repository

   git clone https://github.com/JiyaBatra/ArtPortfolio-jtc.git

2. Navigate to the project directory

   cd ArtPortfolio-jtc

3. Open in browser

   Windows:

   start index.html

   macOS:

   open index.html

   Linux:

   xdg-open index.html

Option 3: Using a Local Server (Advanced) 🚀

For a more realistic development environment:

Using Python:

# Python 3
python -m http.server 8000

# Python 2 (if you still have it)
python -m SimpleHTTPServer 8000

Using Node.js:

# Install http-server globally (one-time)
npm install -g http-server

# Run server
http-server

# Or use npx (no installation needed)
npx serve

Using VS Code:

• Install "Live Server" extension
• Right-click on index.html
• Select "Open with Live Server"

Then visit http://localhost:8000 in your browser.

Making Changes

1. Open any .html or .css file in your text editor
2. Make your changes
3. Save the file
4. Refresh your browser to see the updates!

Deployment to GitHub Pages

This project is automatically deployed via GitHub Pages. Any push to the main branch triggers a deployment.

To deploy your own version:

1. Fork this repository to your GitHub account
2. Go to your forked repository
3. Click Settings → Pages (in the left sidebar)
4. Under "Source", select:
   • Branch: main
   • Folder: / (root)
5. Click Save
6. Wait 2-3 minutes for deployment

Your site will be live at: https://[your-username].github.io/ArtPortfolio-jtc/

Troubleshooting

Issue	Solution
Page not loading	Ensure index.html is in the root directory
Images not showing	Check that assets/images/ folder exists
CSS not applying	Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
GitHub Pages not working	Ensure repository is public and Pages is enabled

� Screenshots

🏠 Home Page

Hero section with navigation and art categories

👤 About Page

Artist biography and journey timeline

🎨 Art Gallery Examples

Oil Pastel	Watercolor	Pencil Shading

Mandala Art	Pencil Color	Art Studio

Various art styles showcased in the portfolio

📱 Responsive Design

The website is fully responsive and works seamlessly across all devices:

• 💻 Desktop (1920px and above)
• 💻 Laptop (1366px - 1920px)
• 📱 Tablet (768px - 1366px)
• 📱 Mobile (320px - 768px)

�🗺️ Roadmap

✅ Completed Features

• Responsive design for all devices
• Multi-page navigation system
• Art gallery with multiple categories
• Material requirements table
• Social media integration
• Custom cursor animation
• GitHub Pages deployment

🎯 Phase 1 (Q1 2026)

• Add image lightbox gallery
• Implement dark/light theme toggle
• Add loading animations
• Create blog section for art tips
• Add image lazy loading

🚧 Phase 2 (Q2 2026)

• Interactive tutorial section
• Art progress tracker
• Newsletter subscription
• Search functionality
• Multilingual support (Hindi/English)

🔮 Phase 3 (Q3 2026)

• Backend integration for contact form
• User comment system
• Online art shop/marketplace
• Live workshop booking
• Community gallery submissions

💡 Future Considerations

• PWA (Progressive Web App) features
• Mobile app version
• AR art preview feature
• Video course platform
• Artist collaboration tools

🤝 Contributing

Contributions make the open-source community an amazing place to learn and create! Any contributions you make are greatly appreciated.

This project follows JWOC (Jaipur Winter of Code) contribution standards.

Quick Start for Contributors

📖 Detailed contribution guidelines available in Contributing.md

Step-by-Step Process

1. ⚠️ First, raise an issue (mandatory for JWOC)

   • Go to the Issues tab
   • Click New Issue
   • Clearly describe the bug, feature, or improvement
   • Wait for issue assignment

2. 🍴 Fork the Project

   • Click the "Fork" button at the top right
   • This creates your own copy of the repository

3. 📥 Clone your fork

   git clone https://github.com/your-username/ArtPortfolio-jtc.git
   cd ArtPortfolio-jtc

4. 🌿 Create your Feature Branch (use issue number)

   git checkout -b issue-123-feature-name

   Replace 123 with your issue number

5. ✏️ Make your changes

   • Edit the files
   • Test on multiple browsers
   • Ensure responsive design works

6. 💾 Commit your Changes

   git add .
   git commit -m "Fix: Brief description of change (fixes #123)"

7. 📤 Push to the Branch

   git push origin issue-123-feature-name

8. 🎯 Open a Pull Request

   • Go to your fork on GitHub
   • Click "Compare & pull request"
   • Link your PR to the issue
   • Provide a clear description of changes

Contribution Guidelines

✅ Do's:

• Follow existing code style and structure
• Test your changes on multiple browsers (Chrome, Firefox, Safari)
• Include screenshots if your changes affect the UI
• Write clear, descriptive commit messages
• Keep commits atomic (one logical change per commit)
• Ensure responsive design works on mobile devices
• Add comments to complex code sections

❌ Don'ts:

• Don't push directly to the main branch
• Don't make unrelated changes in a single PR
• Don't copy code without attribution
• Don't submit untested code
• Don't modify files outside your issue scope

Areas for Contribution

We welcome contributions in the following areas:

Category	Examples
🐛 Bug Fixes	Broken links, layout issues, browser compatibility
🎨 UI/UX Improvements	Better animations, color schemes, user flows
📱 Mobile Responsiveness	Tablet/mobile layout enhancements
♿ Accessibility	ARIA labels, keyboard navigation, screen readers
⚡ Performance	Image optimization, lazy loading, code minification
📚 Documentation	README updates, code comments, tutorials
🌐 Features	New art categories, galleries, interactive elements
🧪 Testing	Browser testing, accessibility testing

Code Review Process

1. Maintainers will review your PR within 48 hours
2. Changes may be requested for improvements
3. Once approved, your PR will be merged
4. Your contribution will be credited in the project!

First-Time Contributors

New to open source? No problem! 🌟

• Check issues labeled good first issue or beginner-friendly
• Read the Contributing.md guide
• Ask questions in the issue comments
• Join the community and learn together!

Recognition

All contributors will be:

• ⭐ Listed in our contributors section
• 🏆 Acknowledged in release notes
• 💝 Given credit for their work

📄 License

This project is licensed under the MIT License - see the LICENSE file for complete details.

What does this mean?

You are free to:

• ✅ Use this project for personal or commercial purposes
• ✅ Modify and adapt the code to fit your needs
• ✅ Use it as a template for your own portfolio
• ✅ Share and distribute the code
• ✅ Create derivative works

What we ask:

• 📝 Include the original license file in your project
• 💝 Attribution is appreciated but not required
• ⚠️ The project is provided "as is" without warranty

Simple Terms:

"Do whatever you want with this code, just don't blame us if something goes wrong!"

This is one of the most permissive licenses available, making it perfect for learning and experimentation! 🚀

📞 Contact & Author Information

Jiya Batra — The Coolartist

"Creativity is intelligence having fun, one brushstroke at a time."

🎨 About the Artist

Jiya is a self-taught artist who began her creative journey at age 16. Specializing in multiple mediums including oil pastels, watercolors, and pencil art, she has grown her community to thousands through social media and educational content. Her mission is to make art accessible and inspiring for everyone.

---

📱 Connect With Me

🔗 Project Links

Link Type	URL
🌐 Live Website	https://jiyabatra.github.io/ArtPortfolio-jtc/
📦 GitHub Repository	https://github.com/JiyaBatra/ArtPortfolio-jtc
🐛 Report Bug	Open an Issue
💡 Request Feature	Open an Issue
📖 Contributing Guide	Contributing.md

💬 Get In Touch

I'm always happy to connect with fellow artists, answer questions, or discuss collaboration opportunities!

What you can reach out for:

• 🎨 Art learning questions and guidance
• 🖼️ Commission inquiries
• 🤝 Collaboration opportunities
• 💡 Project suggestions and feedback
• 🐛 Bug reports or technical issues

Response Time: Usually within 24 hours ⏰

❓ Frequently Asked Questions (FAQ)

Can I use this template for my own portfolio?

Yes! This project is MIT licensed, which means you can:

• ✅ Use it for personal or commercial projects
• ✅ Modify it to fit your needs
• ✅ Share and distribute it

Attribution is appreciated but not required.

Do I need to know React or any framework?

Nope! This is pure HTML, CSS, and minimal JavaScript. If you know basic web development, you can work with this project. Perfect for beginners!

How do I add my own artwork images?

1. Add your images to the assets/images/ folder
2. Update the image paths in the HTML files
3. Keep image names descriptive (e.g., landscape-painting-1.jpg)
4. Optimize images before uploading (recommended: under 500KB each)

Can I deploy this on platforms other than GitHub Pages?

Absolutely! Since it's just static HTML/CSS/JS, you can deploy on:

• Netlify
• Vercel
• AWS S3
• Firebase Hosting
• Any web hosting service

How do I change the color scheme?

Edit the CSS variables in style.css. Look for color definitions at the top of the file and change them to your preferred colors.

Is this mobile-friendly?

Yes! The entire website is fully responsive and tested on:

• 📱 iPhones and Android phones
• 📱 iPads and tablets
• 💻 Laptops and desktops

How can I contribute to this project?

Check out our Contributing.md guide! We welcome:

• Bug fixes
• UI improvements
• New features
• Documentation updates
• Accessibility enhancements

💖 Show Your Support

If you found this project helpful or inspiring, here's how you can show support:

⭐ Star this repository — It helps others discover the project!

🍴 Fork it — Use it as a template for your own portfolio

🐦 Share it — Tell others about it on social media

🤝 Contribute — Help improve the project with your skills

📢 Provide Feedback — Open an issue with suggestions or ideas

⭐ Star History

🙏 Acknowledgments

Special thanks to everyone who made this project possible:

🌟 People

• Aryan Verma — Artistic inspiration, guidance, and mentorship
• MX TakaTak Community — Initial platform, support, and encouragement
• JWOC Team — For organizing the Winter of Code program
• All Contributors — Everyone who has contributed to improving this project
• Family & Friends — Continuous support throughout the artistic journey

🛠️ Resources & Tools

Resource	Purpose
MDN Web Docs	HTML, CSS, and JavaScript documentation
GitHub Pages	Free and reliable hosting solution
Shields.io	Beautiful README badges
Google Fonts	Typography (Dancing Script, DM Sans)
GitHub	Version control and collaboration platform
VS Code	Code editor used for development

📚 Learning Resources

• freeCodeCamp — Web development tutorials
• CSS-Tricks — CSS techniques and best practices
• W3Schools — Web development references
• Can I Use — Browser compatibility checker

🎨 Design Inspiration

• Dribbble — UI/UX design inspiration
• Behance — Portfolio layout ideas
• Pinterest — Color palette and visual design

💝 Special Mention

This project is part of JWOC (Jaipur Winter of Code) — an open-source program that encourages students and beginners to contribute to real-world projects. Thank you to the JWOC organizers for creating this opportunity!

---

Thank you for visiting the Art Portfolio project! 🎨

📊 Project Stats

👥 Contributors

Thank you to all the amazing people who have contributed to this project! 💝

Want to see your face here? Start contributing!

⭐ If you like this project, don't forget to give it a star! ⭐

Made with ❤️ and 🎨 by Jiya The Coolartist

"Every artist was first an amateur." — Ralph Waldo Emerson

© 2026 Jiya Batra | MIT License | Report Bug | Request Feature