An (Aarab Nishchal)'s portfolio website

My space on web to showcase my work, skills, and contact information. The design predominantly uses shades of purple, slate, gray, and slate from Tailwind CSS.

Aarab Nishchal's Portfolio

Table of Contents

• Project Overview
• Features
• Project Structure
• How to Run Locally
• Customization
• Color Scheme
• Resources
• Socials
• TODOs

Project Overview

This is a portfolio website built with Next.js 14, Framer Motion, and Tailwind CSS. It showcases my work, skills, and contact information. The design predominantly uses shades of purple, slate, gray, and slate from Tailwind CSS.

Live Demo: https://aarab.vercel.app

GitHub Repository: https://github.com/losier/an

Features

• Dynamic and customizable content
• Smooth animations with Framer Motion
• Responsive design
• Custom error and 404 pages
• Easy setup for archiving emails using EmailJS
• SEO optimized with meta tags, robots.txt, sitemap.xml, humans.txt, and security.txt

Project Structure

├── public
│   ├── .well-known
│   │   └── security.txt
│   ├── logo.svg
│   ├── humans.txt
│   ├── robots.txt
│   └── sitemap.xml
├── src
│   ├── app
│   │   ├── error.tsx
│   │   ├── global.css
│   │   ├── layout.tsx
│   │   └── not-found.tsx
│   │   └── page.tsx
│   ├── components
│   │   ├── common
│   │   │   ├── ContactForm.tsx
│   │   │   ├── ContactList.tsx
│   │   │   ├── ContactSocialList.tsx
│   │   │   ├── NavIcons.tsx
│   │   │   ├── SkillCard.tsx
│   │   │   └── TechClip.tsx
│   │   │   └── Title.tsx
│   │   └── About.tsx
│   │   └── Contact.tsx
│   │   └── Experience.tsx
│   │   └── Hero.tsx
│   │   └── Navbar.tsx
│   │   └── Projects.tsx
│   │   └── Skills.tsx
│   ├── assets
│   │   ├── logo
|   |   ├── (...4logo).png
│   │   └── fonts
│   │   |   └── argine.otf
│   │   |   └── nasalization.otf
│   │   |   └── Manrope.ttf
│   │   └── pic
│   │   |   └── aboutPic.png
│   │   |   └── bg_Ss.png
│   │   |   └── notFound.svg
│   └── constants
│   |   ├── details.json
│   |   ├── exp.ts
│   |   ├── skills.ts
│   |   └── projects.ts
|   └── Layout
|   |   └── Main.tsx
|   |   └── PreLoader.tsx
├── .env.example
├── .eslintrc.json
├── .gitignore
├── LICENSE.txt
├── next.config.mjs
├── package.json
├── postcss.config.mjs
├── sitemap.config.js
├── tailwind.config.js
├── tsconfig.json
└── README.md

How to Run Locally

1. Clone the repository:

   git clone https://github.com/losier/an.git

2. Go to the project directory:

   cd an

3. Install dependencies:

    npm install

4. Create a .env.local file in the root directory take the values from .env.example:

   cp .env.example .env.local

5. Run the development server:

    npm run dev

6. Open http://localhost:3000 to view it in the browser.

Customization

You can easily make this project your own by editing the following files:

• src/constants/details.json: Update personal details and social links.
• public/logo.svg and src/assets/logos/[4logo].png: Replace with your own logos.
• src/assets/pic/aboutPic.png: Replace with your own Pic.
• src/constants/exp.ts, src/constants/skills.ts, and src/constants/projects.ts: Update your skills, work experience adn project.
• src/assets: Add your own images and fonts if you want.

Color Scheme

The project uses the following color scheme from Tailwind CSS:

• Purple Shades
• slate
• Gray
• Slate

Resources

• Next.js: https://nextjs.org/
• Framer Motion: https://www.framer.com/motion/
• Tailwind CSS: https://tailwindcss.com/
• EmailJS: https://www.emailjs.com/
• Background CSS Generator: https://bg.ibelick.com/
• Tailwind Components: https://flowbite.com/

Socials

• Instagram: @aarab.ii
• LinkedIn: Aarab Nishchal
• GitHub: losier
• Twitter: @aarab_ii
• Facebook: zzcwc
• Telegram: @aarab_ii
• Snapchat: aarab.ii

TODOs

Updated TODO (2024-05-22)

• Add an ideas page
• Add a resume page
• Update Readme
• Fix CSS