My Portfolio

Hello, I'm John Doe

Creative Developer & Problem Solver

I build digital experiences that matter. With 5+ years in web development, I specialize in creating responsive, user-friendly applications.

About Me

I'm a passionate developer with a strong background in JavaScript, React, and Node.js. My journey in tech started when I built my first website at 15, and I've been hooked ever since.

When I'm not coding, you can find me hiking, reading sci-fi novels, or experimenting with new cooking recipes. I believe in continuous learning and pushing boundaries.

My Skills

JavaScript/TypeScript
React & Next.js
Node.js & Express
UI/UX Design
Project Management

Work Experience

Senior Developer

Tech Solutions Inc. (2020-Present)

Leading a team of 5 developers to build enterprise applications. Responsible for architecture decisions and code reviews.

Increased application performance by 40%
Implemented CI/CD pipeline reducing deployment time
Mentored 3 junior developers

Frontend Developer

Digital Agency (2018-2020)

Developed responsive websites and web applications for various clients across industries.

Built 15+ client websites
Improved page load speed by 60%
Implemented accessibility standards

Junior Developer

Startup Company (2016-2018)

Worked on MVP development and participated in all phases of software development lifecycle.

Contributed to core product features
Reduced bugs by 30% with testing
Assisted in client presentations

Programs & Projects

E-Commerce Platform

🛒

Full-featured online store with payment integration and inventory management.

Built with React & Node.js
Stripe payment integration
Admin dashboard

View Case Study →

Task Management App

📋

Collaborative tool for teams to organize and track work progress.

Real-time updates
Drag-and-drop interface
Role-based access

View Case Study →

Health Tracker

🏥

Mobile-first application for tracking fitness and nutrition goals.

Data visualization
Custom reminders
API integrations

View Case Study →

Awards & Recognition

Best Developer Award 2022

Tech Innovation Conference

Top Open Source Contributor

GitHub Community

Hackathon Winner

CodeFest 2021

Google Cloud Certified

Professional Cloud Architect

AWS Certified

Solutions Architect

React Nanodegree

Udacity

Featured Developer

Tech Magazine Interview

Guest Speaker

Web Development Conference

Tech Podcast

"Future of Web" Episode

Let's Collaborate

Have a project in mind or want to discuss potential opportunities? I'd love to hear from you!

:root { --bg-color: #1e1e1e; --accent-color: #fd7200; --text-color: #ffffff; --text-secondary: #cccccc; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; font-size: 13px; } h1, h2, h3, h4 { font-weight: 600; line-height: 1.2; } h1 { font-size: 19px; } h2 { font-size: 17px; margin-bottom: 20px; position: relative; display: inline-block; } h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 50px; height: 3px; background-color: var(--accent-color); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 60px 0; } /* Navigation */ .navbar { background-color: rgba(30, 30, 30, 0.9); position: fixed; width: 100%; z-index: 1000; padding: 15px 0; } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 19px; font-weight: 700; color: var(--text-color); text-decoration: none; } .nav-links { display: flex; gap: 30px; } .nav-links a { color: var(--text-color); text-decoration: none; font-size: 13px; transition: color 0.3s; } .nav-links a:hover { color: var(--accent-color); } .menu-toggle { display: none; background: none; border: none; color: var(--text-color); font-size: 24px; cursor: pointer; } /* Hero Section */ .hero { padding-top: 100px; min-height: 100vh; display: flex; align-items: center; } .hero .container { display: flex; align-items: center; justify-content: space-between; gap: 50px; } .hero-content { flex: 1; } .hero h1 { font-size: 38px; margin-bottom: 15px; } .hero h1 span { color: var(--accent-color); } .subtitle { font-size: 18px; color: var(--text-secondary); margin-bottom: 20px; } .description { margin-bottom: 30px; max-width: 500px; } .cta-button { background-color: var(--accent-color); color: var(--text-color); border: none; padding: 12px 30px; font-size: 14px; font-weight: 600; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .cta-button:hover { background-color: #e65c00; } .hero-image { flex: 1; text-align: center; } .hero-image img { width: 100%; max-width: 400px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* About Section */ .about-content { display: flex; gap: 50px; margin-top: 30px; } .about-text { flex: 1; } .about-text p { margin-bottom: 15px; } .skills { flex: 1; } .skills h3 { margin-bottom: 20px; } .skills ul { list-style: none; } .skills li { margin-bottom: 10px; position: relative; padding-left: 20px; } .skills li::before { content: '▹'; position: absolute; left: 0; color: var(--accent-color); } /* Experience Section */ .timeline { margin-top: 40px; } .timeline-item { margin-bottom: 40px; padding-left: 30px; border-left: 2px solid var(--accent-color); position: relative; } .timeline-item::before { content: ''; position: absolute; left: -10px; top: 0; width: 16px; height: 16px; border-radius: 50%; background-color: var(--accent-color); } .timeline-item h3 { margin-bottom: 5px; } .company { color: var(--text-secondary); margin-bottom: 10px; font-size: 12px; } .achievements { margin-top: 15px; padding-left: 20px; } .achievements li { margin-bottom: 8px; font-size: 12px; } /* Projects Section */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 30px; } .project-card { background-color: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 25px; transition: transform 0.3s, box-shadow 0.3s; } .project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .project-header h3 { margin-bottom: 0; } .project-icon { font-size: 24px; } .project-features { margin: 15px 0; padding-left: 20px; } .project-features li { margin-bottom: 8px; font-size: 12px; } .project-link { color: var(--accent-color); text-decoration: none; font-weight: 600; display: inline-block; margin-top: 15px; } /* Achievements Section */ .achievement-tabs { margin-top: 30px; } .tab-buttons { display: flex; gap: 10px; margin-bottom: 30px; } .tab-button { background: none; border: none; color: var(--text-secondary); padding: 8px 20px; cursor: pointer; font-size: 13px; border-radius: 5px; transition: all 0.3s; } .tab-button.active { background-color: var(--accent-color); color: var(--text-color); } .tab-pane { display: none; } .tab-pane.active { display: block; } .achievement-item { background-color: rgba(255, 255, 255, 0.05); padding: 20px; border-radius: 5px; margin-bottom: 15px; } .achievement-item h3 { margin-bottom: 5px; } .achievement-item p { color: var(--text-secondary); font-size: 12px; } /* Contact Section */ .contact-form { max-width: 600px; margin-top: 30px; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; color: var(--text-color); font-family: 'Poppins', sans-serif; } .form-group textarea { resize: vertical; } .submit-button { background-color: var(--accent-color); color: var(--text-color); border: none; padding: 12px 30px; font-size: 14px; font-weight: 600; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .submit-button:hover { background-color: #e65c00; } /* Footer */ footer { background-color: rgba(0, 0, 0, 0.2); padding: 30px 0; text-align: center; } footer p { margin-bottom: 15px; font-size: 12px; color: var(--text-secondary); } .social-links { display: flex; justify-content: center; gap: 20px; } .social-links a { color: var(--text-secondary); text-decoration: none; font-size: 12px; transition: color 0.3s; } .social-links a:hover { color: var(--accent-color); } /* Responsive Styles */ @media (max-width: 768px) { .nav-links { display: none; } .menu-toggle { display: block; } .hero .container { flex-direction: column; text-align: center; } .hero-content { margin-bottom: 50px; } .description { margin-left: auto; margin-right: auto; } .about-content { flex-direction: column; } .project-grid { grid-template-columns: 1fr; } } document.addEventListener('DOMContentLoaded', function() { // Mobile menu toggle const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); menuToggle.addEventListener('click', function() { navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; }); // Tab functionality const tabButtons = document.querySelectorAll('.tab-button'); const tabPanes = document.querySelectorAll('.tab-pane'); tabButtons.forEach(button => { button.addEventListener('click', function() { const tabId = this.getAttribute('data-tab'); // Remove active class from all buttons and panes tabButtons.forEach(btn => btn.classList.remove('active')); tabPanes.forEach(pane => pane.classList.remove('active')); // Add active class to clicked button and corresponding pane this.classList.add('active'); document.getElementById(tabId).classList.add('active'); }); }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // Close mobile menu if open if (window.innerWidth <= 768) { navLinks.style.display = 'none'; } } }); }); // Form submission const contactForm = document.querySelector('.contact-form'); if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! I will get back to you soon.'); this.reset(); }); } });