Personal Portfolio

This is a personal portfolio application built with vue js

Features

• Showcase personal information, skills, life story and projects
• Blog system with newsletter subscription functionality
• AI Assistant for interactive conversations about development and projects
• Responsive design for mobile and desktop

Installation

1. Clone the repository: git clone https://github.com/johnmichealacera/JM-Portfolio.git
2. Navigate to the project directory: cd jm-personal-portfolio
3. Install dependencies: npm install

Environment Variables

The application requires the following environment variables to be set:

• VUE_APP_FORM_EMAIL_CODE: Your form email code from formsubmit.io.
• VUE_APP_REDIRECT_URL: Your email redirect url to be used when email has been sent.
• VUE_APP_PORTFOLIO_BACKEND: The personal portfolio backend built in express.
• VUE_APP_USER_ID: The ID of the user you want to showcase in the portfolio
• HF_API_TOKEN: (Optional, server-only) Hugging Face token for the AI Assistant. Used by server/chat-proxy.js only—do not use VUE_APP_* for API secrets; those are embedded in the client bundle.
• VUE_APP_CHAT_API_URL: (Optional) Full URL of the chat proxy POST endpoint in production (for example https://your-api.example.com/api/chat). If unset, the app uses /api/chat (same origin), which requires your host to forward /api to the proxy or to serve static files behind a reverse proxy that includes the chat server.

Create a .env file in the root directory of the project with the keys above that serves your requirement

AI Assistant (Hugging Face)

1. Create a token at Hugging Face settings (revoke any token that was ever exposed in the frontend or in a public repo).
2. Add HF_API_TOKEN=your_token_here to .env (not VUE_APP_).
3. In development, run the proxy in a second terminal: npm run chat-server, then npm run dev. Webpack forwards /api to the proxy on port 3001.
4. In production, deploy server/chat-proxy.js (or equivalent) with HF_API_TOKEN set in the server environment, and set VUE_APP_CHAT_API_URL at build time if the chat API is on another origin.

Note: The AI Assistant shows an error if the proxy is not running or HF_API_TOKEN is missing; the rest of the portfolio still works.

Usage

1. Start the development server: npm run serve (Vue CLI) or npm run dev (webpack). For the AI Assistant when using npm run dev, run npm run chat-server in a second terminal so /api/chat is proxied to the Hugging Face proxy.
2. Navigate to http://localhost:8080/ in your browser

Built With

• Vue.js - The web framework used
• Vue Router - Router for single-page applications
• Axios - Promise-based HTTP client
• Tailwind - Front-end component library
• Hugging Face - AI Assistant integration

Contributing

1. Fork the repository
2. Create a new branch: git checkout -b feature-name
3. Make changes and commit: git commit -m 'Add some feature'
4. Push to the branch: git push origin feature-name
5. Submit a pull request

Changelog

[1.5.0] - 2025-01-XX

Added

• AI Assistant: Interactive AI chatbot powered by Hugging Face
  • Chat interface with message history
  • Real-time responses about development topics
  • Beautiful gradient design matching portfolio theme
  • Responsive design for all devices
• Navigation Updates: Added AI Assistant link to main menu and footer

Technical

• New Vue.js components: AIChat.vue, AIAssistant.vue
• Hugging Face API integration for free AI chat
• Conversation history with timestamp display
• Loading states and error handling

[1.4.0] - 2025-01-XX

Added

• Blog System: New blog functionality with dedicated pages
  • Blog index page (/blog) with post listings
  • Individual blog post page (/blog/my-founder-journey)
  • Newsletter subscription system with email collection
• Navigation Updates: Added blog links to main menu and footer
• SEO Enhancement: Comprehensive meta tags for blog routes
• Content Management: Structured blog content with semantic HTML

Technical

• New Vue.js components: Blog.vue, BlogPost.vue
• Router configuration for blog routes
• Web3Forms integration for newsletter subscriptions
• TODO comments for future backend integration

[1.3.0] - Previous Release

• Portfolio showcase and project management
• Contact forms and lead generation
• Responsive design implementation

License

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

Acknowledgments

• Vue.js documentation
• Tailwind documentation
• Axios documentation
• FormSubmit documentation