To be more precise, this article is about how to develop your business card site and be on the first place in search results for your name not only in Yandex or Google, but also in other search engines. And the article will tell you how exactly with the help of Google tables and Google scripts you can find out exactly all the statistics of your publications on other sites.

If we talk about what kind of experience gives me to write this article, then I will start with the fact that I write articles and publish them on Habre and Tinkoff Journal. By topics of programming, investments, smart houses. I mainly write only about what I have dealt with myself – for example, I had to constantly search for liquid bonds, and I could not find a tool that would meet the requirements, so I wrote my open-source script – this article was later chosen as the winner competition Technotext 2021″ in the “Best case” nomination.

Why do you need a portfolio site? It will allow you to present your work in a visually appealing and organized way, and it can also serve as an entry point about you on the Internet because it gives you control over how you present yourself and your work.

My experience, which gives me the right to write this article, is the result of a search by name in 2023

As you can see in the screenshots below, I have achieved this goal – if you type your last name and first name, then in almost any search engine – the business card site will be in the top 3 results.

In the screenshot above, you can see that when my name is requested, my business card site is on the first place in many search engines:

Let’s consider all the technical details of the connection, which can be used as an example to achieve your goals:

Google Table → Node.js → Google Charts → Site-business card → Top 3 place in the search by name.

Google Spreadsheet

In 2020, when he first became interested in the topic of personal branding, he wrote an article about accounting for his own publications. Then I offered to write a request XPath for the IMPORTXML formula to import the view counts into the table.

But as it turned out later, several hundreds were used IMPORTXML in one table is a bad idea – everything works very slowly and there is a limit on the number of formulas used.

Therefore, next year 2021, I rewrote it to use Google scripts in order to parse sites in search of 4 interesting parameters:

I sometimes rewrite scripts when something goes wrong with parsing, and here is a link to my latest 2023 table: LynxReport: учёт публикаций 📚 [GAS] – It is open for viewing.

You can copy, clean the article and fill it with your data – the article already has reporting and summary tables set up via QUERY.

For example, the following Google Scripts code is used for Parsi Khabr:

 function habr_com(url) {
    try {
    var html = UrlFetchApp.fetch(url).getContentText();    
    let Views = +html.match(/<span class="tm-icon-counter__value">(.*?)K<\/span>/)[1]
        .replace(/\,/g, '.') * 1000
    // let Comments = `?`// +html.match(/class="tm-comments__comments-count">(.*?)<\/span>/)[1]
    var searchstringComments="       Комментарии "
    var index = html.search(searchstringComments);
    if (index >= 0) {
        var pos = index + searchstringComments.length
        var Comments = html.substring(pos, pos + 70)
        Comments = +Comments
            .split('</span>')[0]
            .replace(/<\/sp/g, '');
        (!Comments || Comments === undefined) ? Comments = 0: Comments
    }
var searchstringBookmarks="bookmarks-button__counter"
var index = html.search(searchstringBookmarks);
if (index &gt;= 0) {
    var pos = index + searchstringBookmarks.length
    var Bookmarks = html.substring(pos, pos + 20)
    Bookmarks = +Bookmarks.match(/\d{1,4}/);
    (!Bookmarks || Bookmarks === undefined) ? Bookmarks = 0: Bookmarks
}
let Ratings = +html.match(/tm-votes-meter__value_appearance-article tm-votes-meter__value_rating\"&gt;(.*?)&lt;\/span&gt;/)[1]
Logger.log(`Для ${url}:\nПросмотры = ${Views} \nКомментарии = ${Comments} \nЗакладки = ${Bookmarks} \nРейтинг = ${Ratings}.`)
return `${Views}|${Comments}|${Bookmarks}|${Ratings}`
} catch (error) {
    Logger.log(`Ошибка чтения данных для ${url}.`)
    return `?|?|?|?`
}

}

Or an interesting point – Tinkoff Journal has a hidden api (as the author of T-Z, I have nothing to do with the development), but I had to upload my indicators to a table, and a simple approach to the forehead did not work and I had to figure it out. It turned out that each article has an identifier, by contacting directly, you can easily download all four indicators from JSON. Here is a link to the solution on github.

The script processes about a hundred links in 2-3 minutes and collects all the statistics in my table.

The entire code can be viewed on github.

Node.js

Since you always want to have up-to-date data on a business card site and don’t want to do copy-paste, I suggest using Node.js – I thought it would be a good idea to ensure the transformation of data from one format to another.

He also published a script on Github that transforms summary data from Google Sheets into a business card site. True, the script itself may look like a “crutch”, but at the output there are ready-made pieces of html code in three files:

• piece_publications.txt contains data for Timelines Google Charts on the business card site in html form.

• piece_google_charts_vegachart.txt contains data for visualizing a word cloud using VegaChart.

• piece_google_charts_timelines.txt contains data on all publications in formatted html form.

I already wrote more about the script in this article.

Recently added a line of code to add a footer footer on all PDF files with articles that are saved automatically with Puppeteer. You can change the signature according to your wishes:

console.log(Генерация pdf по ссылкам из таблицы ${doc.title}, лист ${sheet1.title}.)
const browser = await puppeteer.launch();
for (var i = 2; i <= rows1.length + 1; i++) { //
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
await page.setDefaultNavigationTimeout(0);
type = sheet1.getCellByA1('B' + i).value
url = sheet1.getCellByA1('D' + i).value
const footer = `&lt;style&gt;#header, #footer { padding: 0 !important; }&lt;/style&gt;&lt;div class="footer" style="padding: 0 !important; margin: 0; -webkit-print-color-adjust: exact; background-color: blue; color: white; width: 100%; text-align: right; font-size: 12px;"&gt;${url} | Михаил Шардин, https://shardin.name/ &lt;br /&gt; Страница &lt;span class="pageNumber"&gt;&lt;/span&gt; из &lt;span class="totalPages"&gt;&lt;/span&gt; &lt;/div&gt;`;
console.log(`Строка №${i} из ${rows1.length + 1} для ${url}.`)

if (type == 'Веб' &amp;&amp; url != null) {
    path = `./articles/${sheet1.getCellByA1('C' + i).formattedValue}_${url.split(/\/\//)[1].split(/\//)[0].replace(/\./g, '-')}_${sheet1.getCellByA1('F' + i).formattedValue}.pdf`

    await page.goto(url, {
        waitUntil: 'networkidle0'
    });
    await page.waitFor(20 * 1000)
    await page.emulateMediaType('screen');
    const pdf = await page.pdf({
        path: path,
        margin: {
            top: 40,
            bottom: 40,
            left: 20,
            right: 10
        },
        printBackground: true,
        displayHeaderFooter: true,
        footerTemplate: footer,
        format: 'A4',
    });
    console.log(`Создан файл ${path.split(/\//).pop()}.\n`)
    await page.close()
}

}

The complete PDF generation code can be viewed on github.

Google and html charts

After all the publications have been tabulated, the script has downloaded their data on views and comments, prepared with another script the formatting for Google graphs and the list of publications, created a pdf from the links – it’s time to insert all this into the business card site template.

You can insert ready-made pieces of previously generated code through Visual Studio Code:

After that, the business card site page was completely updated.

Business card site on GitHub hosting

In my opinion, a business card site is a non-commercial project and there is an option not to pay for hosting at all, and also not to bother with its placement on your own server. You can choose GitHub Pages – it’s free. The monthly hosting fee is zero.

In general, GitHub provides an opportunity not to pay for a domain name, but to use a form address username.github.io. In the screenshot below, GitHub Pages is used with its domain name:

My experience: top 3 place in search of full name

It has been three years and about six months after the start of posting, my business card site became the first in the search for my name – I did not take any additional actions regarding its promotion or optimization.

However, I regularly update the information on it – if my article appears on some resource, I immediately add it to the table and then all the information appears on the business card site.

Results

Your own business card site is beneficial for many reasons:

1. A portfolio website allows you to display your work in a visually appealing and organized way. It provides a platform to showcase your skills, projects and achievements to potential clients, employers or employees.

2. A portfolio website helps establish your professional online presence. It serves as a central hub where people can learn more about you, your experience and achievements. It gives you control over how you present yourself and your work to the world.

3. With a portfolio website, you can reach a global audience. This allows you to showcase your work to people outside of your immediate network or geographic location. This can lead to new opportunities, collaborations or clients.

4. A portfolio website allows you to build and strengthen your personal brand. You can customize the design, layout, and content to reflect your unique style, values, and experience.

5. Unlike physical portfolios or printed materials, a portfolio website is easily accessible online. It can be viewed anytime, anywhere and on different devices. This convenience makes it more likely that potential clients or employers will study your work.

Overall, a portfolio website is a powerful tool for showcasing your work, establishing your online presence, and attracting new opportunities in your professional field.

Author: Mykhailo Chardin,

June 19, 2023