ng-dev-folio Tailwind Templates

Ng Dev Folio

Software Developer Portfolio Website built with Angular and tailwind CSS that helps you showcase your work and skills as a software developer.

#angular #portfolio-website #angular-portfolio #developer-portfolio #personal-portfolio #personal-website #portfolio #portfolio-site #portfolio-template #resume
Demo Download

NgDevFolio - Modern Angular Portfolio Website

This is an Angular adaptation of the excellent Developer Portfolio project originally created by Abu Said in Next.js.

Ng Dev Folio Screenshot

A modern, responsive, and customizable portfolio website built with Angular 19. Perfect for developers looking to showcase their work, skills, and professional journey.

🌟 Features

  • 📱 Fully Responsive Design
  • 🎨 Modern UI with Tailwind CSS
  • 📝 Dynamic Blog Integration with Dev.to API
  • 📧 Contact Form with EmailJS
  • 🚀 Optimized Performance
  • 🔍 SEO Friendly
  • 🌓 Dark Mode Support
  • 📊 Analytics Ready

🛠️ Prerequisites

Before you begin, ensure you have the following installed:

🚀 Quick Start

  1. Clone the repository

    git clone https://github.com/JaveedIshaq/ng-dev-folio
cd ng-dev-folio

  2. Install dependencies

    npm install --legacy-peer-deps

    Important Notes on Configuration

Using --legacy-peer-deps

We use npm install --legacy-peer-deps because Angular 19 has strict peer dependency requirements. This flag allows us to:

  • Install packages with peer dependency conflicts
  • Maintain compatibility with packages that haven't yet updated to support Angular 19
  • Work around the dependency conflict between @angular-builders/custom-webpack and Angular 19

Custom Webpack Configuration

The custom-webpack.config.js is essential because:

  1. Angular 19 doesn't natively support .env files for environment variables
  2. We use dotenv-webpack plugin to:
    • Load environment variables from .env files
    • Access these variables using process.env in our application
    • Keep sensitive information like API keys secure
    • Support different configurations for development and production

This setup allows us to maintain secure and flexible environment configurations while working with Angular 19's architecture.

  1. Set up environment variables

    • Create a .env file in the root directory
    • Copy contents from .env.template
    • Fill in your values:
      EMAILJS_PUBLIC_KEY=your_public_key
EMAILJS_SERVICE_ID=your_service_id
EMAILJS_TEMPLATE_ID=your_template_id

  2. Start development server

    ng serve

  3. View your portfolio Open http://localhost:4200 in your browser

📝 Configuration

Personal Information

Edit src/app/core/data/personal-info.ts:

export const personalInfo = {
  name: 'Your Name',
  title: 'Your Title',
  email: '[email protected]',
  // ... other personal details
};

Projects

Edit src/app/core/data/projects.ts:

export const projects = [
  {
    title: 'Project Name',
    description: 'Project Description',
    technologies: ['Angular', 'TypeScript', 'Tailwind'],
    github: 'https://github.com/...',
    demo: 'https://demo-link...'
  },
  // ... more projects
];

Blog Integration

  1. Get your Dev.to username
  2. Update src/utils/data/personal-data.ts:
    export const personalData = {
  // ... other config
  devUsername: 'your-devto-username'
};

Email Configuration

  1. Create an EmailJS account
  2. Create an email template
  3. Get your credentials
  4. Add them to your .env file

🎨 Customization

Styling

  • Main styles: src/styles.css
  • Tailwind config: tailwind.config.js
  • Component-specific styles: src/app/components/*/*.css

Content

  • Components: src/app/components/
  • Data: src/app/core/data/
  • Assets: src/assets/

📦 Building for Production

  1. Build the project

    ng build --configuration production

  2. Test the production build locally

    npm install -g http-server
http-server dist/ngdevfolio

🚀 Deployment

Vercel

  1. Install Vercel CLI: npm i -g vercel
  2. Run: vercel
  3. Follow the prompts

Netlify

  1. Push to GitHub
  2. Connect repository in Netlify
  3. Configure build settings:
    • Build command: ng build --configuration production
    • Publish directory: dist/ngdevfolio

🔧 Troubleshooting

Common Issues

  1. EmailJS not working

    • Check if environment variables are properly set
    • Verify EmailJS template configuration

  2. Blog posts not loading

    • Confirm Dev.to username is correct
    • Check network requests for API errors

  3. Styling issues

    • Run npm run build:css to rebuild Tailwind
    • Clear browser cache

📚 Additional Resources

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

📄 License

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

🙏 Acknowledgments

  • Original Portfolio Design by Abu Said built with Next.js
  • Angular Team for the amazing framework
  • Tailwind CSS for the utility-first CSS framework
  • EmailJS for the email service
  • Dev.to for the blog integration capabilities

What's Next?

  • Add support for multiple blog platforms
  • Integrate with other services (e.g. Twitter, GitHub, etc.)
  • Add more customization options
  • Improve accessibility
  • Add a feedback system

dev version: 1.0

Made with ❤️ by Javeed Ishaq

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes