A modern, responsive portfolio website built with Next.js and Tailwind CSS, showcasing my skills, projects, and professional experience.
Visit the live site: junaidirfan.com
- Responsive Design: Optimized for all device sizes
- Static Site Generation: Fast loading times and optimal performance
- Component-Based Architecture: Modular and maintainable code structure
- Modern UI: Clean and professional design with smooth animations
- SEO Optimized: Pre-configured metadata for search engine visibility
- Framework: Next.js 15
- Styling: Tailwind CSS
- Typography: Geist Font
- Icons: React Icons
- UI Components: Custom components built with Radix UI
- Animations: Framer Motion
- Form Handling: EmailJS
- Hero: Introduction and call-to-action
- About: Personal bio and professional summary
- Skills: Technical competencies and tools
- Infrastructure: Technical infrastructure knowledge
- Projects: Showcase of recent work with descriptions and links
- Experience: Professional work history and achievements
- Education: Academic background and certifications
- Contact: Form for reaching out and connection options
- Footer: Social links and additional navigation
- Node.js (v18 or newer)
- npm or yarn
- Clone the repository:
git clone https://github.com/junaydirfan/portfolio.git
cd portfolio- Install dependencies:
npm install
# or
yarn install- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
npm run build
# or
yarn buildThis generates a static export in the /out directory.
PostHog runs in the browser, so the public analytics values must be available when the production bundle is built. Keep local values in .env.local, then add the same keys to the production build environment before deploying:
NEXT_PUBLIC_POSTHOG_KEY=your_project_key
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.comFor static exports, committing the code is not enough. Rebuild after setting those values and deploy the regenerated /out directory.
- Set up a VM or LXC container with Debian/Ubuntu
- Install Nginx:
sudo apt update && sudo apt install -y nginx- Configure Nginx:
server {
listen 80;
server_name portfolio.yourdomain.com;
root /var/www/portfolio;
index index.html;
location / {
try_files $uri $uri/ =404;
}
}- Transfer files:
scp -r out/* user@server:/var/www/portfolio/- Set permissions:
sudo chmod -R 755 /var/www/portfolio
sudo chown -R www-data:www-data /var/www/portfolio- Set up SSL (recommended):
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d portfolio.yourdomain.com# .github/workflows/deploy.yml
name: Deploy Portfolio
on:
push:
branches: [ main ]
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to server
uses: appleboy/scp-action@master
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.SSH_KEY }}
source: "out/*"
target: "/var/www/portfolio"
strip_components: 1This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create a feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add some amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Junaid Irfan - junaid.irfan@hotmail.com Project Link: github.com/junaydirfan/portfolio