Diletta Calussi - Portfolio 🚀

Note: This is my personal portfolio built using the DeveloperFolio template by Saad Pasta. Full credit goes to Saad and all the amazing contributors who built this fantastic portfolio template. See the Credits section below.

My personal portfolio website showcasing my professional experience as a Data Engineer and AI Engineer. Built with React and heavily customized to highlight my work in data engineering, NLP, and AI systems.

⚠️ Personal Data Notice

The content in src/data/ folder is personal and proprietary.

✅ You CAN use the code, structure, and configuration system
❌ You CANNOT use the personal data (work history, education, certifications, etc.)

If you want to use this as a template:

Replace ALL JSON files in src/data/ with your own information
Follow the structure documented in DATA_STRUCTURE.md
See src/data/README.md for details

Using someone else's professional history is unethical and potentially illegal.

✨ Features

Responsive Design - Fully responsive layout that works on all devices
Interactive UI - Smooth animations powered by Lottie and React Reveal
Customizable Sections:
- Landing page with animated greeting
- Skills showcase with custom icons
- Interactive tech stack timeline with expandable details
- Work experience cards with company logos
- Education timeline
- Projects and achievements
- Certifications and courses
- Talks and public speaking
- Contact section
Dark Mode Support - Toggle between light and dark themes
Social Media Integration - Link to GitHub, LinkedIn, Gmail, and more
Splash Screen - Eye-catching animated splash screen on first load
PWA Ready - Progressive Web App capabilities
GitHub Pages Deployment - Easy deployment with built-in scripts

🛠️ Technology Stack

Frontend: React 16.10.2
Styling: SASS/SCSS
Animations: Lottie, React Reveal
Icons: Font Awesome, Custom SVG icons
Build Tool: React Scripts 5.0.1
Testing: Jest, Enzyme
Deployment: GitHub Pages
Code Formatting: Prettier

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v14 or higher recommended)
npm (comes with Node.js)
Git

🚀 Getting Started

Note: This section is primarily for my own development workflow. If you're looking for a portfolio template to use, I recommend checking out the original DeveloperFolio project instead, which is actively maintained as a template.

1. Clone the Repository

git clone https://github.com/dilettacal/developerFolio.git
cd developerFolio

2. Install Dependencies

npm install

3. Configure Environment Variables (Optional)

If you want to fetch GitHub profile data:

cp env.example .env

Edit the .env file and add your GitHub tokens if needed.

4. Start Development Server

npm start

The application will open at http://localhost:3000 in your browser.

🎨 Customization

📚 Documentation

This portfolio uses a JSON-based configuration system for easy content management:

DATA_STRUCTURE.md - Complete guide to the JSON data structure
OPTIONAL_SECTIONS_GUIDE.md - How to enable blogs, podcasts, resume, etc.
JSON_FILES_REFERENCE.md - Quick reference of all JSON files

Update Personal Information

All personal information and content is stored in JSON files in the src/data/ folder. No React knowledge needed!

Quick Examples

Update Work Experience - Edit src/data/experience.json:

{
  "experiences": [
    {
      "role": "Your New Role",
      "company": "Company Name",
      "companyLogoKey": "company_key",
      "date": "Start – End",
      "desc": "What you do",
      "descBullets": ["Achievement 1", "Achievement 2"]
    }
  ]
}

Update Skills - Edit src/data/skills.json:

{
  "skills": [
    "⚡ Your skill description 1",
    "⚡ Your skill description 2"
  ]
}

Update Contact Info - Edit src/data/profile.json:

{
  "greeting": {
    "title": "Hi, I'm Your Name",
    "subTitle": "Your professional summary"
  },
  "socialMediaLinks": {
    "github": "https://github.com/yourusername",
    "linkedin": "https://linkedin.com/in/yourusername"
  }
}

Add Certifications - Edit src/data/achievements.json:

{
  "achievementsCards": [
    {
      "title": "Your Certification",
      "subtitle": "Description",
      "imageKey": "udemy",
      "footerLink": [{"name": "View", "url": "cert-url"}]
    }
  ]
}

See DATA_STRUCTURE.md for complete documentation!

Update Colors

Edit src/_globalColor.scss to change the color scheme:

$primaryColor: #your-color;
$secondaryColor: #your-color;
// ... other color variables

Add Custom Images

Place your images in src/assets/images/ and reference them in portfolio.js:

companylogo: require("./assets/images/your-image.png")

Customize Animations

Replace Lottie animation files in src/assets/lottie/ with your own JSON animation files from LottieFiles.

📦 Available Scripts

`npm start`

Runs the app in development mode. Fetches external data (if configured) and starts the development server.

`npm run build`

Builds the app for production to the build folder. Optimizes the build for best performance.

`npm run deploy`

Deploys the production build to GitHub Pages.

`npm test`

Launches the test runner in interactive watch mode.

`npm run format`

Formats all .js, .css, .json, and .scss files using Prettier.

`npm run check-format`

Checks if files are properly formatted without making changes.

🌐 Deployment

GitHub Pages

Update the homepage field in package.json:

"homepage": "https://yourusername.github.io"

Build and deploy:

npm run deploy

Your portfolio will be live at https://yourusername.github.io

Other Platforms

You can also deploy to:

Netlify: Connect your GitHub repo and deploy automatically
Vercel: Import your GitHub project for instant deployment
Custom Server: Upload the contents of the build folder to your web server

📁 Project Structure

developerFolio/
├── public/              # Static files
│   ├── index.html       # HTML template
│   ├── manifest.json    # PWA manifest
│   └── ...              # Favicons and other assets
├── src/
│   ├── assets/          # Images, fonts, and animations
│   ├── components/      # Reusable React components
│   ├── containers/      # Page sections/containers
│   ├── contexts/        # React contexts (theme, etc.)
│   ├── hooks/           # Custom React hooks
│   ├── portfolio.js     # ⭐ MAIN CONFIG FILE - Edit this!
│   ├── App.js           # Main App component
│   └── index.js         # Entry point
├── package.json         # Dependencies and scripts
├── fetch.js             # Script to fetch GitHub data
└── README.md            # This file

🎯 Key Files to Modify

src/portfolio.js - All personal information and content
src/_globalColor.scss - Color theme
public/index.html - Page title and meta tags
package.json - Homepage URL for deployment
src/assets/images/ - Replace with your own images

🐛 Troubleshooting

Port Already in Use

If port 3000 is already in use, React will prompt you to use a different port, or you can specify one:

PORT=3001 npm start

Build Errors

Clear cache and reinstall dependencies:

rm -rf node_modules package-lock.json
npm install
npm run build

Deployment Issues

Make sure the homepage in package.json matches your GitHub Pages URL exactly.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📝 License

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

👤 Author

Diletta Calussi

Website: dilettacal.github.io
GitHub: @dilettacal
LinkedIn: @dilettacal

🙏 Acknowledgments

Thanks to all the open-source contributors whose libraries made this project possible
Lottie animations from LottieFiles
Icons from Font Awesome and Simple Icons

📜 Credits

Original DeveloperFolio Project

This portfolio is based on the excellent DeveloperFolio template created by Saad Pasta and maintained by an amazing community of contributors.

Project Maintainers

_{Saad Pasta}

_{Kartik Choudhary}

_{Naveen M K}

_{Muhammad Hasham}

All Contributors

A huge thank you to all the contributors who have made DeveloperFolio what it is today! 🎉

You can find the complete list of contributors in the resources/.all-contributorsrc file or view the original project at github.com/saadpasta/developerFolio.

Special thanks to:

60+ contributors who have contributed code, documentation, design, and bug reports
The maintainers for keeping the project alive and well-maintained
Everyone who has used and shared this template

My Customizations

This version includes:

Customized content and personal information
Enhanced tech stack timeline with expandable details and custom icons
Modified styling and color schemes
Additional features for data engineering and AI/ML portfolios
Custom skill icons and visualizations

License

This project maintains the original GNU General Public License v3.0 from DeveloperFolio. See the LICENSE file for details.

⭐ Show Your Support

If you found this portfolio interesting or inspiring:

Give a ⭐️ to the original DeveloperFolio project - they deserve it!
Check out the original template if you're looking to create your own portfolio

Note: This is my personal portfolio. While the GPL v3 license allows you to fork this repository, I'm not actively maintaining this as a template for others. If you're looking for a portfolio template, I highly recommend using the original DeveloperFolio project instead, which is actively maintained and has better documentation for template users.

Name		Name	Last commit message	Last commit date
Latest commit History 84 Commits
.github/workflows		.github/workflows
public		public
resources		resources
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.pre-commit-config.yaml		.pre-commit-config.yaml
.prettierignore		.prettierignore
.prettierrc		.prettierrc
DATA_STRUCTURE.md		DATA_STRUCTURE.md
Dockerfile		Dockerfile
JSON_FILES_REFERENCE.md		JSON_FILES_REFERENCE.md
LICENSE		LICENSE
OPTIONAL_SECTIONS_GUIDE.md		OPTIONAL_SECTIONS_GUIDE.md
README.md		README.md
REFACTORING_SUMMARY.md		REFACTORING_SUMMARY.md
env.example		env.example
fetch.js		fetch.js
package-lock.json		package-lock.json
package.json		package.json

License

dilettacal/dilettacal.github.io

Folders and files

Latest commit

History

Repository files navigation

Diletta Calussi - Portfolio 🚀

⚠️ Personal Data Notice

✨ Features

🛠️ Technology Stack

📋 Prerequisites

🚀 Getting Started

1. Clone the Repository

2. Install Dependencies

3. Configure Environment Variables (Optional)

4. Start Development Server

🎨 Customization

📚 Documentation

Update Personal Information

Quick Examples

Update Colors

Add Custom Images

Customize Animations

📦 Available Scripts

npm start

npm run build

npm run deploy

npm test

npm run format

npm run check-format

🌐 Deployment

GitHub Pages

Other Platforms

📁 Project Structure

🎯 Key Files to Modify

🐛 Troubleshooting

Port Already in Use

Build Errors

Deployment Issues

🤝 Contributing

📝 License

👤 Author

🙏 Acknowledgments

📜 Credits

Original DeveloperFolio Project

Project Maintainers

All Contributors

My Customizations

License

⭐ Show Your Support

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

`npm start`

`npm run build`

`npm run deploy`

`npm test`

`npm run format`

`npm run check-format`

Packages