https://github.com/aswinsaipalakonda/portfolio
This is my portfolio
https://github.com/aswinsaipalakonda/portfolio
emailjs html5 javascript react-dom-router reactjs shadcn-ui tailwindcss
Last synced: about 1 month ago
JSON representation
This is my portfolio
- Host: GitHub
- URL: https://github.com/aswinsaipalakonda/portfolio
- Owner: Aswinsaipalakonda
- Created: 2025-09-03T16:35:05.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-01T18:17:42.000Z (8 months ago)
- Last Synced: 2025-10-01T20:30:39.358Z (8 months ago)
- Topics: emailjs, html5, javascript, react-dom-router, reactjs, shadcn-ui, tailwindcss
- Language: TypeScript
- Homepage: https://aswinsai.vercel.app/
- Size: 13.4 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🚀 Aswinsai Palakonda — Portfolio
Full Stack Developer • No-Code Developer • AI Enthusiast
---w
## ✨ Overview
A **modern, immersive** personal portfolio website built with cutting-edge web technologies. Features a cinematic **liquid splash screen**, an interactive **3D space background**, **smooth Lenis scrolling**, **Framer Motion animations**, a dedicated **Contact page** with a 3D globe, and a downloadable **Resume** — all designed to leave a lasting impression.
## 🎬 Highlights
| Feature | Description |
| --------------------------- | --------------------------------------------------------------------------- |
| 🌊 **Liquid Splash Screen** | SVG-masked text fill animation with animated waves and a percentage counter |
| 🌌 **3D Space Background** | Interactive starfield rendered with React Three Fiber & Three.js |
| 🧈 **Lenis Smooth Scroll** | Buttery smooth scrolling with spring-based easing curves |
| 🎞️ **Framer Motion** | Page transitions, scroll-triggered reveals, and micro-interactions |
| 📱 **Fully Responsive** | Pixel-perfect on mobile, tablet, and desktop |
| 📬 **Contact Page** | Dedicated contact page with email form powered by EmailJS |
| 🌍 **3D Globe** | Rotating globe in the Contact section |
| ⌨️ **Flip Words Effect** | Dynamic role cycling in the hero section |
| 📄 **Resume Download** | One-click resume view in a new tab |
| 🔍 **SEO Optimized** | Structured data, sitemap, robots.txt, and Open Graph meta tags |
---
## 🛠️ Tech Stack
| Technology | Purpose |
| :------------------------------------------------------------------------------------------------------------------- | :------------------------------------------ |
|  | UI library for component-based architecture |
|  | Type-safe development |
|  | Lightning-fast build tool & dev server |
|  | Utility-first CSS framework |
|  | 3D graphics & space background |
|  | Animations & page transitions |
|  | Smooth scrolling engine |
|  | Client-side email service |
|  | Client-side routing & navigation |
---
## 📂 Project Structure
```
Portfolio/
├── public/
│ ├── assets/
│ │ ├── icons/ # Favicons & PWA icons
│ │ └── images/ # Profile photo, certificates, logos
│ ├── experience/ # Experience-related assets
│ ├── Resume.pdf # Downloadable resume
│ ├── resume.html # Resume viewer page
│ ├── sitemap.xml # SEO sitemap
│ └── robots.txt # Search engine crawl rules
├── src/
│ ├── components/
│ │ ├── About.tsx # Hero section with photo & flip words
│ │ ├── Navbar.tsx # Fixed navigation with mobile menu
│ │ ├── Content.tsx # Section orchestrator
│ │ ├── SplashScreen.tsx # 🌊 Liquid fill splash animation
│ │ ├── Space.tsx # 🌌 Three.js starfield background
│ │ ├── TypeWriter.tsx # ⌨️ Typing animation component
│ │ ├── ScrollToTop.tsx # Scroll restoration on route change
│ │ ├── Languages.tsx # Programming languages section
│ │ ├── Skills/
│ │ │ ├── Skills.tsx # Technical skills grid
│ │ │ ├── SkillCard.tsx # Individual skill card
│ │ │ └── SoftSkills.tsx # Soft skills display
│ │ ├── Projects/
│ │ │ ├── Projects.tsx # Projects showcase
│ │ │ └── ProjectCard.tsx # Project card with links
│ │ ├── Certificates/
│ │ │ ├── Certificates.tsx # Certificates gallery
│ │ │ ├── CertificateCard.tsx # Certificate card component
│ │ │ └── CertificateModal.tsx # Full-view modal
│ │ ├── Education/
│ │ │ ├── Education.tsx # Timeline education section
│ │ │ └── EducationCard.tsx # Education card component
│ │ ├── Experience/ # Work experience section
│ │ ├── Contact/
│ │ │ ├── Contact.tsx # Contact section wrapper
│ │ │ ├── ContactForm.tsx # Email form with validation
│ │ │ ├── RotatingGlobe.tsx # 3D rotating globe
│ │ │ ├── Footer.tsx # Social links & copyright
│ │ │ └── Toast.tsx # Notification component
│ │ ├── ui/ # Reusable UI primitives
│ │ └── fancy/ # Fancy animation components
│ ├── pages/
│ │ └── ContactPage.tsx # Dedicated contact route page
│ ├── providers/
│ │ └── LenisProvider.tsx # 🧈 Smooth scroll provider
│ ├── lib/ # Utility functions
│ ├── App.tsx # Root app with routing & splash screen
│ ├── main.tsx # Entry point with providers
│ └── index.css # Global styles & Lenis config
├── index.html # HTML entry with SEO structured data
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.json
└── package.json
```
---
## 🚀 Getting Started
### Prerequisites
- **Node.js** ≥ 18.x
- **npm** ≥ 9.x
### Installation
```bash
# 1️⃣ Clone the repository
git clone https://github.com/Aswinsaipalakonda/Portfolio.git
# 2️⃣ Navigate to the project
cd Portfolio
# 3️⃣ Install dependencies
npm install
# 4️⃣ Start the dev server
npm run dev
```
The app will be running at **`http://localhost:5173`** 🎉
### Build for Production
```bash
npm run build
npm run preview # Preview the production build
```
---
## 📸 Sections
| # | Section | Description |
| :-: | ----------------- | ---------------------------------------------------------------- |
| 🌊 | **Splash Screen** | Cinematic liquid-fill name animation with wave effects |
| 👤 | **About** | Hero with profile photo, gradient name, and flip word roles |
| 🛠️ | **Skills** | Categorized technical skills (Frontend, Backend, DevOps, Others) |
| 💻 | **Languages** | Programming languages proficiency |
| 💼 | **Experience** | Professional work experience |
| 📁 | **Projects** | Showcased projects with live demo & GitHub links |
| 🏅 | **Certificates** | Achievements gallery with full-view modal |
| 🎓 | **Education** | Academic timeline with school details & CTA |
| 📬 | **Contact** | Dedicated page with email form + 3D globe + social links |
---
## 🔍 SEO & Performance
- **Structured Data**: JSON-LD for Person, WebSite, SiteNavigationElement, and BreadcrumbList
- **Sitemap**: Includes main site, LinkedIn, GitHub, Instagram, and Contact page
- **Open Graph & Twitter Cards**: Rich previews for social sharing
- **Google Analytics**: Traffic tracking via Google Tag Manager
- **Google Search Console**: Verified and indexed
- **Optimized Sitelinks**: Structured data hints for Google sub-links (Home, LinkedIn, GitHub, Instagram, Contact)
---
## 🎨 Design Philosophy
- **Dark Theme** with `#915EFF` purple accent color
- **Glassmorphism** effects on navigation
- **Gradient text** for headings and brand name
- **Scroll-triggered animations** using Framer Motion `whileInView`
- **3D elements** for depth and immersion
- **Inter font** for clean, modern typography
- **Custom purple scrollbar** for attention to detail
---
## 🤝 Connect with Me
---
## 📜 License
This project is open source and available under the [MIT License](LICENSE).
---
⭐ If you like this portfolio, give it a star!
Made with 💜 by Aswinsai Palakonda