Skip to content

2024yuva/portfolio-me

Repository files navigation

🌟 Yuvarrunjitha R S - Portfolio Website

Visit my deployed portfolio -> https://myportfolio-eresgx14i-yuvarrunjitha-r-ss-projects.vercel.app/

"Debugging my code and my life simultaneously—both are a work in progress and that's okay 🫶"

A personal portfolio showcasing my journey as a student developer, AI enthusiast, and creative builder.

🎯 Objective

This portfolio serves as a digital space to:

  • Showcase my projects and technical skills across frontend, backend, and AI/ML
  • Share my journey from 0 to 1 as a sophomore developer
  • Connect with like-minded developers, recruiters, and the tech community
  • Document my growth in engineering, AI, and creative coding

💫 What's the Motto?

Learn. Explore. Do It.

I believe in:

  • 🚀 Building in public - Sharing both successes and failures
  • 🌱 Continuous learning - Every project is an opportunity to grow
  • 💡 Impact over perfection - Creating solutions that matter
  • 🤝 Community-driven growth - Lifting others as I climb

This portfolio isn't just a resume—it's a reflection of my personality, my aesthetic sensibilities, and my commitment to creating meaningful technology.

🎨 Why This Design?

Aesthetic Choices

  • Warm Color Palette: Cream backgrounds (#FFF9E6) with dusty rose accents (#B8838C) create an inviting, approachable atmosphere
  • Pastel Highlights: Lavender, pink, and blue tags represent different skill domains with a soft, modern touch
  • Typography: Crimson Text for elegance, paired with clean sans-serif for readability
  • Shimmer Effect: Subtle animations add personality without overwhelming the content

Inspiration

Inspired by contemporary creator portfolios of many and credits may go to the rightful ones who inspired <3, this design combines:

  • Professional credibility with personal warmth
  • Technical expertise with creative expression
  • Minimalism with thoughtful details

User Experience

  • Mobile-first responsive design
  • Intuitive navigation with smooth transitions
  • Accessibility-focused with proper contrast ratios
  • Fast loading with optimized assets

🛠️ Built With

Frontend

  • React.js - Component-based architecture
  • React Router - Seamless navigation
  • Tailwind CSS - Utility-first styling
  • Lucide React - Beautiful icons

Features

  • ✨ Shimmer text animations
  • 🎨 Custom colour palette with CSS variables
  • 📱 Fully responsive grid layouts
  • 🔗 React Router for SPA navigation
  • 🎭 Smooth hover effects and transitions

Deployment

  • GitHub Pages - Free hosting with continuous deployment
  • Git - Version control and collaboration

📂 Project Structure

portfolio/
├── public/
│   ├── index.html
│   └── image/
│       └── me.png
├── src/
│   ├── components/
│   │   ├── Home.jsx
│   │   ├── Projects.jsx
│   │   ├── Skills.jsx
│   │   └── Contact.jsx
│   ├── App.jsx
│   ├── index.css
│   └── index.js
├── package.json
└── README.md

🚀 Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm or yarn

Installation

  1. Clone the repository
git clone https://github.com/yourusername/portfolio.git
cd portfolio
  1. Install dependencies
npm install
  1. Start development server
npm start
  1. Open http://localhost:3000 in your browser

Build for Production

npm run build

Deploy to GitHub Pages

npm run deploy

🎓 What I Learned

Building this portfolio taught me:

  • Design systems - Creating cohesive colour palettes and typography
  • Component architecture - Writing reusable, maintainable React components
  • CSS animations - Implementing subtle, performant animations
  • Deployment workflows - Automating builds and deployments with GitHub Actions
  • User experience - Balancing aesthetics with functionality

🌈 Color Palette

Color Hex Usage
Cream Yellow #FFF9E6 Background
Dusty Rose #B8838C Primary accent, headings
Hot Pink #FF69B4 CTA buttons, highlights
Lavender #E8D5FF Engineering tag
Light Pink #FFD5E5 AI-ML tag
Light Blue #D5F0FF Vibe Coding tag
Navy #2C3E50 Section headings
Gray #555555 Body text

📬 Connect With Me

🙏 Acknowledgments

  • Inspired by various portfolios across the web and connections <3
  • Tailwind CSS for the amazing utility-first framework
  • Lucide Icons for beautiful, consistent icons
  • Google Fonts - Crimson Text & Cormorant Garamond

📝 License

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

💭 Final Thoughts

This portfolio is more than just a collection of projects—it's a living document of my growth as a developer. Every commit represents a lesson learned, every component a problem solved, and every design choice a step toward finding my voice in tech.

As a sophomore student, I'm just beginning this journey. This portfolio will evolve as I do, reflecting new skills, projects, and perspectives. I believe in learning in public, sharing the messy middle, and celebrating progress over perfection.

If you're reading this, whether you're a recruiter, fellow developer, or curious visitor—thank you for taking the time to explore my work. Let's connect and build something amazing together! 🚀


Made with 💖 by Yuvarrunjitha R S
Building ideas that shine, one line of code at a time.

About

My portfolio

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published