The Ani-Lytic Arc — Where Data Meets Design
This repository hosts the personal portfolio website of Animesh Maity, an aspiring Data Analyst and visual storyteller transitioning from a non-technical background. He is passionate about exploring how data, design, and storytelling come together to create meaningful insights.
This portfolio is built using React, Vite, and Tailwind CSS.
The site is fully responsive, modular, and features a dynamic light/dark theme for an optimized user experience.
This application showcases my skills, projects, blogs, and provides an easy way to get in touch.
Key features include:
- Single Page Application (SPA): Fast, responsive, and smooth navigation.
- Dynamic Theming: Light/Dark mode toggle implemented with React Context.
- Modular Architecture: Strict separation of components, context, and data (see Folder Structure).
- Component-Specific Assets: Imported for efficient caching and optimized build size.
- Brand Guidelines Section:
The Ani-Lytic Arc represents both my personal transformation journey and the data journey — from raw (Bronze) to refined (Gold) insights that power meaningful decisions.
This section documents my professional branding elements and design rationale.
| Category | Tools |
|---|---|
| Framework | React (Functional Components & Hooks) |
| Build Tool | Vite |
| Styling | Tailwind CSS (Utility-first for responsive design) |
| Icons | React Icons |
- Node.js (LTS recommended)
- npm (comes with Node.js)
# 1. Clone the repository
git clone https://github.com/Animesh258/animesh258.github.io.git
cd animesh258.github.io
# 2. Install dependencies
npm install
# 3. Run the development server
npm run devThe application will typically be available at http://localhost:5173.
The project follows a modular pattern to ensure clean separation of concerns.
my-portfolio/
├── public/ # Static files (Favicons, CV PDF, large videos)
├── src/
│ ├── components/
│ │ ├── common/ # Common components (Tooltip, PageTransition, ScrollToTop)
│ │ ├── sections/ # Full page sections (Hero, About, Projects, Contact)
│ │ └── ui/ # Reusable UI elements (Header, Card, Button, Toggle)
│ ├── context/ # ThemeContext (handles dark/light state)
│ ├── configs/ # Static Configurations (handles dark/light state)
│ ├── data/ # JSON files for Projects and Blogs (Data Source)
│ ├── media/ # Component-specific assets
│ ├── pages/ #
│ ├── App.jsx # Main router and layout
│ └── main.jsx
└── package.json
Modify JSON files in src/data/:
projects.jsonblogs.json
- Logo:
public/assets/logo.svg
(Note: Logo and related brand visuals are © The Ani-Lytic Arc and not for reuse.) - CV:
public/Animesh_Maity_CV.pdf - Favicons:
public/assets/brand-assets/favicons/favicons-light-theme/public/assets/brand-assets/favicons/favicons-dark-theme/
Tailwind configuration is in tailwind.config.js.
Update color tokens for your primary and accent brand colors.
This project is licensed under the MIT License — see the LICENSE file for details.
Note: All branding materials, including The Ani-Lytic Arc logo, name, and visual identity, are the intellectual property of Animesh Maity.
These are not covered under the MIT license and may not be reused, modified, or redistributed without explicit permission.
Connect on LinkedIn or explore more projects on GitHub.
© 2025 The Anilytic Arc | Where Data Meets Design