juliaebert.com

juliaebert.com is a personal website template built on Nuxt.js (Vue 2) that produces a static portfolio site plus a print-ready CV with automated PDF generation.

What is juliaebert.com?

juliaebert.com is a Nuxt.js (Vue 2) static site template originally crafted by Julia Ebert for her personal website. It takes content stored in JSON files and Vue components and outputs a deployable static website; running npm run generate builds the static project, while npm run generate-pdf produces a resume PDF. The template is designed to be deployed to Netlify and includes configuration for Google Analytics, Google Fonts, and Material Design Icons.

Key Features

• Nuxt.js and static generation — Uses Nuxt.js 2 for server-side rendering or static generation; npm run generate creates a fully static project, and npm run dev provides hot reload at localhost:3000.
• Bulma and SCSS styling — Layouts follow Bulma classes with custom SCSS in assets/sass/main.scss, plus Google Fonts defined in nuxt.config.js.
• Resume PDF creation — With the dev server running, npm run generate-pdf runs Puppeteer (headless Chrome) and saves a PDF with selectable text to /public/pdfs/ebert-julia.resume.pdf; pass a filename to change the output.
• Printable CV features — The CV page uses is-print-only and is-screen-only classes to vary content, a <span class="page-break"></span> for manual page breaks, and an @page rule in the SCSS for page size and margins.
• Publication management — Publications live in assets/publications.json (a JSON equivalent of BibTeX); PublicationList renders ACM-style citations and supports highlight-author, pub-key-filter, type-filter, and keyword-filter.
• Reusable content components — PrimarySection adds textured backgrounds, titles, subtitles, and icon-based headers; Project alternates images/videos with text and offers is-cover and is-mockup (including mobile-img-src) display modes.
• Custom icons and links — Section icons are SVG files in /public/imgs/icons matched by slug or set via icon prop; buttons and links use Material Design Icons via icon-button-link and icon-link.
• Multiple layouts — default, home, and simple layouts support content pages, a typewriter home page with particles.js background, and error pages like 404.

Who is it for?

• Academic researchers and PhD students — display publications, research projects, and teaching experience, and export the CV to PDF for applications and funding submissions.
• Developers seeking a Nuxt portfolio — want a Vue-based static site with minimal backend and Netlify deployment, plus easy customization through components and JSON data.
• Job seekers in technical fields — need a professional site with a structured CV that prints cleanly and can be regenerated as a PDF with one npm command.

What can you do with it?

• Researchers: maintain a publication list filtered by type or keyword, highlight your name in bold with highlight-author, and link to PDFs stored under /public/pdfs.
• Developers: add project showcases with video or image previews; use is-mockup to display screenshots inside a laptop and phone frame.
• Students and educators: build a CV with sections using cv-award, cv-skill, and cv-entry, controlling which content appears only in print via is-print-only.

How does it work?

Install dependencies with npm install, then run npm run dev for local editing. To create a static site, run npm run generate; the output can be deployed to Netlify. For a preprint PDF, leave the dev server running and execute npm run generate-pdf in a separate terminal — it uses Puppeteer to render the CV page and save a PDF named ebert-julia.resume.pdf (or a custom name you pass).

Pros and cons

• Pros: Static output for fast hosting; automated PDF resume generation with selectable text; portable JSON publication storage; flexible layout and component system.
• Cons: The icon-by-slug matching is a "hacky" approach (per the author); CV components rely on CSS flex, which is unsupported in Internet Explorer; the typewriter text config is hardcoded in home.vue and the author plans to change it.

FAQ

Does juliaebert.com require a server?

No. npm run generate produces a static site that can be hosted anywhere. However, the PDF generation script (npm run generate-pdf) needs the dev server running because Puppeteer navigates to the live local page to render it.

How do I add my own publications?

Edit assets/publications.json, which stores entries as keys with citation fields and an optional file path. Place the PDF in the matching subfolder under /public/pdfs, then use a PublicationList component with filters like pub-key-filter or type-filter to display them.

Can I customize the PDF resume layout?

Yes. The CV page supports print-only and screen-only classes, manual page breaks via <span class="page-break"></span>, and the @page rule in assets/sass/main.scss controls paper size and margins. Use your browser's print dialog (e.g., Chrome's Ctrl+P) to adjust margins before exporting.

Which browsers support the CV components?

The CV components use CSS flexbox. According to the README, all current major browsers support this except Internet Explorer, which will not display the CV correctly.