# From Zero to Deployment: How I Created a Scalable Portfolio Website on AWS with Hostinger Domain

---

In today’s tech-driven world, having a **standout portfolio website** isn't just a bonus—it’s essential. With the rise of AI tools and competition in every field, I realized it was time for me to build something that would reflect my skills, personality, and projects. So I started my journey, and now, **I have my very own portfolio website**—hosted with a custom domain and powered by modern web technologies.

In this blog, I’ll guide you step-by-step on:

* What tools and technologies I used
    
* How I deployed it on AWS
    
* Folder structure & configuration
    
* How YOU can clone or replicate it with zero prior experience
    

---

## 🌐 My Portfolio:

I purchased the domain from Hostinger and deployed the project using AWS services. Here's everything I used and how I used it.

Link : https://cloudkinshuk.in

---

## An Overview :

If you're not very familiar with programming and don't want to create a separate project from scratch using React and TypeScript, you can directly jump to the **“Cloning the Project”** section using the navigation menu. This will simplify the setup process and allow you to easily customize the UI, code, and data to fit your needs.

---

## 🧠 Tech Stack & Tools

### ⚙️ Development Environment

* **IDE**: VS Code
    
* **Package Manager**: npm (primary), bun/yarn/pnpm (optional)
    

### 📦 Core Technologies

| **Tool** | **Version** |
| --- | --- |
| React | `19.0.0` |
| TypeScript | `5.7.2` |
| React Router DOM | `7.3.0` |
| Tailwind CSS | `4.0.14` |
| Framer Motion | `12.5.0` |
| React Icons | `5.5.0` |
| Lucide React | `0.482.0` |

### 🎨 Fonts

* **Poppins** from Google Fonts
    

---

## ☁️ Deployment & Cloud Setup

### 🧭 Cloud & Hosting

* **Frontend Hosting**: [AWS Amplify](https://aws.amazon.com/amplify/) (Serverless, scalable, easy CI/CD)
    
* **DNS & SSL**: AWS Route 53
    
* **Domain Provider**: Hostinger (`.in` domain for ₹1000 / 2 years)
    
* **Version Control**: Git & GitHub
    

> 🔗 GitHub Repo: [kinshukjainn/kinshukkportfolio](https://github.com/kinshukjainn/kinshukkportfolio)

---

## Flow Diagram of Architecture :

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1746539838362/6165b174-4b75-4676-b453-d750d526dce7.png align="center")

## Beginner-Friendly Alternatives for Deployment

If you’re new to cloud deployments, these platforms are perfect starting points:

* **Vercel**
    
* **Netlify**
    
* **Railway**
    
* **Heroku**
    

### For Intermediate/Advanced Users:

* **Google Cloud Platform (GCP)** — great if you like Google’s ecosystem
    
* **Microsoft Azure** — ideal for Microsoft fans
    

---

## Building Process (From Scratch)

> 💡 Tip: **Only use one package manager** — npm or bun or yarn or pnpm. Using more than one can cause conflicts during deployment.

### Step 1: Create Your React App

#### Using `npm` (Recommended for beginners):

```bash
npm create vite@latest my-project-name
```

#### Using `bun`:

run this command in your terminal before running `bun create vite` in your project directory in vscode :

```bash
bun install
```

```bash

bun create vite
```

#### Using `yarn`: ( if you know yarn installation well then only use it )

```bash
yarn create vite my-project-name
```

---

### ✅ Step 2: Install Project Dependencies

Navigate to your project directory:

```bash
cd kinshukkportfolio # your project directory can be different
```

Then install packages:

```bash
npm install
```

If using yarn or bun:

```bash
yarn install
# OR
bun install
```

---

## 📁 Folder Structure

Here’s what my folder structure looks like:

```bash
REACTPORTFOLIO/
├── kinshukportfolio/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── socialmedia/
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── package.json
├── tailwind.config.js
├── vite.config.ts
├── tsconfig.json
└── README.md
```

---

## 🎨 Tailwind CSS Setup

### Install Tailwind CSS:

```bash
npm install tailwindcss @tailwindcss/vite
```

### Configure `vite.config.ts`:

```ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})
```

### Add Tailwind Imports in `index.css`:

```css
@import "tailwindcss";
```

---

## 🔌 Other Dependencies Setup

### React Icons

```bash
npm install react-icons
```

### Framer Motion

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

### Lucide React (Icon Library)

```bash
npm install lucide-react
```

---

## ▶️ Running the App Locally

After everything is set up, run:

```bash
npm run dev
```

You should see your site running at `localhost:5173` (or similar).

---

## 📜 My `package.json` (For Reference)

```json
{
  "name": "portweb",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@headlessui/react": "^2.2.0",
    "@mui/icons-material": "^6.4.7",
    "@mui/material": "^6.4.7",
    "@tailwindcss/vite": "^4.0.14",
    "framer-motion": "^12.5.0",
    "lucide-react": "^0.482.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-icons": "^5.5.0",
    "react-router-dom": "^7.3.0",
    "react-syntax-highlighter": "^15.6.1",
    "tailwindcss": "^4.0.14",
    "uuid": "^11.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.12",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.24.1",
    "vite": "^6.2.0"
  }
}
```

---

## 🧪 Cloning the Project (For Beginners)

Want to replicate this exact setup? Here’s how:

1. **Create a GitHub account** (if you don’t already have one)
    
2. Visit my repo: [github.com/kinshukjainn/kinshukkportfolio](https://github.com/kinshukjainn/kinshukkportfolio)
    
3. Click **"Fork"**
    
4. Clone your forked version:
    
    ```bash
    git clone https://github.com/yourusername/reponame.git
    cd kinshukkportfolio
    npm install
    npm run dev
    ```
    

## Here is a video of how to clone a forked repo :

%[https://youtu.be/isZ2FG8dXbQ] 

Customize the content, styles, and animations to make it your own!

If you have proceed till here you are very near to deploy your own portfolio website on the cloud and also would be able to host it :

Alright Kinshuk! Here's a **step-by-step beginner-friendly guide** to help you:

## Buy a Domain on Hostinger & Connect It to AWS (Amplify + Route 53)

---

### Part 1: Buying a Domain from Hostinger

1. **Go to** [**Hostinger**](https://www.hostinger.in/)
    
    * Create an account if you don’t have one.
        
    * Login to your dashboard.
        
2. **Buy a Domain**
    
    * Click on **"Domains"** in the top navbar.
        
    * Search for your desired domain (e.g., `cloudkinshuk.dev`).
        
    * Click **Buy Now** and proceed with the payment.
        
3. **Access Domain Settings**
    
    * After purchase, go to **“Domains” → “Manage”**.
        
    * You’ll see options like DNS, Nameservers, WHOIS, etc.
        

---

### Part 2: Set Up an AWS Account

1. **Go to** [**AWS Console**](https://aws.amazon.com/console/)
    
    * Click **"Create an AWS account"**.
        
    * Fill in your name, email, and password.
        
    * Add billing info (₹2 might be deducted for card verification).
        
2. **Sign In to AWS Console**
    
    * Go to the [AWS Console](https://console.aws.amazon.com/), sign in as a **root user** (with your email).
        

---

### Part 3: Create Route 53 Hosted Zone

1. **Search for “Route 53”** in the AWS Console.
    
2. On the left panel, go to **"Hosted Zones"** → **Create Hosted Zone**
    
    * **Domain Name:** your domain (e.g., `cloudkinshuk.dev`)
        
    * **Type:** Public Hosted Zone
        
    * Click **Create**
        
3. **Note Down the NS Records (Nameservers)**
    
    * AWS will generate **4 NS records** (like `ns-123.awsdns-xyz.com`).
        

---

### Part 4: Update Nameservers in Hostinger

1. Go back to **Hostinger > Domains > Manage**
    
2. Scroll to **"Nameservers"**
    
3. Choose **"Use custom nameservers"**
    

Paste the **4 NS records** you got from Route 53

```bash
ns-1962.awsdns-53.co.uk  
ns-897.awsdns-47.net  
ns-1136.awsdns-14.org  
ns-200.awsdns-25.com
```

> **Note:** These are **just examples** and won’t work for your domain. You must use the exact NS records that AWS gives you after creating a hosted zone in Route 53. Always copy-paste from your actual AWS dashboard.

1. Save the changes  
    ⏳ It might take 5 minutes to a few hours to reflect.
    

---

### Part 5: Deploy Your Project with AWS Amplify

1. **Go to AWS Console → Search for “Amplify”**
    
2. Click on **“Get Started”** under **Host a web app**
    
3. Connect your **GitHub Repository**
    
    * Authorize GitHub → Select your repo (e.g., portfolio or blog)
        
4. Choose branch (e.g., `main`)
    
5. Click **Next**, then **Deploy**
    

🔄 Amplify will now:

* Build
    
* Deploy
    
* Host your site at a temporary domain like: `main.abcd123.amplifyapp.com`
    

---

### Part 6: Connect Custom Domain (from Hostinger)

1. In Amplify → Click on your deployed app → Go to **“Domain Management”**
    
2. Click **“Add Domain”**
    
    * Enter your domain name (e.g., `cloudkinshuk.dev`)
        
3. Choose subdomains:
    
    * `www.cloudkinshuk.dev`
        
    * `cloudkinshuk.dev`
        
4. Click **Save**  
    Amplify will show you **CNAME** and **A records** to be added in Route 53.
    

---

### Part 7: Add Domain Records in Route 53 →

1. Go back to **Route 53 → Hosted Zones → Select your domain**
    
2. Click **“Create Record”**
    
    * Choose type **A – IPv4 address**
        
    * Select **Alias** = Yes → Choose **Alias Target** = Amplify target (will be shown)
        
    * Click **Create**
        
3. For www:
    
    * Create a **CNAME record**
        
    * Name = `www`
        
    * Value = Amplify's `www.cloudkinshuk.dev` target
        

---

### Part 8: Enable Redirection from www → non-www

1. In Amplify > Domain Management
    
2. Click on **"Edit"** for domain settings
    
3. Check the box for **Redirect www to root domain** (`www.cloudkinshuk.dev` → `cloudkinshuk.dev`)
    

---

### Done!

Now visiting your domain like `https://cloudkinshuk.dev` will open your Amplify-hosted project.

---

### Pro Tips →

* DNS changes may take 5–60 minutes to propagate globally.
    
* Make sure your project has a proper `build` script in `package.json` (like `next build` or `vite build`).
    
* You can also enable **HTTPS (SSL)** from Amplify automatically.
    

---

## Final Thoughts →

Creating this portfolio site helped me improve my React and cloud skills while giving me a central place to showcase my projects and resume. Whether you're a beginner or an experienced dev, building your own portfolio is the best investment in your career.

If you liked this guide or found it helpful, give the repo a ⭐ on GitHub and feel free to connect!

---

## Connect With Me :

My social Links : →

* **Portfolio**: [cloudkinshuk](https://cloudkinshuk.in)
    
* **GitHub**: [kinshukjainn](https://github.com/kinshukjainn)
    
* **LinkedIn**: [kinshukjainn](https://linkedin.com/in/kinshukjainn)
    
* **Instagram**: [kinshukjain](https://instagram.com/kinshukjain._).\_
    
* twitter(X) : [kinshukjainn](https://x.com/realkinshuk004)