PORTFOLIO

Dark, lime-accented one-page portfolio of Bharani Kumar S — an AI full-stack developer.

Live Demo • Source Code • Report Bug • Request Feature

---

Table of Contents

• About the Project
• Tech Stack
• Getting Started
• Usage
• API Reference
• Project Structure
• Features & Roadmap
• Testing
• Deployment
• Contributing
• Security
• License
• Acknowledgments
• Footer

---

About the Project

This project is a high-performance, single-page portfolio designed to showcase the work and skills of Bharani Kumar S. It features a modern "Neobrutalist" dark theme with lime accents, smooth animations, and a focus on SEO and user experience.

Key Features

• 🚀 High Performance: Single-page architecture with optimized assets and zero build step.
• 🎨 Modern Design: Dark theme with lime accents, spotlight cursor effects, and smooth scroll animations.
• 📱 Fully Responsive: Optimized for all devices, from mobile to ultra-wide monitors.
• 🔍 SEO Optimized: Comprehensive meta tags, Open Graph data, and structured JSON-LD for search engine visibility.
• 📧 Contact Form: Integrated with Resend API via Vercel serverless functions for reliable message delivery.
• 🛠️ Project Showcase: Dynamic grid featuring 46+ selected AI and full-stack projects.

Architecture Overview

graph TD
    User((User)) -->|HTTPS| Vercel[Vercel Edge Network]
    Vercel -->|Static Assets| Browser[Client Browser]
    Browser -->|Interaction| UI[Vanilla JS UI]
    UI -->|Form Submit| API[Vercel Serverless Function /api/send]
    API -->|Email API| Resend[Resend API]
    Resend -->|Notification| Developer((Bharani Kumar S))

---

Tech Stack

Category	Technology
Frontend	Vanilla HTML5, CSS3, JavaScript (ES6+)
Animations	CSS Keyframes, requestAnimationFrame, IntersectionObserver
Typography	Inter, Space Grotesk (Google Fonts)
Backend	Node.js (Vercel Serverless Functions)
Third-party	Resend API (Email), GitHub (Assets/Hosting)
Infrastructure	Vercel, GitHub Pages
SEO	Schema.org JSON-LD, Sitemap.xml, Open Graph

---

Getting Started

Prerequisites

• A modern web browser.
• (Optional) Vercel CLI for local API testing.
• Resend API Key for the contact form.

Installation

1. Clone the repository:

   git clone https://github.com/vincenzo-afk/PORTFOLIO.git
   cd PORTFOLIO
   

2. Open index.html directly in your browser for the static site.
3. For local API testing:

   vercel dev
   

Configuration

Create a .env file (or set in Vercel dashboard):

# Required — without it the contact form politely refuses to send.
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# Optional — who the email appears to come from.
# Resend's onboarding sender is used if unset.
RESEND_FROM=Portfolio Contact <[email protected]>

# Optional — where contact messages are delivered (defaults to the owner's email).
[email protected]

---

Usage

The portfolio is a static site. Most interactions are automatic (scroll animations, cursor spotlight).

Customizing Projects

To update the projects list, edit the index.html file within the <section class="work"> block. Each project is represented by a .work-card div.

---

API Reference

Contact Form Endpoint

POST /api/send

Request Body:

{
  "name": "John Doe",
  "email": "[email protected]",
  "message": "Hello, I would like to collaborate!"
}

Response (200 OK):

{
  "success": true,
  "id": "email_id_from_resend"
}

---

Project Structure

.
├── api/
│   └── send.js          # Vercel serverless function for emails
├── assets/
│   ├── bk-avatar.png    # Main profile image
│   ├── github-mark.svg  # Official GitHub logo
│   └── og-portfolio.png # Social sharing card
├── scripts/
│   └── prepare_logo.py  # Asset generation script
├── index.html           # Main entry point (HTML/CSS/JS)
├── vercel.json          # Vercel routing & headers config
├── sitemap.xml          # SEO Sitemap
├── CONTRIBUTING.md      # Contribution guidelines
├── SECURITY.md          # Security policy
└── LICENSE              # MIT License

---

Features & Roadmap

• Responsive dark theme with lime accents
• Smooth scroll and spotlight cursor effects
• Resend API integration for contact form
• SEO optimization and Social Graph cards
• GitHub Actions for Pages deployment
• Add dark/light mode toggle
• Implement a dynamic project filter system
• Add a blog section for AI research notes

---

Testing

This project uses manual visual regression testing across different viewports. To verify the API endpoint locally:

curl -X POST http://localhost:3000/api/send \
  -H "Content-Type: application/json" \
  -d '{"name":"Test","email":"[email protected]","message":"Hello"}'

---

Deployment

Vercel (Recommended)

The project is optimized for Vercel. Simply connect your GitHub repository to Vercel, and it will auto-deploy.

GitHub Pages

A workflow is included in .github/workflows/deploy.yml to deploy the static portion of the site to GitHub Pages. Note: The contact form requires a backend (Vercel) to function.

---

Contributing

Please see CONTRIBUTING.md for details on how to get involved.

---

Security

Please see SECURITY.md for our security policy and vulnerability reporting process.

---

License

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

---

Acknowledgments

• Design Inspiration: Modern Neobrutalist web design trends.
• Icons: Official GitHub and Social brand marks.
• Special Thanks: The AI community for the inspiration behind the 70+ projects showcased here.

---

Footer

Back to Top

Connect with me: GitHub • LinkedIn • X/Twitter • Instagram

Built with ❤️ by Bharani Kumar S