{"id":15524708,"url":"https://github.com/hellofromtonya/my-personal-website","last_synced_at":"2026-04-09T09:37:12.235Z","repository":{"id":98370117,"uuid":"101508044","full_name":"hellofromtonya/my-personal-website","owner":"hellofromtonya","description":"My Personal Website - Static Pages.","archived":false,"fork":false,"pushed_at":"2017-08-27T20:32:09.000Z","size":10797,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-03T06:37:57.920Z","etag":null,"topics":["flexbox","javascript","jquery","php","sass"],"latest_commit_sha":null,"homepage":"https://hellofromtonya.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hellofromtonya.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"support/helpers.php","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-26T19:22:06.000Z","updated_at":"2019-07-26T16:09:32.000Z","dependencies_parsed_at":"2023-05-07T12:47:03.109Z","dependency_job_id":null,"html_url":"https://github.com/hellofromtonya/my-personal-website","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"724aa3d83ce29bb53239ef11260e3b08e4894aa3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellofromtonya%2Fmy-personal-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellofromtonya%2Fmy-personal-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellofromtonya%2Fmy-personal-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hellofromtonya%2Fmy-personal-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hellofromtonya","download_url":"https://codeload.github.com/hellofromtonya/my-personal-website/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246100486,"owners_count":20723469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flexbox","javascript","jquery","php","sass"],"created_at":"2024-10-02T10:52:48.106Z","updated_at":"2025-12-30T23:20:14.860Z","avatar_url":"https://github.com/hellofromtonya.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# My Personal Website\n\nThis repository is for my [personal website](https://hellofromtonya.com).  \n\nThe web pages are static. Why?  Why not a full CMS? The reason is the intent.  The content rarely changes.  Given that static pages run faster, there's no need for a database or a CMS like WordPress.  \n\nBUT my [Hello World blog](https://hellofromtonya.com/blog/) is a WordPress website.  You can check the [custom Genesis-powered child theme here](https://github.com/hellofromtonya/Hello-Minimal).\n\n## Features:\n\nWell, let's see....It uses:\n\n1. Flexbox to achieve the checkered boxes\n2. Sass - of course, I'd use Sass as it's a more efficient approach to styling.\n3. [Animate.css](https://daneden.github.io/animate.css/)\n4. jQuery\n\nI'm also using [Bourbon](http://bourbon.io/) and [Neat](http://neat.bourbon.io/), though I'm slowly removing these 3rd party libraries and opting for native CSS.\n\nMy favorite task runner is gulp.  I'm using [UpGulp](https://github.com/KnowTheCode/UpGulp), which is included in this repository.\n\n## Design Elements\n\nI get a lot of questions about the design elements.  \n\nFirst off, this website is my playground.  I like taking a different approach and stretching my _design abilities_.  BTW, I am not a designer.  Rather, I'm an engineer.  So it's a struggle to push my design creativity.\n\nBut let me talk about some of the design elements to guide you.\n\n### Checkered Grids and Boxes\n\nYou may notice that there are different types of grid patterns.  I like creating a checker-box design, probably from years of playing chess and checkers.  My mind just goes to the checkered box look.\n\nThere are 4 different types of design patterns, each of which has a CodePen for you to fork and play with:\n\n- Checkered Flexbox 2-Column - see on [CodePen](https://codepen.io/hellofromtonya/pen/EveoXE)\n- Reversed Checkered Flexbox 2-Column - see on [CodePen](https://codepen.io/hellofromtonya/pen/QMVaQG)\n- Half-Background Checked Flexbox List - see on [CodePen](https://codepen.io/hellofromtonya/pen/WEgdKo)\n- Reversed Half-Background Checked Flexbox - see on [CodePen](https://codepen.io/hellofromtonya/pen/rzZpqd)\n\nThe Sass module for all of these grid patterns is found in [`assets/sass/modules/grids`](https://github.com/hellofromtonya/hellofromtonya/tree/master/assets/sass/modules/grids).\n\n### Section Title\n\nI had some fun with the section titles.  Did you notice? For each section of the page, I added:\n\n- A light background text and then right aligned it.\n- Keyword in the bottom left sidebar (fixed and rotated 90 deg).  This keyword changes as you scroll down the page.\n\nAs you scroll down the page (on a tablet or larger), notice that the bottom left sidebar keyword changes.  See it?  Oh come on, you have to check it out.  Let's go to the [home page](https://hellofromtonya.com/).  As you scroll down the page, notice that the \"hello\" changes to \"me\" and then \"we\" and then \"faq\".\n\nThe _changing_ of the keywords is handled by jQuery.  It checks to see if a new section is now visible on the screen.  If yes, then it grabs the data attribute `message` and inserts it into the DOM.  Check out the [`assets/js/jquery.page-background-text.js`](https://github.com/hellofromtonya/hellofromtonya/blob/master/assets/js/jquery.page-background-text.js) script for more details.\n\n![Dynamic Text Demo](/_wiki/DynamicText.gif?raw=true)\n\nYou can fork and play with the [CodePen](https://codepen.io/hellofromtonya/pen/YxOeEq) to adapt it to your needs.\n\n## Contributions\n\nWell gang this is my own project.  But I do welcome your feedback, bug reports, and pull requests are welcome.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellofromtonya%2Fmy-personal-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhellofromtonya%2Fmy-personal-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhellofromtonya%2Fmy-personal-website/lists"}