+

+

+

+

Compare

+

Calculator

+

Resources

+

+

+

+

+

+

+

PhD or Work?

+

Make an informed decision about your future career path

+

+

+

+

Compare Your Options

+

+

+

+

+

Decision Calculator

+

+

+

+

+

Additional Resources

+

+

+

+

+

+

Created to help students make informed career decisions

+

+ buildHtml

+ baseUrl https://phd-or-work.scroll.pub

+ metaTags

+ editButton /edit.html

+ title Career Crossroads: PhD vs Work Decision Helper

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01Lk8pqTkoYR67pmc8dScgZN",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "Let me create a thoughtful career decision website with an elegant design.\n\n---domain---\nphd-or-work.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://phd-or-work.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Career Crossroads: PhD vs Work Decision Helper\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n \n

\n\n

\n

\n

PhD or Work?

\n

Make an informed decision about your future career path

\n

\n\n

\n

Compare Your Options

\n

\n

\n

Pursuing a PhD

\n

\n
• Advanced research skills
\n
• Academic career path
\n
• 3-6 years commitment
\n
• Funding/stipend options
\n
• Research contribution
\n

\n

\n

\n

Starting Work

\n

\n
• Immediate income
\n
• Industry experience
\n
• Career progression
\n
• Practical skills
\n
• Work-life balance
\n

\n

\n

\n

\n\n

\n

Decision Calculator

\n

\n

\n

Rate these factors (1-5):

\n

\n Interest in Research\n \n

\n

\n Immediate Income Need\n \n

\n

\n Interest in Academia\n \n

\n Calculate Recommendation\n

\n

\n

\n

\n\n

\n

Additional Resources

\n

\n

\n

Talk to Mentors

\n

Seek advice from professors and industry professionals

\n

\n

\n

Research Programs

\n

Explore PhD programs and their requirements

\n

\n

\n

Industry Insights

\n

Learn about career opportunities in your field

\n

\n

\n

\n

\n\n\n\n---style.css---\n:root {\n --primary: #2a4365;\n --secondary: #4299e1;\n --background: #f7fafc;\n --text: #2d3748;\n --card-bg: #ffffff;\n --accent: #805ad5;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n}\n\nheader {\n background: var(--primary);\n padding: 1rem;\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 100;\n}\n\nnav ul {\n display: flex;\n justify-content: center;\n list-style: none;\n gap: 2rem;\n}\n\nnav a {\n color: white;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.3s;\n}\n\nnav a:hover {\n color: var(--secondary);\n}\n\n.hero {\n height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n color: white;\n padding: 2rem;\n}\n\n.hero h1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n animation: fadeIn 1s ease-out;\n}\n\n.hero p {\n font-size: 1.5rem;\n opacity: 0.9;\n}\n\nsection {\n padding: 5rem 2rem;\n}\n\nh2 {\n text-align: center;\n margin-bottom: 3rem;\n color: var(--primary);\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: translateY(-5px);\n}\n\n.card h3 {\n color: var(--primary);\n margin-bottom: 1rem;\n}\n\n.card ul {\n list-style: none;\n}\n\n.card li {\n margin-bottom: 0.5rem;\n padding-left: 1.5rem;\n position: relative;\n}\n\n.card li::before {\n content: \"→\";\n position: absolute;\n left: 0;\n color: var(--accent);\n}\n\n.calculator {\n max-width: 600px;\n margin: 0 auto;\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.factor-input {\n margin-bottom: 1.5rem;\n}\n\ninput[type=\"range\"] {\n width: 100%;\n margin: 0.5rem 0;\n}\n\nbutton {\n background: var(--accent);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n cursor: pointer;\n width: 100%;\n font-size: 1rem;\n transition: background 0.3s;\n}\n\nbutton:hover {\n background: var(--primary);\n}\n\n.result {\n margin-top: 2rem;\n padding: 1rem;\n border-radius: 0.5rem;\n text-align: center;\n}\n\n.resource-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.resource-grid article {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nfooter {\n background: var(--primary);\n color: white;\n text-align: center;\n padding: 2rem;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 768px) {\n .hero h1 {\n font-size: 2.5rem;\n }\n \n .hero p {\n font-size: 1.2rem;\n }\n \n section {\n padding: 3rem 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n const calculateBtn = document.getElementById('calculate');\n const resultDiv = document.getElementById('result');\n \n calculateBtn.addEventListener('click', function() {\n const research = parseInt(document.getElementById('research').value);\n const income = parseInt(document.getElementById('income').value);\n const academia = parseInt(document.getElementById('academia').value);\n \n const phdScore = (research * 0.4) + (academia * 0.4) + ((6 - income) * 0.2);\n const workScore = (income * 0.4) + ((6 - academia) * 0.3) + ((6 - research) * 0.3);\n \n let recommendation = '';\n if (phdScore > workScore) {\n recommendation = `\n

PhD Path Recommended

\n

Based on your preferences, pursuing a PhD might be a better fit for you.

\n

PhD Score: ${phdScore.toFixed(1)} | Work Score: ${workScore.toFixed(1)}

\n `;\n } else {\n recommendation = `\n

Work Path Recommended

\n

Based on your preferences, entering the workforce might be a better fit for you.

\n

Work Score: ${workScore.toFixed(1)} | PhD Score: ${phdScore.toFixed(1)}

\n `;\n }\n \n resultDiv.innerHTML = recommendation;\n resultDiv.style.animation = 'fadeIn 0.5s ease-out';\n });\n\n // Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n });\n });\n});\n\n---end---\n\nThis website features:\n1. A modern, clean design with smooth animations\n2. An interactive decision calculator\n3. Comparison cards for both paths\n4. Mobile-responsive layout\n5. Smooth scrolling navigation\n6. Accessible form controls\n7. Beautiful gradient backgrounds\n8. Card hover effects\n9. Semantic HTML structure\n10. Clear typography and spacing\n11. Professional color scheme\n12. Interactive elements with visual feedback\n\nThe domain name \"phd-or-work.scroll.pub\" is:\n- Descriptive of the purpose\n- Easy to remember\n- Professional\n- Clear and straightforward\n- Relevant to the target audience"

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 284,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 2931

+ }

+ }

+ # phd-or-work.scroll.pub

+ Website generated by Claude from prompt: I want to decide whether to read my PHD or go to work.

+ document.addEventListener('DOMContentLoaded', function() {

+ const calculateBtn = document.getElementById('calculate');

+ const resultDiv = document.getElementById('result');

+

+ calculateBtn.addEventListener('click', function() {

+ const research = parseInt(document.getElementById('research').value);

+ const income = parseInt(document.getElementById('income').value);

+ const academia = parseInt(document.getElementById('academia').value);

+

+ const phdScore = (research * 0.4) + (academia * 0.4) + ((6 - income) * 0.2);

+ const workScore = (income * 0.4) + ((6 - academia) * 0.3) + ((6 - research) * 0.3);

+

+ let recommendation = '';

+ if (phdScore > workScore) {

+ recommendation = `

+

PhD Path Recommended

+

Based on your preferences, pursuing a PhD might be a better fit for you.

+

PhD Score: ${phdScore.toFixed(1)} | Work Score: ${workScore.toFixed(1)}

+ `;

+ } else {

+ recommendation = `

+

Work Path Recommended

+

Based on your preferences, entering the workforce might be a better fit for you.

+

Work Score: ${workScore.toFixed(1)} | PhD Score: ${phdScore.toFixed(1)}

+ `;

+ }

+

+ resultDiv.innerHTML = recommendation;

+ resultDiv.style.animation = 'fadeIn 0.5s ease-out';

+ });

+

+ // Smooth scrolling for navigation links

+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {

+ anchor.addEventListener('click', function(e) {

+ e.preventDefault();

+ const target = document.querySelector(this.getAttribute('href'));

+ target.scrollIntoView({

+ behavior: 'smooth',

+ block: 'start'

+ });

+ });

+ });

+ });

+ :root {

+ --primary: #2a4365;

+ --secondary: #4299e1;

+ --background: #f7fafc;

+ --text: #2d3748;

+ --card-bg: #ffffff;

+ --accent: #805ad5;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: system-ui, -apple-system, sans-serif;

+ line-height: 1.6;

+ color: var(--text);

+ background: var(--background);

+ }

+

+ header {

+ background: var(--primary);

+ padding: 1rem;

+ position: fixed;

+ width: 100%;

+ top: 0;

+ z-index: 100;

+ }

+

+ nav ul {

+ display: flex;

+ justify-content: center;

+ list-style: none;

+ gap: 2rem;

+ }

+

+ nav a {

+ color: white;

+ text-decoration: none;

+ font-weight: 500;

+ transition: color 0.3s;

+ }

+

+ nav a:hover {

+ color: var(--secondary);

+ }

+

+ .hero {

+ height: 100vh;

+ display: flex;

+ flex-direction: column;

+ justify-content: center;

+ align-items: center;

+ text-align: center;

+ background: linear-gradient(135deg, var(--primary), var(--accent));

+ color: white;

+ padding: 2rem;

+ }

+

+ .hero h1 {

+ font-size: 4rem;

+ margin-bottom: 1rem;

+ animation: fadeIn 1s ease-out;

+ }

+

+ .hero p {

+ font-size: 1.5rem;

+ opacity: 0.9;

+ }

+

+ section {

+ padding: 5rem 2rem;

+ }

+

+ h2 {

+ text-align: center;

+ margin-bottom: 3rem;

+ color: var(--primary);

+ }

+

+ .cards {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

+ gap: 2rem;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .card {

+ background: var(--card-bg);

+ padding: 2rem;

+ border-radius: 1rem;

+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

+ transition: transform 0.3s;

+ }

+

+ .card:hover {

+ transform: translateY(-5px);

+ }

+

+ .card h3 {

+ color: var(--primary);

+ margin-bottom: 1rem;

+ }

+

+ .card ul {

+ list-style: none;

+ }

+

+ .card li {

+ margin-bottom: 0.5rem;

+ padding-left: 1.5rem;

+ position: relative;

+ }

+

+ .card li::before {

+ content: "→";

+ position: absolute;

+ left: 0;

+ color: var(--accent);

+ }

+

+ .calculator {

+ max-width: 600px;

+ margin: 0 auto;

+ background: var(--card-bg);

+ padding: 2rem;

+ border-radius: 1rem;

+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

+ }

+

+ .factor-input {

+ margin-bottom: 1.5rem;

+ }

+

+ input[type="range"] {

+ width: 100%;

+ margin: 0.5rem 0;

+ }

+

+ button {

+ background: var(--accent);

+ color: white;

+ border: none;

+ padding: 1rem 2rem;

+ border-radius: 0.5rem;

+ cursor: pointer;

+ width: 100%;

+ font-size: 1rem;

+ transition: background 0.3s;

+ }

+

+ button:hover {

+ background: var(--primary);

+ }

+

+ .result {

+ margin-top: 2rem;

+ padding: 1rem;

+ border-radius: 0.5rem;

+ text-align: center;

+ }

+

+ .resource-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

+ gap: 2rem;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .resource-grid article {

+ background: var(--card-bg);

+ padding: 2rem;

+ border-radius: 1rem;

+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

+ }

+

+ footer {

+ background: var(--primary);

+ color: white;

+ text-align: center;

+ padding: 2rem;

+ }

+

+ @keyframes fadeIn {

+ from { opacity: 0; transform: translateY(20px); }

+ to { opacity: 1; transform: translateY(0); }

+ }

+

+ @media (max-width: 768px) {

+ .hero h1 {

+ font-size: 2.5rem;

+ }

+

+ .hero p {

+ font-size: 1.2rem;

+ }

+

+ section {

+ padding: 3rem 1rem;

+ }

+ }