🌟 Portfolio Website

A modern, responsive portfolio website showcasing professional excellence

---

📖 Overview

This is a modern, responsive portfolio website built with React.js that showcases professional information, skills, projects, education, and experience in an elegant and interactive user interface. The project implements DevSecOps best practices with comprehensive CI/CD pipelines, security scanning, and quality assurance.

✨ Features

🎨 User Interface

• 📱 Responsive Design - Works seamlessly on all devices
• 🌙 Dark Theme UI - Modern and elegant dark interface
• ⌨️ Typewriter Effect - Interactive hero section animation
• 🎯 Smooth Navigation - Seamless scrolling and transitions
• 🖼️ Project Modals - Detailed project showcase with interactive modals

🔧 Technical Excellence

• 🚀 Performance Optimized - Fast loading and smooth interactions
• 🛡️ Security First - Comprehensive security scanning with Trivy
• 📊 Quality Assured - SonarQube integration for code quality
• 🔄 CI/CD Pipeline - Automated testing, building, and deployment
• 🐳 Containerized - Docker support for consistent deployments

🛠️ Tech Stack

Category	Technologies
Frontend
Styling
UI/UX
DevOps
Quality
Deployment

Project Structure

web-profilev1/
├── public/                # Public assets
├── src/                   # Source files
│   ├── components/        # React components
│   │   ├── AboutMe/       # About section component
│   │   ├── Education/     # Education section component
│   │   ├── Experience/    # Experience section component
│   │   ├── Footer/        # Footer component
│   │   ├── HeroBgAnimation/ # Hero background animation
│   │   ├── HeroSection/   # Hero section component
│   │   ├── Navbar/        # Navigation bar component
│   │   ├── ProjectDetails/ # Project details modal
│   │   ├── Projects/      # Projects section component
│   │   └── Skills/        # Skills section component
│   ├── data/              # Data files
│   │   └── constants.js   # Website content and configuration
│   ├── images/            # Image assets
│   ├── utils/             # Utility functions
│   │   └── Themes.js      # Theme configuration
│   ├── App.css            # Global styles
│   ├── App.js             # Main application component
│   └── index.js           # Application entry point
├── deployments/           # Deployment configurations
│   ├── docker/            # Docker configuration
│   ├── jenkins/           # Jenkins pipeline
│   └── nginx/             # Nginx configuration
├── .github/               # GitHub workflows
├── package.json           # Dependencies and scripts
└── README.md              # Project documentation

Getting Started

Prerequisites

• Node.js (v14.0.0 or later)
• npm (v6.0.0 or later)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/web-profilev1.git
   cd web-profilev1

2. Install dependencies

   npm install

3. Start the development server

   npm start

   The application will open in your default browser at http://localhost:3000.

Building for Production

npm run build

This will create an optimized production build in the build folder.

Deployment

Docker Deployment

A Docker configuration is included for containerized deployment:

docker compose up -d

Customization

Content

All website content is stored in src/data/constants.js. You can modify this file to update:

• Personal information
• Skills
• Experience
• Projects
• Education

Styling

The website uses a combination of Styled Components and CSS:

• Global styles are in src/App.css
• Component-specific styles are in their respective folders
• Theme configuration is in src/utils/Themes.js

CI/CD Pipeline

This project includes CI/CD configurations:

• GitHub Actions workflow in .github/workflows/cicd.yml
• Jenkins pipeline in deployments/jenkins/Jenkinsfile

📚 Documentation Hub

🗂️ Complete Project Documentation

📋 Document	🎯 Purpose	📖 Description
📖 Technical Documentation	Architecture & Implementation	Comprehensive technical details, component architecture, styling system, and performance optimization strategies
🧩 Component Guide	Development & Customization	Step-by-step guide for creating, modifying, and extending components with best practices and code examples
📝 Changelog	Version History & Updates	Detailed record of all changes, new features, bug fixes, and DevSecOps implementation milestones

🚀 Quick Navigation

---

📋 Documentation Overview

🏗️ Technical Documentation

Perfect for: Developers, DevOps Engineers, Technical Leads

Dive deep into the technical architecture, component structure, styling system, and performance optimizations. Learn about the build process, deployment strategies, and browser compatibility.

🎨 Component Guide

Perfect for: Frontend Developers, UI/UX Designers, Contributors

Master the art of component development with detailed guides on creating, modifying, and extending components. Includes best practices, responsive design patterns, and theming guidelines.

📈 Changelog

Perfect for: Project Managers, Stakeholders, Team Members

Track the evolution of the project with detailed version history, feature additions, security enhancements, and DevSecOps implementation milestones.