Swayam Adhana | Portfolio

AI/ML Developer • Full Stack Engineer • B.Tech CS Student (4th Year, 22 years old)

Live Demo • HistoAI Project • Foot-Insights

📖 Table of Contents

About
Features
Tech Stack
Project Structure
Getting Started
Environment Variables
Featured Projects
Performance
Contributing
License
Contact

🚀 About

A modern, high-performance portfolio website showcasing AI/ML projects and full-stack development expertise. Built with cutting-edge technologies and optimized for speed, accessibility, and user experience.

Highlights

🎨 Modern Design - Clean, minimalist UI with smooth animations and gradient accents
🌙 Dark/Light Mode - Theme toggle with system preference detection
📱 Fully Responsive - Optimized for all devices from mobile to desktop
⚡ Performance Optimized - Server-side rendering, lazy loading, and code splitting
🔒 Production Ready - Redis-backed persistent storage, proper error handling
📊 Analytics Ready - Integrated with Vercel Analytics

✨ Features

Core Features

Feature	Description	Technology
🏠 Homepage	Hero section, project showcase with full-width stacked cards, testimonials, contact form	React 19, Next.js 15
👤 About Page	Skills, education timeline, fun facts, services	TypeScript, Tailwind CSS
💼 Projects Gallery	Detailed project cards with live demos and source code	shadcn/ui, Lucide Icons
📝 Guestbook	Persistent visitor messages with Redis backend (production-ready)	Upstash Redis, Next.js API Routes
🖼️ Gallery	Image showcase with upload functionality	Next.js Image, React
📧 Contact Form	Web3Forms API integration with validation	React Hook Form, Zod
🎯 Scroll Progress	Global page scroll indicator	Custom React Hook
🌐 Navigation	Clock-enabled responsive navigation	Radix UI

Technical Features

SEO Optimized - Meta tags, Open Graph, structured data
Type Safe - Full TypeScript coverage with strict mode
Accessible - WCAG AA compliant, semantic HTML, keyboard navigation
Serverless API - Next.js API routes with Upstash Redis for guestbook
Error Boundaries - Graceful error handling and loading states
Form Validation - Client and server-side validation with Zod schemas
Image Optimization - Next.js Image component with responsive images

🛠️ Tech Stack

Frontend

Category	Technologies
Framework	Next.js 15.5.7 (App Router, Server Components)
UI Library	React 19.2.0
Language	TypeScript 5.x
Styling	Tailwind CSS 3.4, tailwindcss-animate
Components	shadcn/ui, Radix UI primitives
Icons	Lucide React
Forms	React Hook Form, Zod validation
Notifications	Sonner (toast notifications)
Theme	next-themes (dark/light mode)

Backend & Infrastructure

Category	Technologies
Database	Upstash Redis (serverless, production-ready)
API	Next.js API Routes
Forms	Web3Forms API
Deployment	Vercel
Analytics	Vercel Analytics
Version Control	Git, GitHub

Development Tools

{
  "dependencies": {
    "@upstash/redis": "^1.36.2",
    "next": "15.5.7",
    "react": "19.2.0",
    "tailwindcss": "^3.4.17"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "typescript": "^5"
  }
}

📁 Project Structure

portfolio-work/
├── app/                          # Next.js App Router
│   ├── page.tsx                  # Homepage (hero, full-width project cards, contact)
│   ├── layout.tsx                # Root layout with providers
│   ├── globals.css               # Global styles and Tailwind imports
│   ├── about/                    # About page
│   │   └── page.tsx
│   ├── projects/                 # Projects showcase
│   │   ├── page.tsx              # Projects list with featured projects
│   │   └── loading.tsx           # Loading skeleton
│   ├── gallery/                  # Image gallery
│   │   └── page.tsx
│   ├── guestbook/                # Visitor guestbook
│   │   └── page.tsx
│   ├── project-construction/     # Project detail pages (dynamic)
│   │   └── [slug]/
│   │       └── page.tsx
│   └── api/                      # API routes
│       └── guestbook/
│           └── route.ts          # Guestbook CRUD (Redis-backed)
├── components/                   # React components
│   ├── navigation.tsx            # Main navigation with clock
│   ├── scroll-progress.tsx       # Scroll indicator
│   ├── theme-provider.tsx        # Theme context provider
│   └── ui/                       # shadcn/ui components (40+ components)
│       ├── button.tsx
│       ├── card.tsx
│       ├── input.tsx
│       └── ...
├── lib/                          # Utility functions
│   └── utils.ts                  # cn() helper and utilities
├── hooks/                        # Custom React hooks
│   ├── use-mobile.ts             # Mobile detection hook
│   └── use-toast.ts              # Toast notification hook
├── data/                         # Static data
│   └── guestbook.json            # Fallback guestbook data (deprecated)
├── public/                       # Static assets
│   └── images/                   # Project images
│       ├── futinsights-homepage-card.png
│       ├── futinsights-main-card.png
│       ├── histoai-homepage-card.png
│       └── histoai-main-card.png
├── styles/                       # Additional styles
│   └── globals.css
├── .env.local                    # Environment variables (gitignored)
├── .gitignore                    # Git ignore rules
├── ARCHITECTURE.md               # Technical architecture documentation
├── README.md                     # This file
├── components.json               # shadcn/ui configuration
├── next.config.mjs               # Next.js configuration
├── package.json                  # Dependencies and scripts
├── pnpm-lock.yaml                # pnpm lockfile
├── tailwind.config.ts            # Tailwind CSS configuration
└── tsconfig.json                 # TypeScript configuration

🚦 Getting Started

Prerequisites

Node.js 18.x or higher
pnpm (or npm/yarn)
Upstash Redis account (free tier available at upstash.com)
Web3Forms API key (optional, for contact form)

Installation

Clone the repository

git clone https://github.com/maybeswayam/Portfolio.git
cd portfolio-work

Install dependencies
```
pnpm install
# or
npm install
```

Set up environment variables

Create a .env.local file in the root directory:

# Upstash Redis (Required for Guestbook)
UPSTASH_REDIS_REST_URL="your_upstash_redis_url"
UPSTASH_REDIS_REST_TOKEN="your_upstash_redis_token"

# Web3Forms (Optional - Contact Form)
NEXT_PUBLIC_WEB3FORMS_KEY="your_web3forms_key"

Getting Upstash Redis credentials:

Go to upstash.com and create a free account
Create a new Redis database
Copy the REST URL and REST Token from the database details

Run the development server
```
pnpm dev
```
Open your browser

Navigate to http://localhost:3000

Build for Production

# Create optimized production build
pnpm build

# Start production server (local)
pnpm start

Deployment (Vercel)

Push your code to GitHub
Import the repository in Vercel
Add environment variables in Vercel project settings:
- UPSTASH_REDIS_REST_URL
- UPSTASH_REDIS_REST_TOKEN
Deploy!

🔐 Environment Variables

Variable	Description	Required	Default
`UPSTASH_REDIS_REST_URL`	Upstash Redis REST API URL	Yes	-
`UPSTASH_REDIS_REST_TOKEN`	Upstash Redis REST API Token	Yes	-
`NEXT_PUBLIC_WEB3FORMS_KEY`	Web3Forms API Key for contact form	No	Included

Why Upstash Redis?

The guestbook feature uses Upstash Redis instead of filesystem storage to ensure compatibility with serverless platforms like Vercel:

✅ Serverless-native - Works perfectly on read-only Vercel deployments
✅ Persistent storage - Data survives redeployments
✅ Free tier available - 10,000 commands/day
✅ Fast - Sub-millisecond latency globally

Note: Filesystem writes (fs.writeFile) don't work in production on Vercel due to ephemeral file systems. Redis solves this limitation.

💼 Featured Projects

1. Foot-Insights 🏆

Football Analytics Platform with ETL Pipeline

A data-driven football analytics platform built on a custom ETL (Extract, Transform, Load) pipeline. Analyzes data from the 2022 FIFA World Cup and Europe's top five leagues (Premier League, La Liga, Serie A, Bundesliga, Ligue 1).

🔗 Live Demo
📦 GitHub Repository
📊 Metrics: 1,890 Matches | 680 Players | 130 Teams | 6 Competitions
🛠️ Tech Stack: Next.js, React, TypeScript, Python, ETL Pipelines, Tailwind CSS
🎯 Features: Match analysis, player statistics, team comparisons, tournament insights

ETL Pipeline Highlights:

Custom Python data extraction from multiple sources
Data transformation and normalization
Automated loading into analytics-ready format
Comprehensive coverage of international and club competitions

2. HistoAI 🔬

AI-Driven Histopathology Analysis Platform

Deep-learning platform for analyzing histopathology images using MobileNetV2 and Fusion Models. Generates explainable Grad-CAM heatmaps to assist in cancer diagnosis.

🔗 Live Demo
📊 Metrics: 95%+ Accuracy | <1s Heatmap Generation | 3 AI Models
🛠️ Tech Stack: TensorFlow, PyTorch, Grad-CAM, React, Next.js, FastAPI
🎯 Features: Multi-model inference, explainable AI, medical image analysis

⚡ Performance

Lighthouse Scores

Performance: 95+
Accessibility: 100
Best Practices: 100
SEO: 100

Optimizations

✅ Server-side rendering (SSR) for initial page load
✅ Static generation for unchanged content
✅ Image optimization with Next.js Image component
✅ Code splitting and lazy loading
✅ Minified CSS and JavaScript
✅ Font optimization with Geist font family
✅ Redis caching for guestbook entries
✅ Responsive images with proper aspect ratios

🤝 Contributing

Contributions, issues, and feature requests are welcome!

See CONTRIBUTING.md for detailed guidelines.

Quick Start for Contributors

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'feat: add some amazing feature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is open source and available under the MIT License.

📞 Contact

Swayam Adhana

🌐 Portfolio: swayam-portfolio.vercel.app
📧 Email: swayam.for.prof@gmail.com
💼 LinkedIn: linkedin.com/in/swayam-adhana-01b2b2293
🐙 GitHub: @maybeswayam

Name		Name	Last commit message	Last commit date
Latest commit History 16 Commits
.next		.next
app		app
components		components
data		data
hooks		hooks
lib		lib
public		public
styles		styles
.env.example		.env.example
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
CONTRIBUTING.md		CONTRIBUTING.md
My Resume (1).pdf		My Resume (1).pdf
README.md		README.md
components.json		components.json
myeyesss.md		myeyesss.md
next-env.d.ts		next-env.d.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Swayam Adhana | Portfolio

📖 Table of Contents

🚀 About

Highlights

✨ Features

Core Features

Technical Features

🛠️ Tech Stack

Frontend

Backend & Infrastructure

Development Tools

📁 Project Structure

🚦 Getting Started

Prerequisites

Installation

Build for Production

Deployment (Vercel)

🔐 Environment Variables

Why Upstash Redis?

💼 Featured Projects

1. Foot-Insights 🏆

2. HistoAI 🔬

⚡ Performance

Lighthouse Scores

Optimizations

🤝 Contributing

Quick Start for Contributors

📄 License

📞 Contact

About

Topics

Resources

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages