index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://pharmascroll.pub
+ metaTags
+ editButton /edit.html
+ title Gurukiran Patkar - Pharmaceutical Marketing Specialist
+ style.css
+ header
+ class hero
+ nav
+ div
+ class logo
+ span GP
+ div
+ class nav-links
+ a Home
+ href #hero
+ a Journey
+ href #journey
+ a Skills
+ href #skills
+ a Story
+ href #story
+ a Contact
+ href #contact
+ div
+ class hero-content
+ img
+ src assets/headshot.jpg
+ alt Gurukiran Patkar
+ class profile-image
+ h1 Gurukiran Patkar
+ p MSc Management | Ex-Novo Nordisk | Pharmaceutical Marketing Specialist
+ p.tagline "Transforming challenges into opportunities in pharmaceutical marketing"
+ div
+ class cta-buttons
+ a Connect
+ href #contact
+ class btn primary
+ a View Resume
+ href #
+ class btn secondary
+ main
+ section
+ id achievements
+ class achievements
+ div
+ class achievement-card
+ span
+ class counter
+ data-target 100
+ span %
+ p Sales Growth at Novo Nordisk
+ div
+ class achievement-card
+ span
+ class counter
+ data-target 80
+ span +
+ p Key Clients Managed
+ div
+ class achievement-card
+ span
+ class counter
+ data-target 7
+ p Medical Colleges Coverage
+ section
+ id journey
+ class timeline
+ h2 Professional Journey
+ div
+ class timeline-item
+ h3 University of Birmingham
+ p 2023-2024
+ ul
+ li MSc Management
+ li Focus on pharmaceutical industry dynamics
+ li Digital Business and Analytics specialization
+ li Merit Grade
+ div
+ class timeline-item
+ h3 Novo Nordisk India Private Limited
+ p 2021-2022
+ ul
+ li Led marketing campaigns with 100% growth
+ li Managed territory meant for 3 people
+ li Built and maintained 80+ client relationships
+ div
+ class timeline-item
+ h3 Manipal Academy of Higher Education
+ p 2017-2021
+ ul
+ li Bachelor of Pharmacy
+ li Distinction Grade
+ li Focus on Pharmaceutical Marketing
+ section
+ id skills
+ class skills-grid
+ h2 Skills & Certifications
+ div
+ class skill-category
+ h3 Management
+ ul
+ li Management Skills Passport - Platinum (2024)
+ li Project Management
+ li Strategic Planning
+ div
+ class skill-category
+ h3 Digital Skills
+ ul
+ li Salesforce
+ li Excel Data Analysis (IBM-Coursera)
+ li CRM Systems
+ div
+ class skill-category
+ h3 Certifications
+ ul
+ li Agile Project Management (RedHat)
+ li Digital Marketing Tools
+ li Data Analytics
+ section
+ id story
+ class story
+ h2 My Story
+ p From humble beginnings in India to doubling sales at Novo Nordisk and pursuing an MSc at the University of Birmingham, my journey has been defined by determination and adaptability.
+ section
+ id contact
+ class contact
+ h2 Let's Connect
+ div
+ class contact-info
+ p
+ span Email:
+ a guru.kiranpatkar@gmail.com
+ href mailto:guru.kiranpatkar@gmail.com
+ p
+ span Location:
+ span Birmingham, United Kingdom
+ p
+ span LinkedIn:
+ a Connect on LinkedIn
+ href https://linkedin.com
+ footer
+ div
+ class social-links
+ a LinkedIn
+ href https://linkedin.com
+ a Email
+ href mailto:guru.kiranpatkar@gmail.com
+ div
+ class back-to-top
+ button ↑
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01TPdr1WW3ARZdqAzL2DQohj",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a professional portfolio website for Gurukiran Patkar. Given his pharmaceutical background and professional focus, I'll suggest:\n\n---domain---\npharmascroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://pharmascroll.pub\nmetaTags\neditButton /edit.html\ntitle Gurukiran Patkar - Pharmaceutical Marketing Specialist\nstyle.css\nheader\n class hero\n nav\n div\n class logo\n span GP\n div\n class nav-links\n a Home\n href #hero\n a Journey\n href #journey\n a Skills\n href #skills\n a Story\n href #story\n a Contact\n href #contact\n div\n class hero-content\n img\n src assets/headshot.jpg\n alt Gurukiran Patkar\n class profile-image\n h1 Gurukiran Patkar\n p MSc Management | Ex-Novo Nordisk | Pharmaceutical Marketing Specialist\n p.tagline \"Transforming challenges into opportunities in pharmaceutical marketing\"\n div\n class cta-buttons\n a Connect\n href #contact\n class btn primary\n a View Resume\n href #\n class btn secondary\nmain\n section\n id achievements\n class achievements\n div\n class achievement-card\n span\n class counter\n data-target 100\n span %\n p Sales Growth at Novo Nordisk\n div\n class achievement-card\n span\n class counter\n data-target 80\n span +\n p Key Clients Managed\n div\n class achievement-card\n span\n class counter\n data-target 7\n p Medical Colleges Coverage\n section\n id journey\n class timeline\n h2 Professional Journey\n div\n class timeline-item\n h3 University of Birmingham\n p 2023-2024\n ul\n li MSc Management\n li Focus on pharmaceutical industry dynamics\n li Digital Business and Analytics specialization\n li Merit Grade\n div\n class timeline-item\n h3 Novo Nordisk India Private Limited\n p 2021-2022\n ul\n li Led marketing campaigns with 100% growth\n li Managed territory meant for 3 people\n li Built and maintained 80+ client relationships\n div\n class timeline-item\n h3 Manipal Academy of Higher Education\n p 2017-2021\n ul\n li Bachelor of Pharmacy\n li Distinction Grade\n li Focus on Pharmaceutical Marketing\n section\n id skills\n class skills-grid\n h2 Skills & Certifications\n div\n class skill-category\n h3 Management\n ul\n li Management Skills Passport - Platinum (2024)\n li Project Management\n li Strategic Planning\n div\n class skill-category\n h3 Digital Skills\n ul\n li Salesforce\n li Excel Data Analysis (IBM-Coursera)\n li CRM Systems\n div\n class skill-category\n h3 Certifications\n ul\n li Agile Project Management (RedHat)\n li Digital Marketing Tools\n li Data Analytics\n section\n id story\n class story\n h2 My Story\n p From humble beginnings in India to doubling sales at Novo Nordisk and pursuing an MSc at the University of Birmingham, my journey has been defined by determination and adaptability.\n section\n id contact\n class contact\n h2 Let's Connect\n div\n class contact-info\n p\n span Email:\n a guru.kiranpatkar@gmail.com\n href mailto:guru.kiranpatkar@gmail.com\n p\n span Location:\n span Birmingham, United Kingdom\n p\n span LinkedIn:\n a Connect on LinkedIn\n href https://linkedin.com\nfooter\n div\n class social-links\n a LinkedIn\n href https://linkedin.com\n a Email\n href mailto:guru.kiranpatkar@gmail.com\n div\n class back-to-top\n button ↑\nscript.js\n---style.css---\n:root {\n --primary: #0066cc;\n --secondary: #f0f7ff;\n --text: #333;\n --gradient: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);\n --shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Inter', sans-serif;\n}\n\nbody {\n line-height: 1.6;\n color: var(--text);\n}\n\n.hero {\n min-height: 100vh;\n background: var(--gradient);\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 2rem;\n text-align: center;\n}\n\nnav {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n position: fixed;\n top: 0;\n background: rgba(255,255,255,0.9);\n backdrop-filter: blur(10px);\n z-index: 1000;\n}\n\n.nav-links a {\n margin: 0 1rem;\n text-decoration: none;\n color: var(--text);\n transition: color 0.3s;\n}\n\n.nav-links a:hover {\n color: var(--primary);\n}\n\n.hero-content {\n margin-top: 5rem;\n}\n\n.profile-image {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n margin-bottom: 2rem;\n border: 4px solid white;\n box-shadow: var(--shadow);\n}\n\n.achievements {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n background: white;\n}\n\n.achievement-card {\n text-align: center;\n padding: 2rem;\n background: var(--secondary);\n border-radius: 10px;\n box-shadow: var(--shadow);\n transition: transform 0.3s;\n}\n\n.achievement-card:hover {\n transform: translateY(-5px);\n}\n\n.counter {\n font-size: 3rem;\n font-weight: bold;\n color: var(--primary);\n}\n\n.timeline {\n padding: 4rem 2rem;\n}\n\n.timeline-item {\n position: relative;\n padding: 2rem;\n margin: 2rem 0;\n border-left: 3px solid var(--primary);\n}\n\n.skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n padding: 4rem 2rem;\n background: var(--secondary);\n}\n\n.skill-category {\n padding: 2rem;\n background: white;\n border-radius: 10px;\n box-shadow: var(--shadow);\n}\n\n.contact {\n padding: 4rem 2rem;\n text-align: center;\n}\n\n.btn {\n display: inline-block;\n padding: 1rem 2rem;\n border-radius: 50px;\n text-decoration: none;\n margin: 1rem;\n transition: transform 0.3s;\n}\n\n.btn.primary {\n background: var(--primary);\n color: white;\n}\n\n.btn.secondary {\n background: white;\n color: var(--primary);\n border: 2px solid var(--primary);\n}\n\n.btn:hover {\n transform: translateY(-2px);\n}\n\n.back-to-top {\n position: fixed;\n bottom: 2rem;\n right: 2rem;\n background: var(--primary);\n color: white;\n border: none;\n border-radius: 50%;\n width: 50px;\n height: 50px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n@media (max-width: 768px) {\n .nav-links {\n display: none;\n }\n \n .hero-content {\n margin-top: 3rem;\n }\n \n .achievements {\n grid-template-columns: 1fr;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n // Counter animation\n const counters = document.querySelectorAll('.counter');\n counters.forEach(counter => {\n const target = +counter.getAttribute('data-target');\n const increment = target / 100;\n \n const updateCounter = () => {\n const count = +counter.innerText;\n if (count < target) {\n counter.innerText = Math.ceil(count + increment);\n setTimeout(updateCounter, 10);\n } else {\n counter.innerText = target;\n }\n };\n \n updateCounter();\n });\n\n // Smooth scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n document.querySelector(this.getAttribute('href')).scrollIntoView({\n behavior: 'smooth'\n });\n });\n });\n\n // Back to top button\n const backToTop = document.querySelector('.back-to-top');\n window.addEventListener('scroll', () => {\n if (window.pageYOffset > 300) {\n backToTop.style.opacity = '1';\n } else {\n backToTop.style.opacity = '0';\n }\n });\n\n backToTop.addEventListener('click', () => {\n window.scrollTo({\n top: 0,\n behavior: 'smooth'\n });\n });\n});\n---end---"
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 1440,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2517
+ }
+ }
readme.scroll
Changed around line 1
+ # pharmascroll.pub.scroll.pub
+
+ Prompt: website
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ Here's a step-by-step guide to create your professional portfolio website on ScrollHub: 1. Hero Section: ``` [Full-screen background in light blue gradient] [Center-aligned content] # Gurukiran Patkar [Professional headshot if available] MSc Management | Ex-Novo Nordisk | Pharmaceutical Marketing Specialist "Transforming challenges into opportunities in pharmaceutical marketing" [Connect Button] [View Resume Button] ``` 2. Key Achievements: ``` [Three animated counting cards] Card 1: 100% ↑ Sales Growth at Novo Nordisk Card 2: 80+ Key Clients Managed Card 3: 7 Medical Colleges Coverage ``` 3. Professional Journey: ``` [Timeline layout] 2023-2024 | University of Birmingham MSc Management - Focus on pharmaceutical industry dynamics - Digital Business and Analytics specialization - Merit Grade 2021-2022 | Novo Nordisk India Private Limited Trainee Product Specialist - Led marketing campaigns with 100% growth - Managed territory meant for 3 people - Built and maintained 80+ client relationships 2017-2021 | Manipal Academy of Higher Education Bachelor of Pharmacy - Distinction Grade - Focus on Pharmaceutical Marketing ``` 4. Skills & Certifications: ``` [Grid layout with hover effects] Management: - Management Skills Passport - Platinum (2024) - Project Management - Strategic Planning Digital Skills: - Salesforce - Excel Data Analysis (IBM-Coursera) - CRM Systems Certifications: - Agile Project Management (RedHat) - Digital Marketing Tools - Data Analytics ``` 5. My Story: ``` [Parallax scrolling section] From humble beginnings in India to doubling sales at Novo Nordisk and pursuing an MSc at the University of Birmingham, my journey has been defined by determination and adaptability. [Add your personal story of growth and transformation, emphasizing how your unique background strengthens your professional capabilities] ``` 6. Contact Section: ``` [Clean, minimal design] Let's Connect Email: guru.kiranpatkar@gmail.com Location: Birmingham, United Kingdom LinkedIn: [Your LinkedIn Profile] [Contact Button] ``` Styling Notes: - Use a professional color scheme (suggested: blues, whites, and grays) - Font: Modern sans-serif like Inter or Roboto - Smooth scroll animations between sections - Responsive design for all devices - Icon usage for visual enhancement - White space for readability - Subtle hover effects on interactive elements Additional Features: 1. Navigation menu with smooth scroll 2. Progress bar showing scroll position 3. Floating action button to return to top 4. Social media links in footer 5. Loading animations for metrics 6. Testimonials section if available
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "Here's a step-by-step guide to create your professional portfolio website on ScrollHub: 1. Hero Section: ``` [Full-screen background in light blue gradient] [Center-aligned content] # Gurukiran Patkar [Professional headshot if available] MSc Management | Ex-Novo Nordisk | Pharmaceutical Marketing Specialist "Transforming challenges into opportunities in pharmaceutical marketing" [Connect Button] [View Resume Button] ``` 2. Key Achievements: ``` [Three animated counting cards] Card 1: 100% ↑ Sales Growth at Novo Nordisk Card 2: 80+ Key Clients Managed Card 3: 7 Medical Colleges Coverage ``` 3. Professional Journey: ``` [Timeline layout] 2023-2024 | University of Birmingham MSc Management - Focus on pharmaceutical industry dynamics - Digital Business and Analytics specialization - Merit Grade 2021-2022 | Novo Nordisk India Private Limited Trainee Product Specialist - Led marketing campaigns with 100% growth - Managed territory meant for 3 people - Built and maintained 80+ client relationships 2017-2021 | Manipal Academy of Higher Education Bachelor of Pharmacy - Distinction Grade - Focus on Pharmaceutical Marketing ``` 4. Skills & Certifications: ``` [Grid layout with hover effects] Management: - Management Skills Passport - Platinum (2024) - Project Management - Strategic Planning Digital Skills: - Salesforce - Excel Data Analysis (IBM-Coursera) - CRM Systems Certifications: - Agile Project Management (RedHat) - Digital Marketing Tools - Data Analytics ``` 5. My Story: ``` [Parallax scrolling section] From humble beginnings in India to doubling sales at Novo Nordisk and pursuing an MSc at the University of Birmingham, my journey has been defined by determination and adaptability. [Add your personal story of growth and transformation, emphasizing how your unique background strengthens your professional capabilities] ``` 6. Contact Section: ``` [Clean, minimal design] Let's Connect Email: guru.kiranpatkar@gmail.com Location: Birmingham, United Kingdom LinkedIn: [Your LinkedIn Profile] [Contact Button] ``` Styling Notes: - Use a professional color scheme (suggested: blues, whites, and grays) - Font: Modern sans-serif like Inter or Roboto - Smooth scroll animations between sections - Responsive design for all devices - Icon usage for visual enhancement - White space for readability - Subtle hover effects on interactive elements Additional Features: 1. Navigation menu with smooth scroll 2. Progress bar showing scroll position 3. Floating action button to return to top 4. Social media links in footer 5. Loading animations for metrics 6. Testimonials section if available "
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ // Counter animation
+ const counters = document.querySelectorAll('.counter');
+ counters.forEach(counter => {
+ const target = +counter.getAttribute('data-target');
+ const increment = target / 100;
+
+ const updateCounter = () => {
+ const count = +counter.innerText;
+ if (count < target) {
+ counter.innerText = Math.ceil(count + increment);
+ setTimeout(updateCounter, 10);
+ } else {
+ counter.innerText = target;
+ }
+ };
+
+ updateCounter();
+ });
+
+ // Smooth scroll
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
+ });
+
+ // Back to top button
+ const backToTop = document.querySelector('.back-to-top');
+ window.addEventListener('scroll', () => {
+ if (window.pageYOffset > 300) {
+ backToTop.style.opacity = '1';
+ } else {
+ backToTop.style.opacity = '0';
+ }
+ });
+
+ backToTop.addEventListener('click', () => {
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth'
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #0066cc;
+ --secondary: #f0f7ff;
+ --text: #333;
+ --gradient: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
+ --shadow: 0 4px 6px rgba(0,0,0,0.1);
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Inter', sans-serif;
+ }
+
+ body {
+ line-height: 1.6;
+ color: var(--text);
+ }
+
+ .hero {
+ min-height: 100vh;
+ background: var(--gradient);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem;
+ text-align: center;
+ }
+
+ nav {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ position: fixed;
+ top: 0;
+ background: rgba(255,255,255,0.9);
+ backdrop-filter: blur(10px);
+ z-index: 1000;
+ }
+
+ .nav-links a {
+ margin: 0 1rem;
+ text-decoration: none;
+ color: var(--text);
+ transition: color 0.3s;
+ }
+
+ .nav-links a:hover {
+ color: var(--primary);
+ }
+
+ .hero-content {
+ margin-top: 5rem;
+ }
+
+ .profile-image {
+ width: 200px;
+ height: 200px;
+ border-radius: 50%;
+ margin-bottom: 2rem;
+ border: 4px solid white;
+ box-shadow: var(--shadow);
+ }
+
+ .achievements {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+ background: white;
+ }
+
+ .achievement-card {
+ text-align: center;
+ padding: 2rem;
+ background: var(--secondary);
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+ transition: transform 0.3s;
+ }
+
+ .achievement-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .counter {
+ font-size: 3rem;
+ font-weight: bold;
+ color: var(--primary);
+ }
+
+ .timeline {
+ padding: 4rem 2rem;
+ }
+
+ .timeline-item {
+ position: relative;
+ padding: 2rem;
+ margin: 2rem 0;
+ border-left: 3px solid var(--primary);
+ }
+
+ .skills-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ padding: 4rem 2rem;
+ background: var(--secondary);
+ }
+
+ .skill-category {
+ padding: 2rem;
+ background: white;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+ }
+
+ .contact {
+ padding: 4rem 2rem;
+ text-align: center;
+ }
+
+ .btn {
+ display: inline-block;
+ padding: 1rem 2rem;
+ border-radius: 50px;
+ text-decoration: none;
+ margin: 1rem;
+ transition: transform 0.3s;
+ }
+
+ .btn.primary {
+ background: var(--primary);
+ color: white;
+ }
+
+ .btn.secondary {
+ background: white;
+ color: var(--primary);
+ border: 2px solid var(--primary);
+ }
+
+ .btn:hover {
+ transform: translateY(-2px);
+ }
+
+ .back-to-top {
+ position: fixed;
+ bottom: 2rem;
+ right: 2rem;
+ background: var(--primary);
+ color: white;
+ border: none;
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.3s;
+ }
+
+ @media (max-width: 768px) {
+ .nav-links {
+ display: none;
+ }
+
+ .hero-content {
+ margin-top: 3rem;
+ }
+
+ .achievements {
+ grid-template-columns: 1fr;
+ }
+ }