Snap Dev Portfolio HTML Template

This is a modern, fully responsive, and visually engaging one-page personal portfolio template — perfect for developers, designers, freelancers, and creatives who want to showcase their work in a professional and dynamic way on any device.

It comes with a Dark/Light mode toggle to provide a stylish experience that adapts to user preferences.

Features

• Built with Next.js for modern performance and scalability
• SEO optimized for better visibility on search engines
• Fully responsive layout that works on all devices
• Clean and modern one-page design
• Dark and Light mode toggle for better user experience
• Smooth scrolling and intuitive navigation
• Easy to customize with reusable components
• Well-organized and commented code structure
• Fast loading speed with optimized assets
• Ideal for developers, designers, and freelancers

Requirements

• Node.js version 16 or higher
• npm or yarn (for package management)
• A modern code editor like Visual Studio Code
• Git (optional, for version control or repository updates)
• Basic knowledge of React and Next.js
• A modern browser (Chrome, Firefox, Edge, etc.) for testing
• Terminal / Command Line to run development commands
• A hosting platform like Vercel, Netlify, or any service supporting Node.js

Instructions

## ✨ Features

- ⚡ **Next.js 15** – Fast server-side rendering with SEO support - 🎨 **Tailwind CSS** – Utility-first, responsive styling with dark mode - 🎥 **Framer Motion** – Smooth and engaging animations - 🌗 **Dark Mode** – Seamless theme toggle - 🧩 **Modular Data** – Easy updates for projects, testimonials, etc. - 📱 **Responsive Design** – Works on all devices - 🚀 **Vercel-Ready** – One-click deployment - 📊 **Interactive Sections** – Projects, Timeline, Testimonials, Counters

## 🛠️ Getting Started

### 📋 Prerequisites

- **Node.js** 16+ - **npm/yarn/pnpm** - **Git**

### 📦 Installation

```bash

# Install dependencies npm install # or yarn install # or pnpm install

# Run dev server npm run dev # or yarn dev # or pnpm dev ```

Visit `http://localhost:3000` to view the portfolio.

---

## ⚙️ Customization Guide

All content is managed in `constant/data.tsx`. Styles are in `app/global.css`.

### 👤 Update Personal Info

```ts export const socialLinks = [   { href: "https://facebook.com/your-profile", icon: },   { href: "https://linkedin.com/in/your-profile", icon: },   { href: "https://instagram.com/your-profile", icon: },   { href: "https://github.com/your-profile", icon: }, ]; ```

### 👤 Update Hero Section Data

```ts export const heroData = {   headline: "Searching For A Trusted Devoloper?",   nameLine: "Your Name",   cvButton: "Download My CV",   typewriter: {     firstWord: "I'm",     roles: ["A Software Engineer", "A SAP MM Consultant"],   }, }; ```

### 👤 Update About Section Data

```ts export const aboutData = {   name: "Your Name",   titleHighlight: "Full Stack",   titlePlain: "Developer",   intro: "Hey,..",   description: `Motivated and detail-oriented Software Engineer...`,   ctaText: "Get In Touch",   ctaLink: "#contact", }; ```

### 💼 Add Projects

```ts export const projects = [   {     title: "My New Project",     description: "A brief description of your project.",     link: "https://project-link.com",     imageSrc: "/images/my-project.jpg",   }, ]; ```

_📌 Place images in `public/images/`_

### 🕒 Modify Timeline

```ts export const TimelineData = [   {     title: "2026",     description: "Launched a new portfolio template.",     images: ["/images/timeline-1.jpg", "/images/timeline-2.jpg"],   }, ]; ```

### 🗣️ Edit Testimonials

```ts export const testimonials = [   {     quote: "Your amazing feedback here.",     name: "Your Name",     designation: "Your Title",     src: "/images/your-photo.jpg",   }, ]; ```

### 📈 Customize Counters

```ts export const counterSection = [   { value: 100, label: "Projects" },   { value: 200, label: "Clients" },   { value: 500, label: "Hours Worked" },   { value: 150, label: "Completed Websites" }, ]; ```

### 🎨 Change Colors

In `global.css`, edit:

```css :root {   --primary: 220 70% 50%; /* Light Mode */ } .dark {   --primary: 200 60% 40%; /* Dark Mode */ } ```

To use custom gradient:

```css .my-element {   background-image: var(--custom-gradient); } ```

---

## 🎥 Modifying Animations

The template uses Framer Motion for dynamic visuals.

### Example: Hero Explosion

```tsx   initial={{ x: 0, y: 0, opacity: 1 }}   animate={{ x: 50, y: -30, opacity: 0 }}   transition={{ duration: 1, ease: "easeOut" }}   className="absolute h-1 w-1 rounded-full bg-gradient-to-b from-indigo-500 to-purple-500" /> ```

- Adjust `x, y` for direction - Tweak `duration` for speed - Change colors/sizes via `className`

### Disable Animation:

- Replace `` tags with `

` or ``

```bash npm install framer-motion ```

### Tailwind Animation Example:

```js animation: {   "meteor-effect": "meteor 5s linear infinite", } ```

To disable: remove the class or delete it from `tailwind.config.ts`.

---

## 🚀 Deployment

### On Vercel

```bash git push origin main ```

- Go to [vercel.com](https://vercel.com), import repo - Follow steps to deploy

### On Netlify

- Connect your GitHub repo - Build command: `npm run build` - Publish directory: `out`

#### Tips:

- Compress images in `public/images/` - Use environment variables in Vercel/Netlify - Test responsiveness across devices

---

## 🧰 Troubleshooting

| Issue             | Solution                           | | ----------------- | ---------------------------------- | | Module not found  | `npm install` all dependencies     | | Animations broken | Install `framer-motion`            | | Styles missing    | Clear cache and restart dev server | | Build fails       | Check logs / ensure images exist   |

---

## ❓ FAQ

- **Can I use this commercially?** → Yes, under MIT License. - **How to add a contact form?** → Use Formspree / Netlify Forms. - **Can I change fonts?** → Edit `global.css` or `tailwind.config.ts` - **How to update dependencies?** → `npm update` / `yarn upgrade`

---

## 📄 License

This template is a **paid product** and is **not licensed under MIT** or any open-source license.

You are allowed to use this template in personal or commercial projects after purchasing a valid license via **ThemeForest**.

❌ You are not allowed to:

- Redistribute or resell the template. - Share the source code publicly. - Claim it as your own work.

✔️ You are allowed to:

- Use the template in unlimited end projects. - Modify the design and code for personal/client use.

---

## 👨‍💻 Author

Created by **Snap Dev**

📧 itssnapdev@gmail.com   🌐 [snapdev.org](https://snapdev.org)

---

## 🙏 Thank You!

We hope this template helps you build something amazing.   Feel free to share or leave feedback at [snapdev.org](https://snapdev.org).