Repository: developer-junaid/DeveloperFolio
Branch: master
Commit: a3aca36b3ae4
Files: 75
Total size: 4.0 MB
Directory structure:
gitextract_asq10hh1/
├── .github/
│ └── workflows/
│ └── publish.yml
├── .gitignore
├── CONTRIBUTING.md
├── README.md
├── jsconfig.json
├── package.json
├── portfoliosanitydata/
│ ├── .eslintrc
│ ├── .npmignore
│ ├── README.md
│ ├── UPGRADE_PLAN.md
│ ├── config/
│ │ ├── .checksums
│ │ └── @sanity/
│ │ ├── data-aspects.json
│ │ ├── default-layout.json
│ │ ├── default-login.json
│ │ ├── form-builder.json
│ │ ├── google-maps-input.json
│ │ └── vision.json
│ ├── dist/
│ │ ├── index.html
│ │ └── static/
│ │ ├── .gitkeep
│ │ ├── css/
│ │ │ └── main.css
│ │ └── js/
│ │ ├── app.bundle.js
│ │ └── vendor.bundle.js
│ ├── package.json
│ ├── plugins/
│ │ └── .gitkeep
│ ├── queries/
│ │ └── index.js
│ ├── sanity.json
│ ├── schemas/
│ │ ├── portfolio.js
│ │ ├── schema.js
│ │ ├── service.js
│ │ ├── siteSettings.js
│ │ └── testimonial.js
│ ├── static/
│ │ └── .gitkeep
│ └── tsconfig.json
├── public/
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── sanity-steps.md
└── src/
├── App.jsx
├── client.js
├── components/
│ ├── Button/
│ │ ├── Button.jsx
│ │ └── button.css
│ ├── Contact/
│ │ ├── Contact.jsx
│ │ └── contact.css
│ ├── Footer/
│ │ ├── Footer.jsx
│ │ └── footer.css
│ ├── Heading/
│ │ ├── Heading.jsx
│ │ └── heading.css
│ ├── Home/
│ │ ├── Home.jsx
│ │ └── home.css
│ ├── Menu/
│ │ ├── Menu.jsx
│ │ ├── MenuIcon/
│ │ │ └── MenuIcon.jsx
│ │ └── menu.css
│ ├── Nav/
│ │ ├── Nav.jsx
│ │ ├── NavLink/
│ │ │ └── NavLink.jsx
│ │ └── nav.css
│ ├── Portfolio/
│ │ ├── PortfolioItem/
│ │ │ ├── PortfolioItem.jsx
│ │ │ └── portfolio-item.css
│ │ ├── index.jsx
│ │ └── portfolio.css
│ ├── Services/
│ │ ├── Services.jsx
│ │ ├── ServicesCard/
│ │ │ ├── ServicesCard.jsx
│ │ │ └── services-card.css
│ │ ├── services-card.css
│ │ └── services.css
│ └── Testimonials/
│ ├── Testimonial/
│ │ └── Testimonial.jsx
│ ├── Testimonials.jsx
│ └── testimonials.css
├── constants/
│ ├── index.js
│ └── sanityQueries.js
├── hooks/
│ ├── README.md
│ └── useSanityData.js
├── index.css
├── index.js
├── serviceWorker.js
└── utils/
└── helpers.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/workflows/publish.yml
================================================
name: Generate a build and push to another branch
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
name: Build and Push
steps:
- name: git-checkout
uses: actions/checkout@v2
- name: Install all dependencies
run: npm install
- name: Build
run: npm run build # Build Command
- name: Push
uses: s0/git-publish-subdir-action@develop
env:
REPO: self
BRANCH: build #the branch to push to hostinger
FOLDER: build #directory of code
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} #Will be added automatically by Github
MESSAGE: "Build: ({sha}) {msg}" #Commit message
================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/*/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.cache
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.firebase
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: CONTRIBUTING.md
================================================
1. Fork the repository
2. Clone the repository
3. Make changes and push the code
4. Make a Pull Request to this repository
5. Wait for the response
================================================
FILE: README.md
================================================
# 👨💻 Personal DevFolio (3.0)
### _Personal Portfolio built using ReactJs, Sanity CMS and Animation libraries, hope you like it. Tweak it and use it !!_
### Demo Video (3.0) :link: https://youtu.be/GrA2i1GNmbg
### Link :link: https://developerjunaid.com/
## Images
## Mobile Responsive
## Run Locally
- Run this command `git clone https://github.com/developer-junaid/DeveloperFolio.git`
- You are now in the dev environment and you can play around
### To Run Sanity CMS Locally
- Sign Up to [Sanity](https://www.sanity.io/)
- Navigate to /portfoliosanitydata folder in project using terminal Run: `cd portfoliosanitydata`
- Install dependencies Run: `npm install`
- Install Sanity CLI Run: `npm install -g @sanity/cli`
- Login to sanity using CLI run: `sanity login` (Select your preferred method)
- Initialize sanity project run: `sanity init`
- We are going to see a list of questions for us to answer in the next steps. Let's walk through those!
- - Create new project — Hit Enter.
- - Your project name: — We can name it whatever we would like. Let's “Portfolio Sanity Data" for this project.
- - Use the default dataset configuration? — The default dataset configuration has a public dataset named “production”, let's stick with that. So type in “Y” and hit Enter.
- - Project output path: — This will show us the path where our sanity project will live. The path should show the path that leads to this: /developerFolio/portfoliosanitydata. Hit Enter.
- - Select project template: — Here we are going to choose “Movies (schema + Sample data)”. Using the arrow keys, navigate to that so it’s showing blue. Hit Enter once there. Success!
- - Now Replace `schemas` folder with the folder from my repository
- Run Sanity Studio in the browser, first navigate to sanity project : `cd portfoliosanitydata`
- Run: `sanity start`
- Visit [localhost:3333](http://localhost:3333/) to view live studio and add your data
### Connecting React App with Sanity Locally
- Get projectId and dataset from portfoliosanitydata/sanity.json and paste in the value of those keys in the src/client.js respected fields
## Tech Stack
- HTML5
- CSS3
- Javascript ES6
- React js
- Animation Libraries (Framer motion, react-scroll, aos)
- Firebase
- Github Actions
- Sanity.io (CMS)
================================================
FILE: jsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": "src"
}
}
================================================
FILE: package.json
================================================
{
"name": "animatedportfolio",
"homepage": "https://developerjunaid.com/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@sanity/client": "^3.3.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"aos": "^2.3.4",
"emailjs-com": "^3.2.0",
"framer-motion": "^2.9.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-scroll": "^1.8.1",
"react-typed": "^1.2.0"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: portfoliosanitydata/.eslintrc
================================================
{
"extends": "@sanity/eslint-config-studio"
}
================================================
FILE: portfoliosanitydata/.npmignore
================================================
# Logs
/logs
*.log
# Coverage directory used by tools like istanbul
/coverage
# Dependency directories
node_modules
# Compiled sanity studio
/dist
================================================
FILE: portfoliosanitydata/README.md
================================================
# Portfolio Sanity CMS
A modern, optimized Sanity CMS setup for portfolio management with enhanced schemas, validation, and performance.
## 🚀 Features
### Enhanced Schemas
- **Portfolio**: Projects with categories, technologies, galleries, and featured status
- **Services**: Service offerings with descriptions, features, and active status
- **Testimonials**: Client reviews with ratings, avatars, and company info
- **Site Settings**: Global configuration for SEO, social links, and contact info
### Key Improvements
- ✅ **Field Validation**: Comprehensive validation rules for data integrity
- ✅ **Image Optimization**: Hotspot support and metadata extraction
- ✅ **Content Organization**: Ordering, filtering, and featured content
- ✅ **SEO Ready**: Meta tags, Open Graph, and structured data
- ✅ **Performance**: Optimized queries and efficient data fetching
- ✅ **Accessibility**: Alt text and proper image handling
## 📁 Schema Structure
```
schemas/
├── schema.js # Main schema index
├── portfolio.js # Portfolio projects
├── service.js # Services offered
├── testimonial.js # Client testimonials
└── siteSettings.js # Global site configuration
queries/
└── index.js # Optimized Sanity queries
```
## 🛠️ Usage
### Portfolio Projects
- **Categories**: fullstack, frontend, backend, mobile, uiux, devops
- **Features**: Featured projects, galleries, technology tags
- **Validation**: Required fields, URL validation, image requirements
### Services
- **Active/Inactive**: Toggle service availability
- **Features**: List of deliverables and capabilities
- **Technologies**: Skills and tools used
### Testimonials
- **Ratings**: 1-5 star rating system
- **Featured**: Highlight best testimonials
- **Rich Content**: Company info, positions, avatars
### Site Settings
- **SEO**: Meta titles, descriptions, Open Graph images
- **Social Links**: GitHub, LinkedIn, Twitter, etc.
- **Contact Info**: Email, phone, location
## 🔧 Development
### Running the Studio
```bash
cd portfoliosanitydata
npm install
npm start
```
### Building for Production
```bash
npm run build
```
### Adding New Content
1. Start the studio: `npm start`
2. Navigate to localhost:3333
3. Create content using the enhanced schemas
4. Content updates automatically in your portfolio
## 📊 Query Examples
### Get All Projects
```javascript
import { portfolioQueries } from "./queries";
const projects = await client.fetch(portfolioQueries.allProjects);
```
### Get Featured Content
```javascript
import { combinedQueries } from "./queries";
const featured = await client.fetch(combinedQueries.featuredContent);
```
### Get Projects by Category
```javascript
const frontendProjects = await client.fetch(
portfolioQueries.projectsByCategory("frontend")
);
```
## 🎯 Best Practices
### Content Management
- Use sequential IDs for portfolio and testimonials
- Mark featured content for priority display
- Add alt text to all images
- Use proper categories and tags
### Performance
- Use specific queries instead of fetching all data
- Implement proper ordering and filtering
- Cache frequently accessed content
- Optimize images with proper dimensions
### SEO
- Fill out all meta fields in site settings
- Use descriptive titles and descriptions
- Add Open Graph images for social sharing
- Include structured data where possible
## 🔄 Migration Notes
### From Old Schema
- New fields are optional with sensible defaults
- Existing content will continue to work
- Gradually add new fields as needed
- Use the migration guide for complex changes
## 📈 Future Enhancements
- [ ] Blog/Articles schema
- [ ] Skills/Technologies schema
- [ ] Experience/Resume schema
- [ ] Contact form integration
- [ ] Analytics integration
- [ ] Multi-language support
## 🤝 Contributing
1. Follow the existing schema patterns
2. Add proper validation rules
3. Include comprehensive documentation
4. Test queries for performance
5. Update this README for new features
================================================
FILE: portfoliosanitydata/UPGRADE_PLAN.md
================================================
# Sanity v2 to v3 Upgrade Plan
## Current Issues with v2:
- Outdated dependencies (React 17, old Sanity packages)
- Limited features and performance
- Security vulnerabilities
- No modern Sanity features
## Benefits of v3:
- Modern React 18 support
- Better performance and security
- Enhanced image handling
- Improved content modeling
- Better TypeScript support
- Real-time collaboration features
## Migration Steps:
1. Create new v3 project
2. Migrate schemas to new format
3. Update client configuration
4. Migrate existing content
5. Update frontend integration
## New Features to Add:
- Image optimization
- Content validation
- Better preview configurations
- Enhanced field types
- Real-time updates
================================================
FILE: portfoliosanitydata/config/.checksums
================================================
{
"#": "Used by Sanity to keep track of configuration file checksums, do not delete or modify!",
"@sanity/default-layout": "bb034f391ba508a6ca8cd971967cbedeb131c4d19b17b28a0895f32db5d568ea",
"@sanity/default-login": "e2ed4e51e97331c0699ba7cf9f67cbf76f1c6a5f806d6eabf8259b2bcb5f1002",
"@sanity/form-builder": "b38478227ba5e22c91981da4b53436df22e48ff25238a55a973ed620be5068aa",
"@sanity/data-aspects": "d199e2c199b3e26cd28b68dc84d7fc01c9186bf5089580f2e2446994d36b3cb6",
"@sanity/google-maps-input": "43e62bbd0a78d3dfd363915959160d2dfeafbac941d5a78a0a4c4fd64d9e7638",
"@sanity/vision": "da5b6ed712703ecd04bf4df560570c668aa95252c6bc1c41d6df1bda9b8b8f60"
}
================================================
FILE: portfoliosanitydata/config/@sanity/data-aspects.json
================================================
{
"listOptions": {}
}
================================================
FILE: portfoliosanitydata/config/@sanity/default-layout.json
================================================
{
"toolSwitcher": {
"order": [],
"hidden": []
}
}
================================================
FILE: portfoliosanitydata/config/@sanity/default-login.json
================================================
{
"providers": {
"mode": "append",
"redirectOnSingle": false,
"entries": []
},
"loginMethod": "dual"
}
================================================
FILE: portfoliosanitydata/config/@sanity/form-builder.json
================================================
{
"images": {
"directUploads": true
}
}
================================================
FILE: portfoliosanitydata/config/@sanity/google-maps-input.json
================================================
{
"apiKey": null,
"defaultZoom": 11,
"defaultLocale": null,
"defaultLocation": {
"lat": 40.7058254,
"lng": -74.1180863
}
}
================================================
FILE: portfoliosanitydata/config/@sanity/vision.json
================================================
{
"defaultApiVersion": "2021-10-21"
}
================================================
FILE: portfoliosanitydata/dist/index.html
================================================