An open API service indexing awesome lists of open source software.

https://github.com/arun-webcode/arun-portfolio

Hii Arun this side, welcome to my portfolio...
https://github.com/arun-webcode/arun-portfolio

angular html netlify-deployment scss typescript

Last synced: 2 months ago
JSON representation

Hii Arun this side, welcome to my portfolio...

Awesome Lists containing this project

README

          

# Arun Kumar - Angular Ionic Portfolio

## 🚀 Live Demo
**URL:** [View Portfolio](https://portfolio-arun-webcode.netlify.app)

---

## 🔥 Overview
An animated, impactful, and fully responsive portfolio built with **Angular 18+**, **Ionic**, **SCSS**, and **TypeScript**, featuring a professional dark theme with modern UI and theme switcher support.

---

## ✨ Key Features

### 🎨 UI & Theme
- **Dark Theme (default):** Black + purple + cyan with glowing gradients
- **Light Theme:** Clean white with dark text, preserving brand colors
- **Theme Toggle:** Floating switch with icon, remembers user choice via `localStorage`
- **Modern Effects:** Glassmorphism, glowing elements, gradient text
- **Responsive:** Optimized for mobile, tablet, and desktop

### 📄 Pages & Sections
1. **Home** – Hero intro, social links, CTA buttons
2. **About** – Objective, personal details, education, interests
3. **Experience** – Internship details (SarvM.AI), timeline format
4. **Projects** – Card layout, featured badge, tech stack, links
5. **Skills** – Categories, animated progress bars, certifications
6. **Contact** – Interactive form, availability, contact cards

### 💻 Tech Stack
- **Frontend:** Angular 18+, Ionic Framework
- **Architecture:** ngModule-based
- **Styling:** SCSS w/ mixins and variables
- **Language:** TypeScript
- **Icons & Animations:** Ionic Icons + CSS3
- **Build Tool:** Angular CLI + Vite

### 🎯 UX & Accessibility
- Smooth transitions, hover/press animations
- Responsive navigation and forms
- ARIA-compliant, accessible color contrast

---

## 🛠 Theme Switcher
- **Switch Button:** Top-right corner, sun/moon icon
- **Dark Theme:** Purple/Cyan on black
- **Light Theme:** Dark text on clean white
- **Tech:** RxJS observable theme service, standalone component

## 🗂️ File Structure
```
arun-portfolio/
├── src/
│ ├── app/
│ │ ├── home/ # Home Page
│ │ ├── about/ # About Page
│ │ ├── experience/ # Experience Page
│ │ ├── projects/ # Projects Page
│ │ ├── skills/ # Skills Page
│ │ ├── contact/ # Contact Page
│ │ └── tabs/ # Navigation
│ ├── global.scss # Global theme styles
│ └── theme/ # Ionic variables
├── angular.json # Angular config
├── ionic.config.json # Ionic config
├── package.json # Dependencies
```

---

## ⚙️ Setup & Deployment
```bash
# Clone & Setup
cd arun-portfolio
npm install
ionic serve # Dev mode
ionic build # Production build
```

---

## 📈 Performance
- **Build Size:** ~576KB (gzipped: ~149KB)
- **Load Time:** < 2s
- **Lighthouse:** High performance, accessibility, SEO

---

## 📌 Highlights
- SEO ready, fast load, clean design
- 100% responsive & mobile-friendly
- Modular, scalable code
- WCAG-compliant accessibility
- Production-tested and deployed

---

**Built with ❤️ using Angular, Ionic & TypeScript**