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

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

Clone the repository:

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

Go to the project directory:
```
cd an
```
Install dependencies:
```
 npm install
```
Create a .env.local file in the root directory take the values from .env.example:
```
cp .env.example .env.local
```
Run the development server:
```
 npm run dev
```
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

aarabii/An