DEV Community

Cover image for Show me your personal website/portfolio
TheOnlyBeardedBeast
TheOnlyBeardedBeast

Posted on

Show me your personal website/portfolio

So, show me your website/portfolio and tell me what technologies do you use and why?

Here is mine https://thedev.sk

It uses Preact and Typescript, Bundled by Parcel, everything is prerendered and hosted on http://now.sh

FYI: the image for the site background is a render of a 3D model made in ZBrush.

I know the whole thing is a bit overblown, it would take less time to build the whole thing from scratch without preact, ts..., just good old html/css/vanilla js, but I wanted to try Preact and Parcel, and I saw an opportunity to use them in this side project.

It's your turn, show me what you got!

Discussion (273)

Collapse
andrewbaisden profile image
Andrew Baisden

Here's mine andrewbaisden.com/ the backend is in Node and the frontend is in Next.js. Deployed to Netlify.

Andrew Baisden Portfolio

Collapse
wolfhoundjesse profile image
Jesse M. Holmes

Can you make one for me? Not a site, but you know, just make me look as cool as you? 😎

Collapse
perpetual_education profile image
perpetual . education

Like a super hero, right!?! : )

Thread Thread
andrewbaisden profile image
Andrew Baisden

I just follow Saitama’s Workout.

Every single day!!!

100 Push Ups, 100 Sit Ups, 100 Squats, and 10KM Running.

😎

Thread Thread
perpetual_education profile image
perpetual . education

OK! We'll start with $saitamaWorkout / 5 and go from there!

Collapse
andrewbaisden profile image
Andrew Baisden

It’s just good lighting 😅

Thread Thread
judionit profile image
Judicaël Andriamahandry

Too powerful, one punch and got a job

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author • Edited on

Really nice, I noticed that you have horizontal scrollbars on your page caused by the 100vw which is used on the div right inside the header element, give the header 100% width and replace the 100vw with 100% too, it will make the issue gone. But other than that it is really nice, nice power level ;)

Collapse
andrewbaisden profile image
Andrew Baisden

Thanks for the feedback I will look into it. I don't see those scrollbars though what OS and browser did you see it in?

Thread Thread
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

13 inch MacBook pro, with the native mac os, latest chrome browser, I have an always visible scrollbar, and the 100vw never counts with the width of the scrollbar. I hope this information will help you to debug ;)

Collapse
mazentouati profile image
Mazen Touati

Here's mine sunchayn.github.io/old. Now, it's on hold as I'm planning to make a new one.

The technology stack I've used was vanilla JS (ES6) and SASS3 alongside Gulp as a build tool.

Collapse
maty13flaco profile image
kaponii

Look great, congrats 👏👏👏

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

nice, you nailed the terminal look 👏

Collapse
waylonwalker profile image
Waylon Walker

Love the blue screen at the end of the page!!

Collapse
merri profile image
Vesa Piittinen

A few months ago I went back to the future.

My ultimate technology stack is...

  • HTML
  • CSS
  • Server Side Includes
  • JavaScript tiny enough to embed all of it to every HTML page

It is all vanilla. No frameworks, no build systems, no libraries, no tooling. Later on I might consider porting it all over to Deno just for the fun of it. But more important would be to improve the content and design :)

MerriNet
merri.net

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Feels like an old game interface, interesting 👏 great job!

Collapse
merri profile image
Vesa Piittinen

Thanks! It is a mixture of Final Fantasy IX and Heroes of Might and Magic III with some custom HD-resolutioning on the repeating textures :)

Thread Thread
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Thanks for the insight 🙏

Collapse
kant312 profile image
Quentin Delcourt

Loving the Amiga vibes here!

Collapse
merri profile image
Vesa Piittinen

And I've never even used an Amiga! :)

Thread Thread
kant312 profile image
Quentin Delcourt

Well it's never too late 😄 although it might be a bit difficult to find one nowadays 😁

Collapse
connollyglen93 profile image
Glen Connolly

That time to first paint 🤩 so clean and fast! Very nice

Collapse
mdor profile image
Marco Antonio Dominguez

This is mine mdor.dev/

I want to start adding more features, but I tried to keep it simple.

I kept the stack to the minimum.

For the site:

  • ES6
  • CSS 3
  • normalize
  • typed js.

For the build process:

  • Babel
  • autoprefixer
  • webpack
  • cssnano
  • postcss
  • imagemin
  • node.

For the code quality:

  • eslint
  • husky
  • lint-staged

So far, it has:
Performance: 97
Accessibility: 100
Best Practices: 100
SEO: 100

And the load time is very decent, coming from the network tab:
361 kB resources
Finish: 487 ms
DOMContentLoaded: 306 ms
Load: 451

This is the repo github.com/MDOR/mdor

TODO:

  • update the deploy process
  • include a section to keep my tooling bookmarks
Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Hi really nice page, I see you even customized the scrollbar, but I found a really annoying bug, after I used the navigations buttons the site does not allows me to scroll, it is stuck on one place, no mousewheel, no touchpad, I cant even move the scrollbar with the mouse, navigation through the menu works. The scrollbar works when you load the page at the firs time, but it stops working after you use a navigation button. Please check it out. Tested on chrome/edge chormium, both latest on windows 10, 15.6 inch screen Full HD, 125% scaling in windows display settings.

Collapse
mdor profile image
Marco Antonio Dominguez

Nice! Thank you for report that., I'll take a look.

Collapse
carlevans profile image
Carl Evans • Edited on

Mine is carlevans.dev I use Craft as my CMS and use Eleventy to build a static site which is hosted for free thanks to Netlify / AWS. I use Nunjucks as a template engine. It doesn’t use a front end framework but it does use Barba.js for page transitions 😊

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

You got me with that one, nice, simple minimalistic, nice colors 👏

Collapse
naveenda profile image
Naveen

Nice colour section carl

Collapse
ishandeveloper profile image
Ishan Sharma

I was actually working on my portfolio website around 3 months ago. Designed this all by myself from scratch. Since then, I've learnt react, gatsby and next.js and right now I'm in the phase of migrating this design to react based stack, for improved performance. Still most of the design will remain the same. You can have a look here : ishandeveloper.com

ishandeveloper

Moreover, I have also created a personal blog of my own using Gatsby. I'd love for you to have a look at it here : blog.ishandeveloper.com
ishandeveloper Blog

Collapse
hemant profile image
Hemant Joshi 😼 • Edited on

Loved, the blog page...

Can I get the source code for the blog site?

I am currently working on a Dev.to plugin that can display your all blogs on the external page and would appreciate getting the source code the project.

Here is the link.
hemant-blog.netlify.app/

Sorry this has a dirty CSS, cause I have been busy on other project and don't want to design it now.

Thank you;

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Thats really nice, it is clean, nice usage of empty spaces and great color choices in the blog for post background. 👏

Collapse
ishandeveloper profile image
Ishan Sharma

Thank you @theonlybeardedbeast !

Collapse
jeffjadulco profile image
Jeff Jadulco

Sharing mine: jeffjadulco.com
Things I used:

  • Reactjs
  • Gatsby and its plugins (it made my life so much easier)
  • GrahpQL (it was overwhelming at first but thanks to their docs)
  • tailwindcss (it accelerated my understanding of css concepts)
  • MDX (I love markdown but I love MDX even more)
Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Nice, both versions (light and dark) simple and clear 👏 In what language powers you graphql backend? I mostly choose hot-chocolate or graphql.net for .net or typegraphql for node, because I love the code-first approach.

Collapse
jeffjadulco profile image
Jeff Jadulco

Oh that was Gatsby's GraphQL for generating pages at build time (node). No back-end. Sorry for the confusion!

Thread Thread
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

no problem, I have never worked with gatsby, so I just forgot that graphql is part of it :) thanks for the clarification.

Collapse
bobbyiliev profile image
Bobby Iliev • Edited on

My personal website is: Bobby Iliev
And here is a website that I've been helping with recently: DevDojo you should check it out!

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Nice portfolio 👏 devdojo looks nice, I will save it to my bookmarks.

Collapse
bobbyiliev profile image
Bobby Iliev

Thanks for the nice feedback! 🙌

Collapse
md_rathik profile image
Md Rathik • Edited on

Here you go rathik.net/ , Built in VuePress and backend for markup post and page , I connected to forestry as my simple backend
Inline-style:
alt text

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

nice and cool, wishing the best 👏

Collapse
md_rathik profile image
Md Rathik

thank you

Collapse
amir profile image
Amir Meimari • Edited on

I've decided to take a different route and make my portfolio an old newspaper 😊😅

amirmeimari.ir/

screenshot

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Looks amazing, great job, you are unique in the comment section. The design you linked on dribble doesn't work for me, I have got a 404, but the miniature looked really cool, let me know if you fixed the dribble link, or just write the link into the comment if you have it. 👏

Collapse
amir profile image
Amir Meimari

Thanks for the feedback! Yeah, I've done some design in the past but decided to just focus on the development and deleted my dribble account. but here is a picture of that design if you are interested...

tehran travel concept

Thread Thread
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

That looks really great! Excellent work!

Collapse
kosich profile image
Kostia Palchyk

Thats a great idea, Amir!

Collapse
amir profile image
Amir Meimari

Thanks Kostia!

Collapse
chadalen profile image
Chad Alen • Edited on

I tried to keep the design simple and minimal.

chadalen.com

Collapse
perpetual_education profile image
perpetual . education

That's a lot of tech for 'simple' ! Photo feels very nice and human.

Collapse
chadalen profile image
Chad Alen

I mean the UI/Design not the tech stack haha

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Good work clear and informative, nice projects you have there 👏

Collapse
chadalen profile image
Chad Alen

Thanks :)

Collapse
igoradamenko profile image
Igor Adamenko

igoradamenko.com

Just plain HTML and a bit of inlined CSS. Because “neat & fast” is the best choice to me.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

I think both of you made a great job, this plain style can be really nice, the default html styling in the browser is garbage, and you tweeked that css enough to make it all look good! Great job 👏

Collapse
mnlwldr profile image
manuel

wildauer.io/

I feel with you! :)

Collapse
miketalbot profile image
Michael John Talbot • Edited on

I made the js-coroutines site recently - to show off a library I made. It's React/JS not pre-rendered, but I should probably get around to fixing that! I use Material UI for styling and componentry.

I notice that it is way less fancy than many, I guess I was going for informative and single page for the primary content.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Still a nice one, rather an informative page than a fancy one without no information at all, but I think you found a sweet spot in between 👏

Collapse
miketalbot profile image
Michael John Talbot

Thanks :)

Collapse
kosich profile image
Kostia Palchyk

Hey, Mike!
Have you considered using documentation platform, like gitbook or docusaurus?
I've seen some good examples: router5.js.org/ or babeljs.io/docs/en/

Collapse
ricardoboss profile image
Ricardo Boss

I actually reworked my website a few days ago. It can be found at ricardoboss.de and I use NuxtJS and SASS (with Bootstrap v5 Alpha). It is deployed as my GitHub.io page automatically every time I push some commits. The first article I wrote documents this in more detail.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Hi a nice site you have there 👏 Nice setup. One thing caught my eye, you have "résumé" directly in the url, I dont think thats safe for the url, the site works just check it out, a slugify generator would generate it like "resume".

Collapse
ricardoboss profile image
Ricardo Boss

Hi there! Thanks for the feedback! I hesitated to put non-ascii characters in the url but I decided to do it, because I thought modern browsers can handle those. I could add an alias, though. Anyway, nice catch!

Collapse
thomasbnt profile image
Thomas Bnt • Edited on

This is a website for one of my project on GitHub.

Used :

  • Bootstrap v5 bêta
  • Fork Awesome
  • Web Monetization

Preview Awesome WM

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

nice 👏

Collapse
thomasbnt profile image
Thomas Bnt

Thanks!

Collapse
kosich profile image
Kostia Palchyk

Great design, Mark! I especially liked project/article badges style!

I've recently developed framd.cc:

It uses NextJS for both FE and BE (therefore it's a bit slow: need to split out the DB api. An advice is welcome!) + RxJS for animations/resource management. I've described the idea and dev process here:

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author • Edited on

Thank you. Really nice, so you have built a programming language for generating gifs, that's nice, maybe you cold extend it to create meme-s. I see you are using a CSS grid, on smaller screen there is a horizontal scrollbar, because of the width of the images, the grid gains larger width than the screen, and a margin around the grid would help for the readability. A really nice project, a nice article, I wish the best, keep it up. 👏 your project reminds me this one sonic-pi.net/ it allows you to program your music

Collapse
kosich profile image
Kostia Palchyk • Edited on

Woah, the project you linked, sonic-pi.net/, — this is super awesome!
Will look deeper into it!

Yep, mine is buggy here and there :) Will check the smaller screens and readability issues, thx!
The language is quite simple now, but I thought to extend it so users can interact with the scene/Emoji. To gamify it, you know.

Anyhow, thank you for the feedback, Mark!

Thread Thread
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

No porblem, anytime!

Collapse
turnerj profile image
James Turner

Here is mine: turnerj.com

It is an ASP.NET Core website using Razor Pages. For CSS, I am using Tachyons. The site is deployed to Azure, with build/deployment through Azure DevOps.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

I like it, .net core is deeply in my heart, nice hover on the cards! How do you like the razor pages, I tried them once for a small project, currently I am trying blazor.

Collapse
turnerj profile image
James Turner

I think Razor Pages are an improvement to the general MVC architecture - it allows for a better separation without feeling like I have dozens of files representing a basic action. Currently use it across 3 sites of mine and a web application I am developing - so far so good!

What's your thoughts on Blazor like so far?

Thread Thread
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

I really like it, currently I am working on my million dollar idea :D feels solid, but the tooling feels a bit slowly developed, vs code for some reason doesn't like blazor files, and linting is not that good, visual studio handles it better. I use a library called blazor styled which helps a lot, but no style highlighting inside. And the rebuild takes too much time, if I compare it to a React app development, but I like c# I like how you write components, renderfragments cascadingvalues to share a context of a parental component to its descendants.

Collapse
corentinbettiol profile image
Corentin Bettiol

And here's mine : l3m.in

screenshot of l3m.in

I recently added cover for articles & projects, and the reading time.

Pure vanilla php (poo mvc)/html5/css3, with a scoop of javascript :)

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Nice! Pure vanilla php, man you have my respect 👏 I like your domain name.

Collapse
frans profile image
Frans Allen

Are you kidding? Mine is thedev.id :D it's not the personal website though.

If you asking one, the real is upset.dev, a really simple landing page built with bare HTML and inlined CSS. No frameworks allowed.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Aw man, that's nice :D you know the "thedev" domain is really nice for emails too, "mark@thedev.sk" not yet ready :D But I like the idea with the subdomains :D Nice clean personal website, great projects, I understand the no framework policy 👏

Collapse
frans profile image
Frans Allen

Thanks, yours too!

I like the idea for emails, maybe I can set up one for frans@thedev.id and there is a possibility I can provide this for public needs as well (name@thedev.id), but still cannot solve the privacy and reliability issues.

Collapse
merichard123 profile image
Richard • Edited on

Here is mine: richardcoric.netlify.app/

I used React JS because im currently learning react, and it was a fun way to practice.

I also used a combination of SCSS and styled components because I'm really enjoying CSS-in-JS at the moment; and I like the fact that I can use partials with SCSS.

I would like to add a way to translate the site on the click of a button but I need to figure out how to do that.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Thats a nice site you have built! 👏 I really like the intro screen graphics, congrats! Try i18n-react for translations ;)

Collapse
merichard123 profile image
Richard

Thankyou I'll look into that, should be easier than rewriting the entire site in my native language. 😁

Collapse
pradeepcep profile image
Pradeep CE

Looks great! Here's mine: Pradeep CE.

This is brand new because I just picked up React/Gatsby (tutorials on those soon!). If About Me | Pradeep CE sounds like something you can identify with, tweet at me: let's talk / build something together! 🙂

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author • Edited on

Nice page/blog you have there, at this time I am experimenting with something, but maybe later this year I can find spare time to build something! Thanks.

Collapse
urielbitton profile image
Uriel Bitton • Edited on

Here's mine: flexrweb.com/showcaser

Technologies used:

  • Html & css
  • javascript/jquery
  • reactorjs (a JS framework i designed)
  • angular js
  • infinityUI (a CSS framework library i also built)
Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

Great work, nice colors 👍 I think you exactly know what you are doing 👏

Collapse
urielbitton profile image
Uriel Bitton

Thanks man!

Collapse
iamnelsonmartins profile image
Nelson Martins • Edited on

Hi all. Great portfolios I see in here. I'm new to the frontend world. I'm not currently currently working as a frontend developer but trying to.

Here is my portfolio

iamnelsonmartins.com

There is still a few sharp corners to fix like the about page. Maybe add a little bit more about me.

Fill free to shoot some advices or criticism regarding it

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author • Edited on

Hi Nelson, Thats really great work, I like it 👏 one thing which is hard for my eye is the hover efect on card, when you have dark mode, and you hover over the card it changes to white, add a transitition to make it more pleasant for the eyes.

Collapse
iamnelsonmartins profile image
Nelson Martins

Thank you for your feedback. I've updated meanwhile

Collapse
martinbelev profile image
Martin Belev

Mine is belev.dev

Tech used: Gatsby, Netlify, Netlify DNS. I wanted to play around with Gatsby and this is why I choose it. Good performance, SEO, customizable and React based. For deployment I wanted something with which I can start really quickly and Netlify was perfect for that. Doing almost nothing get’s you up to a point with deployed site, deployment on push to master, preview for PR, SSL from Netlify DNS. I am pretty happy with the setup and the time it takes to go live.

Collapse
theonlybeardedbeast profile image
TheOnlyBeardedBeast Author

I believe that, I have that now.sh setup, which works similarly like netlify, just a command and my site was up and running, Great choices nice and simple site, nice job 👏

Collapse
martinbelev profile image
Martin Belev

Thank you 🙌

Collapse
rahuldkjain profile image
Rahul Jain • Edited on

This is my portfolio and here is the blog.

If you liked it then, checkout the portfolio code here

GitHub logo rahuldkjain / minimal-portfolio

💪 A clean, minimal, responsive, and customizable portfolio template to showcase skills, experience, achievements, and favorites (movies & TVs).

Personal Porfolio for developers

💪 Awesome Personal Portfolio

The minimal, responsive and easily customisable portfolio for developers.

portfolio for software developer portfolio for software developer portfolio for software developer portfolio for software developer

portfolio for developers

Pages

🎯 Home (Introduction, Skills, Contact me)

🎯 Work (Internships, Projects, Miscellaneous Projects)

🎯 Achievements And Certifications

🎯 Favourites (Movies, TV/ Web Shows)

🚀 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

You'll need Git and Node.js (which comes with npm) installed on your computer.

node@v10.16.0 or higher
npm@6.9.0 or higher
git@2.17.1 or higher

🔧 How To Use

From your command line, clone and run minimal-portfolio:

# Clone this repository
$ git clone https://github.com/rahuldkjain/minimal-portfolio.git
# Go into the repository
$ cd minimal-portfolio
# Install dependencies
$ npm install
# Run 
$ npm run dev

🛠️ Customize

If you like the portfolio and want to use it to create your own, please refer customization manual.

🧑‍💻 Technologies used

Collapse