Built with intention, not templates.
A sophisticated, human-crafted portfolio designed to stand out from the sea of generic developer sites. Every pixel, every word, every interaction has been carefully considered to showcase authentic personality while maintaining professional excellence.
Anti-AI Mandate: This portfolio deliberately avoids all the telltale signs of AI-generated content:
- No purple/blue gradients on white
- No "Hi, I'm [Name]. I'm passionate about..." openers
- No generic fonts (Inter, Roboto, Arial)
- No buzzword salads or perfect corporate language
- No symmetrical, predictable layouts
- No excessive emojis or "Let's connect!" CTAs
Human-Crafted Elements:
- Asymmetric, editorial layouts that breathe
- Conversational copy with genuine personality
- Distinctive typography (Clash Display + Source Sans 3)
- Authentic voice and real opinions
- Meaningful microinteractions, not decoration
- Strategic use of negative space
Color Palette: Dark & Refined
- Background: Deep charcoal (#0D0D0F)
- Primary text: Off-white (#FAFAFA)
- Accent: Electric blue (#0066FF)
- Subtle grays for hierarchy
Typography:
- Display: Clash Display (headlines, impact text)
- Body: Source Sans 3 (readable, professional)
- Carefully crafted type scale and spacing
Layout Philosophy:
- Editorial magazine-style asymmetric layouts
- Generous white space and breathing room
- Content-first approach with intentional hierarchy
- Mobile-first responsive design
- Lighthouse score > 90 on all metrics
- Lazy loading for images
- Optimized font loading with preconnect
- Efficient CSS with minimal JavaScript
- No layout shift - reserved space for all content
- Orchestrated page load animations
- Scroll-triggered reveal animations
- Meaningful hover states and microinteractions
- Smooth scrolling between sections
- Active navigation highlighting
- Semantic HTML structure
- Proper heading hierarchy
- Keyboard navigation support
- Screen reader friendly
- High contrast ratios
- Focus management
- Touch-friendly interactions
- Responsive typography and spacing
- Optimized for mobile recruiters
- Fast loading on slower connections
Every piece of copy sounds like Ishaan actually wrote it:
- "I build ML systems. Some of them even work on the first try."
- Direct, confident, with subtle personality
- No corporate buzzwords or AI-speak
- Real stories and genuine interests
Featured projects are presented as case studies:
- Problem → Approach → Outcome
- Real technical depth without jargon
- Actual impact metrics (60% automation, 1st place wins)
- Visual hierarchy that guides the eye
- Hero: Instant impression - who is this person?
- About: Human connection and personality
- Work: Credibility through real projects
- Experience: Professional validation
- Skills: Quick reference for recruiters
- Contact: Clear next steps
- Modern web browser
- Local server (optional, for development)
# Clone or download the repository
cd portfolio
# Serve locally (optional)
python -m http.server 8000
# or
npx serve .
# Open in browser
open http://localhost:8000portfolio/
├── index.html # Main HTML structure
├── style.css # All styling and responsive design
├── script.js # Interactions and animations
├── images/ # Optimized images
│ └── IMG_1997 Background Removed.png
├── lib/ # Data files (if needed)
└── README.md # This file
- Clear understanding: ML/Data Science candidate
- 2-3 impressive projects immediately visible
- Easy contact information access
- Professional but memorable impression
- Depth understanding: teaching, production experience, research
- Technical competence demonstrated through the site itself
- Clear progression and growth trajectory
- Desire to interview this candidate
- "Damn, this is a good portfolio"
- Inspiration without being derivative
- Proof that personal sites can be exceptional
- ✅ Doesn't look AI-generated
- ✅ Shows genuine taste and attention to detail
- ✅ Demonstrates front-end competence
- ✅ Memorable and distinctive
All content is in index.html with clear semantic structure. Key sections:
- Hero stats and tagline
- About story and details
- Project descriptions and links
- Experience timeline
- Contact information
Main design tokens in style.css:
/* Colors */
--bg-primary: #0D0D0F;
--text-primary: #FAFAFA;
--accent: #0066FF;
/* Typography */
--font-display: 'Clash Display';
--font-body: 'Source Sans 3';Follow the established pattern in the Work section:
- Featured projects get full case study treatment
- Supporting projects use the grid layout
- Include problem/solution narrative
- Add relevant tech stack tags
- Load Time: < 3 seconds on 3G
- Lighthouse Performance: 95+
- Accessibility: 100
- Best Practices: 100
- SEO: 95+
This portfolio draws inspiration from:
- Editorial magazine layouts
- High-end agency websites
- Dennis Snellenberg's interaction design
- Modern art gallery presentations
- Technical documentation aesthetics
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Mobile browsers (iOS Safari, Chrome Mobile)
- Vercel (ideal for static sites)
- Netlify (great for continuous deployment)
- GitHub Pages (free and simple)
Consider purchasing: ishaan.dev or similar professional domain
- Meta tags configured
- Open Graph tags for social sharing
- Semantic HTML structure
- Fast loading for search rankings
This portfolio is designed to achieve:
- Higher response rates from job applications
- More interview requests from quality companies
- Memorable impression that leads to referrals
- Professional credibility in ML/Data Science field
"Build something that stands out. Build something Ishaan would be proud to send to Google."
This isn't just a portfolio—it's a statement. It says: "I care about details, I understand design, I can build things that work, and I'm the kind of person you want on your team."
Every choice was intentional. Every word was considered. Every interaction was crafted.
Built by hand, not by committee.
For questions about the code or design decisions, reach out to Ishaan at ishaangosain08@gmail.com