Sasank Reddy - Personal Portfolio Website

A modern, responsive personal portfolio website built with HTML, CSS, and vanilla JavaScript. Features a clean design, dark/light theme toggle, smooth animations, and a fully responsive layout.

🚀 Features

Design & Layout

• Modern UI/UX: Clean, professional design with smooth animations
• Dark/Light Theme: Toggle between themes
• Fully Responsive: Mobile-first design that works on all devices
• Semantic HTML: Proper structure for accessibility and SEO

Interactive Elements

• Typing Animation: Animated text effect for roles/titles (requires script.js)
• Smooth Scrolling: Seamless navigation between sections
• Mobile Menu: Hamburger menu for mobile devices
• Form Validation: Contact form with validation (requires script.js)
• Scroll Animations: Elements fade in as you scroll (requires script.js)

Sections

• Hero Section: Introduction with animated text and profile image
• About Section: Personal bio
• Skills Section: Technical skills organized by category
• Projects Section: Project cards with hover effects
• Contact Section: Contact form and social links
• Footer: Social links and resume download

📁 Project Structure

portfolio cursor/
├── index.html          # Main HTML file
├── style.css           # CSS styles
├── script.js           # JavaScript functionality
├── assets/             # (Optional) For local assets if added
└── README.md           # This file

🛠️ Setup Instructions

Local Development

1. Clone or Download the project files to your local machine
2. Open the Project:
   • Navigate to the project folder
   • Open index.html in your web browser
   • Or use a local server for better development experience
3. Using a Local Server (Recommended):

   # Using Python (if installed)
   python -m http.server 8000
   
   # Using Node.js (if installed)
   npx serve .
   
   # Using Live Server extension in VS Code
   # Right-click on index.html and select "Open with Live Server"

4. Access the Website:
   • If using a local server: http://localhost:8000
   • If opening directly: File path in browser

Deployment

• You can deploy this site using GitHub Pages, Netlify, Vercel, or any static hosting provider. No build step is required.

🎨 Customization Guide

Personal Information

Update the following in index.html:

• Name and Title:

  <h2>Sasank Reddy</h2>
  <title>Portfolio Website</title>

• Hero Section:

  <h1 class="hero-title">
      Hi, I'm <span class="highlight">Sasank Reddy</span>
  </h1>

• About Section: Update the bio paragraphs in the about section.
• Contact Information:

  <p>sasankreddy1809@gmail.com</p>
  <a href="https://www.linkedin.com/in/sasank-reddy-15ba1b275/">LinkedIn</a>
  <a href="https://github.com/Coder1809">GitHub</a>

Profile Images

• The profile and about images use external URLs from avataaars.io. To use your own image, replace the src attribute in the <img> tags in the Hero and About sections with your image URL or a local file path (e.g., assets/your-profile-photo.jpg).

Skills

Update the skills section in index.html:

<div class="skill-item">
    <i class="fab fa-html5"></i>
    <span>HTML5</span>
</div>

Projects

Replace the sample projects with your actual projects:

<div class="project-card">
    <div class="project-image">
        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop" alt="Project Name">
    </div>
    <div class="project-content">
        <h3>Your Project Name</h3>
        <p>Project description...</p>
        <div class="project-tech">
            <span>React</span>
            <span>Node.js</span>
        </div>
    </div>
</div>

Colors and Theme

Customize colors in style.css using CSS variables:

:root {
    --primary-color: #6366f1;
    --secondary-color: #f59e0b;
    --text-primary: #1f2937;
    --bg-primary: #ffffff;
}

Typing Animation

Update the typing words in script.js (if implemented):

// Example: update the array of roles/titles
const roles = [
    'Frontend Developer',
    'Competitive Programmer',
    'IT Undergraduate',
    'Problem Solver'
];

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🎯 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

🔧 Technical Details

CSS Features

• CSS Custom Properties (variables) for theming
• Flexbox and Grid layouts
• CSS animations and transitions
• Media queries for responsiveness

JavaScript Features

• ES6+ syntax
• Typing animation (if implemented)
• Intersection Observer API (if implemented)
• Local Storage for theme persistence (if implemented)
• Form validation (if implemented)
• Smooth scrolling

Performance Optimizations

• Images are loaded from external URLs for demo purposes. For production, consider optimizing and hosting your own images.