Giter VIP home page Giter VIP logo

ptkinvent.github.io's Introduction

Prateek Sahay's Personal Website

Welcome to the source code of my personal website! I developed this website to archive my favorite projects and write about my thoughts. The initial versions of my site from 2011 were written by hand, but I ported it to Jekyll, a static website generator, in 2018 so I could add a blog. The site is built on top of Twitter's Bootstrap for mobile/tablet support.

The static website generation comes with many other benefits, most of which allowed me to consolidate duplicated code. However, rather than rely on one of the many free Jekyll templates, I decided to write my own custom layouts and styling. The style sheets are written in Sass, which has built-in support in Jekyll.

My website is hosted at prateeksahay.com, psahay.com, ptkinvent.com, and ptkinvent.github.io.

Build and Run

Make sure you have the development version of Ruby 2.25 or above installed with ruby -v. If not, run:

sudo apt install ruby-dev

Then, run:

gem install sass jekyll bundler # Get dependencies
bundle install                  # Install remaining gems

To compile the various pages, run:

bundle exec jekyll build # Optionally add --destination <path/to/destination>

Optionally, Jekyll can serve you the generated website locally. Run:

bundle exec jekyll serve # Start a local server on localhost:4000

Contents

The layout of the directories is as follows:

.
├── css/       # Top-level passthrough Sass files
├── img/       # Images
├── _includes/ # Reusable blocks of code
├── js/        # JavaScript
├── _layouts/  # HTML layouts
├── _posts/    # HTML blog post contents
└── _scss/     # Actual Sass stylesheets

Generating the site will output the final site to a new directory called _site/. Note that the directories with underscores will not have counterparts in _site/, i.e. there will only be css/, js/, and img/ directories inside of _site/.

HTML Layout

The HTML is spread throughout the top level of the project, _includes/, _layouts/, _posts/, and _projects/. at the top level of the project and is supported by a system of layouts. All layouts 'inherit' from a base layout called default. There are five custom-defined layouts, and each page subscribes to one of these layouts to afford consistent styling across the site, as shown in the figure below.

Each page on the site and its corresponding layout.

Styling Layout

Note that all styling information is kept inside _scss/, even though there are Sass files in css/. This is because Jekyll treats Sass files the same as HTML files---meaning the generated files are placed in the same directory in the output. In addition, the top-level Sass files need to have two sets of triple dashes to be recognized by Jekyll, which can lead to some wonky syntax highlighting. For these reasons, all the actual styling information is placed inside _scss/, which Jekyll treats as a location for storing Sass partials. The primary benefit of this layout is that it keeps styling information in one directory rather than spread across two.

ptkinvent.github.io's People

Contributors

adyavanapalli avatar ptkinvent avatar

Watchers

 avatar

ptkinvent.github.io's Issues

Duplicated code on homepage

There are currently different rendering instructions on the homepage for large and small screens. This could be combined more elegantly using CSS to resize properly.

Awkward sentence.

By combining individual shapes like triangles or lines, you can create complex shapes as simple as point clouds, as complex as dodecahedrons, or any other shape conceivable.

I'm not sure why, but this sentence sounds weird. Maybe do something like this instead?

By combining individual shapes like triangles or lines, you can create shapes as simple as point clouds or as complex as dodecahedrons.

Add a web framework

Adding Django or another framework would allow making one small change update several pages all at once. For example, updating copyright year in the footer of every page.

Consolidate projects into a collection

Jekyll supports collections of items and auto-generation of templates in a for-loop. The projects on the homepage should be done in this manner. In case I forget, it works as follows:

  1. In _config.yml, insert the following:
    # Collections
    collections:
      projects:
        output: true # This line means auto-generate a page for each project
    Note that you'll have to restart jekyll serve because _config.yml was updated.
  2. Create directory at the top level called _projects/ and move all project HTML files into it.
  3. On the homepage, you can now iterate over the projects like this:
    {% for project in site.projects %|
    <h1>{{ project.title }}</h1>
    {% endfor %}

This will lead to a cleaner directory layout, less repeated code, and better extensibility in the future.

Suggestion

You should include a reference to Pro Git since it's free and really good.

Also you should consider the following change:

-Now git!
+Now git outta here!

👍

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.