Skip to content

Akshayy67/portfolio

Repository files navigation

πŸš€ Akshay Juluri - Portfolio

A modern, interactive portfolio website showcasing my journey as a Computer Science Engineering student, competitive programmer, and full-stack developer.

Live Demo GitHub LinkedIn LeetCode

🌟 Features

🎨 Immersive Design

  • Interstellar-inspired theme with space aesthetics
  • Smooth parallax scrolling effects
  • Custom cursor with glitter trail effects
  • Dark/Light mode toggle with smooth transitions
  • Responsive design optimized for all devices
  • Framer Motion animations throughout

πŸ“Š Dynamic Content

  • Real-time LeetCode stats fetched from API
    • 600+ problems solved
    • Contest rating: 1695+ (Top 13% globally)
    • Live difficulty breakdown (Easy/Medium/Hard)
  • Project metrics with performance indicators
  • Interactive project cards with hover effects
  • Dynamic greetings based on time of day

πŸ› οΈ Technical Highlights

  • Performance optimized with lazy loading
  • SEO friendly with meta tags
  • Google Analytics integration
  • Email contact form with EmailJS
  • AI-powered suggestions in contact form
  • Smooth page transitions

πŸ—οΈ Built With

Frontend

  • React 18 - UI library
  • TypeScript - Type safety
  • Vite - Build tool & dev server
  • Tailwind CSS - Utility-first styling
  • Framer Motion - Animations

Libraries & Tools

  • Lucide React - Icon library
  • Typed.js - Typing animations
  • React Intersection Observer - Scroll animations
  • EmailJS - Contact form functionality
  • React GA4 - Google Analytics

APIs

  • LeetCode API - Real-time coding stats
  • Hugging Face API - AI suggestions

πŸ“ Project Structure

portfolio/
β”œβ”€β”€ public/
β”‚   β”œβ”€β”€ profile-2.jpg          # Profile photo
β”‚   β”œβ”€β”€ resume.pdf             # Resume (add your own)
β”‚   └── [project-images]       # Project screenshots
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ HeroSection.tsx           # Landing section
β”‚   β”‚   β”œβ”€β”€ AboutSection.tsx          # About me with skills
β”‚   β”‚   β”œβ”€β”€ ProjectsSection.tsx       # Projects showcase
β”‚   β”‚   β”œβ”€β”€ BlogSection.tsx           # Achievements & certifications
β”‚   β”‚   β”œβ”€β”€ ContactSection.tsx        # Contact form
β”‚   β”‚   β”œβ”€β”€ Navigation.tsx            # Navbar
β”‚   β”‚   β”œβ”€β”€ ResumeDownloadButton.tsx  # Resume CTA
β”‚   β”‚   └── ...
β”‚   β”œβ”€β”€ contexts/
β”‚   β”‚   └── ThemeContext.tsx   # Dark/Light mode
β”‚   β”œβ”€β”€ services/
β”‚   β”‚   β”œβ”€β”€ leetcodeApi.ts     # LeetCode data fetching
β”‚   β”‚   └── analytics.ts       # Google Analytics
β”‚   β”œβ”€β”€ config/
β”‚   β”‚   └── emailjs.ts         # Email configuration
β”‚   └── App.tsx                # Main app component
β”œβ”€β”€ .env                       # Environment variables
└── package.json

πŸš€ Getting Started

Prerequisites

  • Node.js 18+ and npm

Installation

  1. Clone the repository

    git clone https://github.com/Akshayy67/portfolio.git
    cd portfolio
  2. Install dependencies

    npm install
  3. Set up environment variables

    Create a .env file in the root directory:

    VITE_EMAILJS_SERVICE_ID=your_service_id
    VITE_EMAILJS_TEMPLATE_ID=your_template_id
    VITE_EMAILJS_PUBLIC_KEY=your_public_key
    VITE_GA_TRACKING_ID=your_ga_tracking_id
  4. Add your resume

    Place your resume.pdf in the public/ folder

  5. Start development server

    npm run dev

    Open http://localhost:5173 in your browser

Build for Production

npm run build

The optimized build will be in the dist/ folder.

Deploy

npm run deploy

This will deploy to GitHub Pages automatically.

πŸ“Š Key Sections

1. Hero Section

  • Animated name with typing effect
  • Profile photo with glow effect
  • Social media links (GitHub, LinkedIn)
  • Dynamic greeting based on time

2. About Section

  • FAANG-optimized developer profile
  • Competitive programming achievements
  • Technical skills with proficiency levels
  • Solar system visualization
  • Resume download button

3. Projects Section

  • 12+ projects with live demos
  • Performance metrics for each project
  • Tech stack badges
  • GitHub links
  • "More Projects" expandable section

Featured Projects:

  • SuperApp - AI-powered academic assistant (500+ users)
  • LRU Cache - O(1) visualization tool
  • URL Shortener - 1000+ req/sec throughput
  • Contact Manager - Trie-based search (O(k) complexity)
  • AVL Tree Visualizer - Self-balancing BST animations
  • And more...

4. Achievements Section

  • Live LeetCode Dashboard
    • Real-time problem count
    • Difficulty breakdown
    • Clickable to profile
  • Hackathon wins
  • Certifications (ML, ServiceNow CSA, Juniper Networks)

5. Contact Section

  • Email contact form with validation
  • AI-powered message suggestions
  • Direct contact information
  • Resume download option
  • LinkedIn integration

🎯 Performance Metrics

  • Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
  • First Contentful Paint: < 1.5s
  • Time to Interactive: < 3s
  • Bundle Size: Optimized with code splitting
  • Mobile Responsive: 100%

πŸ”§ Configuration

EmailJS Setup

  1. Create account at EmailJS
  2. Create email service and template
  3. Add credentials to .env file

Google Analytics

  1. Create GA4 property
  2. Get tracking ID
  3. Add to .env file

LeetCode Stats

The portfolio automatically fetches stats from:

https://leetcode-api-faisalshohag.vercel.app/akshayjuluri

Update the username in src/services/leetcodeApi.ts to use your profile.

🎨 Customization

Colors

The portfolio uses an orange theme. To customize:

  • Edit Tailwind config in tailwind.config.js
  • Update CSS variables in src/index.css

Content

  • Profile: Update src/components/AboutSection.tsx
  • Projects: Update src/components/ProjectsSection.tsx
  • Skills: Modify skills array in AboutSection.tsx
  • Achievements: Update src/components/BlogSection.tsx

Images

  • Place images in public/ folder
  • Reference as /image-name.jpg in components

πŸ“ˆ Analytics & Tracking

The portfolio tracks:

  • Page views
  • Section views (Hero, About, Projects, Contact)
  • Button clicks
  • Form submissions
  • Resume downloads

View analytics in your Google Analytics dashboard.

🀝 Contributing

This is a personal portfolio, but feel free to:

  • Fork the repository
  • Use it as a template for your own portfolio
  • Submit issues for bugs
  • Suggest improvements

πŸ“„ License

This project is open source and available under the MIT License.

πŸ‘¨β€πŸ’» About Me

I'm Akshay Juluri, a Computer Science Engineering student at SNIST with a passion for:

  • 🧩 Competitive Programming - 600+ LeetCode problems, Top 13% globally
  • πŸ’» Full-Stack Development - React, Node.js, Python, Flutter
  • πŸ€– Machine Learning - Stanford/DeepLearning.AI certified
  • πŸ† Hackathons - Winner of SNIST Summer Hackathon

Stats

  • πŸŽ“ CGPA: 8.1/10
  • πŸ’ͺ LeetCode: 600+ problems solved
  • πŸ… Contest Rating: 1695+
  • πŸš€ Projects: 12+ deployed applications
  • πŸ“œ Certifications: ML, ServiceNow CSA, Juniper Networks

πŸ“ž Contact

πŸ™ Acknowledgments


⭐ Star this repo if you found it helpful!

Made with ❀️ by Akshay Juluri

Releases

No releases published

Packages

 
 
 

Contributors

Languages